编辑“︁HTML属性”︁

= HTML属性 =

HTML属性是HTML元素中提供的额外信息，用于控制元素的行为或外观。属性总是以名称/值对的形式出现，如：<code>name="value"</code>。属性通常包含在元素的开始标签中，为元素添加特定功能或特性。

== 基本语法 ==
HTML属性的基本语法如下：
<syntaxhighlight lang="html">
<element attribute1="value1" attribute2="value2">内容</element>
</syntaxhighlight>

属性值通常应该用引号括起来，虽然在某些情况下可以省略引号，但为了代码的一致性和可读性，建议始终使用引号。

== 常见HTML属性 ==
以下是HTML中一些最常用的属性：

=== 全局属性 ===
这些属性可以用于大多数HTML元素：
* <code>id</code> - 为元素指定唯一标识符
* <code>class</code> - 为元素指定一个或多个类名
* <code>style</code> - 为元素指定内联CSS样式
* <code>title</code> - 提供元素的额外信息（通常显示为工具提示）
* <code>lang</code> - 定义元素内容的语言

=== 特定元素属性 ===
这些属性只适用于特定元素：
* <code>href</code> - 用于<code><a></code>元素，指定链接的目标URL
* <code>src</code> - 用于<code><img></code>、<code><script></code>等元素，指定资源位置
* <code>alt</code> - 用于<code><img></code>元素，提供图像的替代文本
* <code>type</code> - 用于<code><input></code>元素，指定输入类型

== 属性示例 ==

=== 基本示例 ===
<syntaxhighlight lang="html">
<!-- 使用id和class属性 -->
<div id="header" class="main-header">网站标题</div>

<!-- 使用href属性 -->
<a href="https://www.example.com">访问示例网站</a>

<!-- 使用src和alt属性 -->
<img src="logo.png" alt="公司标志">
</syntaxhighlight>

=== 布尔属性 ===
有些属性是布尔属性，它们不需要值，存在即表示true：
<syntaxhighlight lang="html">
<!-- disabled是一个布尔属性 -->
<input type="text" disabled>

<!-- 也可以写成这样，但不推荐 -->
<input type="text" disabled="disabled">
</syntaxhighlight>

== 自定义数据属性 ==
HTML5引入了自定义数据属性，以<code>data-</code>开头，可用于存储元素的自定义数据：
<syntaxhighlight lang="html">
<div id="product" data-price="29.99" data-category="electronics">产品名称</div>
</syntaxhighlight>

这些数据可以通过JavaScript访问：
<syntaxhighlight lang="javascript">
const product = document.getElementById('product');
console.log(product.dataset.price); // 输出: 29.99
</syntaxhighlight>

== 属性与CSS和JavaScript的交互 ==
HTML属性经常与CSS和JavaScript交互：

=== CSS属性选择器 ===
CSS可以使用属性选择器来选择具有特定属性的元素：
<syntaxhighlight lang="css">
/* 选择所有带有title属性的元素 */
[title] {
  color: blue;
}

/* 选择所有type="text"的input元素 */
input[type="text"] {
  background-color: #f0f0f0;
}
</syntaxhighlight>

=== JavaScript访问属性 ===
JavaScript可以通过多种方式访问和修改HTML属性：
<syntaxhighlight lang="javascript">
// 获取属性
const link = document.querySelector('a');
console.log(link.getAttribute('href'));

// 设置属性
link.setAttribute('target', '_blank');

// 直接通过属性名访问（某些标准属性）
console.log(link.href);
</syntaxhighlight>

== 实际应用案例 ==

=== 表单验证 ===
HTML5引入了许多新的表单属性，用于客户端验证：
<syntaxhighlight lang="html">
<form>
  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email" required placeholder="输入您的邮箱">
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required minlength="8">
  
  <input type="submit" value="注册">
</form>
</syntaxhighlight>

=== 响应式图片 ===
使用<code>srcset</code>和<code>sizes</code>属性实现响应式图片：
<syntaxhighlight lang="html">
<img src="image-small.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
     alt="响应式图片示例">
</syntaxhighlight>

== 属性与DOM的关系 ==
HTML属性与DOM属性密切相关但不完全相同。当浏览器解析HTML时，它会创建DOM节点，其中许多HTML属性会成为DOM属性。

<mermaid>
graph LR
    A[HTML元素] -->|解析| B[DOM节点]
    B --> C[DOM属性]
    A --> D[HTML属性]
    D -->|部分对应| C
</mermaid>

重要区别：
* HTML属性是HTML源代码中的值
* DOM属性是JavaScript中DOM对象的属性
* 两者可能不同步（修改一个不会自动更新另一个）

== 最佳实践 ==
1. 始终为属性值使用引号（单引号或双引号）
2. 布尔属性只需写出属性名，不需要值
3. 使用语义化的属性名，特别是自定义数据属性
4. 遵循HTML规范，不要使用非标准属性
5. 对于ARIA（无障碍）属性，确保正确使用以提高可访问性

== 数学表示 ==
在HTML中，属性可以形式化表示为：
<math>
元素 := <标签名 属性列表> 内容 </标签名>
</math>
<math>
属性列表 := 属性 | 属性 属性列表
</math>
<math>
属性 := 名称 = "值"
</math>

== 总结 ==
HTML属性是增强HTML元素功能的重要方式。通过合理使用标准属性和自定义数据属性，可以创建更丰富、更交互式的网页内容。理解属性如何与CSS和JavaScript交互，以及HTML属性与DOM属性之间的区别，对于前端开发至关重要。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML基础]]