HTML 属性

学习 href/src/alt/style/title 等常用属性 · 难度：入门 · +10XP

什么是 HTML 属性？

HTML 属性（Attributes）是写在 HTML 标签的开始标签内部的额外信息，用来控制元素的行为、外观或提供元数据。属性总是以 名称="值" 的形式出现，值通常用双引号包裹。

简单来说：标签是"是什么"，属性是"怎么表现"。比如 <a> 标签定义一个链接，而 href 属性决定这个链接指向哪里。

属性的基本语法

<标签名 属性1="值1" 属性2="值2">内容</标签名>
<!-- 示例 -->
<a href="https://www.wmdxc.com" target="_blank" title="前往武鸣大学城">点击访问</a>
<img src="photo.jpg" alt="风景照片" width="400" height="300">
<input type="text" placeholder="请输入用户名" required disabled>

属性的分类

分类	说明	常见属性示例
全局属性	几乎所有 HTML 元素都可以使用的属性	`id`, `class`, `style`, `title`, `lang`, `hidden`, `tabindex`, `data-*`
特定元素属性	只有特定标签才能使用的属性	`href`（a/link 标签）, `src`（img/script/iframe）, `type`（input/button）, `alt`（img）, `placeholder`（input/textarea）
布尔属性	不需要值，出现即生效	`disabled`, `readonly`, `required`, `checked`, `selected`, `hidden`, `autofocus`
事件属性	用于绑定 JavaScript 事件处理函数	`onclick`, `onchange`, `onsubmit`, `onmouseover`, `onkeydown`
自定义数据属性	以 `data-` 开头，用于存储自定义数据	`data-user-id="123"`, `data-role="admin"`, `data-tooltip="提示文字"`

重点属性详解

1. id 属性 — 页面中的唯一身份证

<div id="header">页面头部</div>
<div id="main-content">主体内容</div>
<!-- CSS 中用 # 选中 -->
<style>#header { background: #333; color: white; }</style>
<!-- JavaScript 中用 getElementById 获取 -->
<script>document.getElementById('header').style.padding = '20px';</script>

规则：同一个页面中，每个 id 值必须唯一，不能重复。

2. class 属性 — 可复用的分类标签

<p class="intro highlight">这是一段被高亮的引言。</p>
<p class="intro">另一段引言。</p>
<p class="highlight">另一段高亮文字。</p>
<!-- 一个元素可以有多个 class，用空格分隔 -->

3. data-* 自定义属性 — 存储额外数据

<button data-product-id="8820" data-price="99.00" data-stock="50">加入购物车</button>
<script>
// JavaScript 中读取 data 属性
const btn = document.querySelector('button');
console.log(btn.dataset.productId);  // "8820"
console.log(btn.dataset.price);      // "99.00"
console.log(btn.dataset.stock);      // "50"
</script>

属性使用注意事项

✅ 属性值推荐始终用双引号包裹 —— href="page.html" 而不是 href=page.html
✅ 属性名不区分大小写，但推荐全小写 —— 用 onclick 而非 onClick
✅ 布尔属性不需要赋值 —— 写 disabled 即可，无需 disabled="true"
✅ 属性之间用空格分隔，顺序不重要
✅ id 必须唯一，class 可以重复
✅ data-* 属性用于存储 JavaScript 需要的数据，避免使用非标准属性

实际应用场景

<!-- 表单验证 -->
<form action="/submit" method="post" onsubmit="return validateForm()">
  <input type="email" name="email" placeholder="请输入邮箱" required autocomplete="off">
  <input type="password" name="pwd" minlength="6" maxlength="20" placeholder="6-20位密码">
  <button type="submit" disabled id="submit-btn">提交</button>
</form>
<!-- 响应式图片 -->
<img src="banner-800.jpg"
     srcset="banner-400.jpg 400w, banner-800.jpg 800w, banner-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="网站横幅"
     loading="lazy">
<!-- 无障碍访问 -->
<button aria-label="关闭弹窗" aria-expanded="false" role="dialog">✕</button>
<nav aria-label="主导航">...</nav>

???? 练习任务

创建一个用户注册表单，要求：

使用 type、placeholder、required 属性设置输入框类型和验证规则
给每个输入框设置唯一的 id 和合适的 class
用 data-* 属性存储表单项的验证规则（如 data-validate="email"）
提交按钮初始状态为 disabled，给按钮添加 title 属性提示用户先填写表单
为表单加上 aria-label 等无障碍属性