HTML 常见属性

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 右到左）。