国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > HTML > 正文

HTML5中新標(biāo)簽和常用標(biāo)簽詳解

2020-03-24 17:48:48
字體:
供稿:網(wǎng)友
今天先介紹下 html5 新增的結(jié)構(gòu)元素,有的經(jīng)常使用到,有的用不上,雖然說它們的出現(xiàn)是更促進(jìn)頁面更有語義,更好的 seo,但其實(shí)當(dāng)頁面禁用樣式后,它們的展現(xiàn)跟 div 是沒撒差別,有同學(xué)可能會(huì)說,既然一樣,又不影響頁面的最終展現(xiàn),不管是 article 還是 section 能用就好了。如果考慮實(shí)際項(xiàng)目的針對用戶,我也是這么認(rèn)為的,但作為一個(gè)重構(gòu)仔,我們還是得專業(yè)點(diǎn),再考慮到無障礙這塊,那么 html5 標(biāo)簽的作用就更明顯了。于是復(fù)習(xí)下內(nèi)容并記錄在博客上,順便分享給大家,也方便自己以后查找。HTML5 新增結(jié)構(gòu)元素分為主體結(jié)構(gòu)元素和非主體結(jié)構(gòu)元素1.主體結(jié)構(gòu)元素包括 article、section、nav、aside、time
2.非主體結(jié)構(gòu)元素包括 header、hgroup、footer、address
一、主體結(jié)構(gòu)元素
article
article 標(biāo)簽,從語義化上看為文檔、頁面,其用法如下:通常是一篇文章、一個(gè)頁面、一個(gè)獨(dú)立完整的內(nèi)容模塊
一般會(huì)帶個(gè)標(biāo)題,并放在 header 標(biāo)簽中
article 元素可以互相嵌套
使用頻率極高,強(qiáng)調(diào)獨(dú)立性,多注意下與 header 標(biāo)簽的使用。
復(fù)制代碼代碼如下:
article
header
h1 是我標(biāo)簽 /h1
/header
p 我是段落 /p
article
div 我的內(nèi)容 /div
/article
/article

section
section 標(biāo)簽,從語義化上看為部分,其用法如下:用于頁面內(nèi)容的獨(dú)立分塊,往往是文章的一段
通常由內(nèi)容和標(biāo)題組成,沒有標(biāo)題的內(nèi)容不推薦使用 section
使用頻率低,強(qiáng)調(diào)分段分塊。注:《HTML5與CSS3權(quán)威指南》這本書中說明:一個(gè)容器需要被定義樣式或者腳本定義行為時(shí),推薦用div而非section,不要將section用作設(shè)置樣式的容器。
復(fù)制代碼代碼如下:
section
h1 水果 /h1
article
h2 蘋果 /h2
div 蘋果是撒? /div
/article
article
h2 桔子 /h2
div 桔子是撒? /div
/article
/section
!-- article可以看成是一種特殊種類的section元素,它比section更強(qiáng)調(diào)獨(dú)立性 --
article
h1 中國人物 /h1
p 三國、兩晉、南北朝 /p
section
h2 三國 /h3
p 猛將猛將猛將猛將 /p
/section
section
h2 兩晉 /h3
p 猛將猛將猛將猛將 /p
/section
/article

nav
nav 標(biāo)簽,從語義化上看為導(dǎo)航,其用法如下:通常作為頁面導(dǎo)航的鏈接組
側(cè)邊欄導(dǎo)航
使用頻率高。
復(fù)制代碼代碼如下:
nav
ul
li a href="" 菜單1 /a /li
li a href="" 菜單2 /a /li
li a href="" 菜單3 /a /li
/ul
/nav

aside
aside 標(biāo)簽,從語義化上看為在旁邊、側(cè)邊,其用法如下:在 article 標(biāo)簽中使用時(shí),作為主要內(nèi)容的附屬信息部分,如有關(guān)的參考資料、名詞解釋等。
在 article 標(biāo)簽外使用時(shí),作為頁面或者站點(diǎn)全局的附屬信息部分,如側(cè)邊欄、博客的友情鏈接部分、廣告區(qū)域等。
使用頻率低。
復(fù)制代碼代碼如下:
!-- 在article標(biāo)簽外使用時(shí) --
article
h1 馬云是誰 /h1
p 馬云,男,1964年10月15日出生于浙江省杭州市,中國著名企業(yè)家,阿里巴巴集團(tuán)、淘寶網(wǎng)、支付寶創(chuàng)始人.......... /p
aside
h1 參考資料 /h1
p 百度網(wǎng)、維基百科... /p
/aside
/article /p p !-- 在article標(biāo)簽內(nèi)使用時(shí) --
aside
nav
ul
li a href="" 老趙的博客 /a /li
li a href="" 鬼哥的博客 /a /li
li a href="" 彪叔的博客 /a /li
/ul
/nav
/aside

time
time 標(biāo)簽,從語義化上看為時(shí)間,其用法如下:代表 24 小時(shí)中的某個(gè)時(shí)刻或某個(gè)日期
表示時(shí)刻時(shí)允許帶時(shí)間差
可定義很多格式的日期和時(shí)間
使用頻率低。

復(fù)制代碼代碼如下:
time datetime="2013-3-6" 2014年3月6日 /time
!-- datetime屬性中日期與時(shí)間之間要用 T 文字分隔, T 表示時(shí)間 --
time datetime="2013-3-6T20:00" 2014年3月6日20:00 /time
!-- 時(shí)間加上 Z 表示給機(jī)器編碼時(shí)使用UTC標(biāo)準(zhǔn)時(shí)間 --
time datetime="2013-3-6T20:00Z" 2014年3月6日20:00 /time
二、非主體結(jié)構(gòu)元素
header
header 標(biāo)簽,從語義化上看為文檔的頁眉,其用法如下:一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素
通常放置在整個(gè)頁面或者頁面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題
一個(gè)網(wǎng)頁內(nèi)并沒有限制 header 標(biāo)簽的個(gè)數(shù)
使用頻率極高,比較容易理解。
復(fù)制代碼代碼如下:
header
h1 我是大頭 /h1
/header
article
header
h1 我是脖子 /h1
/header
p 我是身體 /p
/article

hgroup
hgroup 標(biāo)簽,從語義化上看為標(biāo)題組,其用法如下:作為 header 標(biāo)簽的子元素
一個(gè)內(nèi)容模塊中包括了主標(biāo)題和至少一個(gè)子標(biāo)題才使用 hgroup
通常會(huì)將 h1~h6 元素進(jìn)行分組
使用頻率高。
復(fù)制代碼代碼如下:
article
header
hgrounp
h1 我是劉備 /h1
h2 我是關(guān)羽 /h2
h3 我是張飛 /h3
/hgrounp
/header
p 呂布驚呆了 /p
/article

footer
footer 標(biāo)簽,從語義化上看為文檔的腳注,其用法如下:一個(gè)內(nèi)容塊區(qū)的腳注
通常內(nèi)容為聯(lián)系信息、相關(guān)閱讀、版權(quán)信息等
使用頻率高,比較容易理解。
復(fù)制代碼代碼如下:
article
p 呂布驚呆了 /p
footer
ul
li 關(guān)于三國 /li
li 地圖信息 /li
li 游戲攻略 /li
/ul
/footer
/article

address
address 標(biāo)簽,從語義化上看為地址,其用法如下:用于文檔中呈現(xiàn)的聯(lián)系信息
通常內(nèi)容為作者、網(wǎng)站鏈接、電子郵箱、地址、電話號(hào)碼等
使用頻率低。

復(fù)制代碼代碼如下:
address
a href="" 作者:張三豐 /a
a href="" 地址:武當(dāng)山 /a
a href="" 聯(lián)系方式:1247 /a
/address
希望本文對大家在 html5 結(jié)構(gòu)標(biāo)簽上的運(yùn)用有一定的指導(dǎo),如果發(fā)現(xiàn)內(nèi)容有錯(cuò)誤的地方,歡迎大家指正~html教程

鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請第一時(shí)間聯(lián)系我們修改或刪除,多謝。

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 喜德县| 道真| 揭东县| 万源市| 保靖县| 太白县| 金山区| 上饶市| 化州市| 天长市| 铁岭县| 黄浦区| 保康县| 兴城市| 新源县| 张家界市| 锡林浩特市| 开江县| 莎车县| 自贡市| 土默特右旗| 鄯善县| 肥东县| 雅安市| 六盘水市| 达拉特旗| 龙州县| 保德县| 双城市| 九台市| 栖霞市| 玉环县| 宁波市| 凉城县| 西充县| 金山区| 河曲县| 博客| 游戏| 博客| 乐至县|