HTML5新增語義化標簽


1.HTML5新增的標簽

article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video

2.新增標簽釋義

article:

即定義article(文章)

aside:

定義頁面之外的內容(常用於側邊欄,需要注意的是:移除側邊欄(aside標簽及其內容)時不能影響網頁的主體結構和布局)

audio:

定義聲音內容(音頻)

各瀏覽器支持的音頻格式
音頻格式 chrome fireFox opear safari ie9
OGG 支持 支持 支持 不支持 不支持
MP3 支持 不支持 支持 不支持 支持
WAV 不支持 支持 不支持 支持 不支持

 

 

 

 

 

 

 

 

 

 

 

 

bdi:

定義文本的文本方向,使其脫離其周圍文本的方向設置。

canvas:

定義圖形

command:

定義命令按鈕

datalist:

定義datalist,標簽被用來在為 <input> 元素提供"自動完成"的特性。用戶能看到一個下拉列表,里邊的選項是預先定義好的,將作為用戶的輸入數據。請使用 <input> 元素的 list 屬性來綁定 <datalist> 元素

details:

規定 details 是否可見

embed:

定義外部交互內容或插件

figcaption:

定義 figure 元素的標題

figure:

定義媒介內容的分組,以及它們的標題(常用於和figure配套實現圖文效果)

footer:

定義頁腳

header:

定義頭部

hgroup:

用來對標題元素進行分組。當標題有多個層級(副標題)時,<hgroup> 元素被用來對一系列 <h1>-<h6>元素進行分組

keygen:

規定用於表單的密鑰對生成器字段。當提交表單時,私鑰存儲在本地,公鑰發送到服務器

mark:

定義有記號的文本

meter:

定義預定義范圍內的度量

nav:

標簽定義導航鏈接的部分。並不是所有的 HTML 文檔都要使用到 <nav> 元素。<nav> 元素只是作為標注一個導航鏈接的區域。在不同設備上(手機或者PC)可以制定導航鏈接是否顯示,以適應不同屏幕的需求

output:

標簽作為計算結果輸出顯示(比如執行腳本的輸出)

progress:

標簽定義運行中的任務進度(進程)

rp:

定義若瀏覽器不支持 ruby 元素顯示的內容

rt:

定義 ruby 注釋的解釋

ruby:

定義 ruby 注釋

section:

定義文檔的某個區域。比如章節、頭部、底部或者文檔的其他區域

source:

定義媒介源

summary:

定義 details 元素的標題

time:

定義日期/時間

track:

定義用在媒體播放器中的文本軌道

video:

定義視頻,支持三種格式Ogg、MPEG4、WebM

3.新增標簽的優點

總的來說HTML5新增標簽是為我們開發者提供了便利,現如今我們在搭建頁面總結構的時候,往往會使用header來定義頭部位置,div來定義頁面內容,再用footer來定義頁腳,可在html5之前,開發者們往往只能用一層又一層的div來搭建頁面結構,如果頁面結構復雜,在沒有注釋的情況下我們很難在后期對其進行維護和更新,但如今有了HTML5新增的語義化標簽,這些問題也就隨之解決了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM