【HTML 基础教程】HTML 属性

HTML 属性

---

属性是 HTML 元素提供的附加信息。

属性通常出现在 HTML 标签的开始标签中，用于定义元素的行为、样式、内容或其他特性。

属性总是以 name="value" 的形式写在标签内，name 是属性的名称，value 是属性的值。

---

HTML 属性

• HTML 元素可以设置属性
• 属性可以在元素中添加附加信息
• 属性一般描述于开始标签
• 属性总是以名称/值对的形式出现，比如：name="value"。

---

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

实例

<a href="http://www.runoob.com">这是一个链接</a>

尝试一下 »

---

HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

使用双引号：

<a href="https://www.runoob.com">Link</a>

使用单引号：

<a href='https://www.runoob.com'>Link</a>

属性值包含引号： Link

提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='John "ShotGun" Nelson'

或者：

<a href="https://www.runoob.com?q='search'">Link</a>

---

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

---

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 οnclick="alert('Button clicked!')">Click Me</button>

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

<div οnmοuseοver="this.style.backgroundColor='yellow'">Hover over me</div>

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

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

更多标准属性说明： HTML 标准属性参考手册.