- 劍指大前端全棧工程師（全2冊）
- 賈志杰 史廣 趙東彥編著
- 2259字
- 2024-12-28 11:22:30
2.2 HTML基本結構
HTML文檔一般應包含兩部分，即頭部區域和主體區域。HTML文檔的基本結構由3個標簽負責組織：<html>、<head>、<body>，其中<html>標簽標識HTML文檔，<head>標簽標識頭部區域，而<body>標簽標識主體區域。
HTML的基本結構如下：
HTML5元素的內容一般是以起始標簽<元素名>開始，以結束標簽</元素名>終止，如<title>網頁標題</title>。瀏覽器解析標簽中的內容后在網頁上展示給用戶，使用VS Code開發工具，根據基本結構編寫第1個頁面，如例2-1所示。
【例2-1】 HTML5第1個頁面
其中，<title>標簽包含的內容顯示在標題欄中，而<body>標簽包含的內容顯示在網頁中，頁面顯示效果如圖2-2所示。
圖2-2 第1個HTML5頁面
2.2.1 HTML骨架
1．文檔類型聲明<！DOCTYPE>
DOCTYPE文檔聲明，它是Document Type Definition的英文縮寫，意思是文檔類型定義，在HTML文檔中，用來指定頁面所使用的HTML（或者XHTML）的版本。要想制作符合標準的頁面，一個必不可少的關鍵組成部分就是DOCTYPE聲明。只有確定了一個正確的DOCTYPE，HTML里的標識和CSS才能正常生效。它一般定義在頁面的第1行，在<html>標簽之前。
在HTML4中，文檔類型的聲明方法如下：
在HTML5中對文檔類型的聲明進行了簡化，聲明方法如下：
2．根標簽<html>
<html>用以聲明這是HTML文件，讓瀏覽器認出并正確處理此HTML文件，所有的HTML文件都要被<html>開始標簽和結束標簽</html>包裹，在它之間包含了兩個重要的元素標簽：<head>頭部標簽和<body>主體標簽。
3．頭標簽<head>
<head>標簽中的內容不會顯示在網頁的頁面中。<head>一般包含<title>和<meta>標簽，用于聲明頁面標題、字符集和關鍵字等。
1）標題標簽<title>
<title>用于定義文檔的標題，其內容顯示在瀏覽器窗口的標題欄或狀態欄上。<title>標簽是<head>標簽中唯一必須包含的，而且在<title>標簽內容中寫和網頁相關的關鍵詞有利于SEO優化。
2）元數據標簽<meta>
<meta>標簽可提供有關頁面的元信息（meta-information），例如針對搜索引擎和更新頻度的描述和關鍵詞。通常<meta>標簽用于定義網頁的字符集、關鍵詞、描述、作者等信息。
（1）字符集聲明，charset屬性為HTML5新增的屬性，用于聲明字符編碼。在理論上，可以使用任何字符編碼，但并不是所有瀏覽器都能夠理解它們。某種字符編碼使用的范圍越廣，瀏覽器就越有可能理解它，目前使用最廣的字符集是UTF-8，因為UTF-8是國際通用字庫。以后我們統統使用UTF-8字符集，這樣就會避免出現字符集不統一而引起亂碼的情況了。
以UTF-8字符集為例，下面兩種字符集聲明寫法效果一樣：
或
（2）關鍵詞聲明，keywords用來告訴搜索引擎網頁的關鍵字是什么，用法如下：
（3）頁面描述，description用來告訴搜索引擎網站主要內容的描述，用法如下：
（4）頁面作者，標注網頁的作者，用法如下：
（5）刷新頁面，以每30s刷新一次頁面為例，用法如下：
4．主體標簽<body>
主體<body>標簽是定義文檔的主體，其設置的內容是讀者實際看到的網頁信息。在主體<body>標簽中可以放置網頁中所有的內容，例如文本、超鏈接、圖像、表格、列表等。
設置<body>標簽屬性可以改變頁面的顯示效果，<body>標簽屬性、取值及描述如表2-1所示。
表2-1 <body>標簽屬性、值及描述
body屬性的基本用法，示例代碼如下：
2.2.2 基本語法
HTML文檔結構主要由若干標簽（標記）構成，HTML5根據Web標準，重新定義了一套在HTML4基礎上修改而來的語法，以便各個瀏覽器在運行HTML時能夠符合通用標準。
1．內容類型
HTML5文檔的擴展名為.html或.htm，內容類型為text/html。
2．化繁為簡
HTML5對比之前的XHTML做了大量的簡化工作，具體如下：
（1）以瀏覽器的原生能力代替復雜的JavaScript。
（2）DOCTYPE被簡化到極致。
（3）字符集聲明被簡化。
（4）簡單強大的API。
3．標簽類型
1）單標簽
基本語法如下：
常用的單標簽有<br>、<hr>、<link>、<input/>等。
2）雙（成對）標簽
基本語法如下：
常用的雙標簽有<html></html>、<body></body>、<strong></strong>、<div></div>等。
4．標簽省略
在HTML5中，元素的標簽分為3種類型：可以省略全部標簽的元素、可以省略結束標簽的元素、不允許寫結束標簽的元素。下面介紹這3種類型各包括哪些標簽。
（1）可以省略全部標簽的元素：html、head、body、colgroup、tbody。
示例代碼如下：
注意：即使標記被省略了，該元素還是以隱式的方式存在。在瀏覽器查看源碼時，會發現被省略的標簽會被補上。
（2）可以省略結束標簽的元素：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
示例代碼如下：
（3）不允許寫結束標簽的元素：area、base、br、col、embed、hr、img、input、keygen、link、meta、wbr、source。
不允許寫結束標簽的元素是指不允許使用開始標簽與結束標簽將元素括起來的形式，只允許使用<元素/>的形式進行書寫。
錯誤的書寫方式，示例代碼如下：
正確的書寫方式，示例代碼如下：
5．屬性值
屬性為HTML元素提供附加信息。HTML標簽可以擁有屬性，屬性提供了有關HTML元素的更多的信息，如圖2-3所示。
圖2-3 屬性
HTML屬性書寫注意事項：
（1）屬性必須在開始標簽里定義，并且與首標簽名稱之間至少留一個空格。
（2）屬性總是以鍵值對的形式出現，例如align="center"。
（3）一個元素的屬性可能不止一個，多個屬性之間用空格隔開。
（4）多個屬性之間不區分先后順序。
（5）屬性和屬性值對大小寫不敏感。
屬性值兩邊既可以使用雙引號，也可以使用單引號，當屬性值不包括空字符串、<、>、=、單引號、雙引號等字符時，屬性值兩邊的引號可以省略。
下面寫法都是合法的：
6．標簽嵌套
在HTML中有大量的標簽，大部分標簽是可以互相嵌套的。標簽必須成對嵌套，不能交叉嵌套，如圖2-4所示。
圖2-4 標簽嵌套
2.2.3 注釋
經常需要在一些代碼旁做一些HTML注釋，這樣既方便項目組的其他程序員了解所寫的代碼，也方便以后自己對代碼的理解與修改等。
對關鍵代碼的注釋是一個良好的習慣，可以提高代碼的可讀性。在開發網站或者功能模塊時，代碼的注釋尤其重要。因為網頁的代碼量往往是幾百甚至上千行，如果不對關鍵的代碼進行注釋，對于后期修改與維護會增加很大的成本，甚至過段時間后看不懂自己當時寫的代碼。
注釋行的寫法如下：
注釋只在編輯文本情況下可見，在瀏覽器展示頁面時并不會顯示，如例2-2所示。
【例2-2】 注釋應用實例
頁面顯示結果為“這是內容-html注釋常識”。
注意：注釋不可以互相嵌套。