HTML 属性（HTML Attributes）详解

HTML 属性（Attribute） 是写在 HTML 标签中的额外信息，用来描述元素的特征、设置元素行为或提供数据。

基本格式：

<标签名 属性名="属性值">内容</标签名>

例如：

<a href="https://www.baidu.com">百度</a>

这里：

• <a> 是标签
• href 是属性
• "https://www.baidu.com" 是属性值

---

一、HTML 属性的基本语法

1. 属性写在开始标签中

正确：

<p class="text">你好，HTML</p>

错误：

<p> class="text" 你好</p>

---

2. 属性通常使用双引号

推荐：

<img src="cat.jpg" alt="小猫图片">

也可以：

<img src='cat.jpg'>

但建议统一使用：

" "

---

3. 一个标签可以拥有多个属性

例如：

<img 
    src="photo.jpg"
    width="300"
    height="200"
    alt="照片">

包含：

属性	作用
src	图片地址
width	宽度
height	高度
alt	图片描述

---

二、HTML 常用全局属性

全局属性：

几乎所有 HTML 标签都可以使用。

---

1. id 属性

用于给元素设置唯一编号。

示例：

<p id="title">
    我的文章标题
</p>

特点：

• 页面中不能重复
• 常用于 CSS、JavaScript

CSS：

#title {
    color:red;
}

JavaScript：

document.getElementById("title");

---

2. class 属性

用于设置类别。

示例：

<p class="important">
    重要内容
</p>

多个 class：

<div class="box red big">
内容
</div>

CSS：

.box{
    width:200px;
}

.red{
    color:red;
}

---

3. style 属性

直接写 CSS 样式。

示例：

<p style="color:red;font-size:20px;">
红色文字
</p>

但是：

实际项目推荐：

<link rel="stylesheet" href="style.css">

---

4. title 属性

鼠标悬停显示提示。

示例：

<p title="这是提示">
鼠标放这里
</p>

效果：

鼠标停留 → 显示：

这是提示

---

5. lang 属性

定义网页语言。

示例：

<html lang="zh-CN">

表示：

中文网页。

英文：

<html lang="en">

---

三、HTML 常见标签属性

---

1. <a> 超链接属性

href

链接地址：

<a href="https://www.baidu.com">
百度
</a>

---

target

控制打开方式：

<a 
href="https://www.baidu.com"
target="_blank">

打开新窗口

</a>

常见值：

值	作用
_self	当前窗口
_blank	新窗口

---

2. <img> 图片属性

示例：

<img 
src="dog.jpg"
alt="小狗"
width="300">

属性：

属性	说明
src	图片路径
alt	替代文字
width	宽
height	高

---

3. <input> 输入框属性

示例：

<input 
type="text"
placeholder="请输入用户名">

常用属性：

type

输入类型：

<input type="password">

密码框：

<input type="email">

邮箱：

<input type="date">

日期：

---

placeholder

提示文字：

<input placeholder="请输入手机号">

---

value

默认值：

<input value="张三">

---

disabled

禁用：

<input disabled>

---

readonly

只读：

<input readonly value="不能修改">

---

4. <form> 表单属性

示例：

<form 
action="/login"
method="post">

</form>

属性：

属性	作用
action	提交地址
method	提交方式

method：

GET：

method="get"

POST：

method="post"

---

四、布尔属性（Boolean Attribute）

特点：

只写属性名，不需要值。

例如：

<input disabled>

等价：

<input disabled="disabled">

常见：

属性	作用
disabled	禁用
checked	选中
required	必填
readonly	只读
multiple	多选

---

checked 示例

<input type="radio" checked>
男

默认选中。

---

required 示例

<input required>

提交时必须填写。

---

五、自定义属性 data-*

HTML5 支持自定义数据：

格式：

data-名称="值"

示例：

<div 
data-userid="1001">

用户

</div>

JavaScript读取：

element.dataset.userid

结果：

1001

---

六、HTML 属性分类总结

分类	示例
身份属性	id、class
样式属性	style
提示属性	title
链接属性	href、target
图片属性	src、alt
表单属性	type、value、placeholder
控制属性	disabled、checked
数据属性	data-*

---

七、HTML 属性学习口诀

标签负责结构，
属性负责描述。

id 找唯一，
class 做分类。

src 找资源，
href 找链接。

style 改样式，
title 做提示。

input 看 type，
表单靠 action。

---

C#开发者学习 HTML 对应关系（方便理解）

HTML	类似 C#
标签	类/对象
属性	字段/属性(Property)
属性值	字段值
id	唯一对象编号
class	类型分类

例如：

HTML：

<input 
id="username"
value="admin">

类似 C#：

User user = new User();

user.Id = "username";
user.Value = "admin";