HTML5(一)——新增元素和屬性

自 H5 誕生以來，在 html4.0 中有些元素已被 H5 廢棄，但是在 H5 中添加了很多新元素以及功能，今天我們學習 H5 中新增的元素和屬性都有哪些？

新增語義結構標簽

標簽	描述
<article>	定義頁面獨立的內容區域。
<aside>	定義頁面的側邊欄內容。
<bdi>	允許您設置一段文本，使其脫離其父元素的文本方向設置。
<command>	定義命令按鈕，比如單選按鈕、復選框或按鈕
<details>	用於描述文檔或文檔某個部分的細節
<dialog>	定義對話框，比如提示框
<summary>	標簽包含 details 元素的標題
<figure>	規定獨立的流內容（圖像、圖表、照片、代碼等等）。
<figcaption>	定義 <figure> 元素的標題
<footer>	定義 section 或 document 的頁腳。
<header>	定義了文檔的頭部區域
<mark>	定義帶有記號的文本。
<meter>	定義度量衡。僅用於已知最大和最小值的度量。
<nav>	定義導航鏈接的部分。
<progress>	定義任何類型的任務的進度。
<ruby>	定義 ruby 注釋（中文注音或字符）。
<rt>	定義字符（中文注音或字符）的解釋或發音。
<rp>	在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內容。
<section>	定義文檔中的節（section、區段）。
<time>	定義日期或時間。
<wbr>	規定在文本中的何處適合添加換行符。

新增標簽使用時根據描述內容，在適當的地方使用新標簽，應用的時候和其他標簽是一樣的，H5 新增標簽使得網頁結構更清晰明了，建議大家使用新增元素。

新增表單元素

標簽	描述
<datalist>	<input>標簽定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
<keygen>	<keygen> 標簽規定用於表單的密鑰對生成器字段。
<output>	<output> 標簽定義不同類型的輸出，比如腳本的輸出。

<datalist>屬性規定form或input域應該擁有自動完成功能，當input聚焦時，瀏覽器應該在域中顯示填寫的選項。

使用 input 元素與 datalist 元素綁定，使用時如下：

<form action="">
 <input type="text" list="schooltype">
 <datalist id="schooltype">
  <option value="歐亞駕校">歐亞駕校</option>
  <option value="鵬程駕校">鵬程駕校</option>
  <option value="學車網">學車網</option>
 </datalist>    
</form>

 

<keygen>元素用於提供用戶驗證的方法，表單提交時，keygen生成表單密鑰對，一個是公鑰，一個是私鑰，私鑰存儲在客戶端，公鑰通過帶有keygen字段的表單發送給服務器。目前已被H5廢棄，我們作為了解就好。

使用實例如下：

<form action="">
 用戶名<input type="text" name="user" /><br>
 密碼<input type="password" name="se"> <br>
 加密<keygen name="security"><br>
 <input type="submit" value="提交">
</form>

 

<output>元素用於不同類型的輸出，對輸出結果的展示，如對兩個數值相加，並展示結果，代碼如下：

<form action="" oninput = "x.value=parseInt(a.value)+parseInt(b.value)">
 <input type="range" id="a" step="1" min="0" max="100"> + 
 <input type="text" id="b" value="50">=
 <output name="x" ></output> 
</form>

 

上述form處添加oninput事件，對數值parseInt進行取整運算。

新增表單屬性

H5中新增表單屬性指 form 和 input 元素新增屬性。

form新屬性及意義

• autocomplete ：規定form域自動完成功能。
• novalidate ：規定提交表單時是否驗證域。

input新增類型和屬性

新的輸入類型	新的輸入屬性
color date datetime datetime-local email month number range search tel time url week	autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height 和 width list min 和 max multiple pattern (regexp) placeholder required step

input 和 form 的 autocomplete屬性

屬性規定 form 或 input 在當前域下擁有自動完成功能，通俗地講就是元素聚焦時，會自動展示之前輸入過的內容，內容是根據當前域名下之前使用過的數據。示例如下：

<form action="demo_form.asp" method="get" autocomplete="on">
 First name: <input type="text" name="fname" /><br />
 Last name: <input type="text" name="lname" /><br />
 E-mail: <input type="email" name="email" autocomplete="on" /><br />
 <input type="submit" />
</form>

 

頁面上顯示如圖：

 

 

表單重寫屬性：

• formaction - 重寫表單的 action 屬性
• formenctype - 重寫表單 enctype 屬性
• formmethod - 重寫表單 method 屬性
• formnovalidate - 重寫表單 novalidate 屬性
• formtarget - 重寫表單的 target 屬性

min、max、step屬性

三者用於對數字、日期類型輸入框的限制和約束。

• min - 規定允許設置的最小值。
• max - 規定允許設置的最大值。
• step - 規定合法的數字間隔。

使用示例，請參照上output處的實例。

multipel屬性：規定輸入域中可選擇多個值。適用於 email 和 file 兩種類型。

pattern屬性：驗證input域的模式。模式pattern是正則表達式，適用於text、search、url、email、password。

廢除的標簽

以下是一些在H5中已廢棄的元素。

acronym、applet、basefont、big、center、dir、font、frame、frameset、noframes、strike、tt。