课时07：常用标签（上）—— 标题、段落与图片¶

学习目标：掌握 H 系列标题标签、P 段落标签及 IMG 图片标签的语义用法、属性配置及 SEO 优化原则。

一、H 系列标题标签¶

1.1 标签定义与层级¶

HTML 提供六级标题标签 <h1> 至 <h6>，用于为内容添加标题语义：

<h1>一级标题（最高权重）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最低权重）</h6>

核心特征： - 均为双标签、容器级标签 - 浏览器默认渲染时，字体大小从 <h1> 到 <h6> 逐级递减 - 体现内容的层级关系与重要性排序

1.2 权重与 SEO 优化¶

权重语义：权重代表文字在文档结构中的重要性，赋予 H 标签即赋予标题语义。

搜索引擎优化（SEO）规则：

标签	SEO 权重	使用规范
`<h1>`	最高	每个页面仅使用 1 个，通常承载页面核心主题或 Logo
`<h2>`	高	用于页面主要板块标题，可多次使用
`<h3>` ~ `<h6>`	中 ~ 低	用于子层级标题，按内容层级递减使用

SEO 惩罚机制：若页面设置多个 <h1>，搜索引擎可能判定为作弊行为，导致排名下降。

1.3 实际应用案例¶

以门户网站首页为例，典型的 H 标签结构：

<body>
    <h1>
        <a href="/">
            <img src="logo.png" alt="网站Logo">
        </a>
    </h1>
    <!-- h1 包裹 Logo，代表页面核心主题 -->

    <h2>热点新闻</h2>
    <h2>财经资讯</h2>
    <h2>科技前沿</h2>
</body>

二、P 段落标签¶

2.1 标签定义¶

<p> 标签代表段落（paragraph），用于将文字内容按语义划分为独立段落：

<p>这是第一段文字内容。</p>
<p>这是第二段文字内容。</p>

核心特征： - 双标签，文本级标签 - 内部只能嵌套文字或文本级内容（如 <span>、<a>、<img>） - 浏览器默认在段落前后添加垂直间距，实现段落分隔效果

2.2 与空白折叠的关系¶

HTML 中多个空格或换行会被合并为单个空格，导致文字挤在一起。使用 <p> 标签可确保每段文字独立成行，实现语义化的段落分隔：

<!-- 错误：依赖换行分隔（无效） -->
第一段文字
第二段文字

<!-- 正确：使用 p 标签语义化分隔 -->
<p>第一段文字</p>
<p>第二段文字</p>

2.3 首行缩进说明¶

<p> 标签本身不提供首行缩进功能。如需实现首行缩进两字符，需通过 CSS 控制：

<p style="text-indent: 2em;">这是首行缩进两个字符的段落。</p>

三、IMG 图片标签¶

3.1 标签定义¶

<img> 标签用于在页面指定位置插入图片，是单标签、文本级标签：

<img src="images/photo.jpg" alt="图片描述" width="300" height="200">

3.2 核心属性详解¶

`src` 属性（Source）¶

作用：指定图片的引用路径（非嵌入）
本质：图片文件仍存储在服务器或本地目录，浏览器通过路径读取并渲染
路径类型：支持相对路径、绝对路径和网络 URL

`alt` 属性（Alternative Text）¶

作用：图片加载失败时显示的替换文本
SEO 价值：搜索引擎通过 alt 文本理解图片内容，影响图片搜索排名
无障碍支持：屏幕阅读器为视障用户朗读 alt 文本

<!-- 图片路径错误时，浏览器显示 "鸟巢夜景" 文本 -->
<img src="wrong-path.jpg" alt="鸟巢夜景">

`width` 与 `height` 属性¶

作用：设置图片的宽度和高度，单位为像素（px）
等比例缩放原则：实际工作中通常只设置宽度或高度中的一个，另一个自动按原始比例缩放
变形风险：同时设置宽度和高度可能导致图片比例失调、拉伸变形

<!-- 推荐：仅设置宽度，高度自动等比例缩放 -->
<img src="photo.jpg" width="400" alt="描述">

<!-- 不推荐：同时设置宽高，可能导致变形 -->
<img src="photo.jpg" width="400" height="300" alt="描述">

`title` 属性¶

作用：鼠标悬停在图片上时显示的提示文本
与 alt 的区别：alt 是图片的语义替代，title 是交互提示

<img src="photo.jpg" alt="鸟巢夜景" title="点击放大查看">

`border` 属性（已废弃）¶

历史作用：为图片添加边框
现代替代：使用 CSS border 属性控制，不再推荐在 HTML 中设置