黨建網(wǎng)站建設(shè)入黨外調(diào)函模板外貿(mào)網(wǎng)站優(yōu)化公司
通過前面的學(xué)習(xí)，我們已經(jīng)對(duì) HTML標(biāo)簽 有了簡單的認(rèn)識(shí)，知道可以在標(biāo)簽中可以添加一些屬性，這些屬性包含了標(biāo)簽的額外信息，例如：
- href 屬性可以為 <a> 標(biāo)簽提供鏈接地址；
- src 屬性可以為 <img> 標(biāo)簽提供圖像的路徑；
- style 屬性可以為幾乎所有標(biāo)簽定義 CSS 樣式。
本節(jié)我們就來講解一下 HTML 標(biāo)簽屬性的概念和用法。
什么是屬性
屬性可以為 HTML 標(biāo)簽提供一些額外信息，或者對(duì) HTML 標(biāo)簽進(jìn)行修飾。屬性需要添加在開始標(biāo)簽中，語法格式為：
attr="value"
attr 表示屬性名，value 表示屬性值。屬性值必須使用雙引號(hào)" "或者單引號(hào)' '包圍。
注意，雖然雙引號(hào)和單引號(hào)都可以包圍屬性值，但是為了規(guī)范和專業(yè)，請(qǐng)盡量使用雙引號(hào)。
一個(gè)標(biāo)簽可以沒有屬性，也可以有一個(gè)或者多個(gè)屬性。
使用 HTML 屬性的例子：
<p id="user-info" class="color-red">歡迎 <font color="red" size="3">Tom</font> 來到百度，你已經(jīng)在百度使用超過3年的時(shí)間了。<p>
<div class="clearfloat">
<p class="left">這里顯示 Tom 的賬號(hào)信息</p>
<p class="right">這里顯示 Tom 的個(gè)性簽名</p>
</div>專用屬性
HTML 屬性有很多，大體可以分為兩類：
- 有些屬性適用于大部分或者所有 HTML 標(biāo)簽，我們將這些屬性稱為通用屬性；
- 有些屬性只適用于一個(gè)或者幾個(gè)特定的 HTML 標(biāo)簽，我們將這些屬性稱為專用屬性。
HTML 中的 <img> 標(biāo)簽就有 src 和 alt 兩個(gè)專用屬性，<a> 標(biāo)簽也有 href 和 target 兩個(gè)專用屬性，如下例所示：
<img src="./logo.png" alt="百度Logo" width="100" height="50">
<a href="https://www.baidu.com" target="_blank">百度</a>通用屬性介紹
HTML 標(biāo)簽中有一些通用的屬性，如 id、title、class、style 等，這些通用屬性可以在大多數(shù) HTML 標(biāo)簽中使用，下面來簡單介紹一下它們的用法。
1) id
id 屬性用來賦予某個(gè)標(biāo)簽唯一的名稱（標(biāo)識(shí)符），當(dāng)我們使用 CSS 或者 JavaScript 來操作這個(gè)標(biāo)簽時(shí)，就可以通過 id 屬性來找到這個(gè)標(biāo)簽。
為標(biāo)簽定義 id 屬性可以給我們提供很多便利，比如：
- 如果標(biāo)簽中帶有 id 屬性作為唯一標(biāo)識(shí)符，通過 id 屬性可以很方便的定位到該標(biāo)簽；
- 如果 HTML 文檔中包含多個(gè)同名的標(biāo)簽，利用 id 屬性的唯一性，可以很方便的區(qū)分它們。
注意：在一個(gè) HTML 文檔中 id 屬性的值必須是唯一的。
示例代碼如下所示：
<input type="text" id="username" />
<div id="content">百度</div>
<p id="url">https://www.baidu.com/</p>2) class
與 id 屬性類似，class 屬性也可以為標(biāo)簽定義名稱（標(biāo)識(shí)符），不同的是 class 屬性在整個(gè) HTML 文檔中不必是唯一的，我們可以為多個(gè)標(biāo)簽定義相同的 class 屬性值。另外，還可以為一個(gè) HTML 標(biāo)簽定義多個(gè) class 屬性值，如下所示：
<div class="className1 className2 className3"></div>
<p class="content">百度</p>
<div class="content">https://www.baidu.com/</div>當(dāng)使用 CSS 或者 JavaScript 來操作 HTML 標(biāo)簽時(shí)，同樣可以使用 class 屬性來找到對(duì)應(yīng)的 HTML 標(biāo)簽。由于 class 屬性不是唯一的，所以通過 CSS 或 JavaScript 對(duì) HTML 標(biāo)簽的操作會(huì)應(yīng)用于所有具有同名 class 屬性的標(biāo)簽中。
3) title
title 屬性用來對(duì)標(biāo)簽內(nèi)容進(jìn)行描述說明，當(dāng)鼠標(biāo)移動(dòng)到該標(biāo)簽上方時(shí)會(huì)顯示出 title 屬性的值，如下例所示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>演示文檔</title>
</head>
<body><a href="https://www.baidu.com" title="百度一下">百度一下</a>
</body>
</html>運(yùn)行結(jié)果如下圖所示：?
?