站長資訊網(wǎng)本篇文章帶大家了解一下HTML標(biāo)簽和屬性，聊聊HTML文檔的主體結(jié)構(gòu)與相關(guān)標(biāo)簽，希望對大家有所幫助！
HTML的主體結(jié)構(gòu)
HTML 頁面的基本結(jié)構(gòu)如下所示，其中包含了各種創(chuàng)建網(wǎng)頁所需的標(biāo)簽（例如 doctype、html、head 和 body 等）。
<!--這是html的注釋信息--> <!DOCTYPE html> <!--這是DOCTYPE聲明--> <html> <!--這是根--> <head> <!--這是頭--> <meta charset = "UTF-8"> <!-- 描述性標(biāo)簽 --> <title>Hello</title> <!--標(biāo)題欄--> </head> <body> <!--網(wǎng)頁體--> <!--這里的內(nèi)容顯示到網(wǎng)頁上--> 這是我的第一個HTML頁面 </body> </html>
-
最頂部聲明
<!DOCTYPE html>-
聲明是文檔的第一成份，位于文檔的最頂部。
-
該標(biāo)簽就是告訴瀏覽器所使用的 HTML 規(guī)范。
-
-
以
<html>開始，以</html>結(jié)束，中間包含頭部標(biāo)簽及主體標(biāo)簽
HTML 標(biāo)簽的語法格式
一般情況下，一個 HTML 標(biāo)簽由開始標(biāo)簽、屬性、內(nèi)容和結(jié)束標(biāo)簽組成，標(biāo)簽的名稱不區(qū)分大小寫，但大多數(shù)屬性的值需要區(qū)分大小寫，如下所示：
屬性 ↓ <div class="foo">PHP中文網(wǎng)</div> ↑ ↑ ↑ 開始標(biāo)簽 內(nèi)容 結(jié)束標(biāo)簽
除了 class 屬性外，開始標(biāo)簽中還可以包含其它屬性信息，比如 id、title 等，這些我們會在后面進(jìn)行講解。
注意，雖然 HTML 標(biāo)簽在語法上不區(qū)分大小寫，但是為了規(guī)范和專業(yè)，強(qiáng)烈建議在定義標(biāo)簽時一律采用小寫。
當(dāng)使用瀏覽器打開我們編寫的 HTML 文檔時，瀏覽器會從上到下依次讀取文檔中的內(nèi)容，并根據(jù) HTML 標(biāo)簽和屬性將標(biāo)簽中的內(nèi)容呈現(xiàn)在瀏覽器中。
一個 HTML 文檔中必須具有一些基本的標(biāo)簽，以便瀏覽器區(qū)分普通文本和 HTML 文檔。您可以根據(jù)想要實(shí)現(xiàn)的效果使用任意數(shù)量的標(biāo)簽，但有以下幾點(diǎn)需要注意：
-
所有 HTML 標(biāo)簽都必須放在尖括號< >內(nèi)；
-
HTML 中不同的標(biāo)簽可以實(shí)現(xiàn)不同的效果；
-
如果使用了某個標(biāo)簽，則必須使用對應(yīng)的結(jié)束標(biāo)簽來結(jié)尾（自閉和標(biāo)簽除外）。
自閉和標(biāo)簽
有一些 HTML 標(biāo)簽沒有單獨(dú)的結(jié)束標(biāo)簽，而是在開始標(biāo)簽中添加/來進(jìn)行閉合，這種標(biāo)簽稱為自閉和標(biāo)簽。請看下面的例子：
<img src="./logo.png" alt="C語言中文網(wǎng)Logo" /> <!-- 圖像 --> <hr /> <!-- 分割線 --> <br /> <!-- 文本換行 --> <input type="text" placeholder="請輸入內(nèi)容" /> <!-- 文本輸入框 -->
自閉和標(biāo)簽不用包圍內(nèi)容，所以不需要單獨(dú)的結(jié)束標(biāo)簽。只有少部分 HTML 標(biāo)簽是自閉和的。
<!– –> 表示 HTML 注釋，用來對 HTML 代碼進(jìn)行說明，瀏覽器會忽略注釋內(nèi)容，所以用戶在網(wǎng)頁中看不到注釋
HTML屬性的概念和使用
什么是屬性
屬性可以為 HTML 標(biāo)簽提供一些額外信息，或者對 HTML 標(biāo)簽進(jìn)行修飾。屬性需要添加在開始標(biāo)簽中，語法格式為：
attr="value"
attr 表示屬性名，value 表示屬性值。屬性值必須使用雙引號""或者單引號''包圍。
注意，雖然雙引號和單引號都可以包圍屬性值，但是為了規(guī)范和專業(yè)，請盡量使用雙引號。
一個標(biāo)簽可以沒有屬性，也可以有一個或者多個屬性。
使用 HTML 屬性的例子：
<p id="user-info" class="color-red"> 歡迎 <font color="red" size="3">Tom</font> 來到PHP中文網(wǎng)。 <p>
專用屬性
HTML 屬性有很多，大體可以分為兩類：
有些屬性適用于大部分或者所有 HTML 標(biāo)簽，我們將這些屬性稱為通用屬性；
有些屬性只適用于一個或者幾個特定的 HTML 標(biāo)簽，我們將這些屬性稱為專用屬性。
HTML 中的 <img> 標(biāo)簽就有 src 和 alt 兩個專用屬性，<a> 標(biāo)簽也有 href 和 target 兩個專用屬性，如下例所示：
<img src="./logo.png" alt="PHP中文網(wǎng)Logo" width="100" height="50"> <a href="http://c.biancheng.net/" target="_blank">PHP中文網(wǎng)</a>
對代碼的說明：
-
<img> 標(biāo)簽中的 src 屬性用來定義圖像的路徑，alt 屬性用來定義圖像的描述信息，當(dāng)圖像出現(xiàn)異常無法正常顯示時就會顯示 alt 中的信息。
-
<a> 標(biāo)簽的 href 屬性用來定義鏈接的地址，target 屬性用來定義新頁面在瀏覽器中的打開方式。
自定義屬性
除了自帶的屬性，HTML 也允許我們自定義屬性，這些屬性雖然可以被瀏覽器識別，但是并不會添加什么特殊效果，我們需要借助 CSS 和 JavaScript 處理自定義屬性，為 HTML 標(biāo)簽添加指定樣式或者行為。
data-* 屬性用于存儲私有頁面后應(yīng)用的自定義數(shù)據(jù)，是 HTML5 新增的屬性。
<element data-*="somevalue">
-
somevalue：指定屬性值 (一個字符串)
data-* 屬性可以在所有的 HTML 元素中嵌入數(shù)據(jù)。
自定義的數(shù)據(jù)可以讓頁面擁有更好的交互體驗(yàn)（不需要使用 Ajax 或去服務(wù)端查詢數(shù)據(jù)）。
data-* 屬性由以下兩部分組成：
-
屬性名不要包含大寫字母，在 data- 后必須至少有一個字符。
-
屬性值，該屬性值可以是任何字符串
注意： 自定義屬性前綴 "data-" 會被客戶端忽略。
利用dataset可以獲取data-屬性構(gòu)造的對象，該方法目前只能在Chrome 、Opera等部分瀏覽器中實(shí)現(xiàn)，其他瀏覽器如需獲取其屬性值需要使用getAttribute和setAttribute來操作。
只要在標(biāo)簽里面以”data-”為前綴定義我們的自定義屬性就可以用來進(jìn)行一些數(shù)據(jù)的存放。
<div id="myDiv" data-attribute="value">在標(biāo)簽里設(shè)置H5新增的自定義屬性</div>
這個data屬性還可以應(yīng)用在CSS中，前提是你的瀏覽器支持after偽類，以及content的attr屬性（低版本的IE不支持）：
<div id="myDiv" data-attribute="屬性值">data屬性應(yīng)用于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">在標(biāo)簽里設(shè)置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;
注意：帶連字符連接的名稱在使用的時候需要命名駝峰化，即大小寫組合書寫，這與應(yīng)用元素的style對象類似，dom.style.borderColor。例如data屬性為data-other-attribute，則我們要獲取相應(yīng)的值可以使用：myp.dataset.otherAttribute
如果Html元素定義了多個自定義屬性，如何獲??？
<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在標(biāo)簽里設(shè)置多個自定義屬性</div>
1、使用循環(huán)遍歷
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）、讓所有的自定義的屬性值塞到一個數(shù)組中
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"; // 設(shè)置自定義屬性 var theValue = myDiv.dataset.attribute; // 獲取自定義屬性 } else { myDiv.setAttribute("data-attribute", "valueXX"); // 設(shè)置自定義屬性 var theValue = myDiv.getAttribute("data-attribute"); // 獲取自定義屬性 }
結(jié)語：
使用dataset操作data 要比使用getAttribute速度稍微慢些，雖然使用dataset不能提高代碼的性能，但是對于簡潔代碼，提高代碼的可讀性和可維護(hù)性是很有幫助的。
通用屬性介紹
HTML 標(biāo)簽中有一些通用的屬性，如 id、title、class、style 等，這些通用屬性可以在大多數(shù) HTML 標(biāo)簽中使用，下面來簡單介紹一下它們的用法。
1) id
id 屬性用來賦予某個標(biāo)簽唯一的名稱（標(biāo)識符），當(dāng)我們使用 CSS 或者 JavaScript 來操作這個標(biāo)簽時，就可以通過 id 屬性來找到這個標(biāo)簽。
為標(biāo)簽定義 id 屬性可以給我們提供很多便利，比如：
如果標(biāo)簽中帶有 id 屬性作為唯一標(biāo)識符，通過 id 屬性可以很方便的定位到該標(biāo)簽；
如果 HTML 文檔中包含多個同名的標(biāo)簽，利用 id 屬性的唯一性，可以很方便的區(qū)分它們。
注意：在一個 HTML 文檔中 id 屬性的值必須是唯一的。
示例代碼如下所示：
<input type="text" id="username" /> <div id="content">PHP中文網(wǎng)</div> <p id="url">https://www.php.cn/</p>
2) class
與 id 屬性類似，class 屬性也可以為標(biāo)簽定義名稱（標(biāo)識符），不同的是 class 屬性在整個 HTML 文檔中不必是唯一的，我們可以為多個標(biāo)簽定義相同的 class 屬性值。另外，還可以為一個 HTML 標(biāo)簽定義多個 class 屬性值，如下所示：
<div class="className1 className2 className3"></div> <p>PHP中文網(wǎng)</p> <div>https://www.php.cn/</div>
當(dāng)使用 CSS 或者 JavaScript 來操作 HTML 標(biāo)簽時，同樣可以使用 class 屬性來找到對應(yīng)的 HTML 標(biāo)簽。由于 class 屬性不是唯一的，所以通過 CSS 或 JavaScript 對 HTML 標(biāo)簽的操作會應(yīng)用于所有具有同名 class 屬性的標(biāo)簽中。
3) title
title 屬性用來對標(biāo)簽內(nèi)容進(jìn)行描述說明，當(dāng)鼠標(biāo)移動到該標(biāo)簽上方時會顯示出 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>
運(yùn)行結(jié)果如下圖所示：
將鼠標(biāo)在鏈接處懸停片刻才能看到提示框。
4) style
使用 style 屬性我們可以在 HTML 標(biāo)簽內(nèi)部為標(biāo)簽定義 CSS 樣式，例如設(shè)置文本的顏色、字體等，如下例所示：
<!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中文網(wǎng)LOGO"> <div style="padding:10px;border:2px solid #999;text-align:center;">PHP中文網(wǎng)</div> </body> </html>
運(yùn)行結(jié)果如下圖所示：
<head>標(biāo)簽中常用的標(biāo)簽
1、<title> 標(biāo)簽
<title> 標(biāo)簽用來定義 HTML 文檔的標(biāo)題，只有包含 <title> 標(biāo)簽的文檔才算是一個有效的 HTML 文檔。另外，一個 HTML 文檔中僅允許存在一個 <title> 標(biāo)簽，并且 <title> 標(biāo)簽必須放置在 <head> 標(biāo)簽中。
2、<base> 標(biāo)簽
<base> 標(biāo)簽用于為頁面中所有相對鏈接指定一個基本鏈接，當(dāng)您設(shè)置了基本鏈接后，當(dāng)前頁面中的所有相對鏈接都會使用這個基本鏈接作為前綴，如下例所示：
3、<link> 標(biāo)簽
<link> 標(biāo)簽經(jīng)常用于引用外部 CSS 樣式表，<link> 標(biāo)簽中包含兩個主要的屬性，分別是 rel 和 href。rel 屬性用來指示引用文件的類型，href 屬性用來設(shè)置外部文件的路徑。示例代碼如下：
<link rel="stylesheet" href="common.css">
4、<style>標(biāo)簽
使用 <style> 標(biāo)簽可以在 HTML 文檔中嵌入 CSS 樣式，需要注意的是在 <style> 標(biāo)簽中定義的樣式僅對當(dāng)前 HTML 文檔有效。示例代碼如下：
<style> body { background-color: YellowGreen; } h1 { color: red; } </style>
5、<meta> 標(biāo)簽
<meta> 標(biāo)簽用于提供有關(guān) HTML 文檔的元數(shù)據(jù)，例如頁面有效期、頁面作者、關(guān)鍵字列表、頁面描述等信息。<meta> 標(biāo)簽定義的數(shù)據(jù)并不會顯示在頁面上，但卻會被瀏覽器解析。
6、<script> 標(biāo)簽
<script> 標(biāo)簽用于定義 JavaScript 腳本，示例代碼如下：
<script> document.write("PHP中文網(wǎng)") </script>
7、<noscript> 標(biāo)簽
當(dāng)用戶的瀏覽器不支持 JavaScript 腳本或者禁用 JavaScript 腳本時，可以在 <noscript> 標(biāo)簽中定義一些內(nèi)容來替代不能運(yùn)行的 JavaScript 腳本或者給用戶一些提示。除了 <script> 標(biāo)簽外，在 <noscript> 標(biāo)簽中可以包含任何 HTML 元素
HTML注釋標(biāo)簽<!-- -->
在 HTML 中您可以使用<!-- -->在代碼中添加注釋，<!--和-->之間的所有內(nèi)容都會被視為注釋。示例代碼如下：
<!DOCTYPE html> <html> <!-- head 開始 --> <head> <meta charset="UTF-8"> <!-- 當(dāng)前文檔采用UTF-8編碼 --> <title>HTML注釋的寫法</title> </head> <!-- head 結(jié)束 --> <!-- body 開始 --> <body> <!-- 一段文本 --> <p>歡迎來到PHP中文網(wǎng)</p> </body> <!-- body 結(jié)束 --> </html>
注釋可以出現(xiàn)在 HTML 文檔的任意位置，包括文檔開頭、文檔末尾、文檔中間、標(biāo)簽外部、標(biāo)簽內(nèi)容中等。
