一文詳解HTML標籤和屬性（主體結構淺析）

本篇文章帶大家瞭解一下HTML標籤和屬性，聊聊HTML檔案的主體結構與相關標籤，希望對大家有所幫助！

HTML的主體結構

HTML 頁面的基本結構如下所示，其中包含了各種建立網頁所需的標籤（例如 doctype、html、head 和 body 等）。

<!--這是html的註釋資訊-->

<!DOCTYPE html> <!--這是DOCTYPE宣告-->

<html> <!--這是根-->

<head> <!--這是頭-->

    <meta charset = "UTF-8"> <!--  描述性標籤  -->
    
     <title>Hello</title> <!--標題列-->
</head>

    <body> <!--網頁體-->
    
    <!--這裡的內容顯示到網頁上-->
    這是我的第一個HTML頁面
    
    </body>
</html>

最頂部宣告<!DOCTYPE html>
- 宣告是檔案的第一成份，位於檔案的最頂部。
- 該標籤就是告訴瀏覽器所使用的 HTML 規範。
以<html>開始，以</html>結束，中間包含頭部標籤及主體標籤

HTML 標籤的語法格式

一般情況下，一個 HTML 標籤由開始標籤、屬性、內容和結束標籤組成，標籤的名稱不區分大小寫，但大多數屬性的值需要區分大小寫，如下所示：

	  屬性
	   ↓
<div class="foo">PHP中文網</div>
 ↑            ↑           ↑
開始標籤        內容   結束標籤

除了 class 屬性外，開始標籤中還可以包含其它屬性資訊，比如 id、title 等，這些我們會在後面進行講解。

注意，雖然 HTML 標籤在語法上不區分大小寫，但是為了規範和專業，強烈建議在定義標籤時一律採用小寫。

當使用瀏覽器開啟我們編寫的 HTML 檔案時，瀏覽器會從上到下依次讀取檔案中的內容，並根據 HTML 標籤和屬性將標籤中的內容呈現在瀏覽器中。

一個 HTML 檔案中必須具有一些基本的標籤，以便瀏覽器區分普通文字和 HTML 檔案。您可以根據想要實現的效果使用任意數量的標籤，但有以下幾點需要注意：

所有 HTML 標籤都必須放在尖括號< >內；
HTML 中不同的標籤可以實現不同的效果；
如果使用了某個標籤，則必須使用對應的結束標籤來結尾（自閉和標籤除外）。

自閉和標籤

有一些 HTML 標籤沒有單獨的結束標籤，而是在開始標籤中新增/來進行閉合，這種標籤稱為自閉和標籤。請看下面的例子：

<img src="./logo.png" alt="C語言中文網Logo" />  <!-- 影象 -->
<hr />  <!-- 分割線 -->
<br />  <!-- 文字換行 -->
<input type="text" placeholder="請輸入內容" />  <!-- 文字輸入框 -->

自閉和標籤不用包圍內容，所以不需要單獨的結束標籤。只有少部分 HTML 標籤是自閉和的。

表示 HTML 註釋，用來對 HTML 程式碼進行說明，瀏覽器會忽略註釋內容，所以使用者在網頁中看不到註釋

HTML屬性的概念和使用

什麼是屬性

屬性可以為 HTML 標籤提供一些額外資訊，或者對 HTML 標籤進行修飾。屬性需要新增在開始標籤中，語法格式為：

attr="value"

attr 表示屬性名，value 表示屬性值。屬性值必須使用雙引號""或者單引號''包圍。

注意，雖然雙引號和單引號都可以包圍屬性值，但是為了規範和專業，請儘量使用雙引號。

一個標籤可以沒有屬性，也可以有一個或者多個屬性。

使用 HTML 屬性的例子：

<p id="user-info" class="color-red">
歡迎 <font color="red" size="3">Tom</font> 來到PHP中文網。
<p>

專用屬性

HTML 屬性有很多，大體可以分為兩類：

有些屬性適用於大部分或者所有 HTML 標籤，我們將這些屬性稱為通用屬性；

有些屬性只適用於一個或者幾個特定的 HTML 標籤，我們將這些屬性稱為專用屬性。

HTML 中的 <img> 標籤就有 src 和 alt 兩個專用屬性，<a> 標籤也有 href 和 target 兩個專用屬性，如下例所示：

<img src="./logo.png" alt="PHP中文網Logo" width="100" height="50">
<a href="http://c.biancheng.net/" target="_blank">PHP中文網</a>

對程式碼的說明：

<img> 標籤中的 src 屬性用來定義影象的路徑，alt 屬性用來定義影象的描述資訊，當影象出現異常無法正常顯示時就會顯示 alt 中的資訊。
<a> 標籤的 href 屬性用來定義連結的地址，target 屬性用來定義新頁面在瀏覽器中的開啟方式。

自定義屬性

除了自帶的屬性，HTML 也允許我們自定義屬性，這些屬性雖然可以被瀏覽器識別，但是並不會新增什麼特殊效果，我們需要藉助 CSS 和 JavaScript 處理自定義屬性，為 HTML 標籤新增指定樣式或者行為。

data-* 屬性用於儲存私有頁面後應用的自定義資料，是 HTML5 新增的屬性。

<element data-*="somevalue">

somevalue：指定屬性值 (一個字串)

data-* 屬性可以在所有的 HTML 元素中嵌入資料。

自定義的資料可以讓頁面擁有更好的互動體驗（不需要使用 Ajax 或去伺服器端查詢資料）。

data-* 屬性由以下兩部分組成：

屬性名不要包含大寫字母，在 data- 後必須至少有一個字元。
屬性值，該屬性值可以是任何字串

注意：自定義屬性字首 "data-" 會被使用者端忽略。

利用dataset可以獲取data-屬性構造的物件，該方法目前只能在Chrome 、Opera等部分瀏覽器中實現，其他瀏覽器如需獲取其屬性值需要使用getAttribute和setAttribute來操作。

只要在標籤裡面以」data-」為字首定義我們的自定義屬性就可以用來進行一些資料的存放。

<div id="myDiv" data-attribute="value">在標籤裡設定H5新增的自定義屬性</div>

這個data屬性還可以應用在CSS中，前提是你的瀏覽器支援after偽類，以及content的attr屬性（低版本的IE不支援）：

<div id="myDiv" data-attribute="屬性值">data屬性應用於CSS中</div>

#myDiv{
  position: ralative;
}
 
#myDiv:hover:after{
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-attribute);
  color: red;
}

如何獲取data屬性的值？

<div id="myDiv" data-attribute="value">在標籤裡設定H5新增的自定義屬性</div>

1、使用getAttribute來獲取

var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");

2、使用Html5自定義屬性物件Dataset來獲取

var myDiv = document.getElementById("myDiv");
 
var theValue = myDiv.dataset.attribute;

注意：帶連字元連線的名稱在使用的時候需要命名駝峰化，即大小寫組合書寫，這與應用元素的style物件類似，dom.style.borderColor。例如data屬性為data-other-attribute，則我們要獲取相應的值可以使用：myp.dataset.otherAttribute

如果Html元素定義了多個自定義屬性，如何獲取？

<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在標籤裡設定多個自定義屬性</div>

1、使用迴圈遍歷

 var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;  
for (i = 0, j = attrs.length; i < j; i++) {
  if(attrs[i].name.substring(0, 5) == 'data-') {
    expense[attrs[i].name.substring(5)] = attrs[i].value;
  }
}

2、使用dataset屬性

var expense = document.getElementById('myDiv').dataset;

注：dataset並不是典型意義上的JavaScript物件，而是個DOMStringMap物件，DOMStringMap是HTML5一種新的含有多個名-值對的互動變數

1）、讓所有的自定義的屬性值塞到一個陣列中

var chartInput = [];
 
for (var item in expense) {
  chartInput.push(expense[item]);
}

2）、刪掉一個data屬性

delete myDiv.dataset.attribute;

3、增加一個data屬性

myDiv.dataset.attribute4 = 'value4';

dataset的相容性處理

如果瀏覽器不支援dataset，有必要做一下相容處理：

if(myDiv.dataset) {
  myDiv.dataset.attribute = "valueXX"; // 設定自定義屬性
  var theValue = myDiv.dataset.attribute; // 獲取自定義屬性
} else {
  myDiv.setAttribute("data-attribute", "valueXX"); // 設定自定義屬性
  var theValue = myDiv.getAttribute("data-attribute"); // 獲取自定義屬性
}

結語：

使用dataset操作data 要比使用getAttribute速度稍微慢些，雖然使用dataset不能提高程式碼的效能，但是對於簡潔程式碼，提高程式碼的可讀性和可維護性是很有幫助的。

通用屬性介紹

HTML 標籤中有一些通用的屬性，如 id、title、class、style 等，這些通用屬性可以在大多數 HTML 標籤中使用，下面來簡單介紹一下它們的用法。

1) id

id 屬性用來賦予某個標籤唯一的名稱（識別符號），當我們使用 CSS 或者 JavaScript 來操作這個標籤時，就可以通過 id 屬性來找到這個標籤。

為標籤定義 id 屬性可以給我們提供很多便利，比如：

如果標籤中帶有 id 屬性作為唯一識別符號，通過 id 屬性可以很方便的定位到該標籤；

如果 HTML 檔案中包含多個同名的標籤，利用 id 屬性的唯一性，可以很方便的區分它們。

注意：在一個 HTML 檔案中 id 屬性的值必須是唯一的。

範例程式碼如下所示：

<input type="text" id="username" />
<div id="content">PHP中文網</div>
<p id="url">https://www.php.cn/</p>

2) class

與 id 屬性類似，class 屬性也可以為標籤定義名稱（識別符號），不同的是 class 屬性在整個 HTML 檔案中不必是唯一的，我們可以為多個標籤定義相同的 class 屬性值。另外，還可以為一個 HTML 標籤定義多個 class 屬性值，如下所示：

<div class="className1 className2 className3"></div>
<p>PHP中文網</p>
<div>https://www.php.cn/</div>

當使用 CSS 或者 JavaScript 來操作 HTML 標籤時，同樣可以使用 class 屬性來找到對應的 HTML 標籤。由於 class 屬性不是唯一的，所以通過 CSS 或 JavaScript 對 HTML 標籤的操作會應用於所有具有同名 class 屬性的標籤中。

3) title

title 屬性用來對標籤內容進行描述說明，當滑鼠移動到該標籤上方時會顯示出 title 屬性的值，如下例所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示檔案</title>
</head>
<body>
    <a href="https://www.php.cn/" title="HTML教學">HTML教學</a>
</body>
</html>

執行結果如下圖所示：

將滑鼠在連結處懸停片刻才能看到提示框。

4) style

使用 style 屬性我們可以在 HTML 標籤內部為標籤定義 CSS 樣式，例如設定文字的顏色、字型等，如下例所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示檔案</title>
</head>
<body>
    <p style="color:red;">https://www.php.cn/</p>
    <img src="./logo.png" style="height:50px;" alt="PHP中文網LOGO">
    <div style="padding:10px;border:2px solid #999;text-align:center;">PHP中文網</div>
</body>
</html>

執行結果如下圖所示：

<head>標籤中常用的標籤

1、<title> 標籤

<title> 標籤用來定義 HTML 檔案的標題，只有包含 <title> 標籤的檔案才算是一個有效的 HTML 檔案。另外，一個 HTML 檔案中僅允許存在一個 <title> 標籤，並且 <title> 標籤必須放置在 <head> 標籤中。

2、<base> 標籤

<base> 標籤用於為頁面中所有相對連結指定一個基本連結，當您設定了基本連結後，當前頁面中的所有相對連結都會使用這個基本連結作為字首，如下例所示：

3、<link> 標籤

<link rel="stylesheet" href="common.css">

4、<style>標籤

使用 <style> 標籤可以在 HTML 檔案中嵌入 CSS 樣式，需要注意的是在 <style> 標籤中定義的樣式僅對當前 HTML 檔案有效。範例程式碼如下：

<style>
        body { background-color: YellowGreen; }
        h1 { color: red; }
</style>

5、<meta> 標籤

6、<script> 標籤

<script>
        document.write("PHP中文網")
</script>

7、<noscript> 標籤

當使用者的瀏覽器不支援 JavaScript 指令碼或者禁用 JavaScript 指令碼時，可以在 <noscript> 標籤中定義一些內容來替代不能執行的 JavaScript 指令碼或者給使用者一些提示。除了 <script> 標籤外，在 <noscript> 標籤中可以包含任何 HTML 元素

HTML註釋標籤

在 HTML 中您可以使用在程式碼中新增註釋，之間的所有內容都會被視為註釋。範例程式碼如下：

<!DOCTYPE html>
<html>
<!-- head 開始 -->
<head>
    <meta charset="UTF-8">  <!-- 當前檔案採用UTF-8編碼 -->
    <title>HTML註釋的寫法</title>
</head>
<!-- head 結束 -->
<!-- body 開始 -->
<body>
    <!-- 一段文字 -->
    <p>歡迎來到PHP中文網</p>
</body>
<!-- body 結束 -->
</html>

註釋可以出現在 HTML 檔案的任意位置，包括檔案開頭、檔案末尾、檔案中間、標籤外部、標籤內容中等。