在 HTML 中，标签不仅仅可以写内容，还可以通过 属性（attribute） 来控制：

• 样式外观
• 元素标识
• 提示信息
• CSS 和 JavaScript 操作

常见格式：

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

例如：

<p title="提示文字">鼠标放上来试试</p>

一、style 属性（行内样式）¶

1.1 什么是style¶

style 用于直接在 HTML 标签上设置 CSS 样式。

特点：

• 写在标签内部
• 只作用于当前元素
• 初学者常用，但不推荐大量使用

1.2 基本语法¶

<p style="color:red;">这是红色文字</p>

1.3 示例：设置多个样式¶

<div style="width:200px; height:100px; background-color:yellow;">
  一个盒子
</div>

说明：

• 样式之间用 ; 分隔

1.4 style 优缺点¶

优点：

• 简单直观，适合练习

缺点：

• 不利于维护
• 样式和结构混在一起

二、class 属性（类选择器）¶

2.1 什么是class?¶

class 用于给元素添加“类别”，方便 CSS 批量控制样式。

特点：

• 一个 class 可以被多个元素使用
• 最常用的属性之一

2.2 基本语法¶

<p class="text">这是段落</p>

CSS 中可以这样写：

<style>
  .text {
    color: blue;
    font-size: 20px;
  }
</style>

2.3 示例：多个元素共用 class¶

<p class="info">第一段</p>
<p class="info">第二段</p>
<p class="info">第三段</p>

所有 class="info" 的元素都会变成同样样式。

2.4 一个元素可以有多个 class¶

<div class="box active"></div>

说明：

• class 之间用空格隔开

三、id 属性（唯一标识）¶

3.1 什么是id？¶

id 用于给元素设置唯一标识。

特点：

• 一个页面中 id 必须唯一
• 常用于 JavaScript 操作或锚点跳转

3.2 基本语法¶

<h1 id="title">网页标题</h1>

CSS 中这样写：

#title {
  color: green;
}

3.3 id的常见用途¶

1、页面锚点跳转

<a href="#part1">跳转到第一章</a>

<h2 id="part1">第一章内容</h2>

2、JavaScript 精确获取元素

<p id="demo">内容</p>

<script>
  document.getElementById("demo").innerHTML = "修改成功";
</script>

3.4 class 和 id 的区别¶

四、title 属性（提示信息）¶

4.1 什么是title？¶

title 用于鼠标悬停时显示提示文字。

4.2 基本语法¶

<p title="这是提示内容">
  鼠标放上来试试
</p>

效果：

• 鼠标停留时会出现一个小提示框

4.3 常见用途¶

常见用途如下：

• 提示按钮功能
• 解释缩写
• 增强用户体验

示例：

<a href="https://www.baidu.com" title="点击进入百度首页">
  百度
</a>

五、总结¶

HTML 中常用属性非常重要：