第 1 章 · HTML 文档结构与语义标签
本章目标：理解网页「骨架」；掌握 HTML5 完整模板、head 元信息（SEO / Open Graph）、语义标签与可访问性 landmark；为贯穿案例 academy-demo（贤紫学院课程展示小站）搭建首页骨架。
学时建议：2 小时（含 40 分钟跟练与自检）
前置：会使用文本编辑器并在浏览器打开 .html；了解 HTML / CSS / JS 分工（无需编程经验）。
1.1 什么是 HTML
HTML（HyperText Markup Language）描述网页结构；CSS 管外观，JavaScript 管交互。
| 技术 | 职责 | 类比 |
|---|---|---|
| HTML | 结构、语义、可访问性 | 房屋承重墙与房间划分 |
| CSS | 布局、颜色、响应式 | 装修 |
| JavaScript | 交互、数据请求 | 智能家居 |
最小 HTML5 页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，前端世界</h1>
<p>这是第一段文字。</p>
</body>
</html>| 部分 | 作用 |
|---|---|
<!DOCTYPE html> | 声明 HTML5，触发标准模式 |
<html lang="zh-CN"> | 根元素；lang 助 SEO 与读屏 |
<head> | 元信息：编码、标题、样式引用 |
<body> | 用户可见正文 |
1.2 HTML5 完整文档模板
academy-demo 首页 index.html 推荐起点：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="贤紫技术学院课程展示站，涵盖前端、运维、架构等实战课程。">
<meta name="keywords" content="贤紫学院,前端开发,HTML,课程">
<meta name="author" content="贤紫优选">
<!-- Open Graph：社交分享卡片 -->
<meta property="og:type" content="website">
<meta property="og:title" content="贤紫技术学院 · academy-demo">
<meta property="og:description" content="从零搭建课程展示小站。">
<meta property="og:url" content="https://academy-demo.xianzimall.com/">
<meta property="og:image" content="https://academy-demo.xianzimall.com/assets/og-cover.jpg">
<meta property="og:locale" content="zh_CN">
<meta name="theme-color" content="#e91e8c">
<title>贤紫技术学院 · 课程展示 | academy-demo</title>
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<a class="skip-link" href="#main-content">跳到主内容</a>
<header class="site-header">
<a href="/" aria-label="贤紫技术学院首页">
<img src="assets/logo.svg" alt="贤紫技术学院" width="140" height="36">
</a>
<nav aria-label="主导航">
<ul>
<li><a href="/" aria-current="page">首页</a></li>
<li><a href="courses.html">课程</a></li>
<li><a href="about.html">关于</a></li>
</ul>
</nav>
</header>
<main id="main-content">
<h1>贤紫技术学院</h1>
<p>欢迎来到 <strong>academy-demo</strong> 课程展示小站。</p>
</main>
<footer class="site-footer">
<p>© 2026 贤紫优选</p>
</footer>
</body>
</html>1.2.1 head 元信息（SEO / OG）
| 标签 / 属性 | 用途 | 注意 |
|---|---|---|
charset=UTF-8 | 字符编码 | 放 head 最前 |
viewport | 移动端视口 | 响应式必备 |
description | 搜索摘要 | 每页唯一，120～160 字 |
og:title/description/image | 微信等分享卡片 | 图建议 1200×630 |
theme-color | 浏览器 UI 色 | 与品牌色一致 |
<title> | 标签页与搜索标题 | 格式：页面名 · 站点名 |
1.3 语义标签与 Landmark
| 标签 | 隐式 landmark | 典型用途 |
|---|---|---|
<header> | banner | Logo、站点导航 |
<nav> | navigation | 主导航 |
<main> | main | 每页唯一主内容 |
<section> | region | 功能区块 |
<article> | article | 课程卡片、文章 |
<aside> | complementary | 侧边栏 |
<footer> | contentinfo | 版权、备案 |