HTML5之語(yǔ)義標(biāo)簽介紹
我要評(píng)論在HTML5標(biāo)準(zhǔn)中，新加了幾個(gè)用于增添頁(yè)面語(yǔ)義的標(biāo)簽，這些標(biāo)簽有：article、section、nav和aside等。與別的大多數(shù)標(biāo)簽不 同，瀏覽器在解釋渲染這些標(biāo)簽的時(shí)候僅僅把它作為普通的div塊級(jí)元素來(lái)處理，不會(huì)添加任何額外的展現(xiàn)邏輯；也即，這些標(biāo)簽僅用于增添語(yǔ)義。對(duì)于Web開 發(fā)人員而言，使用這些標(biāo)簽的實(shí)際意義主要有2點(diǎn)：搜索引擎優(yōu)化，以及增加頁(yè)面的可用性(accessibility)。
在元素分類上，article、section、nav和aside稱之為“Sectioning Content”
article
article元素可用于表示頁(yè)面上某塊具有一定獨(dú)立性的內(nèi)容，這個(gè)內(nèi)容可以是一篇文章、論壇上的一個(gè)帖子/評(píng)論、一篇博客、一個(gè)可交互的控件 等。article標(biāo)簽可以嵌套使用，當(dāng)這么做時(shí)，子article元素與父article元素在邏輯上必須有相應(yīng)的關(guān)聯(lián)。如Web開發(fā)者可以將一篇博客 的正文以及評(píng)論作為父級(jí)article元素，而將其中的各個(gè)評(píng)論作為子article元素。
article元素內(nèi)部不能出現(xiàn)main元素 — main元素意指頁(yè)面的主要內(nèi)容，當(dāng)有main元素時(shí)，article元素作為main元素的子元素而存在。
section
section元素意指頁(yè)面或Web應(yīng)用中的一部分，不同的section互相之間其“主題”或者說(shuō)“基調(diào)”應(yīng)當(dāng)有所不同，一般會(huì)通過(guò)在section元素內(nèi)放置heading元素(h1-h6)來(lái)定義這個(gè)“主題”/“基調(diào)”。
把section當(dāng)成div使用是一種錯(cuò)誤 — 除了頁(yè)面可展現(xiàn)的內(nèi)容，section的子元素不應(yīng)該承擔(dān)任何其它角色(樣式、行為、輔助標(biāo)簽等)。
nav
nav元素主要用于包含頁(yè)面上的導(dǎo)航鏈接，因此在nav元素中直接包含ul元素或者ol元素是一種非常常見(jiàn)的做法。盡管如此，nav中也可以不包含ul或者ol元素，比如在nav元素中可以包含一個(gè)文章段落(p標(biāo)簽)，而在該文章段落中包含一些鏈接(a標(biāo)簽)。
與article元素一樣，nav元素內(nèi)部不能出現(xiàn)main元素。
aside
aside元素一般用于表示頁(yè)面上的側(cè)邊欄，不過(guò)該元素僅僅只在語(yǔ)義上表示“側(cè)邊欄”，瀏覽器在解析渲染該標(biāo)簽時(shí)只會(huì)將其作為普通的div塊級(jí)元素來(lái)處理。如果要真正得到側(cè)邊欄的效果，則Web開發(fā)人員需要自己編寫CSS來(lái)實(shí)現(xiàn)。
以上這篇HTML5之語(yǔ)義標(biāo)簽介紹就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
原文地址：http://www.cnblogs.com/krolong/archive/2016/07/07/5648710.html
相關(guān)文章
- 下面小編就為大家?guī)?lái)一篇淺談html5標(biāo)簽css3的常用樣式。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-20
html5中的一些標(biāo)簽學(xué)習(xí)(心得)
下面小編就為大家?guī)?lái)一篇html5中的一些標(biāo)簽學(xué)習(xí)(心得)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-18- HTML5現(xiàn)在已經(jīng)不是SGML的子集，主要是增加了關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能。接下來(lái)通過(guò)本文對(duì)這些功能簡(jiǎn)要概述下，感興趣的朋友參考下吧2016-09-05
淺談Html5中視頻 音頻標(biāo)簽 進(jìn)度條的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談Html5中視頻 音頻標(biāo)簽 進(jìn)度條的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-26HTML5進(jìn)階段內(nèi)聯(lián)標(biāo)簽匯總（小篇）
這篇文章主要介紹了HTML5進(jìn)階段內(nèi)聯(lián)標(biāo)簽匯總（小篇）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-13關(guān)于HTML5語(yǔ)義標(biāo)簽的實(shí)踐(blog頁(yè)面)
下面小編就為大家?guī)?lái)一篇關(guān)于HTML5語(yǔ)義標(biāo)簽的實(shí)踐(blog頁(yè)面)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-12
html5基于canvas實(shí)現(xiàn)的文字標(biāo)簽云3D旋轉(zhuǎn)動(dòng)畫特效源碼
這是一款html5基于canvas實(shí)現(xiàn)的文字標(biāo)簽云3D旋轉(zhuǎn)動(dòng)畫特效源碼。鼠標(biāo)滑過(guò)文字呈現(xiàn)框選效果，拖動(dòng)文字可呈現(xiàn)出標(biāo)簽云的3D動(dòng)畫旋轉(zhuǎn)效果。2016-07-07- 下面小編就為大家?guī)?lái)一篇HTML5不支持標(biāo)簽和新增標(biāo)簽詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-27
- header標(biāo)簽不同于我們最熟悉的head標(biāo)簽,header往往更常被用于定義文章的頭部,下面我們就來(lái)淺析HTML5中header標(biāo)簽的用法:2016-06-24
- 這篇文章主要介紹了常用的HTML5列表標(biāo)簽的相關(guān)資料,需要的朋友可以參考下2017-06-20
