HTML基础教程（三）基础之标题：从H1到H6：你的网页Title Tag，才是SEO的秘密武器！标题党的自我修养都在这了！

第一章：开篇暴击——标题，可不是为了“变大变粗”那么简单！

朋友，当你兴冲冲地打开你的代码编辑器，敲下 <h1>我是大标题</h1> 并看到浏览器里那一行威武雄壮的大字时，你是否曾天真地认为，HTML标题的作用就是——变大！加粗！抢占C位！

如果你这么想，那么……恭喜你，你只答对了最微不足道的那一部分。这就好比说法拉利的作用是“能坐两个人”一样，完全忽略了它引擎的轰鸣和设计的灵魂。

在HTML（超文本标记语言）的世界里，标题标签（<h1> 到 <h6>）的真正身份，是深藏不露的结构大师、搜索引擎的“舔狗”（哦不，是“引路人”）以及视觉障碍用户屏幕阅读器的好基友。它们存在的核心意义，不在于样式，而在于语义和结构。

今天，我们就来扒一扒这六个“H字头兄弟”的底裤，看看它们到底有多能耐。

第二章：H家族六兄弟——论资排辈里的大学问

HTML标题就像是一个传统的大家族，等级森严，长幼有序。

<h1>：一家之主，爷爷辈。他是页面的主心骨，通常用来定义整个页面最核心、最重要的主题。一个页面最好只有一个<h1>，这就像一个国家只有一个元首（正常情况下），用来告诉所有人：“瞧一瞧看一看了啊，这个页面主要是讲啥的，都看我！” 他是SEO（搜索引擎优化）的重中之重。
<h2>：中流砥柱，叔叔伯伯辈。他们是支撑起整个内容板块的顶梁柱。通常用于主标题下的主要分论点。一篇文章里有几个<h2>都非常正常。
<h3> 到 <h6>：青年才俊，子子孙孙。这些是层次更低的子标题，用于进一步细分<h2>下面的内容。理论上可以无限嵌套，但现实中用到<h6>的情况已经比较罕见了，除非你在写一本极其复杂的学术巨著。

关键原则：绝不能跳级！你不能在<h1>下面直接跟一个<h3>，这就像你不能让一个婴儿突然去管一个年轻人叫爸爸一样，会搞得家族关系（页面结构）一团乱麻。必须顺序而下，保持清晰的层级。

示例1：一个博客文章的结构

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<h1>探秘猫咪为什么喜欢纸箱：科学背后的十大原因</h1> <!-- 一家之主 -->
<h2>原因一：安全感与压力缓解</h2> <!-- 顶梁柱大伯 -->
<h3>来自祖先的隐藏本能</h3> <!-- 大伯的儿子 -->
<h3>纸箱提供的封闭空间</h3>
<h2>原因二：保暖需求</h2> <!-- 顶梁柱二伯 -->
<h3>纸板的隔热性能</h3>
<h2>原因三：磨爪的乐趣</h2> <!-- 顶梁柱三叔 -->
... （以此类推）

看，这样的结构是不是清晰得像一本书的目录？无论是人还是机器，一眼就能看懂内容的组织方式。

第三章：为什么你非得用好标题？——SEO、可访问性与头发保卫战

如果你还是觉得“我用<div>加个CSS样式也能做出一样的效果”，那就大错特错了。用好标题标签，有三大致命（诱人）的好处：

1. 搜索引擎优化（SEO）：让你的网站在Google/百度面前“刷脸”
搜索引擎爬虫是个“重度近视眼”，它理解你网页内容的主要方式之一，就是通过阅读标题标签。<h1>告诉它页面的核心主题，<h2>、<h3>等告诉它内容的层次结构。一个结构清晰的页面，会更容易被爬虫理解和喜爱，从而更有可能在搜索结果中获得更高的排名。乱用标题？爬虫可能会觉得你的内容混乱不堪，然后……你就默默无闻吧。

2. 可访问性（Accessibility）：科技的温柔
世界上有很多视觉障碍者依靠屏幕阅读器来“听”网页。屏幕阅读器会向用户朗读页面的标题结构，帮助他们快速导航和理解内容。想象一下，如果你的页面全是一堆没有任何语义的<div>，屏幕阅读器用户就像被扔进了一个没有路标、没有地图的迷宫。而清晰的标题结构，就是为他们铺设的盲道。写好代码，是一件积德行善的事。

3. 开发维护性：拯救你和你同事的头发
当你需要调整页面样式或修改内容时，一个语义化的结构能让你迅速定位。而且，CSS可以非常轻松地针对h1, h2等标签设置样式，维护起来效率极高。反之，如果全是<div class="big-title">, <div class="medium-title">，光是起类名就能逼死选择困难症，后期修改更是噩梦。保护好你的发际线，从用好标题标签开始。

第四章：大型车祸现场——标题标签的作死用法

来看看哪些行为是在标题标签的“雷区”上疯狂蹦迪：

作死行为一：多个<h1>：除非你在用HTML5的<article>等分区根元素标签，否则一个页面一个<h1>是铁律。多个<h1>会稀释其重要性，让搜索引擎困惑。
作死行为二：为了样式而用标题：想要一行大字？请用<p>或者<div>加上CSS font-size。绝对不要因为想要“大一点”的字就用<h3>，想要“小一点”的字就用<h4>。记住，样式是CSS的工作，HTML只负责结构！
作死行为三：跳过层级：如前所述，<h1> -> <h3> 是禁忌。保持结构的连贯性。
作死行为四：把标题藏在图片里：为了使用特殊字体，把文字做成图片，然后用<h1>包裹？可以，但必须加上alt属性描述文本，否则爬虫和屏幕阅读器都抓瞎了。

示例2：错误示范 vs 正确示范

<!-- 错误示范：样式驱动，结构混乱 -->
<style>
 .big { font-size: 2em; font-weight: bold; }
 .medium { font-size: 1.5em; font-weight: bold; }
</style>

<div class="big">我的主标题</div> <!-- 败笔1：该用h1却用了div -->
<p>一些介绍文字...</p>
<div class="medium">第一个章节</div> <!-- 败笔2：该用h2却用了div -->
<p>章节内容...</p>
<div class="big">另一个主标题？</div> <!-- 败笔3：出现了第二个“h1” -->

<!-- 正确示范：语义驱动，结构清晰 -->
<h1>我的主标题</h1>
<p>一些介绍文字...</p>
<h2>第一个章节</h2>
<p>章节内容...</p>
<h2>第二个章节</h2> <!-- 正确：使用h2作为同一层级的章节标题 -->