HTML5新特性
HTML5引入了许多新特性，使Web开发更加高效和强大。
语义化标签
HTML5提供了新的语义化标签，如<header>、<nav>、<section>等。
多媒体支持
原生支持音频和视频播放，无需第三方插件。
视频元素
使用<video>标签可以直接在网页中嵌入视频。
音频元素
使用<audio>标签可以嵌入音频内容。
HTML标题
HTML提供了6个级别的标题标签，从<h1>到<h6>，用于定义文档的标题和子标题。
最佳实践： 每个页面应该只有一个
<h1>标签，用于表示页面主要标题。标题层级应该逻辑清晰，不要跳过标题级别。
标题层级结构
标题层级示例
<h1>文档主标题</h1>
<h2>章节标题</h2>
<h3>子章节标题</h3>
<h4>小标题</h4>
<h5>更小的标题</h5>
<h6>最小标题</h6>文档主标题 (h1)
章节标题 (h2)
子章节标题 (h3)
小标题 (h4)
更小的标题 (h5)
最小标题 (h6)
标题的语义重要性
根据W3C规范，标题不仅仅是视觉上的大小变化，更重要的是它们提供了文档的结构和层次。屏幕阅读器和其他辅助技术使用标题来导航文档内容。
标题属性
标题元素支持所有全局属性，如id、class、style等。特别是id属性，常用于创建页面内锚点链接。
标题属性示例
<h1 id="main-title" class="page-heading">页面主标题</h1>
<h2 id="section1">第一部分</h2>
<h3 class="subsection">子部分</h3>HTML段落
<p>标签用于定义段落。浏览器会自动在段落前后添加一些空白边距。
段落的基本用法
段落示例
<p>这是一个段落。HTML段落用于组织文本内容，使其更易于阅读和理解。</p>
<p>这是另一个段落。浏览器会在每个段落之间自动添加垂直间距。</p>这是一个段落。HTML段落用于组织文本内容，使其更易于阅读和理解。
这是另一个段落。浏览器会在每个段落之间自动添加垂直间距。
长文本的分段
对于长篇文章，合理使用段落可以提高可读性：
长文本分段
<h1>网页设计原则</h1>
<p>优秀的网页设计不仅仅是美观的视觉效果，更重要的是提供良好的用户体验。设计师需要考虑用户的需求和行为模式。</p>
<p>响应式设计是现代网页设计的核心原则之一。网站应该能够在各种设备上正常显示，包括桌面电脑、平板电脑和手机。</p>
<p>可访问性是另一个重要考虑因素。网站应该对所有用户开放，包括有视觉、听觉或运动障碍的用户。</p>段落中的内联元素
段落中可以包含各种内联元素，如<strong>、<em>、<a>等：
段落中的内联元素
<p>这是一个包含<strong>粗体文本</strong>和<em>斜体文本</em>的段落。</p>
<p>这里有一个<a href="https://example.com">链接</a>和一段<code>代码</code>。</p>这是一个包含粗体文本和斜体文本的段落。
这里有一个链接和一段代码。
标题与段落的组合
在实际应用中，标题和段落通常组合使用来创建结构化的内容：
内容结构示例
<article>
<h1>HTML5新特性</h1>
<p>HTML5引入了许多新特性，使Web开发更加高效和强大。</p>
<h2>语义化标签</h2>
<p>HTML5提供了新的语义化标签，如<code><header></code>、<code><nav></code>、<code><section></code>等。</p>
<h2>多媒体支持</h2>
<p>原生支持音频和视频播放，无需第三方插件。</p>
<h3>视频元素</h3>
<p>使用<code><video></code>标签可以直接在网页中嵌入视频。</p>
<h3>音频元素</h3>
<p>使用<code><audio></code>标签可以嵌入音频内容。</p>
</article>使用语义化容器
将标题和段落组织在适当的语义化容器中，可以提高文档的结构清晰度和可访问性：
语义化容器示例
<section>
<h2>产品特性</h2>
<p>我们的产品具有以下特性...</p>
<article>
<h3>高性能</h3>
<p>产品提供卓越的性能表现...</p>
</article>
<article>
<h3>易用性</h3>
<p>用户界面简洁直观...</p>
</article>
</section>SEO最佳实践
正确使用标题标签对搜索引擎优化(SEO)非常重要：
标题层级的重要性
- 每个页面应该只有一个
<h1>标签 - 标题层级应该逻辑清晰，不要跳过级别（如从h1直接跳到h3）
- 标题应该准确描述其下方的内容
- 在标题中包含相关的关键词，但要自然
不良实践示例
避免：
- 使用标题仅为了改变文本大小（应该使用CSS）
- 在页面中使用多个
<h1>标签 - 跳过标题级别（如h1后直接使用h3）
- 使用过长的标题文本
- 在非标题元素上使用标题样式
良好实践示例
良好标题结构
<h1>HTML学习指南 - 从入门到精通</h1>
<h2>HTML基础</h2>
<h3>HTML元素和标签</h3>
<h3>HTML属性</h3>
<h2>HTML表单</h2>
<h3>输入类型</h3>
<h3>表单验证</h3>段落长度与可读性
为了优化阅读体验，段落应该：
- 保持适当的长度（通常3-5个句子）
- 每个段落专注于一个主要观点
- 使用过渡句连接相关段落
- 避免过长的段落，特别是在移动设备上
可访问性考虑
正确的标题结构对屏幕阅读器用户非常重要：
屏幕阅读器导航
屏幕阅读器用户经常使用标题来快速导航页面内容：
- 提供清晰的标题层级结构
- 确保标题准确描述其下方的内容
- 避免使用空的标题标签
- 不要隐藏标题（如使用CSS隐藏但仍然在DOM中）
ARIA标签
在某些情况下，可以使用ARIA属性增强标题的可访问性：
ARIA与标题
<h1 aria-label="主要页面标题">产品介绍</h1>
<h2 id="section1-heading">产品特性</h2>
<p aria-describedby="section1-heading">我们的产品具有以下特性...</p>段落可访问性
确保段落内容对所有用户都可访问：
- 使用清晰简洁的语言
- 避免使用过于复杂的句子结构
- 为技术术语提供解释
- 确保文本与背景有足够的对比度
高级标题技巧
使用标题组
在某些情况下，可能需要将多个标题组合在一起：
标题组示例
<header>
<h1>文章标题</h1>
<p class="subtitle">副标题或描述</p>
<p><time datetime="2026-01-01">2026年1月1日</time></p>
</header>标题与大纲算法
HTML5引入了大纲算法，浏览器和辅助技术使用它来理解文档结构：
- 每个
<section>、<article>等语义元素都会创建新的大纲部分 - 标题级别应该反映它们在文档结构中的层级
- 避免在不使用语义容器的情况下依赖标题级别
大纲算法示例
<body>
<h1>网站标题</h1>
<section>
<h2>第一部分</h2>
<article>
<h3>文章标题</h3>
<p>文章内容...</p>
</article>
</section>
</body>动手练习
创建一个包含完整标题结构的HTML页面：
综合练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的博客 - 标题结构练习</title>
</head>
<body>
<header>
<h1>我的技术博客</h1>
<p>分享Web开发知识和经验</p>
</header>
<main>
<article>
<h2>HTML最佳实践</h2>
<p>本文将介绍HTML开发中的最佳实践...</p>
<h3>语义化HTML</h3>
<p>使用语义化标签可以提高可访问性和SEO...</p>
<h3>标题结构</h3>
<p>正确的标题层级对文档结构至关重要...</p>
<h4>h1标签的使用</h4>
<p>每个页面应该只有一个h1标签...</p>
<h4>标题层级</h4>
<p>不要跳过标题级别...</p>
</article>
</main>
<footer>
<p>© 2026 我的博客</p>
</footer>
</body>
</html>