這篇文章給大家分享的是有關(guān)HTML5文檔結(jié)構(gòu)標(biāo)簽的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)是一家專業(yè)提供富陽企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、html5、小程序制作等業(yè)務(wù)。10年已為富陽眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

1.文檔結(jié)構(gòu)標(biāo)簽

1.1為什么引入文檔結(jié)構(gòu)標(biāo)簽？

讓標(biāo)簽更具語義化，結(jié)構(gòu)更加清晰。搜索引擎具有更好的支持

1.2文檔結(jié)構(gòu)標(biāo)簽

header：頭部。網(wǎng)頁結(jié)構(gòu)的頭部，文章的頭部內(nèi)容，可包含標(biāo)題等。

nav：導(dǎo)航。頭部，底部以及側(cè)邊欄。

section：對網(wǎng)頁的內(nèi)容進(jìn)行分塊。里面可以包含：①article：表示這一個分塊包含了多篇文章。②section：包含子分塊。

article：表示的是獨立的完整的文章。①header：表示文章的頭部。里面包含了標(biāo)題等。②section：表示不同的段落和分區(qū)。③article：表示文章所包含的評論及回復(fù)等。

aside：側(cè)邊欄。通常渲染成側(cè)邊欄的樣式。

footer：底部?？砂賜av：表示底部的導(dǎo)航欄。

1.3section、article、div區(qū)別

section：對網(wǎng)頁內(nèi)容進(jìn)行分塊。意義明確的分區(qū)。

article：當(dāng)網(wǎng)頁中出現(xiàn)文章內(nèi)容的時候，使用article

div：沒有什么實際意義的容器。

2.語義相關(guān)元素

mark：標(biāo)注。標(biāo)注的是我們需要重點關(guān)注的內(nèi)容。瀏覽器會渲染成 背景顏色為黃色、字體為黑色的內(nèi)容。

time：時間、日期。datetime屬性：屬性值為標(biāo)準(zhǔn)化的時間日期。瀏覽器并不會特別的去渲染，與div相同。

details：表示的是細(xì)節(jié)內(nèi)容或者某一個主體的文章。瀏覽器會把他隱藏。

summary：摘要信息。嵌套在details標(biāo)簽內(nèi)使用，會顯示出來，點擊后顯示details內(nèi)容。默認(rèn)值為：詳細(xì)信息。

3.應(yīng)用程序元素

meter：計數(shù)儀表。①value 目前的讀數(shù)②max 較大值。默認(rèn)值為1③min 最小值。④high 高值。⑤low 低值。⑥optimum 很好值。越靠近越好。

顏色顯示規(guī)律：越靠近很好值，顏色越舒適。

progress：進(jìn)度條。顯示的是進(jìn)度完成的比例。①value：現(xiàn)在已完成的值。②max：最后完成后的值?？偭?。默認(rèn)值也是1。

感謝各位的閱讀！關(guān)于“HTML5文檔結(jié)構(gòu)標(biāo)簽的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

文章名稱：HTML5文檔結(jié)構(gòu)標(biāo)簽的示例分析-創(chuàng)新互聯(lián)
分享鏈接：http://weahome.cn/article/ccipgs.html