HTML 属性

HTML 属性速查表

一、通用属性（所有元素适用）

二、链接与引用相关属性

三、表单与输入控件属性

四、媒体与多媒体属性

五、事件属性（常用 JavaScript 事件）

六、其他常用属性

核心通用属性

id 属性

class 属性

style 属性

title 属性

lang 属性

链接与资源属性

href 属性

src 属性

target 属性

alt 属性

表单与交互属性

name 属性

type 属性

value 属性

placeholder 属性

required 属性

disabled 属性

checked 属性

媒体与尺寸属性

width 与 height 属性

controls 属性

autoplay 属性

loop 属性

语义与结构属性

rel 属性

data-* 自定义属性

表格属性

border 属性

colspan 与 rowspan 属性

元信息属性

charset 属性

name 与 content 属性（元标签）

总结

HTML 属性

在 HTML 中，属性是添加在标签内部的额外信息，用于对元素进行描述、配置或扩展功能。它们不会直接显示在网页内容中，但会影响元素的行为、外观或数据传递方式。每个 HTML 标签都有其预定义的属性，部分通用属性则可用于大多数标签。下面按属性的功能和适用范围，分类介绍 HTML 中最常用的属性。

好的，我根据常用 HTML 属性整理了一份 按字母序和类型分类的 HTML 属性速查表，方便查阅和开发使用。

HTML 属性速查表

一、通用属性（所有元素适用）

属性名	说明
`class`	为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。
`contenteditable`	指定元素是否可编辑。
`data-*`	存储自定义数据，可通过 JavaScript 访问，常用于交互逻辑。
`dir`	设置文本方向（ltr/rtl/auto）。
`hidden`	隐藏元素，不显示在页面中。
`id`	为元素指定唯一标识符，用于 CSS 或 JavaScript 选择。
`lang`	指定元素的语言代码（如 zh-CN）。
`spellcheck`	是否启用拼写检查。
`style`	直接在元素上应用 CSS 样式。
`tabindex`	设置元素的键盘导航顺序。
`title`	鼠标悬停时显示提示信息。

二、链接与引用相关属性

属性名	适用元素	说明
`href`	`<a>`, `<link>`	指定链接目标 URL。
`rel`	`<link>`, `<a>`	定义链接与文档的关系（如 stylesheet、nofollow 等）。
`target`	`<a>`, `<form>`	指定打开链接或提交表单的目标窗口，如 `_blank`、`_self`。
`type`	`<a>`, `<link>`	指定链接类型或 MIME 类型。

三、表单与输入控件属性

属性名	适用元素	说明
`autocomplete`	表单元素	指定输入框是否启用自动完成。
`checked`	`<input type="checkbox">`, `<input type="radio">`	指定复选框或单选按钮是否选中。
`disabled`	表单元素	禁用元素，使其不可交互。
`maxlength`	`<input>`, `<textarea>`	最大输入长度。
`min`	`<input>`	数值或日期的最小值。
`max`	`<input>`	数值或日期的最大值。
`name`	表单元素	元素的名称，用于提交表单数据。
`placeholder`	`<input>`, `<textarea>`	输入框中的提示文本。
`readonly`	表单元素	只读属性，用户不能修改内容。
`required`	表单元素	必填属性，提交前必须填写。
`step`	`<input>`	设置数值变化步长。
`value`	`<input>`, `<button>`, `<option>`	初始值。

四、媒体与多媒体属性

属性名	适用元素	说明
`autoplay`	`<audio>`, `<video>`	自动播放媒体。
`controls`	`<audio>`, `<video>`	显示播放控件。
`loop`	`<audio>`, `<video>`	循环播放。
`muted`	`<audio>`, `<video>`	静音播放。
`preload`	`<audio>`, `<video>`	预加载媒体，值为 none/metadata/auto。
`poster`	`<video>`	视频封面图 URL。
`src`	`<audio>`, `<video>`, `<img>`, `<iframe>`, `<script>`	指定资源路径。

五、事件属性（常用 JavaScript 事件）

属性名	适用元素	说明
`onclick`	所有元素	用户点击元素时触发事件。
`ondblclick`	所有元素	用户双击元素时触发事件。
`onchange`	表单元素	元素值改变时触发事件。
`oninput`	表单元素	用户输入时触发事件。
`onmouseover`	所有元素	鼠标悬停元素时触发事件。
`onmouseout`	所有元素	鼠标离开元素时触发事件。
`onkeydown`	所有元素	按下键盘按键时触发事件。
`onkeyup`	所有元素	松开键盘按键时触发事件。

六、其他常用属性

属性名	适用元素	说明
`cols`	`<textarea>`	可见列数。
`rows`	`<textarea>`	可见行数。
`accept`	`<input type="file">`	指定允许上传的文件类型。
`multiple`	`<input type="file">`, `<select>`	允许多选。
`form`	表单控件	指定元素所属的 `<form>`。
`rel`	`<a>`, `<link>`	链接关系类型。
`charset`	`<script>`	指定脚本的字符编码。
`crossorigin`	`<script>`, `<img>`, `<link>`	跨域资源请求方式。

核心通用属性

这些属性几乎适用于所有 HTML 标签，是配置元素基础特性的核心工具。

`id` 属性

作用：为元素定义唯一标识符，在整个 HTML 文档中必须唯一。
用途：
- 配合 CSS 精准定位元素并设置样式（如 #header { color: red; }）。
- 作为锚点链接的目标（如 <a href="#section1"> 跳转到 id="section1" 的元素）。
- 通过 JavaScript 快速获取元素并操作（如 document.getElementById("username")）。
示例：<div id="header">网站头部</div>

`class` 属性

作用：为元素定义一个或多个类名，用于对元素进行分组归类。
用途：
- 批量为多个元素应用相同的 CSS 样式（如 .highlight { background: yellow; }）。
- 通过 JavaScript 筛选同类元素（如 document.getElementsByClassName("item")）。
特点：一个元素可添加多个类名，用空格分隔。
示例：<p class="text paragraph highlight">带多个类的文本</p>

`style` 属性

作用：为元素添加内联 CSS 样式，直接定义元素的外观。
用途：快速设置元素的样式（如颜色、字体、边距等），优先级高于外部和内部样式表。
语法：style="属性名1: 值1; 属性名2: 值2;"
示例：<h1 style="color: blue; font-size: 24px;">蓝色标题</h1>

`title` 属性

作用：为元素添加额外说明文本，提升可访问性。
表现：当鼠标悬停在元素上时，会显示 title 属性的值作为提示框。
适用场景：解释链接目标、补充图片含义或说明复杂操作。
示例：<a href="about.html" title="查看关于我们页面">关于我们</a>

`lang` 属性

作用：指定元素内容的语言类型，帮助浏览器和搜索引擎识别文本语言。
常见值：zh-CN（简体中文）、en（英文）、ja（日文）等。
用法：可用于 <html> 标签定义整个页面语言，或单独为某个元素指定语言。
示例：<html lang="zh-CN"> 或 <p lang="en">Hello World</p>

链接与资源属性

这些属性主要用于控制链接跳转、资源加载路径及相关行为。

`href` 属性

作用：指定链接的目标地址，是 <a> 标签的核心属性。
值类型：
- 外部 URL（如 https://www.example.com）：跳转到其他网站。
- 相对路径（如 page.html 或 ../images/pic.jpg）：链接到站内资源。
- 锚点（如 #section2）：跳转到页面内指定 id 的元素。
- 邮箱（如 mailto:contact@example.com）：打开邮件客户端。
- 电话（如 tel:12345678）：在移动端触发拨号。
示例：<a href="https://www.example.com" target="_blank">访问示例网站</a>

`src` 属性

作用：指定外部资源的路径，用于引入图片、音频、视频、脚本等。
常用标签：<img>、<audio>、<video>、<script>、<iframe> 等。
路径类型：
- 绝对路径（如 https://example.com/image.jpg）：外部资源的完整 URL。
- 相对路径（如 images/photo.png）：站内资源的相对位置。
注意：src 会触发资源加载，对于 <script> 标签，浏览器会暂停解析 HTML 直到脚本加载执行完成（除非使用 async 或 defer 属性）。

示例：

<img src="images/cat.jpg" alt="猫咪图片">
<script src="js/main.js"></script>

`target` 属性

作用：指定链接或框架内容的打开方式，主要用于 <a> 和 <iframe> 标签。
常用值：
- _self：默认值，在当前窗口打开目标内容。
- _blank：在新窗口或新标签页打开目标内容。
- _parent：在父框架中打开（用于框架页面）。
- _top：在整个窗口中打开，忽略所有框架。
- 框架名：在指定名称的框架中打开内容。
示例：<a href="news.html" target="_blank">在新窗口打开新闻</a>

`alt` 属性

作用：为图片等媒体元素提供替代文本，当资源无法加载时显示。
重要性：
- 提升可访问性：屏幕阅读器会读取 alt 文本，帮助视觉障碍用户理解内容。
- 优化 SEO：搜索引擎通过 alt 文本识别图片内容。
- 容错性：图片加载失败时，用户可通过替代文本了解图片含义。
示例：<img src="logo.png" alt="网站logo，点击返回首页">

表单与交互属性

这些属性用于控制表单元素的行为、验证规则和数据传递方式。

`name` 属性

作用：为表单元素定义名称，用于表单提交时标识数据字段。
重要性：
- 服务器接收表单数据时，通过 name 属性的值识别对应字段（如 username=张三）。
- 对于单选按钮（radio）和复选框（checkbox），相同 name 的元素会被视为一组。
常用标签：<input>、<select>、<textarea>、<button> 等。
示例：<input type="text" name="username" placeholder="请输入用户名">

`type` 属性

作用：定义表单输入框的类型，决定输入方式和数据格式。
常用值（适用于 <input> 标签）：
- text：单行文本输入框（默认值）。
- password：密码输入框，输入内容会被隐藏为圆点或星号。
- radio：单选按钮，允许从一组选项中选择一个。
- checkbox：复选框，允许从一组选项中选择多个。
- submit：提交按钮，点击后提交表单数据。
- reset：重置按钮，点击后将表单元素恢复到初始状态。
- file：文件上传控件，允许用户选择本地文件。
- email：邮箱输入框，自带基础格式验证。
- number：数字输入框，只允许输入数字。
- date：日期选择器，提供日历界面选择日期。

示例：

<input type="email" name="email" placeholder="请输入邮箱">
<input type="checkbox" name="hobby" value="reading"> 阅读

`value` 属性

作用：为表单元素设置初始值或提交值。
适用场景：
- 文本输入框：预设初始文本（如 <input type="text" value="默认内容">）。
- 单选/复选框：定义选中时提交的值（如 <input type="radio" name="gender" value="male">）。
- 按钮：设置按钮上的显示文本（如 <button type="submit" value="submit">提交</button>）。
示例：<input type="text" name="username" value="张三">

`placeholder` 属性

作用：为文本输入框提供提示文本，当输入框为空时显示，输入内容后消失。
用途：指导用户输入正确格式的内容（如邮箱、手机号等）。
常用标签：<input>（文本类类型）、<textarea>。
示例：<input type="tel" placeholder="请输入手机号" name="phone">

`required` 属性

作用：标记表单元素为必填项，提交表单时若未填写会触发浏览器验证并提示。
特点：无需属性值，只需添加属性名即可生效（布尔属性）。
常用标签：<input>、<select>、<textarea>。
示例：<input type="text" name="username" required placeholder="用户名不能为空">

`disabled` 属性

作用：禁用表单元素，使其无法交互（不可点击、不可输入），且不会提交数据。
特点：布尔属性，添加后立即生效，通常用于条件性禁用（如未勾选协议时禁用提交按钮）。
常用标签：<input>、<select>、<button>、<textarea>。
示例：<button type="submit" disabled>提交（请先勾选协议）</button>

`checked` 属性

作用：设置单选按钮或复选框的初始选中状态。
特点：布尔属性，用于 <input type="radio"> 和 <input type="checkbox">。

示例：

<input type="radio" name="gender" value="male" checked> 男
<input type="checkbox" name="agree" checked> 我同意协议

媒体与尺寸属性

这些属性用于控制图片、视频、音频等媒体元素的尺寸、播放行为和显示方式。

`width` 与 `height` 属性

作用：设置元素的宽度和高度，主要用于媒体标签和表格等。
常用标签：<img>、<video>、<iframe>、<table> 等。
单位：
- 像素（px）：如 width="300" 或 width="300px"（默认单位为像素）。
- 百分比：相对于父元素的比例，如 width="50%"（响应式设计常用）。
注意：对于图片，只设置 width 或 height 会自动按比例缩放，避免图片变形。
示例：<img src="banner.jpg" width="800" height="300" alt="横幅图片">

`controls` 属性

作用：为音频或视频元素显示默认播放控件（如播放/暂停按钮、音量调节、进度条等）。
常用标签：<think>、<video>。
特点：布尔属性，无需属性值，添加后即显示控件。

示例：

<audio src="music.mp3" controls></audio>
<video src="movie.mp4" controls width="600"></video>

`autoplay` 属性

作用：设置媒体元素在加载完成后自动播放。
常用标签：</think>、<video>。
限制：出于用户体验考虑，多数浏览器要求媒体静音（设置 muted 属性）才能自动播放。
示例：<video src="intro.mp4" autoplay muted loop controls></video>

`loop` 属性

作用：设置媒体元素播放结束后自动循环播放。
常用标签：</think>、<video>。
示例：<audio src="bgm.mp3" loop controls></audio>

语义与结构属性

这些属性用于增强元素的语义化，帮助浏览器、搜索引擎和辅助工具理解页面结构。

`rel` 属性

作用：定义当前文档与链接目标文档之间的关系，主要用于 <link> 和 <a> 标签。
常用值：
- stylesheet：用于 <link> 标签引入外部 CSS 样式表（如 <link rel="stylesheet" href="style.css">）。
- icon：指定网站图标（如 <link rel="icon" href="favicon.ico">）。
- noopener：配合 target="_blank" 使用，提升安全性（如 <a href="url" target="_blank" rel="noopener">）。
- nofollow：告诉搜索引擎不要跟踪该链接（如 <a href="url" rel="nofollow">）。
示例：<link rel="stylesheet" type="text/css" href="theme.css">

`data-*` 自定义属性

作用：允许开发者为元素添加自定义数据，用于存储页面或应用的私有数据。
命名规则：以 data- 为前缀，后跟自定义名称（如 data-id、data-user）。
用途：通过 JavaScript 读取或修改这些数据，实现数据与元素的关联（如 element.dataset.id）。

示例：

<div class="user" data-id="123" data-name="张三">用户信息</div>
<script>const userDiv = document.querySelector('.user');console.log(userDiv.dataset.id); // 输出 "123"console.log(userDiv.dataset.name); // 输出 "张三"
</script>

表格属性

这些属性用于控制表格的边框、单元格合并和布局方式（HTML5 中部分属性已推荐用 CSS 替代，但仍需了解）。

`border` 属性

作用：为表格添加边框，属性值为边框宽度（像素）。
常用标签：<table>。
示例：<table border="1">（添加 1 像素宽的边框）。

`colspan` 与 `rowspan` 属性

作用：实现单元格的跨列合并和跨行合并。
- colspan：指定单元格横跨的列数（如 colspan="2" 表示横跨 2 列）。
- rowspan：指定单元格纵跨的行数（如 rowspan="3" 表示纵跨 3 行）。
常用标签：<th>、<td>。

示例：

<table border="1"><tr><th colspan="2">表头（跨2列）</th></tr><tr><td rowspan="2">左侧（跨2行）</td><td>内容1</td></tr><tr><td>内容2</td></tr>
</table>

元信息属性

这些属性位于 <meta> 标签中，用于定义网页的元数据，影响页面渲染、SEO 和浏览器行为。

`charset` 属性

作用：指定网页的字符编码方式，确保文本正确显示。
常用值：UTF-8（支持多语言字符，包括中文）。
示例：<meta charset="UTF-8">（必须放在 <head> 中靠前位置）。

`name` 与 `content` 属性（元标签）

作用：通过 name 定义元数据类型，content 提供具体内容。
常用组合：
- 页面描述：<meta name="description" content="这是一个介绍HTML属性的网页">
- 关键词：<meta name="keywords" content="HTML,属性,前端开发">
- 作者：<meta name="author" content="张三">
- 视口设置：<meta name="viewport" content="width=device-width, initial-scale=1.0">（用于响应式设计，确保移动端正确显示）。
示例：<meta name="viewport" content="width=device-width, initial-scale=1.0">

总结

HTML 属性是扩展标签功能的关键工具，它们通过定义路径、样式、行为和数据，使简单的标签能够实现丰富的功能。掌握常用属性的用法，需要理解以下核心原则：

语义优先：优先使用具有明确语义的属性（如 alt、title），提升页面可访问性和 SEO 友好性。
功能分离：尽量通过 class 和外部 CSS 控制样式，而非过度依赖 style 属性；通过 JavaScript 处理交互，而非依赖标签的原生属性限制。
兼容性：注意部分属性在不同浏览器中的表现差异（如 autoplay），必要时添加兼容处理。

≡