詳解HTML的整體結(jié)構(gòu)

更新時間：2021-03-22 17:55:22 來源：動力節(jié)點瀏覽1337次

HTML文檔實際上是由各種 HTML 元素組成的，如 html（HTML 文檔）元素、head（頭）元素、body（主體）元素、title（題目）元素和 p（段落）元素等，這些元素都采用了尖括號組成的標(biāo)簽形式。實際上，HTML的整體結(jié)構(gòu)包括標(biāo)簽、元素和屬性，下面我們來一一介紹其結(jié)構(gòu)和功能。

1、標(biāo)簽

HTML 標(biāo)簽是由一對尖括號 < > 及標(biāo)簽名稱組成的。標(biāo)簽分為「起始標(biāo)簽」和「結(jié)束標(biāo)簽」兩種，兩者的標(biāo)簽名稱是相同的，只是結(jié)束標(biāo)簽多了一個斜杠「/」。如圖 1-5 所示，<b> 為起始標(biāo)簽，</b> 為結(jié)束標(biāo)簽，它是英文 bold（粗體）的縮寫。標(biāo)簽名稱對大小寫是不敏感的，即 <html>…</html> 和 <HTML>…</HTML> 的效果是一樣的，但是為了便于程序的閱讀和維護，萬維網(wǎng)聯(lián)盟推薦使用小寫字母書寫標(biāo)簽。

圖 1-5 HTML 標(biāo)簽

2、元素

HTML 元素是組成 HTML 文檔的最基本的部件，它是用標(biāo)簽來表現(xiàn)的，一般情況下，「起始標(biāo)簽」表示元素的開始，「結(jié)束標(biāo)簽」表示元素的結(jié)束。

HTML 元素分為「有內(nèi)容的元素」和「空元素」兩種。「有內(nèi)容的元素」是由起始標(biāo)簽、結(jié)束標(biāo)簽以及兩者之間的元素內(nèi)容組成的，其中，元素內(nèi)容既可以是需要顯示在網(wǎng)頁中的文字內(nèi)容，也可以是其他元素。例如，示例 1-1 中起始標(biāo)簽 <b> 與結(jié)束標(biāo)簽 </b> 組成的元素的內(nèi)容是文字「第一個」；而起始標(biāo)簽 <head> 與結(jié)束標(biāo)簽 </head> 組成的元素的內(nèi)容是另外一個元素—title 元素。「空元素」則只有起始標(biāo)簽，而沒有結(jié)束標(biāo)簽和元素內(nèi)容，如示例 1-1 中的 hr（分隔線）元素就是空元素。

HTML 元素還可以分為「塊元素」和「行元素」。「塊元素」在網(wǎng)頁中的效果是該元素中的內(nèi)容相對于其前后元素的內(nèi)容另起一行，圖 1-6 左側(cè)所示的 p 元素就是塊元素，圖 1-6 右側(cè)所示為 p 元素的網(wǎng)頁顯示效果。而「行元素」的網(wǎng)頁效果則是，行元素中的內(nèi)容與其前后元素的內(nèi)容在同一行中，圖 1-7 左側(cè)所示的 a 元素就是行元素，圖 1-7 右側(cè)所示為 a 元素的網(wǎng)頁顯示效果。

圖 1-6 塊元素程序及其網(wǎng)頁顯示效果

圖 1-7 行元素程序及其網(wǎng)頁顯示效果

3、屬性

在元素的起始標(biāo)簽中，還可以包含「屬性」，用來表示元素的其他特性，它的格式如下。

< 標(biāo)簽名稱屬性名 =「屬性值」>

例如，下述代碼中 img（圖像）元素中的 src=「my_picture.jpg」就是 img 元素的屬性，表示「該圖像元素的圖像源文件是 my_picture.jpg」。

像標(biāo)簽名稱一樣，屬性名對大小寫也是不敏感的，但是為了便于程序的閱讀和維護，編程時建議使用小寫字母。另外值得注意的是，雖然 HTML5 并沒有要求屬性值一定要有雙引號，但是，為了養(yǎng)成良好的編程習(xí)慣，還是應(yīng)該統(tǒng)一地在屬性值外面加上雙引號（英文輸入模式下的雙引號）。

網(wǎng)頁的本質(zhì)就是超文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強大的網(wǎng)頁。因此，想在前端開發(fā)中占得一席之地，HTML技術(shù)的掌握是至關(guān)重要的一環(huán)，快來觀看本站的HTML教程，為了成為一名前端開發(fā)大師而努力學(xué)習(xí)吧！

HTML教程