前面我们学过 HTML 元素：
开始标签 + 内容 + 结束标签。 属性就写在【开始标签】里面，用来给元素附加额外信息，控制元素的行为、外观、功能。
前言回顾
示例：
html
<a href="https://www.baidu.com" target="_blank">打开百度</a><a>是开始标签href="https://www.baidu.com"、target="_blank"这两个就是 属性打开百度是元素内容</a>结束标签
⚠️重点规则：
- 属性只能写在开始标签里面，绝对不能写在结束标签！
- 一个开始标签可以写多个属性，属性之间用空格隔开。
- 属性格式固定：
属性名="属性值"，引号必须英文双引号（新手不要用中文引号）。
一、HTML 属性基础语法
标准格式
html
<标签名 属性名="属性值" 属性名2="属性值2">内容</标签名>拆解：
属性名：HTML 规定好的英文单词，不能自己随便瞎编。=等于号，紧贴属性名，不要乱加空格。"属性值"：放在英文双引号中间，描述这个属性具体是什么。- 多个属性之间用空格隔开，逗号、分号都不能用来分隔属性。
✅正确示例
html
<a href="https://www.baidu.com" target="_blank">百度</a>href 和 target 两个属性，中间用空格分开。
❌新手常见错误写法（全部不要写）
html
<!--错误1：中文引号，网页直接失效-->
<a href="https://www.baidu.com">百度</a>
<!--错误2：属性写在结束标签，完全无效-->
<a>百度</a href="https://www.baidu.com">
<!--错误3：属性之间用逗号分隔，错误-->
<a href="xxx", target="_blank">百度</a>
<!--错误4：等于号两边乱加大量空格（不报错，但不推荐）-->
<a href = "xxx">百度</a>小提示：HTML5 也支持单引号
'值'，甚至部分情况可以不写引号，新手统一全部用英文双引号，避免踩坑。
二、两种属性分类
1. 通用属性（全局属性）
几乎所有 HTML 元素都可以使用的属性 ，放在任何标签的开始标签都生效。 常用全局属性：class、id、title。
① title 属性
作用：鼠标悬浮在元素上面的时候，弹出提示文字。
示例：
html
<p title="这是鼠标悬浮提示文字">把鼠标放到这段文字上面，看提示</p>解释：
title="这是鼠标悬浮提示文字"是 p 元素的 title 属性- 网页正常只显示文字：
把鼠标放到这段文字上面，看提示 - 鼠标悬停上去，就会弹出 title 里面写的提示。
再举 a 链接例子：
html
<a href="https://www.baidu.com" title="跳转到百度首页">百度</a>鼠标放在 "百度" 两个字上，弹出提示：跳转到百度首页。
② class 属性（非常重要，后面学 CSS 高频用）
作用：给元素设置类别标记，主要给 CSS 样式使用，可以多个元素使用同一个 class。 格式：class="类名"
html
<p class="red-text">第一段文字</p>
<p class="red-text">第二段文字</p>解释： 两个 p 元素，class 都是red‑text。
现在 HTML 阶段看不到效果，后面 CSS 就可以统一给所有 class="red‑text" 的文字改成红色。 class 名字可以自己起，英文、数字、横线，不能中文，不能有空格。
一个元素写多个 class，空格隔开：
html
<p class="big red">文字</p>这里这个 p 同时拥有 big 和 red 两个类别。
③ id 属性
作用：给元素设置唯一标识，整个页面 id 名字不能重复。
class 可以多个元素共用；id 在一个网页里面只能出现一次。
html
<p id="intro">这是介绍段落</p>id 后面做页面锚点跳转、JS 使用，新手先记住规则：id 值整个网页唯一。
2. 特有属性（局部属性）
只属于某一类标签，别的标签写了不生效。 比如我们前面学过：
<a>标签才有href、target<img>标签才有src、alt这些就是特有属性，放到别的标签上没有任何作用。
示例 1：a 标签特有属性 href、target
html
<a href="https://www.baidu.com" target="_blank">访问百度</a>href：规定跳转地址，只有 a 标签能用。target="_blank"：新标签页打开，只有 a 标签有效。
如果你把 href 写到 p 标签上：
html
<p href="https://www.baidu.com">测试</p>❌完全没用！p 标签不认识 href 这个属性，文字不会变成链接。
示例 2：img 标签特有属性 src、alt、width
html
<img src="cat.jpg" alt="小猫图片" width="400">src：图片来源地址，img 专属。alt：图片加载失败时显示的替代文字，img 专属。width设置图片宽度。
把 src 写在 p 标签上，不起任何效果。
示例 3：meta 标签特有 charset 属性
html
<meta charset="UTF-8">charset 是 meta 标签的专属属性，用来设置网页编码，防止中文乱码。
三、空元素（单标签）的属性
空元素没有结束标签，属性同样写在唯一的开始标签中。 <img>、<br>、<meta>都是空元素。
示例：
html
<img src="dog.jpg" alt="小狗" width="300">- img 是空元素，没有内容，没有
</img> - src、alt、width 全部写在这个开始标签内。
br 换行标签几乎不用属性。meta 大量使用属性。
四、属性完整可运行综合案例
复制全部代码保存为 .html 文件，浏览器打开，逐个看效果
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- meta标签，charset是特有属性，设置中文编码 -->
<meta charset="UTF-8">
<title>HTML 属性演示</title>
</head>
<body>
<!-- p标签，使用全局属性 title -->
<p title="我是悬浮提示！鼠标放上来">鼠标悬浮在本段文字看提示效果</p>
<!-- h2标签，使用id全局属性 -->
<h2 id="title01">水果介绍</h2>
<!-- a标签特有属性 href、target；同时使用title全局属性 -->
<a href="https://www.baidu.com" target="_blank" title="打开百度搜索水果知识">
点击搜索水果
</a>
<br>
<!-- img标签特有属性 src、alt、width -->
<img src="https://picsum.photos/id/102/350/220" alt="水果照片" width="350">
<!-- p标签使用class全局属性 -->
<p class="text‑note">上面是一张水果图片。class属性现阶段看不到样式效果，CSS才会生效。</p>
</body>
</html>代码逐句解释
-
<meta charset="UTF‑8">charset是 meta 的特有属性，告诉浏览器网页编码 UTF‑8，防止中文乱码。 -
<p title="我是悬浮提示！鼠标放上来">title是全局属性，鼠标悬浮就会弹出引号里面的文字，p 标签可以用，a、h2 也都可以用。 -
<a href="https://www.baidu.com" target="_blank" title="打开百度搜索水果知识">
href：a 标签特有，跳转地址；target="_blank"：a 标签特有，新窗口打开；title：全局属性，鼠标悬浮提示；
同一个标签写 3 个属性，属性之间用空格隔开。
<img src="https://picsum.photos/id/102/350/220" alt="水果照片" width="350">
- src：img 特有属性，图片网络地址；
- alt：img 特有属性，图片加载失败显示的文字；
- width：设置图片宽度。
<p class="text‑note">class 全局属性，给这个段落打上标记，HTML 本身看不出变化，后面 CSS 用来设置样式。
五、新手高频易错点汇总
- ❌属性写在结束标签
html
<p>文字</p title="提示"> <!--错误！结束标签不允许写属性-->✅正确，写在开始标签：
html
<p title="提示">文字</p>- ❌使用中文双引号
" "，必须英文" "
中文引号浏览器识别不了，属性直接失效。
- ❌多个属性用逗号隔开
html
<a href="xxx", target="_blank"> </a> <!--错，不能逗号，只用空格分隔-->-
❌特有属性随便给别的标签用
href只属于a；src只属于img，写到 p、h2 上没有任何效果。 -
❌id 在同一个页面写重复名字
id="demo" 整个网页只能出现一次；class 可以无限次重复。
- ❌属性名自己随便创造，比如：
html
<p myattr="123">测试</p>HTML 没有myattr这个属性，浏览器会直接忽略，不会起作用。属性名必须是 HTML 规定的。
六、本篇核心知识点总结
- HTML 属性写在【开始标签】内部，结束标签不能写属性。
- 标准语法：
属性名="属性值"，多个属性之间空格分隔，引号用英文双引号。 - 分为两大类：
- 全局属性 ：几乎所有标签都能用，代表：
class、id、title。 - 特有属性 ：只给特定标签使用，如 a 标签
href / target，img 标签src / alt。
- 全局属性 ：几乎所有标签都能用，代表：
- class 可以多个元素共用；id 整个页面必须唯一。
- 空元素（img meta）没有结束标签，属性写在仅有的开始标签。
- 属性作用：给元素附加额外信息，控制跳转、图片来源、提示、标记分类等功能。
小思考题巩固：
html
<img src="flower.jpg" alt="鲜花" title="美丽的鲜花" width="300">问：哪些是属性？哪些是全局属性？哪些是 img 标签的特有属性？
下节预告
下一篇教程：HTML 标题的详细讲解**。**