一文詳解HTML標籤與屬性（主體結構淺析）
- 青灯夜游原創
- 2022-08-02 18:47:242555瀏覽
這篇文章帶大家了解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>-
最頂部宣告
<br>宣告是文件的第一成份，位於文件的最頂端。
該標籤就是告訴瀏覽器所使用的 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 中的 標籤就有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>
對程式碼的說明：
標籤中的src 屬性用來定義圖像的路徑，alt 屬性用來定義圖像的描述訊息，當圖像出現異常無法正常顯示時就會顯示alt 中的資訊。
自訂屬性
除了自帶的屬性，HTML 也允許我們自訂屬性，這些屬性雖然可以被瀏覽器識別，但不會增加什麼特殊效果，我們需要藉助CSS 和JavaScript 處理自訂屬性，為HTML 標籤新增指定樣式或行為。
data-* 屬性用於儲存私有頁面後應用的自訂數據，是 HTML5 新增的屬性。
<element data-*="somevalue">
somevalue：指定屬性值 (一個字串)
data-* 属性可以在所有的 HTML 元素中嵌入数据。
自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。
data-* 属性由以下两部分组成：
属性名不要包含大写字母，在 data- 后必须至少有一个字符。
属性值，该属性值可以是任何字符串
注意： 自定义属性前缀 "data-" 会被客户端忽略。
利用dataset可以获取data-属性构造的对象，该方法目前只能在Chrome 、Opera等部分浏览器中实现，其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。
只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。
<div>在标签里设置H5新增的自定义属性</div>
这个data属性还可以应用在CSS中，前提是你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）：
<div>data属性应用于CSS中</div>
#myDiv{
position: ralative;
}
#myDiv:hover:after{
position: absolute;
top: 0px;
left: 0px;
content: attr(data-attribute);
color: red;
}
如何获取data属性的值？
<div>在标签里设置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>在标签里设置多个自定义属性</div>
1、使用循环遍历
var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;
for (i = 0, j = attrs.length; i <p>2、使用<code>dataset</code>属性</p><pre class="brush:php;toolbar:false">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="max-width:90%" alt="PHP中文网LOGO">
<div style="padding:10px;border:2px solid #999;text-align:center;">PHP中文网</div>
</body>
</html>运行结果如下图所示：
标签中常用的标签
1、
以上是一文詳解HTML標籤與屬性（主體結構淺析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！