2021-3-22 前端達(dá)人
HTML概念和元素（標(biāo)簽）
什么是HTML
HTML(Hyper Text Markup Language),中文譯名為超文本標(biāo)記語(yǔ)言，它包括一系列標(biāo)簽，通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。簡(jiǎn)單來(lái)說(shuō)，就是我們用它所包含的一系列標(biāo)簽來(lái)定義網(wǎng)頁(yè)的布局結(jié)構(gòu)。
什么是HTML標(biāo)簽（元素）
HTML 文檔是由 HTML 元素定義的，元素由三部分組成：開始標(biāo)簽、元素內(nèi)容、結(jié)束標(biāo)簽。
HTML 元素以開始標(biāo)簽起始，以結(jié)束標(biāo)簽終止，元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容。在VSCode中，使用標(biāo)簽只需要輸入需要使用的標(biāo)簽名，再按Tab鍵，編輯器會(huì)自動(dòng)補(bǔ)齊開始標(biāo)簽和結(jié)束標(biāo)簽的樣式。
溫馨提示：
1.標(biāo)簽的括號(hào)我們用的是尖括號(hào)，這也是HTML代碼和CSS（層疊樣式表）代碼的區(qū)別。
2.HTML 標(biāo)簽對(duì)大小寫不敏感，也就是說(shuō)不管我們用大寫還是小寫瀏覽器都能成功識(shí)別，但是為了統(tǒng)一標(biāo)準(zhǔn)，最好還是寫小寫。
元素的層次結(jié)構(gòu)
大多數(shù) HTML 元素可以包含其他 HTML 元素，形成嵌套結(jié)構(gòu)
如圖，div元素內(nèi)部包含一個(gè)p元素，形成嵌套。在嵌套結(jié)構(gòu)中，p的上一級(jí)元素是div，我們稱div是p的父元素，p是div的子元素，他們之間是父子級(jí)關(guān)系。
若是如圖這樣body、div、p三個(gè)元素嵌套，p的上一級(jí)元素是div，div的上一級(jí)元素是body，那么div是body的子元素，body是div的父元素，body和div是父子關(guān)系。而p和body中間隔了一個(gè)div，那么p就是body的后代元素，body是p的祖先元素，他們是祖先和后代的關(guān)系。
若是兩個(gè)元素?fù)碛幸粋€(gè)共同的父元素，也就是兩個(gè)元素的上一級(jí)元素是同一個(gè)，那么這兩個(gè)元素互為兄弟元素。
需要注意的是，兩個(gè)元素之間不能相互嵌套
p的起始標(biāo)簽在div內(nèi)部，結(jié)束標(biāo)簽卻在div外部，這樣的嵌套結(jié)構(gòu)是錯(cuò)誤的，瀏覽器在解析的時(shí)候會(huì)自動(dòng)在p的起始標(biāo)簽后補(bǔ)上結(jié)束標(biāo)簽，在結(jié)束標(biāo)簽前面補(bǔ)上起始標(biāo)簽。
當(dāng)我們打開瀏覽器檢查器之后就會(huì)發(fā)現(xiàn)div和p的層次結(jié)構(gòu)已經(jīng)發(fā)生了改變。
元素的屬性
屬性是元素的附加信息，比如超鏈鏈接的地址就是元素的附加信息，屬性一般寫在元素的起始標(biāo)簽里。
這是一個(gè)a標(biāo)簽，起始標(biāo)簽的href="。
空元素（自閉合元素）
空元素沒有元素內(nèi)容和結(jié)束標(biāo)簽，只有起始標(biāo)簽?？赵貎?nèi)可以加上屬性，例如插入圖片的img標(biāo)簽
img標(biāo)簽沒有元素內(nèi)容和結(jié)束標(biāo)簽，起始標(biāo)簽內(nèi)有屬性，屬性值是圖片地址。
一般情況下，圖片用空標(biāo)簽，音頻視頻不適用空標(biāo)簽
HTML注釋
注釋是對(duì)代碼功能的描述，一般是寫給開發(fā)者和維護(hù)者看的，瀏覽器并不會(huì)解析注釋里的內(nèi)容。因?yàn)樵诖a編寫的過(guò)程中，代碼繁多雜亂，寫上注釋能幫助我們快速理解當(dāng)前代碼的功能，給維護(hù)提供方便。
VSCode注釋的寫法：在尖括號(hào)內(nèi)寫上 !–和--，中間寫上注釋的內(nèi)容，或者選中想要注釋的行，按下快捷鍵CTRL+？。
語(yǔ)義化標(biāo)簽和div
div是無(wú)語(yǔ)義標(biāo)簽，就是沒有含義的標(biāo)簽。而所謂語(yǔ)義化標(biāo)簽，就是有含義的標(biāo)簽，一看就知道其內(nèi)部含義。我們平時(shí)使用語(yǔ)義化標(biāo)簽和div來(lái)劃分區(qū)域，他們?cè)诠δ苌鲜菦]有任何區(qū)別的，只是語(yǔ)義化標(biāo)簽?zāi)軒椭_發(fā)者和維護(hù)者清晰地理解劃分的每個(gè)區(qū)域都是用來(lái)干嘛的。在HTML5之前都是用div來(lái)劃分區(qū)域，就會(huì)導(dǎo)致整篇代碼全是div，看得人眼花繚亂不易于閱讀，語(yǔ)義化標(biāo)簽的出現(xiàn)就能解決這個(gè)問(wèn)題。
在HTML5中新增了幾個(gè)語(yǔ)義化標(biāo)簽：
header：用于表示頁(yè)面的頭部
nav：表示導(dǎo)航欄
article：表示文章或其他可獨(dú)立存在的頁(yè)面
section：表示一個(gè)整體的一部分主題
aside：表示跟周圍主題相關(guān)的附加信息
footer：表示頁(yè)面或某個(gè)區(qū)域的注腳
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com