HTML 属性
HTML 属性
- HTML 元素可以设置 属性
- 属性可以在元素中添加 附加信息
- 属性一般描述于 开始标签
- 属性总是以名称/值对的形式出现， 比如：name="value" 。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性 中指定：
<ahref="http://www.ez4code.com">这是一个链接</a>HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
使用双引号：
<a href="https://www.ez4code.com">Link</a>
使用单引号：
<a href='https://www.ez4code.com'>Link</a>属性值包含引号： Link
提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='John "ShotGun" Nelson'或者：
<a href="https://www.ez4code.com?q='search'">Link</a>
HTML 提示：使用小写属性
属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
查看完整的HTML属性列表: HTML 标签参考手册 。
下面列出了适用于大多数 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 事件。 |
全局属性
全局属性是所有 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 ：为元素提供额外的提示信息，通常在鼠标悬停时显示。
<abbr title="HyperText Markup Language">HTML</abbr>
data-* ：用于存储自定义数据，通常通过 JavaScript 访问。
<div data-user-id="12345">User Info</div>
特定元素的属性
某些属性仅适用于特定的 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!')">
更多标准属性说明： HTML 标准属性参考手册 .