HTML文檔的基本骨架

這篇博客是對(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)指正。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,143評(píng)論 1 92
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,554評(píng)論 19 139
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說(shuō)明:指定了 HTML 文檔遵循的文檔類(lèi)型定義(D...
    米塔塔閱讀 3,530評(píng)論 1 41
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,875評(píng)論 32 459
  • 今天正是那樣的日子。 2000年1月1日,城市中心車(chē)水馬龍,熙熙攘攘的人潮涌動(dòng),變換的腳步與閃爍的霓虹,諾大...
    時(shí)蘿啊閱讀 537評(píng)論 2 4

友情鏈接更多精彩內(nèi)容