H5

H5的常用標籤及屬性：

新增和廢棄

新增的結構（佈局） 標籤：section、artcle、nav、footer、header、hgroup、Aside、figure

新增的其他標籤：

Video、audio、mark、time、menu、canvas、svg、details、datalist、progress、output、source。。。。。。。

Input  type 的新增：email、url、number、date、pickers、range

廢棄的標籤 ：font、center、s、tt、u、big、basefont

      全域性屬性

在H5中，定義了少量對所有元素都有效的屬性。

<p contenteditable="true">我是一個段落，但我可以編輯</p>//可以被編輯
<p contenteditable="false">我是一個段落，但我不能編輯</p>//不能被編輯
<p contenteditable>我是一個沒有設定contenteditable的段落，</p>//可以被編輯

Contenteditable=true：標籤設定了此屬性之後可以在頁面上直接進行編輯。編輯之後元素的寬高自動適應。

注意：如果不設定contenteditable，其預設的值時true

    Contenteditable：屬性是可以被繼承的，需要考慮就近原則

可以加到body裡，使全域性都可以被編輯。

注意事項：1如果同時設定了designMode和Contenteditable屬性，最終是否可以編輯使用就看就近原則了。

Hidden屬性可以實現對元素的隱藏，隱藏的元素不會被顯示，同時不會佔原有的位置。類似於display：none；

Hidden：看不見不佔位置

"visibility: hidden"：看不見，佔位置

display: none：看不見，不佔位置

spellchck

 Spellchck屬性是H5專門為input和textarea標籤提供新屬性，它的功能是對使用者輸入的內容進行拼寫和語法檢查，如果拼寫錯了，文字下面有一個波浪線。

<inputtype="text" spellcheck="true">

spellcheck="false"：取消語法和和拼寫檢查

spellcheck="true"：開啟語法和拼寫檢查

tabindex:

<label>姓名</label><input type="text" tabindex ="2"><br>
<label>性別</label><input type="text"tabindex="4"><br>
<label>年齡</label><input type="text"tabindex="3"><br>
<label>身份證號</label><input type="text"><br>

Tabindex=”正整數”：按鍵tab鍵可以選中（獲取焦點），，這裡選擇的標籤可以是input輸入框、input按鈕、a標籤等。同時按下tab鍵選擇的順序和設定的tabindex屬性一致，Tabindex值越大，越在後面選中。建議不使用Tabindex=0；

Tabindex=-1，按tab不選中。

（1）    nav（導航）--使用頻率高

：navigation的縮寫。通常用在：導航條、頁面導航、翻頁操作。

<header>
    <div class="=logo">
        <nav>
            <ul>
                <li>H5發展史</li>
                <li>CSS3發展史</li>
                <li>EMScript發展史</li>
            </ul>
        </nav>
    </div>
</header>

非主體結構

（1）  header（頁首）標籤

一般來防治整個頁面的標題。比如說一個新聞頁面，header一般放新聞的標題。如果是一個官網地址，一般header用來放logo和網站導航。

（2）  footer（頁尾） 標籤

一般用來放置腳註，主要包含：作者資訊、copyright。

（3）  address（地址）標籤

一般用來呈現聯絡資訊主要包括：網站的聯絡方式、電子郵箱、聯絡地址、電話號碼等等。

例文：

<header>
    <div class="logo">這是放logo的區域</div>
    <nav>
        <ul>
            <li><a>首頁</a></li>
            <li><a>教程</a></li>
        </ul>
    </nav>
</header>
<article>
    <h2>html5的教程</h2>
    <p>詳細教程，請訪問華點網站 <a href="http://www.huadianedu.com">點選跳轉</a></p>
</article>
<footer>
    <p>copyright  2017  華電軟體學院</p>
    <address>
        <p>啦啦啦德瑪西亞！</p>
        <p>啦啦啦德瑪西亞！</p>
        <p>啦啦啦德瑪西亞！</p>
    </address>
</footer>

表單新增：

  提交類：提交給伺服器設定的屬性，formtion、formmethod、formtype

控制類：required、autoofocus、labels。

form屬性

           在H5之前，表單內所有的從屬標籤（下級標籤），必須書寫在form標籤內部。

           H5：允許標籤寫在任何地方需要做兩部操作：1、給form設定一個id；給元素設定form屬性，form屬性的值就是form Id屬性的值

<form action="XXX.api" id="testForm">
    請輸入賬號：<input type="text" name="date"><br>
    <input type="submit" value="提交">
</form>
請輸入密碼：<input form="testForm" type="password" name="psd"><br>

formaction

在H5之前，表單內所有的submit,只能提交到一個統一的地址，也就是指定的Action。

H5：可以為每個submit指定一個action，是通過formaction屬性來實現的

<form id="testForm">
    請輸入賬號：<input type="text" name="date"><br>
    請輸入密碼：<input form="testForm" name="psd" type="password"><br>
    <input type="submit" value="提交0"formaction="XX0.api">
    <input type="submit" value="提交1"formaction="XX0.api">
</form>

formmethod

<form id="testForm" method="post">
    請輸入賬號：<input type="text" name="date"><br>
    請輸入密碼：<input form="testForm" name="psd" type="password"><br>
    <input type="submit" value="提交0"formmethod="post" >
    <input type="submit" value="提交1"formmethod="get">
</form>

在H5之前只能寫在form裡，現在可以寫在按表單裡（在此我兩種都寫了）

隱藏顯示提交的資料

formenctype：編碼方式

<form id="testForm" enctype="text/plain">
    請輸入賬號：<input type="text" name="date"><br>
    請輸入密碼：<input form="testForm" name="psd" type="password"><br>
    <input type="submit" value="提交0"formenctype="text/plain">
    <input type="submit" value="提交1"formenctype="text/plain">
</form>

在H5之前只能寫在form裡，現在可以寫在按表單裡（在此我兩種都寫了）

隱藏顯示提交的資料

formtarget

<form id="testForm" target="">
    請輸入賬號：<input type="text" name="date"><br>
    請輸入密碼：<input form="testForm" name="psd" type="password"><br>
    <input type="submit" value="提交0"formtarget="_self">
    <input type="submit" value="提交1"formtarget="_blank" >
</form>

在H5之前只能寫在form裡，現在可以寫在按表單裡（在此我兩種都寫了）

隱藏顯示提交的資料

Autofocus：為輸入框，按鈕什麼的，新增autofocus屬性，當頁面開啟時，該元素將自動獲取焦點。

required

<formid="testForm">
    請輸入賬號：<inputtype="text"name="date"required><br>
    請輸入密碼：<inputform="testForm"name="psd" type="password"><br>
    <input type="submit" value="提交0"formtarget="_self">
    <input type="submit" value="提交1"formtarget="_blank" >
</form>

如果輸入框輸入了該屬性，提交時，該框若為空，則彈出提示框

增強的頁面元素

details元素和sumry元素

mark元素：作用是為了突出顯示頁面的某一塊內容放到mark元素內部的內容將高亮些（也就是給加個黃色的背景色）

Small語言：小的，不起眼的

Ol列表添加了start和reversed屬性。

Start：定義了開始計數的係數。

Reversed：技術的順序，預設的是從小到大，加上該屬性之後從小到大。

Progress：是行內標籤。有兩個常用屬性

Max：進度的最大值

Value：當前值

Meter：度量衡，注意：一般情況，需要已知最大值和最小值（不重要）

音訊視訊屬性處理：

audio

<audio src="files/雙笙%20-%20九九八十一.mp3" preload="none" controls="controls"></audio>

（1）  src（）：本地儲存的音訊檔案的地址

（2）  controls：由於瀏覽器提供的音訊控制元件

（3）  preload：預載入，讓檔案先進性緩衝，優化播放速度。

三個可選值：auto對整個音訊檔案進行載入，預設值

            Metadata：只加載檔案的元資料（第一幀，播放總時間，播放列表）

（4）Autoplay：自動播放，布林型別，在標籤內使用時預設為true

（5） Loop：迴圈播放，布林型別，在標籤內使用時預設true

可指令碼控制的屬性值
（1）muted，布林型別，當他的值為true是開啟靜音，值為false時關閉靜音

function muted(obj){
    if(audio.muted){
        audio.muted = false;
        obj.innerHTML = "開啟靜音"
    }else{
        audio.muted = true
        obj.innerHTML = "關閉靜音"
    }
}

（2）currentTime,獲取已播放的時間

//獲取已播放音訊的總時長

function getCurrentTime(){

   alert(audio.currentTime);

}

（3）duration，獲取總時長

//獲取音訊總時TotalTime(){

function getTotalTime(){

   alert(audio.duration+"秒");

}

（4）隱藏或者顯示

//隱藏或者顯示

function hideOrShow(obj){

   if(audio.controls){

       audio.removeAttribute("controls");

       obj.innerHTML = "顯示"

       return

    }

   audio.controls = "controls";

   obj.innerHTML = "隱藏";

}

可指令碼控制的屬性值

（1）muted，布林型別，當他的值為true是開啟靜音，值為false時關閉靜音

function muted(obj){

   if(audio.muted){

       audio.muted = false;

       obj.innerHTML = "開啟靜音"

    }else{

       audio.muted = true

       obj.innerHTML = "關閉靜音"

    }

}

（2）vol：通過改變函式中定義的volume的值來控制音量的大小

Vo Lome範圍：0.0~~1.0   超出範圍會報錯

video

標籤屬性：

1、 Poster（）：給視訊設定第一幀（封面）。

2、 A

常用方法：

1、 playBySeconds（）：通過currentTIme的值設定視訊開始播放的位置（播放點）

function playBySeconds(){
    video.currentTime=5;
}

2、 etPlaySpeed()：通過改變playbackRate的值來改變播放速度。

function setPlaySpeed(){
     video.playbackRate=3;

}

3、 duration（）：返回視訊總時間長

function duration(){
    alert(video.duration)
}

4、 onended：當視訊播放完成後自動觸發的事件

video.onended=function(){
    alert("視訊播放完成")
}

畫布：

Canvas:定義畫布的大小是style的屬性，而定義畫布的畫素是Canvas的屬性

4.1、getContext（）：獲取渲染的上下文，說白了就是獲取畫筆。後面傳遞引數，固定寫“2d”

4.2、moveTo（x，y）：移動畫筆位置，後面帶兩個引數。

4.3、lineTo（x，y）畫一條直線，引數是線的終點位置。

4.4、stroke()繪製線條

4.5、closepath():關閉路徑，回到起始點

4.6、ctx.fill（）完成填充操作

4.7、fillStyle：這是屬性，設定填充的樣式，一般填充顏色就行

4.8、beginPath（）:方法開始一條路徑或者重置當前路徑。

4.9context.arc(x,y,r,start,end,direction)繪製一個弧。前面兩個引數組成圓心的座標，第三個引數r半徑。第四個引數：start其實的弧度，第五個引數end，結束的弧度，最後一個引數direction，繪製方向，true：逆時針方向，false：順時針方向，預設值是false。

4.10context。rect（x,y,w,h）繪製矩形，（x，y）是矩形的座標，w：是寬，h高

1、             window.onload = function () {
    var canvas = document.getElementById("canvas");
    canvas.width=500;//畫布的寬canvas.height=500;//畫布的高var context=canvas.getContext("2d");
    context.moveTo(100,200);//移動圓點context.lineTo(100,400);//目標位置context.lineWidth=10;//目標粗細context.strokeStyle="red";//畫筆的樣式context.stroke();//開始畫};

2、     

3、        context.closePath();            ///回到原點，解決封口問題

4、         

5、    圓形：

6、             context.arc(250,250,200,0,2*Math.PI,false);
        //左邊距，上邊距，半徑，起始角度，目標角度，時針（true）context.lineWidth=10;//目標粗細context.strokeStyle="red";//畫筆的樣式
/*       context.fillStyle="red";
        context.fill();*/
        context.stroke();//開始畫

input在H5中的新增功能

1.   color：當輸入框中的屬性設定為color的時候，可以直接呼叫系統的調色盤，進行填充，缺點：沒有透明度。

2.   Url：當輸入框中的屬性設定為url時，只接受地址或域輸入，輸入有誤時，系統不允許提交，具有自我檢測功能。如果是移動端，虛擬鍵盤會自動切換到輸入網址的鍵盤（.com、/、www）

3.   3.email：的那個輸入框中的屬性設定為email時，只接受郵箱輸入郵箱，當輸入的不為郵箱或者格式錯誤，則系統不允許提交，具有自我檢測功能。如果是移動端，虛擬鍵盤會自動切換到輸入郵箱鍵盤（@）

4.   Tel當輸入的屬性設定為tel時，此框就是專門為電話號碼專門設定的。他並沒有特殊的校驗規則，可以通過設定帕特term屬性來手動完成。如果是移動端，虛擬鍵盤會自動切換到輸入電話的鍵盤（數字、+）

5.   search：當輸入的屬性設定為search,只能輸入數字

6.   Number：當為number時，輸入框只接收數字，可以用max，min去實現控制域。

7.   Date：當為date時，可以以日曆的形式顯示出來，可獲取當前日曆年月日。缺點：就是隻有在谷歌瀏覽器上顯示出來日曆的形式，其他瀏覽器不相容，就比如IE瀏覽器。

8.   Time：時間，input元素中專門輸入時間的文字框屬性。他會接受使用者輸入的時間自我檢測修改。

10. Datetime-local：此屬性綜合了上面幾個屬性的特性，年月日和時間，點選可以出來日曆供使用者選擇，同時提交時可以自己判斷是否正確。

11. Week：這個屬性只會顯示年和周的屬性，點選可以出來日曆供使用者選擇，同時提交時可以自己判斷是否正確。

12. Month：這個屬性只會顯示年和月份，點選可以出來日曆供使用者選擇，同時提交時可以自己判斷是否正確。

13. Range ：當輸入的是該屬性時，可以設定一段範圍內數值的文字框，它的型別是一個滑塊，可設定大小限制，當設定了step屬性的時候，可以指定每次拖動的幅度。

資料的村春與刪除

刪除資料：

刪除key中的資料

/*具體刪除某個數值*/
/*localStorage.removeItem("name");*/
/*刪除所有的值*/
localStorage.clear();

獲取資料：

獲取key中的資料

var a=localStorage.getItem("age");
alert(a);

getitem（k）,只有一個引數，該引數是獲取資料的鍵名。

注意：寫key中必須要加“”，localStorage儲存的資料沒有時間限制。

      用法和localStorage一樣，不同的是：sessionStorage的有效期僅對於當前開啟的瀏覽器頁面有效，一旦關閉，之前儲存的內容就沒了。

儲存物件：

無論是localStorage還是sessionStorage，都只能等儲存字串，所以儲存物件或者陣列時都要進行將其拆分為字串（即通過JSON物件中的stringfy（）將物件轉化為字串才能儲存，也可以通過JSON物件中的parse（）將物件進行解析），然後才能放進去。如下案例：

JSON.Parse（）；將字元轉化為物件

JSON.Stringify（）；將物件轉化為字串。

解決問題：

1.  localstorage、sessionStorage存資料

需要儲存的物件—》字串  JSON。Stringify（）；

儲存才字串

2．localStorage/sessionStonrage

  讀取該字串—》物件JSON.stringify（）；

/*儲存物件資料*/
$("#saveBtn").click(function () {
    var userName = $("#username").val();
    var age = $("#age").val();
    var information=new Object();
    information.user=userName;
    information.age=age;
    var str=JSON.stringify(information);
    localStorage.setItem("message",str);
    alert(str);
});

區別：

特性	Cookie	Localstorage	SessionStorage
生命週期	根據設定的時間	只要不刪除，永遠存在	瀏覽器關閉，自動刪除，結束。
儲存容量	<4kb	5Mb
和伺服器通訊（http）	每次請求都會帶上cookie	只儲存在瀏覽器，和伺服器沒關係。
易用性	介面不太友好（引數需要自己拼接）	介面還可以接受吧！對於object、array等型別的資料儲存比較麻煩。

CSS3

CSS3選擇器

X[attr^=“value”]指定屬性名，可以找以value開頭的屬性值

x[attr$=“value”]指定屬性名，找以value結尾的

x[attr*=“value”]指定屬性名，找包含value的

     E：enabled{}：元素被啟用的時候觸發，比如輸入框獲取焦點。

     E：disabled{}：元素被禁用時觸發，比如輸入框不可獲取焦點。

     E：checked{}：元素被選中的時候觸發，比如radio或checkbox元素的選中。

     E：selection{}：選中的時候觸發，比如一堆文字被選中的時候，給選中的文字設定字型

E:nth-child（index）{}：所有元素的父元素的第index孩子，孩子的編號就是從1開始的，同時標號的順序不管什麼型別的元素，標號依次遞增。

E：nth-of-type（index）{}；所有元素的父元素的第index孩子，孩子編號根據同一型別的元素進行編號，如果一個子元素有多種元素（div、h3、p），那麼就有多組編號

E:first-of-type等價於E:nth-of-type(1)

E：last-of-type；等價於E：nth-of-type（最後一個）{}

注意：只能向：：selection選擇器應用的少量的css屬性：color、background、cursor、以及outline。

陰影：

Shadow

text-shadow：文字陰影（四個引數）

-1px 5px 3px rgba(22,22,22,0.3),
1px 5px 3px red,
1px -5px 3px red,
-1px -5px 3px red;

     分別是四周陰影（注意：是逗號隔開。）

       .fontShadow{
            width:300px;
            height:100px;
            font-size:30px;
            font-weight:bold;
            margin-left:10%;
            text-shadow:#00c500 5px 5px;
            animation:flash 0.8s infinite alternate;
        }
        @keyframesflash {
            10%{
                text-shadow: red 5px 5px;
            }
            50%{
                text-shadow: #71b9fe 5px 5px;
            }
            80%{
                text-shadow: #fe5bbb 5px 5px;
            }
            100%{
                text-shadow: #55fe8d 5px 5px;
            }
        }
</style>

box-shadow：是給元素塊新增陰影

box-shadow: inset 2px 2px 2px blue;

不加inset是正常倒影，加了變成往元素內顯示

反射（倒影）

Reflect：反射

用法：瀏覽器的相容性問題，使用boxreflect前面加上-webkit的字首。

引數：反射的方向（above、below、left、right）上下左右。

-webkit-box-reflect: below 10px;

2倒影和本體的距離，可以為負數

3其他屬性：透明度的變化

-webkit-box-reflect: below -10px
-webkit-linear-gradient(transparent,transparent 30%,rgba(225,225,225,0.3));

Gradient：變化率，線性變化。

Css漸變

漸變為css3新增的屬性，

分為兩種：線性漸變和徑向漸變

1、     線性漸變：-webkit-gradient（引數多，但是容易改變）

background: -webkit-gradient(linear,0%0%,100%0%,from(yellow),to(red));

引數：linear：線性，後面的兩組引數代表的是起始位置和終止位置，from（起始顏色）to（漸變到那種顏色）

2、     linear-gradient：

background:linear-gradient(aqua,chartreuse,red);

引數只有起始顏色和終止顏色，也可以有多種顏色，取決於你傳進去多少種顏色

3.對角漸變：

引數方向、起始位置、終止位置

background:-webkit-linear-gradient(45deg,red,greenyellow);

4.徑向漸變：

Css3徑向漸變就是圓形或者橢圓漸變，不再沿著一條直線進行變化，而是從一個起點朝著所有的方向漸變，相比於線性漸變，徑向漸變更為複雜。

1.標準語句：

background:radial-gradient(red,greenyellow);

2不均勻漸變

background:radial-gradient(red 40%,greenyellow 40%);

引數：在顏色的後面加上百分之百，可以控制漸變度的程度。

5.形狀漸變

background: repeating-radial-gradient(chartreuse 20%,aqua 40%);

引數：變化的形狀、起始顏色變化、終止顏色變化。

濾鏡

CSS濾鏡屬性，可以在元素呈現之前，為元素的渲染提供一些效果，如模糊、顏色轉移之類的。濾鏡常用於調整影象、背景、邊框的渲染。

圓角

border-radius: 40px  0 40px 0;/*左上，右上，右下，左下*/

背景

1.    background-clip：

1border-box：背景顏色直接眼神到邊框外面

2 content-box：背景顏色在內容後面，沒內容就沒有背景色

3 padding-box：背景顏色在邊框裡面

2.   background-origin：

 1 no-repeat：不讓圖片重複

3.   background-size：

  1 contain ：自適應，縮小圖片以適合元素（維持畫素長寬比）以較大的縮放比例為準

  2cover：可以被撐起來的背景圖片，擴充套件元素以填補元素（維持畫素長寬比）以較小的縮放比例為準

Css3以前，背景圖片大小由影象的實際大小決定，

Css3中可以指定圖片，重新指定圖片的大小，或者百分比。

圖片的大小隻能寫在所有圖片屬性的最後面

偏移

translate（x,y）

         X表示水平方向上的移動，y代表垂直方向的移動。為負值的時候往相反的方向移動。

transform: translate(500px,200px);

縮放

scale（x，y）

         X表示放大或者縮小元素的寬度，y表示高度。

         ScaleX（）表示只對元素的高進行縮放

         ScaleY（）表示只對元素的寬進行縮放 

注意：當裡面的值為負數時，網頁會先將其倒過來，再進行縮放

旋轉

rotate（）      

--瞭解即可        

 deg;單位，度數

       當裡面的值為正數時，元素順時針轉，反之，逆時針轉

transform:rotate(-120deg);

傾斜

skew（）       --瞭解即可      

        裡面的引數指的是繞著那個方向去傾斜

有正負之分

transform:skew(60deg,60deg);

矩陣

matrix（a,b,c,d,e,f）

比如transform:matrix(1,0,0,1,50,50);

表示將元素向右移動50px，再向下移動50px

過度（類似於動畫）

特點：1、本質上是一幀動畫，一幀結束後，就結束了

     2、過度的效果的實現，必須通過使用者的行為，可能觸發的行為：hover，focus，click，js程式碼

transition的屬性

     Transition-property：指定元素的過度屬性

     Transition-duration：規定了過渡的時間

     Transition-timming-function：規定以任何方式過渡

     Ease：表示快速

     Ease-in：先慢後快

Ease-out：先快後慢

Linear：線性平緩的變換。

Steps（）：規定過度分幾步完成。

縮寫：Transition：property duration function delay

動畫

1.   animation動畫屬性

      animation-name：取值為動畫名稱

      animation-duration：規定動畫完成所需要的時間

      animation-timming-function：規定以什麼方式完成動畫

      animation-delay：規定動畫延遲多少時間

      animation-iteration-count：規定動畫執行的次數 （infinite無限迴圈）

      animation-direction：規定動畫執行的方向（alternate規定動畫來回執行）

      animation-state：規定動畫是否執行（paused表示暫停）

      animation-fill-mode：規定動畫開始之前和結束之後發生的操作，預設值為none；forwards表示動畫結束後元素保留最後幀的狀態，backwards則與forwards相反。

2.   @keyframes

   規定一個動畫，包括動畫名稱，

from規定初始狀態，to規定動畫的末狀態

0%可以表示出狀態，100%也可以表示動畫的末狀態，即最後幀。

img {
    width:300px;
    height:300px;
    /*transition-duration:1s;*/
    animation-name:move;
    animation-direction:alternate;
    animation-iteration-count:infinite;/*無限迴圈*/
    animation-play-state: running;
    animation-duration:2s;    /*持續時間*/
    /*animation-delay: 2s;*//*延遲時間*/
    /*animation:move 1s linearforwards;*/
}

@keyframes move {
    /*               from{
                        transform:translate(0,0);
                    }
                    to{
                        transform: translate(800px,500px)scale(5);
                    }*/
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    50% {
        transform: translate(800px, 500px)scale(5);
    }
    60% {
          transform:translate(1300px, 900px)scale(5);
    }
    100%{
        transform: translate(0, 0);
        opacity: 1;
    }
}