HTML 属性

HTML 属性

属性（Attributes）为 HTML 元素提供附加信息，并修改它们的行为或外观。它们对于创建功能性和语义化（semantic）的网页至关重要。

属性基础知识

• 属性始终在元素的开始标签（start tag）内指定。
• 它们通常以 名称/值对 的形式出现，例如：name="value"。
• 属性名称和值在 HTML 中不区分大小写，但使用小写是标准约定，强烈推荐。
• 属性值应始终用引号括起来（首选双引号 ""，单引号 '' 也有效）。

示例：

<a href="https://www.example.com" title="Visit Example Website" target="_blank">Example Link</a>

在这个示例中，href、title 和 target 是属性名称，而 "https://www.example.com"、"Visit Example Website" 和 "_blank" 是它们各自的值。

常用属性

以下是许多 HTML 元素都使用的一些基本属性：

id 属性

id 属性为整个 HTML 文档中的元素分配一个唯一的标识符（unique identifier）。任何两个元素都不应具有相同的 id。

用途：

• 使用 CSS 进行定位（#element-id { ... }）。
• 使用 JavaScript 进行定位（document.getElementById('element-id')）。
• 创建页面锚点/书签（<a href="#section-id">...</a>）。
• 将标签与表单控件（form controls）关联（<label for="input-id">...<input id="input-id">）。

<div id="main-content">
  <p>This is the main content area.</p>
</div>

class 属性

class 属性为一个元素指定一个或多个类名（class names）。与 id 不同，多个元素可以共享同一个类名，并且一个元素可以拥有多个类（用空格分隔）。

用途：

• 使用 CSS 为元素组设置样式（.class-name { ... }）。
• 使用 JavaScript 选择多个元素（document.querySelectorAll('.class-name')）。

<p class="highlight important">This paragraph is highlighted and important.</p>
<button class="button primary">Submit</button>
<button class="button secondary">Cancel</button>

style 属性

style 属性允许直接为一个元素应用内联 CSS 样式（inline CSS styles）。其值是 CSS 属性:值对组成的字符串。

<p style="color: blue; font-weight: bold;">This text is blue and bold.</p>

最佳实践：虽然 style 对于特定的、独立的样式需求或使用 JavaScript 进行动态样式设置很有用，但为了更好的可维护性、关注点分离（separation of concerns）和重用性，更推荐使用外部 CSS 文件（<link rel="stylesheet">）和类（class）。

title 属性

title 属性提供关于元素的建议性信息（advisory information）。浏览器通常在用户将鼠标悬停在元素上时将其显示为工具提示（tooltip）。

<abbr title="World Wide Web Consortium">W3C</abbr>
<button title="Click to save your changes">Save</button>

lang 属性

lang 属性指定元素的语言。最重要的是在根元素 <html> 上设置它，以声明整个文档的主要语言。

用途：

• 可访问性：帮助屏幕阅读器正确朗读文本。
• SEO：帮助搜索引擎理解页面语言。
• 浏览器行为：可能影响排版、断字等。

<!DOCTYPE html>
<html lang="en">
  <!-- 文档内容为英文 -->
</html>

<p>Here is a quote in French: <q lang="fr">Bonjour le monde !</q></p>

语言代码通常包含一个主要语言标签（例如，en 代表英语，es 代表西班牙语），以及一个可选的地区子标签（例如，en-US 代表美式英语，en-GB 代表英式英语）。

元素特定属性

许多属性是特定于某些元素的：

href 属性（用于 <a>）

href（Hypertext Reference，超文本引用）属性指定使用 <a>（anchor，锚点）元素创建的超链接的 URL（目标地址）。

<a href="/products">View Products</a>

src 属性（用于 <img>、<script>、<iframe> 等）

src（Source，源）属性指定要嵌入或加载的外部资源的 URL（例如，图像文件、脚本文件、iframe 的文档）。

<img src="images/logo.png" alt="Company Logo">
<script src="js/main.js"></script>

alt 属性（用于 <img>）

alt（Alternative Text，替代文本）属性提供图像的文本描述。它对于以下方面至关重要：

• 可访问性：屏幕阅读器会向视障用户朗读 alt 文本。
• 回退：如果图像加载失败则显示。
• SEO：向搜索引擎提供关于图像的上下文信息。

<img src="chart.png" alt="Bar chart showing increasing sales over the last quarter">

width 和 height 属性（用于 <img>、<video>、<canvas> 等）

这些属性以像素为单位指定元素的尺寸。对于图像，提供 width 和 height 有助于浏览器预留空间，防止加载时布局发生变化。

<img src="icon.svg" alt="Settings Icon" width="32" height="32">

注意：使用 CSS 实现响应式尺寸设置（例如，max-width: 100%; height: auto;）。

disabled 属性（用于 <button>、<input>、<select> 等）

这是一个布尔属性（boolean attribute）。如果存在，它会禁用表单控件，使其不可点击、不可编辑，并且其值不会随表单一起提交。

<button type="submit" disabled>Submit (Processing...)</button>

布尔属性不需要值；它们的存在本身就意味着 true（真）。

data-* 属性

data-* 属性允许你将页面或应用程序私有的自定义数据（custom data）直接存储在 HTML 元素上。属性名称必须以 data- 开头，后跟至少一个字符。

用于将数据与元素关联，供 JavaScript 使用，而无需滥用 class 或 id。

<div class="product" data-product-id="12345" data-stock-level="15">
  <h3>产品名称</h3>
  <!-- ... -->
</div>

<script>
  // 示例：在 JavaScript 中访问 data 属性
  // const productDiv = document.querySelector('.product');
  // const productId = productDiv.dataset.productId; // '12345'
  // const stock = productDiv.dataset.stockLevel; // '15'
</script>

属性最佳实践总结

• 使用小写名称。
• 始终为属性值加引号（首选双引号）。
• 使用 id 用于唯一标识符，使用 class 用于样式设置/分组。
• 为图像提供有意义的 alt 文本。
• 在 <html> 元素上使用 lang 属性，用于可访问性和 SEO。
• 相比内联 style 属性，更推荐使用外部 CSS。
• 利用 data-* 属性存储自定义数据。

每个 HTML 元素的所有属性的完整列表可以在 MDN Web Docs 等 HTML 参考资料中找到。