一文詳解HTML標籤與屬性（主體結構淺析）-html教學-PHP中文網

這篇文章帶大家了解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 中的一文詳解HTML標籤與屬性（主體結構淺析）標籤就有src 和alt 兩個專用屬性，標籤也有href 和target 兩個專用屬性，如下例所示：

<img src="./logo.png" alt="PHP中文网Logo" width="100"    style="max-width:90%">
<a href="http://c.biancheng.net/" target="_blank">PHP中文网</a>