整理 HTML5 新增的語義化標籤

新的標籤帶來的是網頁佈局的改變及提升對搜索引擎的友好

<article> 定義文章

<aside> 定義文章的側邊欄

<figure> 一組媒體對象以及文字

<figcaption> 定義 figure 的標題

<footer>定義頁腳

<header>定義頁眉

<hgroup>定義對網頁標題的組合

<nav>定義導航

<section> 定義文檔中的區段

<time>定義日期和時間

<dialog>定義一個對話框

<header></header>
<footer></footer>
<nav></nav>
<section> <section> 頁面上的版塊
用於劃分頁面上的不同區域,或者劃分文章裏不同的節
<article></ article > 

用來在頁面中表示一套結構完整且獨立的內容部分,可以用來呈現論壇的一個帖子,雜誌或報紙中的一篇文章,一篇博客,用戶提交的評論內容等。

<figure> 標籤規定獨立的流內容(圖像、圖表、照片、代碼等等)。
<figcaption> figure的子元素 用於對figure的內容 進行說明
<time></time>

<datalist></datalist>選項列表。與 input 元素配合使用,來定義 input 可能的值。


<mark></mark> 需要標記的詞或句子
<details></details>用於描述文檔或文檔某個部分的細節
< summary></summary> details 元素的標題
該元素用於摘錄引用等 應該與頁面的主要內容區分開的其他內容

Open 屬性默認展開

狀態交互元素 

progress元素 :標籤定義運行中的進度(進程)
<progress  value="0" max="100"></progress> 
meter元素 :標籤定義度量衡。僅用於已知最大和最小值的度量。

<meter  value="70" max="100" min="0"></meter>

Forms

email  :  電子郵箱文本框,跟普通的沒什麼區別,當輸入不是郵箱的時候,驗證通不過.移動端的鍵盤會有變化
tel   :   電話號碼,移動端的鍵盤
url   :   網頁的URL
search  :  搜索引擎
range  :  特定範圍內的數值選擇器
min、max、step( 步數 )、value
用JS來顯示當前數值

新的表單特性和函數

placeholder  :  輸入框提示信息
例子 : 密碼框提示
autocomplete  :  是否保存用戶輸入值默認爲on,關閉提示選擇off
autofocus  :  指定表單獲取輸入焦點
list和datalist  :  爲輸入框構造一個選擇列表
list值爲datalist標籤的id
required  :  此項必填,不能爲空帶有必填字段的表單
Pattern : 正則驗證  pattern="\d{1,5}“
formaction 在submit裏定義提交地址

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章