在 HTML 中，属性是附加到元素上的额外信息，用于控制元素的行为或外观。属性以键-值对的形式存在，通常在开始标签内定义。每个 HTML 元素都可以有多个属性，这些属性影响元素的显示和功能。

1. HTML 属性的基本结构

HTML 属性具有以下特点：

• 属性总是出现在元素的开始标签中。
• 属性值通常是字符串，用引号括起来。
• 属性的名称和值之间用 = 连接。

示例：

<a href="https://www.example.com" target="_blank">点击这里</a>

• href 和 target 是属性名称。
• "https://www.example.com" 和 "_blank" 是属性的值。

2. 常见的 HTML 属性

2.1 id

id 属性为元素提供一个唯一的标识符。每个页面中，id 必须是唯一的，通常用于与 CSS 或 JavaScript 进行交互。

示例：

<div id="header">欢迎来到我的网站</div>

2.2 class

class 属性用于指定元素的一个或多个类。它允许我们通过 CSS 或 JavaScript 选择并样式化多个元素。

示例：

<p class="highlight">这段文本将被高亮显示。</p>

2.3 style

style 属性用于直接为元素定义内联 CSS 样式。它的值是 CSS 规则。

示例：

<p style="color: red; font-size: 20px;">这段文字是红色的，字体大小为 20px。</p>

2.4 href

href 属性用于为 <a> 标签指定目标 URL。点击该链接时，浏览器将跳转到该 URL。

示例：

<a href="https://www.example.com">访问 Example 网站</a>

2.5 src

src 属性指定图像、音频、视频等元素的源文件路径。例如，在 <img> 标签中使用 src 来指定图片的路径。

示例：

<img src="logo.png" alt="网站 Logo">

2.6 alt

alt 属性为 <img> 标签提供替代文本，当图片无法显示时，浏览器会显示该文本。

示例：

<img src="logo.png" alt="网站 Logo">

2.7 title

title 属性提供额外的信息，通常当用户将鼠标悬停在元素上时，会显示该信息。它适用于大多数 HTML 元素。

示例：

<a href="https://www.example.com" title="点击访问 Example 网站">Example</a>

2.8 target

target 属性指定链接在何处打开。常见的值包括：

• _blank：在新标签页中打开。
• _self：在当前标签页中打开（默认值）。
• _parent 和 _top：用于嵌套框架时的目标页面。

示例：

<a href="https://www.example.com" target="_blank">打开新标签页</a>

2.9 type

type 属性用于指定输入元素（如 <input>）的类型。它定义了输入字段的行为和样式。

示例：

<input type="text" placeholder="请输入姓名">
<input type="password" placeholder="请输入密码">

2.10 value

value 属性用于设置元素的默认值或选中的值。它通常用于表单元素，如 <input>、<button>、<option> 等。

示例：

<input type="text" value="默认值">
<button type="submit" value="提交">提交</button>

2.11 name

name 属性通常用于表单元素，指定表单数据提交时的字段名称。这个属性非常重要，因为它用于在服务器端接收表单数据。

示例：

<form>
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="submit">提交</button>
</form>

3. HTML 5 新增的属性

随着 HTML 5 的推出，一些新属性被引入以支持新的功能和更好的兼容性。

3.1 placeholder

placeholder 属性为 <input> 或 <textarea> 元素提供提示文本，当输入框为空时显示。

示例：

<input type="text" placeholder="请输入您的电子邮件">

3.2 autofocus

autofocus 属性用于自动将焦点设置到页面加载时的某个元素上，通常用于表单输入字段。

示例：

<input type="text" autofocus>

3.3 required

required 属性用于指定表单字段为必填项。如果用户没有填写此字段，表单将无法提交。

示例：

<form>
  <input type="text" name="username" required placeholder="请输入用户名">
  <input type="submit" value="提交">
</form>

3.4 data-

HTML5 引入了 data- 属性，用于将自定义数据存储到元素中。这些数据可以通过 JavaScript 访问并使用。

示例：

<div data-user-id="123" data-role="admin">用户信息</div>

你可以使用 JavaScript 获取这些数据：

let div = document.querySelector('div');
let userId = div.getAttribute('data-user-id');
let role = div.getAttribute('data-role');
console.log(userId, role); // 123, admin

4. 常见的 HTML 属性汇总

属性名称	描述	示例
id	元素的唯一标识符	<div id="main">内容</div>
class	元素的类名，用于 CSS 样式和 JavaScript 交互	<div class="box">内容</div>
style	内联 CSS 样式	<p style="color:red;">文本</p>
href	超链接目标 URL	<a href="https://example.com">链接</a>
src	资源的路径（如图片、视频）	<img src="image.jpg" alt="图片">
alt	图片无法显示时的替代文本	<img src="image.jpg" alt="图片">
target	指定超链接打开的方式（如在新标签页打开）	<a href="https://example.com" target="_blank">链接</a>
type	元素的类型（如表单字段的类型）	<input type="text">
value	表单元素的默认值或选中的值	<input type="text" value="默认">
name	表单字段的名称，用于提交表单时标识字段	<input type="text" name="username">
placeholder	提示文本，显示在输入框中，当输入框为空时显示	<input type="text" placeholder="输入姓名">
required	指定表单字段为必填项	<input type="text" required>
data-*	自定义数据，通常用于 JavaScript 获取	<div data-id="123">内容</div>

总结

• HTML 属性是描述元素特性或行为的附加信息。
• 属性通常由 name="value" 形式表示，位于元素的开始标签中。
• 属性可以控制元素的样式、行为和功能，如 href 控制链接目标，src 控制图片路径，value 控制输入框的默认值等。
• HTML5 引入了一些新属性，如 placeholder、autofocus 和 data-*。

通过合理使用 HTML 属性，你可以更精确地控制网页的内容和样式。