第 1 课：文档结构与语义标签

• 日期：2026-08-31
• 课程序号：第 1 课
• 知识点：HTML5 文档骨架与语义化标签

用途

HTML 描述网页内容的结构。清晰的语义标签能帮助浏览器、搜索引擎和辅助技术理解页面。

核心概念

• <!doctype html> 声明 HTML5 文档。
• <html> 包含整个页面，<head> 保存元信息，<body> 保存可见内容。
• <header>、<main>、<section>、<footer> 比无意义的容器更能表达内容职责。
• 标题应按层级使用 <h1> 到 <h6>。

最小代码示例

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>我的学习页</title>
  </head>
  <body>
    <header><h1>HTML5 学习</h1></header>
    <main><section><h2>第 1 课</h2><p>认识页面结构。</p></section></main>
    <footer>持续学习</footer>
  </body>
</html>

3～5 分钟练习

在 <main> 中增加第二个 <section>，标题为“今日练习”，并添加一段说明文字。

参考答案

<section>
  <h2>今日练习</h2>
  <p>用语义标签组织一个简单页面。</p>
</section>

与上一课的联系

这是 HTML5 路线的第一课。下一课将在这个文档骨架中学习链接、图片与路径。