3.1 标题元素(h1-h6)：网页内容的"路标系统"
一、基础案例：正确使用标题层级
<!DOCTYPE html>
<html>
<head>
<title>宠物护理指南</title>
</head>
<body>
<h1>狗狗日常护理大全</h1>
<h2>第一章：饮食管理</h2>
<h3>1.1 幼犬喂养</h3>
<h3>1.2 成犬饮食</h3>
<h2>第二章：清洁护理</h2>
<h3>2.1 洗澡频率</h3>
<h4>2.1.1 短毛犬</h4>
<h4>2.1.2 长毛犬</h4>
</body>
</html>案例解析：
- h1作为文档主标题，整个页面只出现一次
- h2表示主要章节，h3是子章节，以此类推
- 层级关系清晰，像书本目录一样有逻辑性
二、错误案例对比
错误示范：
<h1>猫咪品种介绍</h1>
<h4>波斯猫</h4> <!-- 错误：直接从h1跳到h4 -->
<h2>英国短毛猫</h2> <!-- 错误：层级混乱 -->
<h3>暹罗猫</h3>问题分析：
- 跳级使用标题（h1→h4）
- 层级顺序混乱（h4后面接h2）
- 会导致：屏幕阅读器用户难以理解内容结构搜索引擎无法正确识别内容重要性样式管理困难
三、样式重置案例
浏览器默认样式可能不符合设计需求，可以通过CSS自定义：
/* 标题样式重置 */
h1 {
font-size: 2.2rem;
margin: 1.5em 0 1em;
color: #333;
font-weight: normal;
}
h2 {
font-size: 1.8rem;
margin: 1.3em 0 0.8em;
border-bottom: 1px solid #eee;
padding-bottom: 0.5em;
}
/* 保持层级关系 */
h3 { font-size: 1.5rem; }
h4 { font-size: 1.3rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }四、SEO优化案例
搜索引擎特别关注标题标签：
<!-- 好的SEO实践 -->
<h1>2023年最佳笔记本电脑推荐</h1>
<h2>选购笔记本电脑的5个关键指标</h2>
<h3>处理器性能对比</h3>
<!-- 差的SEO实践 -->
<h1>电子产品</h1> <!-- 太笼统 -->
<h2><a href="/laptops">点击查看</a></h2> <!-- 标题内嵌链接 -->
<h3>!!!!!!!!!促销!!!!!!!!!</h3> <!-- 包含无关符号 -->SEO要点：
- 每个h1应包含目标关键词
- 避免在标题中使用过多符号
- 不要用标题包裹链接
- 保持内容相关性
五、无障碍访问案例
为屏幕阅读器用户优化：
<h1 id="main-title">城市公共交通指南</h1>
<h2 aria-labelledby="subtitle bus">公交车乘坐指南</h2>
<!-- 配合CSS实现视觉隐藏但可被阅读器读取 -->
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>
<h2><span class="visually-hidden">本部分内容：</span>地铁换乘攻略</h2>六、响应式设计案例
不同屏幕尺寸下的标题适配：
/* 移动端标题 */
@media (max-width: 768px) {
h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.3rem; }
}
/* 打印样式 */
@media print {
h1 {
font-size: 18pt;
page-break-after: avoid;
}
h2, h3 {
page-break-after: avoid;
}
}七、实用技巧集合
- 标题分组：
<div class="title-group">
<h1>网页设计与开发</h1>
<p class="subtitle">从入门到精通的全栈教程</p>
</div>
<style>
.title-group h1 { margin-bottom: 0; }
.subtitle {
margin-top: 0;
color: #666;
font-size: 1.2rem;
}
</style>- 装饰效果：
h2.special {
position: relative;
padding-left: 15px;
}
h2.special::before {
content: "";
position: absolute;
left: 0;
top: 5px;
bottom: 5px;
width: 4px;
background: #ff6b6b;
}- 交互标题：
<h2 class="expandable" tabindex="0" aria-expanded="false">
常见问题解答
<span class="icon">+</span>
</h2>
<script>
document.querySelector('.expandable').addEventListener('click', function() {
this.classList.toggle('expanded');
const expanded = this.classList.contains('expanded');
this.setAttribute('aria-expanded', expanded);
this.querySelector('.icon').textContent = expanded ? '-' : '+';
});
</script>八、综合练习
创建一个符合以下要求的文档结构：
- 主标题：你最喜欢的城市
- 三个h2章节：景点介绍/美食推荐/交通指南
- 每个h2下至少两个h3子章节
- 添加适当的CSS样式
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; }
h1 { color: #2c3e50; text-align: center; }
h2 { color: #3498db; border-left: 4px solid #3498db; padding-left: 10px; }
h3 { color: #e74c3c; margin-left: 20px; }
</style>
</head>
<body>
<h1>我最爱的城市：京都</h1>
<h2>景点介绍</h2>
<h3>伏见稻荷大社</h3>
<p>以千本鸟居闻名...</p>
<h3>清水寺</h3>
<p>世界文化遗产...</p>
<h2>美食推荐</h2>
<h3>怀石料理</h3>
<h3>抹茶甜点</h3>
<h2>交通指南</h2>
<h3>市内巴士</h3>
<h3>地铁线路</h3>
</body>
</html>