這篇博客是對(duì)html基本骨架標(biāo)簽的初步了解,如需深入了解各標(biāo)簽的詳細(xì)使用,請(qǐng)?jiān)?a target="_blank" rel="nofollow">MDN(國(guó)外網(wǎng)站)查找具體的細(xì)節(jié),下面開(kāi)始進(jìn)入正題
html頁(yè)面最基本的組成
由于html5的文檔類(lèi)型聲明是向下兼容的,所以現(xiàn)在基本都是使用html5的文檔類(lèi)型聲明。
下面是一個(gè)html頁(yè)面最基本的三個(gè)標(biāo)簽
<!DOCTYPE html>? ? ? ?這個(gè)聲明是告訴瀏覽器,我的html文檔類(lèi)型是什么
<html>
????<head></head>
? ? <body></body>
</html>
1.<html></html>
一個(gè)html頁(yè)面的根元素,所有其他元素都必須是他的子元素
2.<head></head>
包含html頁(yè)面的通用信息,包括如文檔標(biāo)題、文檔字符編碼類(lèi)型、文檔的引入的腳本和樣式等
3.<body></body>
頁(yè)面所有的展示的內(nèi)容都將放入到這個(gè)標(biāo)簽中
head中常用的標(biāo)簽
4.<title></title>
此標(biāo)簽用于定義文檔的標(biāo)題,只可以包含文本(如果寫(xiě)了標(biāo)簽,則標(biāo)簽會(huì)被當(dāng)作字符顯示)
5.<meta>
此標(biāo)簽通過(guò)標(biāo)簽中的屬性來(lái)聲明文檔的相關(guān)信息
例如:
<meta charset="utf-8">? ? ? 這個(gè)聲明了我的html文檔是使用utf-8編碼
6.<link>
此標(biāo)簽用來(lái)引入一個(gè)外部的CSS樣式文件,通過(guò)href屬性來(lái)指定樣式文件的地址
7.<script></script>
此標(biāo)簽用于引入一個(gè)外部的JS腳本文件,通過(guò)src屬性來(lái)指定腳本文件的地址,標(biāo)簽中間寫(xiě)的JS代碼將不會(huì)被執(zhí)行
如果要想在頁(yè)面中直接寫(xiě)CSS樣式和腳本代碼呢,那么在?<style></style> 之間寫(xiě)入CSS即可,在 <script></script> 寫(xiě)入你的JS代碼即可
body中常用的區(qū)塊劃分標(biāo)簽
html5出來(lái)之前,區(qū)塊劃分都是使用 <div></div> 標(biāo)簽設(shè)置一個(gè)class來(lái)劃分一個(gè)html頁(yè)面的各個(gè)區(qū)塊,有了html5之后,就有了更加語(yǔ)義化的標(biāo)簽
8.<header></header>
此標(biāo)簽表示一個(gè)頁(yè)面的頭部區(qū)塊
9.<footer></footer>
此標(biāo)簽表示一個(gè)頁(yè)面的底部區(qū)塊
10.<nav></nav>
此標(biāo)簽表示一個(gè)頁(yè)面導(dǎo)航區(qū)塊
11.<article></article>
此標(biāo)簽一般表示文章、博客內(nèi)容等的獨(dú)立內(nèi)容區(qū)塊
12.<aside></aside>
此標(biāo)簽一般用于和其余部分有聯(lián)系,但被單獨(dú)的拆分出來(lái)而不會(huì)使整體受影響的區(qū)塊,通常用于表示側(cè)邊欄
13.<section></section>
頁(yè)面除了頭部區(qū)塊和尾部區(qū)塊,其他區(qū)塊一般使用這個(gè)來(lái)表示,并會(huì)搭配h1-h6中的標(biāo)簽來(lái)辨識(shí)每個(gè)區(qū)塊
14.<address></address>
此標(biāo)簽一般表示一個(gè)聯(lián)系信息的區(qū)塊
總結(jié):
一個(gè)html文檔由文檔聲明和一個(gè)根元素html組成,根元素html又由head元素和body元素組成,?head元素中的元素都是用來(lái)表示文檔相關(guān)的通用信息,body元素中的元素則是html頁(yè)面的各個(gè)區(qū)塊。至此,就是本篇博客的全部?jī)?nèi)容。如此博客中有說(shuō)的不對(duì)的地方歡迎批評(píng)指正。