HTML5 基础语法 ⭐

HTML 文档结构与常用标签，前端开发的起点

学习目标

理解 HTML 文档的基本结构
掌握常用文本标签的使用
理解块级元素和行内元素的区别
能写出一个完整的页面结构

生活化比喻

HTML 文档就像一座"建筑"：

比喻对应：

┌──────────────────────────────────────────────────────┐
│                    建筑结构                           │
├──────────────────────────────────────────────────────┤
│                                                      │
│    <!DOCTYPE html>    →    地基声明（告诉建筑师标准） │
│    <html>             →    整体框架                   │
│    ┌─────────────┐                                  │
│    │   <head>    │    →    设计图纸（不可见部分）     │
│    │   - title   │    →    项目名称                   │
│    │   - meta    │    →    设计说明                   │
│    └─────────────┘                                  │
│    ┌─────────────┐                                  │
│    │   <body>    │    →    室内空间（可见部分）       │
│    │   - h1      │    →    大门招牌                   │
│    │   - p       │    →    房间内容                   │
│    │   - div     │    →    墙壁分隔                   │
│    └─────────────┘                                  │
│                                                      │
└──────────────────────────────────────────────────────┘

L1 理解层：会用

1.1 HTML 文档结构

语法结构图：

HTML 文档结构：

<!DOCTYPE html>                 ← 声明：告诉浏览器这是 HTML5
<html lang="zh-CN">             ← 根元素：整个页面
  │
  ├─ <head>                     ← 头部：元信息（不可见）
  │    ├─ <meta charset>        ← 字符编码
  │    ├─ <meta viewport>       ← 视口设置
  │    ├─ <title>               ← 页面标题
  │    └─ <link>                ← 引入资源
  │
  └─ <body>                     ← 主体：内容（可见）
       ├─ <header>              ← 页头
       ├─ <main>                ← 主要内容
       ├─ <footer>              ← 页脚
       └─ <script>              ← JavaScript
</html>

最简示例（1-3行）：

html

<!DOCTYPE html>
<html>
  <body>Hello World</body>
</html>

详细示例：

html

<!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>这是我的第一个 HTML 页面。</p>
</body>
</html>

关键部分说明：

部分	作用	能省略吗
`<!DOCTYPE html>`	声明文档类型，告诉浏览器用 HTML5 解析	❌ 不能省略
`<html>`	根元素，包裹整个页面	❌ 不能省略
`<head>`	元信息区域（标题、编码、样式引入）	⚠️ 可以省略，但不推荐
`<body>`	内容区域（用户看到的）	⚠️ 可以省略，但不推荐

1.2 文本标签

标题标签语法结构：

标题层级：

h1 ─────────────────────── 最重要（页面主标题，只能一个）
  │
h2 ─────────────────────── 二级标题（章节标题）
  │
h3 ─────────────────────── 三级标题（小节标题）
  │
h4 / h5 / h6 ──────────── 更小的标题（较少使用）

注意：不要跳级！h1 → h2 → h3，不要 h1 → h3

最简示例：

html

<h1>主标题</h1>
<h2>副标题</h2>
<p>段落内容</p>

详细示例：

html

<!-- 页面标题 -->
<h1>公司官网</h1>

<!-- 章节标题 -->
<h2>关于我们</h2>
<p>我们是一家技术公司...</p>

<!-- 小节标题 -->
<h3>团队介绍</h3>
<p>我们的团队由...</p>

<h3>发展历程</h3>
<p>成立于 2020 年...</p>

段落与换行：

html

<!-- 段落：自动换行 -->
<p>第一段内容</p>
<p>第二段内容</p>

<!-- 换行：不产生新段落 -->
<p>第一行<br>第二行</p>

<!-- 分割线 -->
<hr>

行内文本样式：

标签	作用	显示效果
`<strong>`	重要内容（语义化）	加粗
`<em>`	强调内容（语义化）	斜体
`<mark>`	高亮标记	==黄色背景==
`<del>`	删除内容	~~删除线~~
`<ins>`	插入内容	下划线

html

<!-- 语义化标签（推荐） -->
<strong>重要提示</strong>
<em>请注意</em>
<mark>重点内容</mark>

<!-- 纯样式标签（不推荐） -->
<b>粗体</b>    <!-- 无语义，只是样式 -->
<i>斜体</i>    <!-- 无语义，只是样式 -->

1.3 块级元素 vs 行内元素

生活化比喻：

块级元素 = 房间
- 每个房间独占一层空间
- 可以指定房间大小（宽高）
- 房间可以从左到右排列

行内元素 = 装饰品
- 装饰品挨着摆放
- 不能指定大小（宽高无效）
- 装饰品摆满一行才换行

语法结构图：

元素类型对比：

┌──────────────────────────────────────────────────────┐
│  块级元素（Block）                                    │
│  ───────────────                                     │
│  特点：独占一行、可设宽高、可容纳其他元素             │
│                                                      │
│  ┌────────────────────────────┐                     │
│  │         div                │  ← 独占整行         │
│  └────────────────────────────┘                     │
│  ┌────────────────────────────┐                     │
│  │         p                  │                     │
│  └────────────────────────────┘                     │
│                                                      │
├──────────────────────────────────────────────────────┤
│  行内元素（Inline）                                  │
│  ───────────────                                     │
│  特点：并排排列、不可设宽高、只能容纳文本/行内元素   │
│                                                      │
│  [span1] [span2] [span3]  ← 并排摆放                 │
│                                                      │
│  [a链接] [strong] [em]                               │
│                                                      │
└──────────────────────────────────────────────────────┘

最简示例：

html

<!-- 块级元素：独占一行 -->
<div>块1</div>
<div>块2</div>

<!-- 行内元素：并排排列 -->
<span>行1</span>
<span>行2</span>

元素分类：

类型	常见标签	特点
块级	`<div>`, `<p>`, `<h1>`, `<ul>`, `<section>`	独占一行、可设宽高
行内	`<span>`, `<a>`, `<strong>`, `<em>`	并排排列、不可设宽高
行内块	`<img>`, `<input>`, `<button>`	并排排列、可设宽高

1.4 列表

语法结构图：

列表类型：

无序列表（ul）                有序列表（ol）                定义列表（dl）
────────────                 ────────────                 ────────────
<ul>                         <ol>                         <dl>
  ├─ <li>苹果</li>             ├─ <li>第一步</li>           ├─ <dt>HTML</dt>
  ├─ <li>香蕉</li>             ├─ <li>第二步</li>           │    └─ <dd>超文本标记语言</dd>
  └─ <li>橙子</li>             └─ <li>第三步</li>           ├─ <dt>CSS</dt>
</ul>                        </ol>                        │    └─ <dd>层叠样式表</dd>
                                                          └─ <dt>JS</dt>
显示效果：                     显示效果：                     └─ <dd>JavaScript</dd>
• 苹果                        1. 第一步                    </dl>
• 香蕉                        2. 第二步
• 橙子                        3. 第三步                    显示效果：
                                                          HTML
                                                            超文本标记语言

最简示例：

html

<!-- 无序列表 -->
<ul>
  <li>项目一</li>
  <li>项目二</li>
</ul>

<!-- 有序列表 -->
<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

1.5 链接

语法结构图：

链接结构：

<a href="目标地址" target="打开方式">链接文字</a>
    │                │                │
    │                │                └─ 用户看到的文字
    │                └─ _self（当前窗口）
    │                  _blank（新窗口）
    └─ URL地址
       - https://example.com（外部链接）
       - /about（内部链接）
       - #section（锚点链接）
       - mailto:xxx（邮件链接）
       - tel:xxx（电话链接）

最简示例：

html

<a href="https://example.com">点击跳转</a>

链接类型：

html

<!-- 外部链接 -->
<a href="https://example.com">外部网站</a>

<!-- 新窗口打开 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  新窗口打开
</a>

<!-- 锚点链接（页面内跳转） -->
<a href="#section1">跳转到第一节</a>
<section id="section1">第一节内容</section>

<!-- 邮件链接 -->
<a href="mailto:test@example.com">发送邮件</a>

<!-- 电话链接 -->
<a href="tel:+8613800138000">拨打电话</a>

1.6 图片

语法结构图：

图片结构：

<img src="图片路径" alt="替代文本" width="宽度" height="高度">
    │               │               │                │
    │               │               │                └─ 像素值
    │               │               └─ 像素值或百分比
    │               └─ 图片无法显示时的文字
    │                  （无障碍必备、SEO 重要）
    └─ 图片文件地址
       - images/photo.jpg（相对路径）
       - /assets/logo.png（绝对路径）
       - https://...（网络图片）

最简示例：

html

<img src="photo.jpg" alt="照片">

详细示例：

html

<!-- 基础用法 -->
<img src="images/logo.png" alt="公司Logo" width="100" height="50">

<!-- 响应式图片 -->
<img src="photo.jpg" alt="照片" style="width: 100%; height: auto;">

<!-- 懒加载 -->
<img src="photo.jpg" alt="照片" loading="lazy">

图片格式对比：

格式	特点	适用场景
JPG	有损压缩、文件小	照片、复杂图像
PNG	无损压缩、支持透明	Logo、图标
WebP	高压缩率、支持透明动画	现代浏览器首选
SVG	矢量图、无限缩放	图标、Logo
GIF	支持动画	简单动画

L2 实践层：用好

最佳实践

实践	原因	示例
h1 只用一个	SEO 权重集中	`<h1>网站名称</h1>`
标题不跳级	结构清晰、无障碍友好	h1 → h2 → h3
alt 必须写	无障碍访问、SEO	`<img alt="产品图片">`
用语义化标签	代码可读、SEO	`<article>` 替代 `<div>`
target="_blank" 加 rel	安全性	`rel="noopener noreferrer"`

反模式：不要这样做

html

<!-- ❌ 错误：h1 用多个 -->
<h1>标题1</h1>
<h1>标题2</h1>    <!-- 问题：SEO 权重分散 -->

<!-- ✅ 正确：h1 只用一个 -->
<h1>主标题</h1>
<h2>副标题</h2>

html

<!-- ❌ 错误：跳级标题 -->
<h1>主标题</h1>
<h3>小节标题</h3>    <!-- 问题：跳过了 h2 -->

<!-- ✅ 正确：按层级 -->
<h1>主标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>

html

<!-- ❌ 错误：图片无 alt -->
<img src="photo.jpg">    <!-- 问题：无障碍缺失、SEO 差 -->

<!-- ✅ 正确：图片有 alt -->
<img src="photo.jpg" alt="产品展示图片">

html

<!-- ❌ 错误：全用 div -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<!-- 问题：无语义化，不利于 SEO 和无障碍 -->

<!-- ✅ 正确：用语义化标签 -->
<header>...</header>
<nav>...</nav>
<main>...</main>

适用场景

场景	推荐做法	原因
页面主标题	`<h1>`（唯一）	SEO 权重最高
章节标题	`<h2>` → `<h3>`	结构清晰
导航菜单	`<nav>` + `<ul>`	语义化
文章内容	`<article>`	SEO友好
简单容器	`<div>`	无语义需求

L3 专家层：深入

浏览器如何解析 HTML

HTML 解析流程：

┌──────────────────────────────────────────────────────┐
│  步骤 1：接收 HTML 字节流                             │
│  ───────────────────                                 │
│  浏览器从服务器接收 HTML 文件的字节流                 │
└──────────────────────────────────────────────────────┘
          ↓
┌──────────────────────────────────────────────────────┐
│  步骤 2：解码与词法分析                               │
│  ───────────────────                                 │
│  将字节流转换为字符，识别标签、属性、文本             │
│  例如：<div class="box"> → Token(div, class="box")   │
└──────────────────────────────────────────────────────┘
          ↓
┌──────────────────────────────────────────────────────┐
│  步骤 3：构建 DOM 树                                  │
│  ───────────────────                                 │
│  将 Token 组装成树形结构                              │
│                                                      │
│          html                                        │
│         /    \                                       │
│      head    body                                    │
│      /  \    /  \                                    │
│   meta title h1  p                                   │
└──────────────────────────────────────────────────────┘
          ↓
┌──────────────────────────────────────────────────────┐
│  步骤 4：渲染页面                                     │
│  ───────────────────                                 │
│  DOM 树 + CSS 样式 → 渲染树 → 绘制到屏幕              │
└──────────────────────────────────────────────────────┘

性能考量

操作	性能影响	建议
大量嵌套 div	渲染树复杂	减少不必要的嵌套
图片未设置尺寸	页面重排	预设 width/height
CSS 在底部	阻塞渲染	CSS 放在 head
JS 在头部	阻塞解析	JS 放在 body 底部

设计动机

为什么 HTML 要有语义化标签？

设计选择	原因	影响
语义化标签	机器能理解内容	SEO 更好、无障碍友好
唯一的 h1	权重集中	搜索引擎明确页面主题
alt 属性	图片可能无法显示	用户体验、SEO

知识关联图

HTML 知识关联：

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   HTML      │────→│   CSS       │────→│ JavaScript  │
│   结构      │     │   样式      │     │   行为      │
└─────────────┘     └─────────────┘     └─────────────┘
       │                   │                   │
       ↓                   ↓                   ↓
┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   语义化    │     │   响应式    │     │   DOM       │
│   标签      │     │   设计      │     │   操作      │
└─────────────┘     └─────────────┘     └─────────────┘

关联说明：
- HTML → CSS：HTML 结构决定 CSS 样式的应用对象
- HTML → JavaScript：DOM 基于 HTML 结构，JS 操作 DOM
- HTML 语义化 → SEO：语义化标签帮助搜索引擎理解内容

实践练习

练习：个人简介页面

html

<!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>
    <header>
        <h1>张三</h1>
        <p>前端开发工程师</p>
    </header>

    <main>
        <section>
            <h2>个人简介</h2>
            <p>3 年前端开发经验...</p>
        </section>

        <section>
            <h2>技能</h2>
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JavaScript</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 张三</p>
    </footer>
</body>
</html>

常见问题

Q1：div 和 span 有什么区别？

原因： 它们是不同类型的元素。

对比	div	span
类型	块级元素	行内元素
特点	独占一行、可设宽高	并排排列、不可设宽高
用途	页面分区、容器	文本片段、小范围样式

比喻： div 是房间，span 是装饰品。

Q2：为什么要用语义化标签？

原因： 三大好处。

好处	说明
SEO	搜索引擎更容易理解内容
无障碍	屏幕阅读器能正确朗读
可维护	代码更容易理解和维护

Q3：alt 属性重要吗？

原因： 非常重要，三个作用。

作用	说明
图片无法加载	显示替代文字
无障碍访问	屏幕阅读器朗读
SEO	搜索引擎理解图片内容

解决： 每张图片都必须写 alt。

Q4：图片模糊怎么办？

原因： 分辨率不够或格式问题。

解决：

使用足够高的分辨率
为高清屏提供 2x/3x 图片
考虑使用 WebP 格式

学习资源

MDN HTML 基础 ⭐ 官方权威
HTML5 规范 - 完整规范
Web.dev HTML - Google 指南

HTML5 基础语法 ⭐ ​

学习目标 ​

生活化比喻 ​

L1 理解层：会用 ​

1.1 HTML 文档结构 ​

1.2 文本标签 ​

1.3 块级元素 vs 行内元素 ​

1.4 列表 ​

1.5 链接 ​

1.6 图片 ​

L2 实践层：用好 ​

最佳实践 ​

反模式：不要这样做 ​

适用场景 ​

L3 专家层：深入 ​

浏览器如何解析 HTML ​

性能考量 ​

设计动机 ​

知识关联图 ​

实践练习 ​

练习：个人简介页面 ​

常见问题 ​

Q1：div 和 span 有什么区别？ ​

Q2：为什么要用语义化标签？ ​

Q3：alt 属性重要吗？ ​

Q4：图片模糊怎么办？ ​

学习资源 ​

HTML5 基础语法 ⭐

学习目标

生活化比喻

L1 理解层：会用

1.1 HTML 文档结构

1.2 文本标签

1.3 块级元素 vs 行内元素

1.4 列表

1.5 链接

1.6 图片

L2 实践层：用好

最佳实践

反模式：不要这样做

适用场景

L3 专家层：深入

浏览器如何解析 HTML

性能考量

设计动机

知识关联图

实践练习

练习：个人简介页面

常见问题

Q1：div 和 span 有什么区别？

Q2：为什么要用语义化标签？

Q3：alt 属性重要吗？

Q4：图片模糊怎么办？

学习资源