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），必要时添加兼容处理。

≡