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