HTML 元素的属性是用于控制元素行为或样式的附加信息。
以下是一些常见的 HTML 属性：
1. 通用属性（Global Attributes）
这些属性几乎可以应用于所有 HTML 元素：
id：元素的唯一标识符，用于 JavaScript 或 CSS 选择。
<div id="main"></div>
class：为元素指定一个或多个类名，用于 CSS 样式或 JavaScript 操作。
<div class="container header"></div>
style：为元素设置内联样式。
<div style="color: red;"></div>
title：为元素提供额外信息，当鼠标悬停在元素上时显示。
<button title="Click me!">Click</button>
data-*：自定义属性，用于存储私有数据，以data-为前缀，可以通过 JavaScript 访问。
<div data-user-id="123"></div>
2. 事件属性（Event Attributes）
这些属性用于处理元素上的事件：
onclick：定义单击事件处理函数。
<button onclick="alert('Clicked!')">Click me</button>
onmouseover：鼠标悬停时触发的事件。
<div onmouseover="console.log('Mouse over')"></div>
onkeydown：按下键盘时触发的事件。
<input type="text" onkeydown="handleKeyDown(event)">
3. 表单相关属性
type：定义输入框类型，例如text、password、email等。
<input type="text">
name：定义表单元素的名称，用于表单提交。
<input type="text" name="username">
value：定义表单元素的默认值。
<input type="text" value="Default value">
placeholder：为输入框提供占位符文本，提示用户输入。
<input type="text" placeholder="Enter your name">
disabled：禁用输入元素，使其不可交互。
<input type="text" disabled>
required：标记表单元素为必填项。
<input type="text" required>
4. 链接和资源加载属性
href：用于指定超链接的目标 URL。
<a href="https://example.com">Go to example.com</a>
src：指定图像、脚本或其他资源的路径。
<img src="image.jpg" alt="Image description">
alt：为图像提供替代文本，图像无法加载时显示。
<img src="image.jpg" alt="Alternative text">
rel：指定链接与目标文档的关系，常用于link标签和a标签。
<link rel="stylesheet" href="style.css">
target：定义链接的打开方式，常用值包括_self（当前窗口）和_blank（新窗口）。
<a href="https://example.com" target="_blank">Open in new tab</a>
5. 多媒体属性
controls：为<audio>或<video>元素添加播放控件。
<video src="video.mp4" controls></video>
autoplay：自动播放音频或视频。
<audio src="audio.mp3" autoplay></audio>
loop：音频或视频播放完后重新开始播放。
<video src="video.mp4" loop></video>
muted：自动静音视频或音频。
<audio src="audio.mp3" muted></audio>
6. 图像和媒体相关属性
width和height：定义图像或视频的宽度和高度。
<img src="image.jpg" width="200" height="100">
7. iframe 属性
src：定义嵌入的网页 URL。
<iframe src="https://example.com"></iframe>
sandbox：为嵌入内容提供更严格的限制，控制 iframe 的行为。
<iframe src="https://example.com" sandbox></iframe>
8. 语义化属性
role：为屏幕阅读器和辅助技术提供语义化描述。
<div role="navigation"></div>
9. 布局和可访问性属性
hidden：隐藏元素，元素不会显示在页面中。
<div hidden>This content is hidden</div>
tabindex：定义元素的 tab 键导航顺序。
<button tabindex="1">First</button>
<button tabindex="2">Second</button>
常见考点
1. 全局属性（Global Attributes）
- class：用于给元素指定样式类，如何使用多个类？有哪些常见用法？
- id：唯一标识元素，
id的作用和注意事项。 - style：内联样式的作用及其优先级。
- title：为元素提供额外信息（鼠标悬停时显示）。
- data- 属性*：自定义数据属性，如何在 JavaScript 中访问
data-*属性？
2. 事件属性（Event Attributes）
- onclick、onmouseover 等事件处理属性。
- 如何使用事件属性进行事件绑定？
- 事件属性和 JavaScript 事件监听器（
addEventListener）的区别和应用场景。
3. 表单属性
- name：用于提交表单数据时作为键名。
- action：表单提交的目标 URL。
- method：表单的提交方式（
GET或POST）。 - autocomplete：是否启用表单自动填充。
- required、pattern、min/max 等 HTML5 校验属性。
4. 输入控件相关属性
- value：为输入控件设置默认值。
- placeholder：为输入框提供提示文本。
- disabled：禁用输入控件。
- readonly：只读属性，控件不能被修改。
- maxlength/minlength：输入字符长度的限制。
- accept：文件上传时，限制允许的文件类型（适用于
<input type="file">）。
5. 媒体元素属性
- src：媒体文件的路径（适用于
<img>、<audio>、<video>等）。 - alt：图片无法加载时显示的替代文本。
- controls：是否为媒体文件显示默认控制条。
- autoplay：媒体文件是否自动播放。
- loop：媒体文件是否循环播放。
- muted：媒体文件是否静音。
6. 超链接相关属性
- href：链接目标的 URL。
- target：定义链接打开的方式（如
_blank打开新窗口）。 - download：允许下载链接资源，而不是导航到资源。
- rel：定义链接与当前文档的关系（如
nofollow、noopener）。
7. iframe 属性
- src：嵌入的文档或网页的 URL。
- sandbox：启用或禁用特定行为（如禁止脚本、表单提交等）。
- allow：控制 iframe 内的权限（如允许摄像头、麦克风访问）。
8. 图像和图形属性
- srcset：为不同设备提供不同分辨率的图像资源。
- sizes：配合
srcset，定义不同视口下图像显示的尺寸。 - usemap：指定图片使用的图像映射。
- height/width：定义图片或其他元素的高度和宽度。
9. meta 标签属性
- charset：指定文档的字符编码（如
UTF-8）。 - name 和 content：为文档提供元信息（如
description,viewport）。 - http-equiv：配合
content，定义 HTTP 头信息（如refresh,Content-Type）。
10. 无障碍相关属性
- aria- 属性*：为无障碍工具（如屏幕阅读器）提供更多语义信息。
- role：指定元素的功能角色，增强无障碍性。
11. iframe 和图片的懒加载
- loading=“lazy”：为图片和 iframe 启用懒加载。
12. 语言和方向属性
- lang：指定元素或页面的语言（如
lang="en"）。 - dir：指定文本的书写方向（如
ltr左到右，rtl右到左）。