屬性為 HTML 元素提供附加信息。
HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。
屬性總是以名稱/值對(duì)的形式出現(xiàn)，比如：name=“value”。
屬性總是在 HTML 元素的開始標(biāo)簽中規(guī)定。
當(dāng)然，以下是一些HTML屬性的實(shí)例，這些屬性被用于定義HTML元素的不同特性和設(shè)置。
class 屬性：用于為HTML元素指定一個(gè)或多個(gè)類名，以便通過CSS進(jìn)行樣式化或通過JavaScript進(jìn)行操作。
<div class=“container main-content”>
<!– 內(nèi)容 –>
</div>id 屬性：為HTML元素提供一個(gè)唯一的標(biāo)識(shí)符，這樣可以通過CSS或JavaScript單獨(dú)定位和操作它。
<div id=“unique-element”>
<!– 內(nèi)容 –>
</div>style 屬性：允許你直接在HTML元素上應(yīng)用內(nèi)聯(lián)CSS樣式。
<p style=“color: red; font-size: 20px;”>這是一個(gè)紅色的段落。</p>src 屬性（通常用于<img>元素）：指定圖像的URL。
<img src=“path/to/image.jpg” alt=“描述性文本”>href 屬性（用于<a>元素）：定義鏈接的目標(biāo)地址。
<a href=”https://www.example.com”>訪問示例網(wǎng)站</a>alt 屬性（通常與<img>元素一起使用）：為圖像提供替代文本，以便在圖像無法顯示時(shí)提供信息，同時(shí)也有助于搜索引擎優(yōu)化（SEO）和輔助技術(shù)（如屏幕閱讀器）。
<img src=“image.jpg” alt=“描述圖片的文本”>title 屬性：為元素提供額外的信息，通常顯示為工具提示文本。
<a href=“#” title=“點(diǎn)擊這里了解更多”>鏈接</a>placeholder 屬性（用于<input>元素）：在輸入框中顯示灰色的占位符文本，直到用戶開始輸入。
<input type=“text” placeholder=“請(qǐng)輸入搜索關(guān)鍵詞”>disabled 屬性（可用于表單元素）：禁用輸入字段，使其不可編輯。
<input type=“text” value=“此字段已被禁用” disabled>checked 屬性（用于<input type=“checkbox”>或<input type=“radio”>）：設(shè)置復(fù)選框或單選按鈕為默認(rèn)選中狀態(tài)。
<input type=“checkbox” checked> 我同意條款和條件
這些只是HTML中可用屬性的一小部分示例。HTML元素可以有多種屬性，具體取決于元素的類型和所需的功能。在開發(fā)時(shí)，應(yīng)根據(jù)需要選擇合適的屬性來定義元素的特性和行為。
與HTML標(biāo)簽一樣，雖然HTML屬性在技術(shù)上不區(qū)分大小寫，但最佳實(shí)踐是使用小寫屬性。以下是一些使用小寫屬性的好處：
7}格的一致性，使代碼更加整潔和統(tǒng)一。
7}：雖然HTML規(guī)范不區(qū)分屬性大小寫，但某些服務(wù)器端或客戶端的解析器可能會(huì)對(duì)大小寫敏感。使用小寫屬性可以確保最大的兼容性。
XHTML和XML兼容性：如果你計(jì)劃將HTML轉(zhuǎn)換為XHTML或XML，那么使用小寫屬性是必須的，因?yàn)閄HTML和XML是區(qū)分大小寫的，并且通常要求使用小寫。
團(tuán)隊(duì)協(xié)作：在團(tuán)隊(duì)環(huán)境中，統(tǒng)一的編碼風(fēng)格對(duì)于代碼的可維護(hù)性和清晰度非常重要。使用小寫屬性可以作為團(tuán)隊(duì)編碼規(guī)范的一部分，從而提高團(tuán)隊(duì)協(xié)作效率。
因此，盡管HTML屬性在技術(shù)上可以大寫或小寫，但遵循最佳實(shí)踐，使用小寫屬性是一個(gè)好習(xí)慣。這有助于保持代碼的清晰、一致和易于維護(hù)。例如：
<!– 推薦的小寫屬性寫法 –>
<img src=“example.jpg” alt=“Example Image” />
<!– 不推薦的大寫或混合大小寫寫法 –>
<img Src=“example.jpg” Alt=“Example Image” />
在編寫HTML代碼時(shí)，始終堅(jiān)持使用小寫標(biāo)簽和屬性，這將使你的代碼更加專業(yè)、清晰和易于維護(hù)。
在HTML中，為屬性值加引號(hào)是一個(gè)很好的實(shí)踐。雖然某些情況下，HTML解析器可以處理沒有引號(hào)的屬性值，但為屬性值添加引號(hào)（單引號(hào)或雙引號(hào)）可以提供更清晰、更穩(wěn)定的代碼，并避免潛在的解析錯(cuò)誤。
以下是使用引號(hào)的幾個(gè)原因：
下面是一個(gè)使用引號(hào)的HTML屬性示例：
<img src=“images/example.jpg” alt=“An example image”>
<a href=”https://www.example.com”/ title=“Visit Example Website”>Example Link</a>在這個(gè)例子中，src、alt、href 和 title 屬性的值都被雙引號(hào)包圍。你也可以選擇使用單引號(hào)，但重要的是要保持一致性。
避免以下不使用引號(hào)的寫法，因?yàn)檫@可能會(huì)導(dǎo)致解析錯(cuò)誤或不可預(yù)測(cè)的行為：
<!– 不推薦：沒有使用引號(hào) –>
<img src=images/example.jpg alt=An example image>始終為HTML屬性值添加引號(hào)是一個(gè)良好的編程習(xí)慣，可以提高代碼的健壯性和可讀性。
由于HTML屬性種類繁多，這里只列出了一些常見的和重要的屬性。請(qǐng)注意，這個(gè)表格并不包含所有可能的屬性和值，但它可以作為一個(gè)有用的參考。
| 元素/標(biāo)簽 | 屬性 | 描述 |
|---|---|---|
<a> | href | 指定鏈接的目標(biāo)URL |
<a> | target | 定義鏈接打開的窗口或框架名稱 |
<a> | rel | 定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系 |
<a>, <area>, <img>, <input> | alt | 在圖片無法呈現(xiàn)時(shí)的替代文本 |
<body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr> | bgcolor (遺留屬性) | 元素的背景顏色（建議使用CSS的background-color代替） |
<form> | action | 表單信息提交的URL地址 |
<form>, <input> | autocomplete | 表示該表單中是否可以由瀏覽器自動(dòng)完成填值 |
<img>, <object>, <table> | border (遺留屬性) | 邊框?qū)挾龋ńㄗh使用CSS的border屬性代替） |
<img> | src | 指定圖像的URL |
<img>, <table>, <td>, <th>, <tr> | width, height | 設(shè)置元素的寬度和高度 |
<input> | type | 輸入字段的類型（如text, password, checkbox, radio, submit, email, search, tel, url等） |
<input> | placeholder | 在輸入框中顯示灰色的占位符文本 |
<input> | disabled | 禁用輸入字段 |
<input> | checked | 設(shè)置復(fù)選框或單選按鈕為默認(rèn)選中狀態(tài) |
<input> | readonly | 設(shè)置輸入字段為只讀 |
<input> | required | 設(shè)置表單提交前必須填寫該字段 |
<input> | value | 定義輸入字段的初始值 |
<meta>, <script> | charset | 聲明字符編碼 |
<script> | src | 指定外部腳本文件的URL |
<script> | async | 表示腳本應(yīng)該異步執(zhí)行 |
<table>相關(guān)的標(biāo)簽（如<td>, <th>, <tr>等） | colspan, rowspan | 設(shè)置表格單元格跨越多列或多行 |
<td>, <th> | align, valign (已廢棄) | 設(shè)置單元格內(nèi)容的水平或垂直對(duì)齊方式（建議使用CSS代替） |
| 全局屬性 | class | 用于為HTML元素添加一個(gè)或多個(gè)類名 |
| 全局屬性 | id | 用于為HTML元素定義唯一的標(biāo)識(shí)符 |
| 全局屬性 | style | 用于在HTML元素上直接指定一些內(nèi)聯(lián)樣式 |
| 全局屬性 | title | 用于為HTML元素提供一個(gè)附加的提示文本 |
這個(gè)表格包含了一些常見的HTML元素和它們的屬性，以及屬性的描述。然而，HTML是一個(gè)龐大且不斷發(fā)展的標(biāo)準(zhǔn)，因此建議查閱官方文檔（如W3Schools或MDN Web Docs）以獲取最準(zhǔn)確和最新的信息。
注意：一些屬性可能已被標(biāo)記為廢棄或不建議使用，例如align、valign和bgcolor等。在編寫HTML代碼時(shí)，應(yīng)優(yōu)先考慮使用CSS來實(shí)現(xiàn)樣式和布局效果。
上一篇： HTML 元素
下一篇： HTML 標(biāo)題