HTML属性

0x0 概述※

HTML属性指的是在HTML元素中使用 属性=属性值 例如

<a href="http://baidu.com/">点击跳转到百度</a>

在上述的超链接元素中，href 就是我们这个属性后面接的网址就是属性值。

一般的属性值都使用双引号括起来。

所有属性都需要小写。

0x1 HTML常用的属性※

属性名	适用元素	说明
`id`	所有元素	为元素指定唯一的标识符。
`class`	所有元素	为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。
`style`	所有元素	直接在元素上应用 CSS 样式。
`title`	所有元素	为元素提供额外的提示信息，通常在鼠标悬停时显示。
`data-*`	所有元素	用于存储自定义数据，通常通过 JavaScript 访问。
`href`	`<a>`, `<link>`	指定链接的目标 URL。
`src`	`<img>`, `<script>`, `<iframe>`	指定外部资源（如图片、脚本、框架）的 URL。
`alt`	`<img>`	为图像提供替代文本，当图像无法显示时显示。
`type`	`<input>`, `<button>`	指定输入控件的类型（如 `text`, `password`, `checkbox` 等）。
`value`	`<input>`, `<button>`, `<option>`	指定元素的初始值。
`disabled`	表单元素	禁用元素，使其不可交互。
`checked`	`<input type="checkbox">`, `<input type="radio">`	指定复选框或单选按钮是否被选中。
`placeholder`	`<input>`, `<textarea>`	在输入框中显示提示文本。
`target`	`<a>`, `<form>`	指定链接或表单提交的目标窗口或框架（如 `_blank` 表示新标签页）。
`readonly`	表单元素	使输入框只读。
`required`	表单元素	指定输入字段为必填项。
`autoplay`	`<audio>`, `<video>`	自动播放媒体。
`onclick`	所有元素	当用户点击元素时触发 JavaScript 事件。
`onmouseover`	所有元素	当用户将鼠标悬停在元素上时触发 JavaScript 事件。
`onchange`	表单元素	当元素的值发生变化时触发 JavaScript 事件。

0x2 属性用例※

全局属性※

全局属性是所有 HTML 元素都可以使用的属性。

id：为元素指定唯一的标识符。

<div id="header">This is the header</div>

class：为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。

<p class="text highlight">This is a highlighted text.</p>

style：用于直接在元素上应用 CSS 样式。

<p style="color: blue; font-size: 14px;">This is a styled paragraph.</p>

title：为元素提供额外的提示信息，通常在鼠标悬停时显示。

data-*：用于存储自定义数据，通常通过 JavaScript 访问。

特定元素的属性※

某些属性仅适用于特定的 HTML 元素。

href（用于 <a> 和 <link> 元素）：指定链接的目标 URL。

<a href="https://www.example.com">Visit Example</a>

src（用于 <img>, <script>, <iframe> 等元素）：指定外部资源的 URL。

<img src="image.jpg" alt="An example image">

alt（用于 <img> 元素）：为图像提供替代文本，当图像无法显示时显示。

<img src="image.jpg" alt="An example image">

type（用于 <input> 和 <button> 元素）：指定输入控件的类型。

<input type="text" placeholder="Enter your name">

value（用于 <input>, <button>, <option> 等元素）：指定元素的初始值。

<input type="text" value="Default Value">

disabled（用于表单元素）：禁用元素，使其不可交互。

<input type="text" disabled>

checked（用于 <input type="checkbox"> 和 <input type="radio">）：指定复选框或单选按钮是否被选中。

<input type="checkbox" checked>

placeholder（用于 <input> 和 <textarea> 元素）：在输入框中显示提示文本。

<input type="text" placeholder="Enter your email">

target（用于 <a> 和 <form> 元素）：指定链接或表单提交的目标窗口或框架。

<a href="https://www.example.com" target="_blank">Open in new tab</a>

布尔属性※

布尔属性是指不需要值的属性，它们的存在即表示 true，不存在则表示 false。

disabled：禁用元素。

<input type="text" disabled>

readonly：使输入框只读。

<input type="text" readonly>

required：指定输入字段为必填项。

<input type="text" required>

autoplay（用于 <audio> 和 <video> 元素）：自动播放媒体。

<video src="video.mp4" autoplay></video>

自定义属性※

HTML5 引入了 data-* 属性，允许开发者自定义属性来存储额外的数据。

data-*：用于存储自定义数据，通常通过 JavaScript 访问。

<div data-user-id="12345" data-role="admin">User Info</div>

事件处理属性※

HTML 元素可以通过事件处理属性来响应特定的事件，如点击、鼠标悬停等。

onclick：当用户点击元素时触发。

<button onclick="alert('Button clicked!')">Click Me</button>

onmouseover：当用户将鼠标悬停在元素上时触发。

<div onmouseover="this.style.backgroundColor='yellow'">Hover over me</div>

onchange：当元素的值发生变化时触发。

<input type="text" onchange="alert('Value changed!')">