【HTML属性】常见HTML属性的分类及其用途

关注

最新推荐文章于 2025-11-17 16:21:56 发布 · 1k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

· GEO检测

HTML 属性详解 HTML属性是附加在HTML标签中的键值对，用于描述标签的行为或外观。属性值通常由引号包围，并且紧跟在属性名之后。HTML属性是构建网页过程中不可或缺的一部分，掌握HTML属性有助于提高网页的可用性和美观度。本文详细介绍了HTML属性的概念、类型、用法以及注意事项，希望对读者有所帮助。阅读详情

HTML属性是用于修改HTML元素行为、外观或提供额外信息的键值对。
属性通常出现在 HTML 标签的开始标签中，用于定义元素的行为、样式、内容或其他特性。

属性总是以 name="value" 的形式写在标签内，name 是属性的名称，value 是属性的值。

以下是常见HTML属性的分类及其用途：
1. 全局属性
所有HTML元素都支持的属性。
- id：为元素指定唯一标识符（用于CSS、JavaScript选择器）。
- class：为元素指定一个或多个CSS类名（用于样式分组）。
- style：内联定义元素的CSS样式。
- title：提供关于元素的额外信息（鼠标悬停时显示）。
- lang：定义元素内容的语言（如lang="zh-CN"）。
- tabindex：控制元素的键盘焦点顺序（0表示可聚焦，-1表示不可聚焦）。
- hidden：隐藏元素（不显示且不占用空间）。
- accesskey：为元素指定快捷键（如accesskey="s"）。
- draggable：设置元素是否可拖动（true/false）。
- contenteditable：使元素内容可编辑（true/false）。
- dir：定义文本方向（ltr/rtl）。

2. 文本相关属性
- <a>：
- href：目标URL（如href="https://example.com"）。
- target：打开方式（_blank、_self、_parent、_top）。
- rel：定义与目标URL的关系（如rel="noopener noreferrer"）。
- download：强制下载链接资源（如download="filename.pdf"）。
- <img>：
- src：图像URL。
- alt：图像替代文本（用于SEO和无障碍）。
- width/height：图像尺寸（像素或百分比）。
- loading：图像加载方式（lazy延迟加载）。
- <input>：
- type：输入类型（text、password、number、checkbox等）。
- name：表单数据的键名。
- value：输入的值。
- placeholder：输入提示文本。
- required：标记为必填项。
- disabled：禁用输入框。
- readonly：只读（可选中但不可编辑）。
- <select>：
- multiple：允许多选。
- size：可见选项数量。
- <textarea>：
- rows/cols：文本框的行数和列数。
- <button>：
- type：按钮类型（submit、reset、button）。

3. 表单相关属性
- <form>：
- action：表单数据提交的URL。
- method：提交方法（GET/POST）。
- enctype：表单数据编码类型（application/x-www-form-urlencoded、multipart/form-data等）。
- target：提交结果的打开方式（同<a>的target）。
- novalidate：禁用表单验证。
- 输入验证属性：
- pattern：正则表达式验证（如pattern="[0-9]{3}"）。
- min/max：数值范围限制（用于number、date等类型）。
- step：数值步长（如step="0.1"）。
- minlength/maxlength：文本长度限制。

4. 媒体相关属性
- <audio>/<video>：
- src：媒体文件URL。
- controls：显示播放控件。
- autoplay：自动播放（部分浏览器限制）。
- loop：循环播放。
- muted：静音。
- preload：预加载策略（none、metadata、auto）。
- width/height：视频播放器尺寸。
- <img>：
- srcset：响应式图像源（如srcset="small.jpg 500w, large.jpg 1000w"）。
- sizes：图像尺寸描述（如sizes="(max-width: 600px) 100vw, 50vw"）。
- crossorigin：跨域资源共享（anonymous、use-credentials）。

5. 表格相关属性
- <table>：
- border：表格边框（不推荐，建议用CSS）。
- cellspacing：单元格间距。
- cellpadding：单元格内容与边框的间距。
- <th>/<td>：
- rowspan/colspan：跨越多行/列（如rowspan="2"）。

6. 脚本相关属性
- <script>：
- src：外部脚本URL。
- async：异步加载脚本（不阻塞页面渲染）。
- defer：延迟执行脚本（页面解析完成后执行）。
- type：脚本类型（默认text/javascript）。
- 事件属性：
- onclick：点击事件。
- onload：资源加载完成事件。
- onchange：表单值改变事件。
- onsubmit：表单提交事件。
- onkeydown/onkeyup：键盘按键事件。
- onmouseover/onmouseout：鼠标悬停/离开事件。

7. 样式相关属性
- <style>：
- type：样式类型（默认text/tailwindcss）。
- scoped：限制样式仅作用于当前元素（部分浏览器支持）。
- <link>：
- rel：资源关系（如rel="stylesheet"）。
- href：资源URL。
- media：媒体查询（如media="screen and (max-width: 600px)"）。

8. 元数据相关属性
- <meta>：
- charset：字符编码（如charset="UTF-8"）。
- name/content：元数据键值对（如name="description"）。
- http-equiv：模拟HTTP响应头（如http-equiv="refresh"）。
- <base>：
- href：设置页面相对URL的基础URL。

9. 无障碍（ARIA）属性
用于提高网页对辅助技术（如屏幕阅读器）的可访问性。
- aria-label：为元素提供文本标签。
- aria-labelledby：引用其他元素的id作为标签。
- aria-describedby：引用其他元素的id作为描述。
- aria-hidden：隐藏元素（仅视觉隐藏，辅助技术忽略）。
- aria-live：动态内容更新通知（如aria-live="polite"）。

10. 其他属性
- <iframe>：
- src：嵌入网页的URL。
- width/height：框架尺寸。
- allow：权限策略（如allow="camera; microphone"）。
- sandbox：安全限制（如sandbox="allow-same-origin"）。
- <canvas>：
- width/height：画布尺寸（以像素为单位）。
- <svg>：
- viewBox：定义SVG可视区域。
- width/height：SVG尺寸。

总结：
HTML属性是控制元素行为和外观的关键。合理使用属性可以增强网页的交互性、可访问性和SEO效果。现代HTML更倾向于将表现层（样式）与结构层（HTML）分离，因此推荐使用CSS类（class）而非内联样式（style）来控制外观。

收录于