HTML5新增標籤和屬性

時間 2019-12-12

標籤 html5 html 新增標籤屬性欄目 HTML5 简体版

原文原文鏈接

HTML5的一大革新就是語義化標籤的完善

section

w3c規範規定section是用來劃分網頁的,表示頁面中的一個內容區塊,好比章節,頁眉,頁腳或頁面的其餘部分.能夠和h1,h2…等其餘標籤結合起來一塊兒使用,表示文檔結構javascript

article

定義能夠獨立於內容其他部分的完整獨立內容塊,article元素就是專門爲摘要設計的,好比一篇文章html

aside

表示article標籤內容以外的,與article標籤內容相關的輔助信息,aside元素應該被用於無關內容。前端

若是你有你認爲應該與主內容分開的內容，那麼aside元素是你應該正確考慮使用的元素。
詢問你本身aside元素中的內容是否能夠被獨立開來而不會影響文檔或者section中主內容的含義。
能夠用在主要內容相關的引用,側邊欄,廣告,nav元素組等
簡單來講 :aside的內容若是被刪除，剩下的內容仍然很合理

hgroup

對整個頁面/頁面中的一個內容區塊的標題進行組合html5

一個內容區塊或整個頁面的頭部部分java

整個頁面或頁面區塊的尾部web

nav

頁面中導航連接的部分正則表達式

figure

表示一段獨立的流內容,通常表示文檔主體流內容中的一個獨立單元
figure元素常常用於圖片

figcaption

表明一個圖例的說明
表明了figure元素的一個標題或者說是其相關解釋.
在使用figcaption時，它最好是figure塊的第一個或者最後一個元素

mark

高亮顯示瀏覽器

progress

進度條安全

time

<time></time>用來表現時間或日期服務器

<p> 咱們在天天早上 <time>9:00</time>開始營業。 </p>參數
<p>我在 <time datetime=「2016-02-14T20:00Z」 pudate>這一天</time> 發佈了一篇文章。 </p>

wbr

<p>一行放不下則在這換行<wbr/>能放下則一行顯示</p>

datalist

選項列表與 input 元素配合使用，能夠設置提示信息

<input  type="text" id="" list="shopCars"/>
<datalist id="shopCars"> <!--爲表單設置可選值-->
<option value="aa"></option>
<option value="ab"></option>
<option value="c"></option>
</datalist>

details

用於描述文檔或文檔某個部分的細節
summary標籤和details一塊兒使用,表示標題,用戶點擊標題時會獲得細節信息

<details>
<summary>111</summary>
<ul>
<li>111</li><li>222</li><li>333</li>
</ul>
</details>

output

不一樣類型的輸出,好比腳本的輸出

<form oninput="x.value= parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" max="100" min="0" value="50"/>+
<input type="number" id="b" value="50"/>
<output name="x" for="a b">150</output>
</form>

新增標籤的兼容問題

HTML5語義化標籤在IE6-8下，對於不支持的標籤不會有任何的樣式,也默認的當成行內元素來出來,因此在樣式表裏要對這些標籤訂義一下它默認的display
經過引入以下js來解決ie9如下新增標籤的兼容問題

Forms

新增input元素的種類：

search : 搜索輸入框
tel : 電話號碼輸入框
url : 輸入url地址
email : 郵件輸入框
number : 數字輸入框
range :特定範圍內的數值選擇器(經過拖動滾動條改變必定範圍內的數字)
color : 顏色選取器只在 Opera 和 Blackberry 瀏覽器
datetime : 顯示完整日期和時間 UTC標準時間
datetime-local : 顯示完整日期和時間
time : 顯示時間
month : 顯示月
week : 顯示周

表單新特性

placeholder
輸入框佔位符，經常使用做輸入提示，在光標聚焦時，佔位符自動消失
autocomplete : 是否保存用戶輸入值
默認爲on,關閉提示選擇off
autofocus : 自動聚焦
required : 此項必填，不能爲空
Pattern : 正則驗證 pattern="\d{1,5}「
form 屬性只要加上 form 屬性，表單元素能夠放到頁面的任意位置。
formnovalidate 和 novalidate
它倆都表示不須要驗證表單,直接提交；
novalidate 用於 form 標籤；
formnovalidate 用於 submit類型的提交按鈕。

表單驗證

validity對象，經過下面的valid能夠查看驗證是否經過
oText.addEventListener("invalid",fn1,false);
valid : 驗證不經過時返回false
valueMissing : 輸入值爲空時
typeMismatch : 控件值與預期類型不匹配
patternMismatch : 輸入值不知足pattern正則
customError 不符合自定義驗證
setCustomValidity(); 自定義驗證

當表單元素驗證不經過時,會觸發invalid事件，
如何判斷表單元素有沒有驗證經過?
1)全部的表單元素上有個validity對象
2)validity對象上有一些屬性:valid(false) valueMissing(true) patternMismatch(true) typeMismatch(true) customError(true)
注:括號裏是驗證不經過時的返回值
setCustomValidity 設置自定義驗證規則

<form action="" >
   <!-- <input type="text" name="text" id="text1" pattern="\d{2}"/>-->
    <input type="url" name="url" id="text1" />
    <input type="submit" value="提交"/>
</form>

<script>
    var oText = document.querySelector("#text1");

    oText.addEventListener("invalid",function(){
        //valid 只要驗證不經過,值爲false
        console.log(this.validity.valueMissing);/!*配合required屬性,若是爲空,則這個值true*!/
    },false)

    oText.addEventListener("invalid",function(){
        console.log(this.validity.customError)
        if(this.validity.patternMismatch){
            this.setCustomValidity("只能輸入兩位數字");//自定義驗證提示信息
            console.log(this.validity.customError)
        }else{
            this.setCustomValidity('');
        }
    },false)

    oText.addEventListener("invalid",function(){
      console.log(this.validity.typeMismatch)
    },false)
</script>

全局屬性

data-yourvalue
自定義屬性
data-name : dataset.name
data-name-first : dataset.nameFirst
Hidden
加上這個屬性,元素則是不可見狀態
spellcheck
對你輸入的內容糾錯
tabindex
按下tab鍵能夠根據設置的順序進行跳轉
contenteditable
<p contenteditable="true">請您留言</p>
表示這塊內容是能夠編輯的去掉則不能夠修改
desginMode
<script>
window.document.designMode = 「on「
</script>

HTML5表單及其驗證

HTML表單一直都是Web的核心技術之一，有了它咱們才能在Web上進行各類各樣的應用。HTML5 Forms新增了許多新控件及其API，方便咱們作更復雜的應用，而不用藉助其它Javascript框架。

表單還是以<form>元素做爲容器，咱們可在其中設置基本的提交特性；
當用戶提交頁面時，表單仍然向服務器發送表單控件的值；
以前老版本中的表單控件，如text radio checkbox等等，均可以按原有方式使用，儘管增長了新的功能；
仍然可使用javascript操做表單控件。

1.輸入型控件

Input type	用途	說明
email	電子郵件地址文本框
url	網頁URL文本框
number	數值的輸入域	屬性值描述 max number 規定容許的最大值 min number 規定容許的最小值 step number 規定合法的數字間隔（若是 step="3"，則合法的數是 -3,0,3,6 等） value number 規定默認值
range	特定值的範圍的數值，以滑動條顯示	屬性值描述 max number 規定容許的最大值 min number 規定容許的最小值
step number 規定合法的數字間隔（若是 step="3"，則合法的數是 -3,0,3,6 等） value number 規定默認值
Date pickers	日期，時間選擇器	僅Opera9+支持，包含date, month, week, time, datetime, datetime-local
search	用於搜索引擎，好比在站點頂部顯示的搜索框	與普通文本框用法同樣，只不過這樣更語文化
color	顏色選擇器	僅Opera支持

將本來type爲text的input控件聲明爲以上特殊類型，是爲了給用戶呈現不一樣的輸入界面（移動平臺上支持這些不一樣的輸入界面，這裏就不細說），並且表單提交時會對其值作進一步的驗證。下面展現這些新表單元素，請用支持這些表單元素的瀏覽器查看，IE對其支持最差。

E-mail:

date:

range: number: color:

2. 表單新特性和函數

2.1 placeholder

當用戶尚未輸入值時，輸入型控件可能經過placeholder向用戶顯示描述性說明文字或者提示信息，這在目前網站中很常見，一些JS框架都會提供相似功能，簡單的說下在舊版本中經常使用的解決方案，爲輸入控件建立一個label，而後經過CSS控制些label的位置使之覆蓋在輸入控件上面，當label得到焦點時，瀏覽器會把焦點指向輸入控件。不過有了placeholder，新的瀏覽器就內置了這一功能，其特性值會以淺灰色樣式顯示在輸入框中，當輸入框得到焦點並有值後，該提示信息自動消失。

如：

<p><label for="runnername">Runner:</label>
             <input id="runnername"name="runnername" type="text" placeholder="First and last name" />
          </p>

Runner:

2.2 autocomplete

其實在IE6中,autocomplete就已經實現，不過如今這一特性終於標準化了，瀏覽器經過autocomplete特性可以知曉是否應該保存輸入值以備未來使用，autocomplete應該用一保護用戶敏感數據，避免本地瀏覽器對它們進行不安全的存儲。

類型	做用
on	該字段無需保護，值能夠被保存和恢復
off	該字段須要保護，值不能夠保存
unspecified	包含`<form>`的默認設置，若是沒有被包含在表單中或沒有指定值，則行爲表現爲on

如：

<form action="" method="get" autocomplete="on">
Name:<input type="text" name="name" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

當用戶提交過一次表單後，再次訪問，name的輸入框會提示你曾輸入的值，而email則不會提示。

2.3 autofocus

頁面載入時，咱們經過autofocus指定某個表單元素得到焦點，但每一個頁面只容許出現一個autofocus，若是設置多個則至關於未指定些行爲。目前Opera10,Chrome和Safari瀏覽器支持。若是用戶有但願焦點轉移的狀況下，使用autofocus會惹惱用戶。

2.4 list特性和datalist

經過使用list，開發人員可以爲某個輸入型控件構造一個選值列表，其使用方法：

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="W3School" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

Webpage:

2.5 required

required 屬性規定必須在提交以前填寫輸入域（不能爲空）。它是表單驗證最簡單的一種方式方法，使用方法：

Name: <input type="text" name="usr_name" required="required" />

2.6 pattern

pattern 屬性規定用於驗證 input 域的模式（pattern），模式（pattern）是正則表達式。那些type爲email或url的輸入控件內置相關正則表達式，若是value不符合其正則表達式，那表單將通不過驗證，沒法提交。使用方法：

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

2.7 novalidate

novalidate 屬性規定在提交表單時不該該驗證 form 或 input 域。

如：

<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

3. 表單驗證

表單驗證是一套系統，它爲終端用戶檢測無效的數據並標記這些錯誤，是一種用戶體驗的優化，讓web應用更快的拋出錯誤，但它仍不能取代服務器端的驗證，重要數據還要要依賴於服務器端的驗證，由於前端驗證是能夠繞過的。

目前任何表單元素都有八種可能的驗證約束條件：

名稱	用途	用法
valueMissing	確保控件中的值已填寫	將required屬性設爲true， `<input type="text"required="required"/>`
typeMismatch	確保控件值與預期類型相匹配	`<input type="email"/>`
patternMismatch	根據pattern的正則表達式判斷輸入是否爲合法格式	`<input type="text" pattern="[0-9]{12}"/>`
toolong	避免輸入過多字符	設置maxLength，`<textarea id="notes" name="notes" maxLength="100"></textarea>`
rangeUnderflow	限制數值控件的最小值	設置min，`<input type="number" min="0" value="20"/>`
rangeOverflow	限制數值控件的最大值	設置max，`<input type="number" max="100" value="20"/>`
stepMismatch	確保輸入值符合min,max,step的設置	設置max min step，`<input type="number" min="0" max="100" step="10" value="20"/>`
customError	處理應用代碼明確設置能計算產生錯誤	例如驗證兩次輸入的密碼是否一致

下面展示瀏覽器自帶的驗證功能請在Chrome、Opera或Firefox中查看：

源代碼：

<form name="register1" id="register1">
          <p><label for="runnername">RunnerName:</label>
             <input id="runnername"name="runnername" type="text" placeholder="First and last name" required="required" autofocus="autofocus"/>
          </p>
          <p><label for="phone">Tel #:</label>
             <input id="phone" name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}"
                    placeholder="xxx-xxxx-xxxx"/></p>
          <p><label for="emailaddress">E-mail:</label>
             <input id="emailaddress" name="emailaddress" type="email" 
                    placeholder="For confirmation only"/></p>
          <p><label for="dob">DOB:</label>
             <input id="dob" name="dob" type="date"
                    placeholder="MM/DD/YYYY"/></p>
          <p>Count:<input type="number" id="count" name="count" min="0" max="100" step="10"/></p>
          <p><label for="style">Shirt style:</label>
               <input id="style" name="style" type="text" list="stylelist" title="Years of participation" 
                autocomplete="off"/></p>
            <datalist id="stylelist">
             <option value="White" label="1st Year"/>
             <option value="Gray" label="2nd - 4th Year"/>
             <option value="Navy" label="Veteran (5+ Years)"/>
            </datalist>
           
         <fieldset>
            <legend>Expectations:</legend>
            <p>
            <label for="confidence">Confidence:</label>
            <input id="confidence" name="level" type="range"
                   onchange="setConfidence(this.value)"
                   min="0" max="100" step="5" value="0"/>
            <span id="confidenceDisplay">0%</span></p>
            <p><label for="notes">Notes:</label>
               <textarea id="notes" name="notes" maxLength="100"></textarea></p>
         </fieldset>
 
         <p><input type="submit" name="register" value="Submit" onclick=" checkForm()"/></p>
        </form>

但是各個瀏覽器驗證行爲不一致，咱們可能須要統一其驗證行爲，藉助javascript咱們能夠統一瀏覽器的驗證行爲。

仍是以上上述HTML爲基礎，咱們爲其加上相關javascript:

//自定義表單控件驗證行爲
            var checkvalue = function(e){
                var el = e.target;
                var isvalid = el.checkValidity();
                if(isvalid){
                    el.className= "";
                    el.parentElement.getElementsByTagName("label")[0].className="";
                }else{
                    el.className= "error";
                    el.parentElement.getElementsByTagName("label")[0].className="error";
                }
                e.stopPropagation();
                e.preventDefault();
            }
            //定義表單驗證方法
            function invalidHandler(evt) {
                checkvalue(evt);
            }
            function loadDemo() {
               var myform = document.getElementById("register1");
               //註冊表單的oninvlid事件
               myform.addEventListener("invalid", invalidHandler, true);
                for(var i=0;i< myform.elements.length-1;i++){
                    //註冊表單元素的onchange事件，優化用戶體驗
                    myform.elements[i].addEventListener("change",checkvalue,false);
                }
            }
            //在頁面初始化事件（onload）時註冊的自定義事件
            window.addEventListener("load", loadDemo, false);

最後說下輸入兩次密碼匹配的驗證，寫的很簡單：

<form name="passwordChange">
    <p><label for="password1">New Password:</label>
    <input type="password" id="password1" onchange="checkPasswords()"></p>
    <p><label for="password2">Confirm Password:</label>
    <input type="password" id="password2" onchange="checkPasswords()"></p>
</form>
<button onclick="document.passwordChange.password1.checkValidity()">Check Validity</button>
function checkPasswords() {
        var pass1 = document.getElementById("password1");
        var pass2 = document.getElementById("password2");
 
        if (pass1.value != pass2.value)
            pass1.setCustomValidity("兩次輸入的密碼不匹配");
        else
            pass1.setCustomValidity("");
    }