上述两篇文章分别阐述了HTML入门基础及进阶，这篇文章主要给大家分享一下HTML标签属性的一些知识，希望能够帮助大家进一步的了解前端基础知识。
简单来说，HTML 属性是附加在标签上的 “配置项”，用于为标签提供额外信息或改变标签的默认行为 / 外观。所有属性都写在标签的开始部分（<标签名 属性名="属性值">），大部分属性是通用的（如class、id），也有部分是标签专属的（如<a>的href）。
1. 标识与定位类（通用）
用于在 CSS/JS 中精准找到对应的标签，是前端开发中最基础也最常用的属性。
id：给标签设置唯一标识（页面中 id 不能重复），用于 JS 精准获取元素或 CSS 单独样式控制。<!-- 示例：通过id定位唯一的“提交按钮” --> <button id="submit-btn">提交</button>class：给标签设置类名（可重复），用于批量控制多个标签的样式或行为（核心复用属性）。<!-- 示例：多个元素共用“text-red”类，统一设置红色文字 --> <p class="text-red">提示1</p> <span class="text-red">提示2</span>
2. 功能控制类（标签专属）
决定标签的核心功能，不同标签的专属属性是实现页面交互的关键。
<a>标签的href：指定链接跳转的目标地址（无此属性则<a>只是普通文本）。<a href="https://www.baidu.com">跳转到百度</a><img>标签的src/alt：src指定图片的路径（核心），alt是图片加载失败时的替代文本（兼顾无障碍）。<img src="logo.png" alt="网站logo"><input>标签的type/value：type决定输入框类型（文本、密码、复选框等），value是输入框的默认值。placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。该提示会在用户输入值之前显示在输入字段中。<input type="password" value="" placeholder="请输入密码">
3. 样式与行为类（通用 / 专属）
直接或间接影响标签的外观、交互行为。
style：行内设置标签的 CSS 样式（优先级最高，但不推荐大量使用，建议用 class 统一管理）。<div style="width: 100px; height: 100px; background: red;">红色方块</div>disabled：禁用表单元素（如按钮、输入框），使其无法被点击 / 输入。<button disabled>不可点击的按钮</button>title：鼠标悬浮在标签上时显示提示文本（提升用户体验）。<span title="这是提示文字">悬浮看提示</span>
4. 自定义属性
HTML5 正式引入了data-*自定义属性规范，它允许你在 HTML 标签上存储与页面 / 元素相关的自定义数据，这些数据不会影响元素的默认行为，也不会被浏览器解析为原生属性，专门用于开发者在 HTML 和 JS 之间传递自定义信息。
- 命名规则：必须以
data-开头，后面跟自定义名称（如data-id、data-user-name），名称只能包含字母、数字、连字符（-）、下划线（_）、点（.），且不能包含大写字母； - 取值：和普通属性一样，值用引号包裹，支持字符串、数字、JSON 格式（需转义）等；
- 兼容性：所有现代浏览器都支持，是前端开发中存储元素关联数据的标准方式。
自定义属性的使用方法（完整示例）
1. 在 HTML 中定义自定义属性
直接在标签上添加data-*属性，示例如下：
<!-- 单个自定义属性 --> <div class="user-card"><div id="user">/* 匹配所有><!-- 商品列表项，点击时通过data-id获取商品ID --> <li class="product-item"><div class="tab"><div class="carousel" data-auto-play="true" data-interval="3000">轮播图</div>注意：data()vsattr()的区别
很多新手会混淆data()和attr()，两者都能获取data-*属性，但核心差异很大，务必注意：
| 特性 | $(elem).data('key') | $(elem).attr('data-key') |
|---|---|---|
| 数据类型 | 自动转换（数字 / 布尔 / JSON） | 始终返回字符串 |
| 数据存储位置 | 存储在 jQuery 的内部缓存中 | 直接操作 HTML 标签的属性（可见于源码） |
| 修改后是否同步到 DOM | 不会同步（修改后 HTML 源码不变） | 同步到 DOM（修改后 HTML 源码可见） |
5.注意事项
- 属性值通常需要用双引号包裹（单引号也可，纯数字 / 部分简单值可省略，但不推荐）；
- 不存在的属性会被浏览器忽略，不会报错，但无意义；
- 自定义属性的值默认都是字符串类型，如果需要数字 / 布尔值 / 对象，需在 JS 中手动转换（如
Number()、JSON.parse()）； - 不要存储过大 / 敏感的数据（如用户密码、完整的接口返回数据），自定义属性会暴露在 HTML 源码中，不安全且影响性能；
- 命名尽量语义化（如
data-user-id而非data-1），提升代码可读性； - 避免滥用：如果数据仅在 JS 内部使用，无需挂载到 HTML 属性上，仅存储 “HTML 与 JS 交互所需” 的数据。
