HTML 基础语法全解析：从零开始写网页（附 Markdown 对照）

如果你会写 Markdown，那你其实已经离 HTML 很近了——你写的每一个 # 标题、**粗体**，最终都会被翻译成 HTML 交给浏览器显示。本文用「HTML 代码 + Markdown 对照 + 实际效果」的方式，带你把 HTML 的基本语法一次过完。

一、HTML 是什么？#

HTML（HyperText Markup Language，超文本标记语言）是网页的”骨架”。它不负责好看（那是 CSS 的事），也不负责交互（那是 JavaScript 的事），只负责告诉浏览器：这里是标题、这里是段落、这里有张图片。

一个简单的类比

HTML = 房子的结构（墙、门、窗）
CSS = 装修（颜色、布局、风格）
JavaScript = 水电（让房子”动”起来）

HTML 和 Markdown 是什么关系？#

你在 Markdown 里写 # 标题，渲染器会把它变成 <h1>标题</h1>；写 **加粗**，会变成 <strong>加粗</strong>。

所以可以这么理解：Markdown 是 HTML 的”速记法”。Markdown 能做的事 HTML 都能做，而 HTML 能做的事远比 Markdown 多（比如表单、视频、复杂表格）。这也是为什么在 Markdown 里可以直接混写 HTML——本文的很多”效果”演示就是这么做的。

二、标签：HTML 的基本单位#

2.1 元素的结构#

1
<p>这是一个段落</p>

把它拆开看：

组成	例子	说明
开始标签	`<p>`	用尖括号包住标签名
内容	`这是一个段落`	显示在页面上的东西
结束标签	`</p>`	比开始标签多一个斜杠 `/`

三者合起来叫一个 元素（Element）。绝大多数 HTML 标签都是这种”成对出现”的结构。

2.2 属性：给标签加”参数”#

1
<a href="https://astro.build" target="_blank">Astro 官网</a>

属性写在开始标签里，格式是 名称="值"，多个属性之间用空格隔开。上面的 href 和 target 就是两个属性。

有几个属性几乎所有标签都能用，叫全局属性：

属性	作用	例子
`id`	给元素一个唯一的名字	`<p id="intro">`
`class`	给元素分类，可以重复、可以多个	`<p class="tip big">`
`style`	直接写 CSS 样式	`<p style="color:red">`
`title`	鼠标悬停时显示的提示	`<p title="提示">`

2.3 自闭合标签（空元素）#

有些标签天生没有”内容”，所以也不需要结束标签，比如换行 <br>、水平线 <hr>、图片 <img>、输入框 <input>：

1
<br>
2
<hr>
3
<img src="cat.jpg" alt="一只猫">

写成 <br /> 也可以，两种写法都合法。

2.4 注释#

1
<!-- 我是注释，浏览器不会显示我 -->

注释用来给自己或同事做说明，不会出现在页面上。

2.5 嵌套：先开后关#

标签可以一层套一层，但必须像套娃一样 “后打开的先关闭”：

1
<p>这是 <strong>正确的</strong> 嵌套</p>      ✅
2

3
<p>这是 <strong>错误的</p></strong> 嵌套        ❌ 交叉了

Warning

HTML 标签不区分大小写，<P> 和 <p> 效果一样，但约定俗成全部小写。属性值建议始终加双引号。

三、一个最小的 HTML 页面#

把下面的代码保存成 index.html，双击用浏览器打开，你的第一个网页就诞生了：

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>我的第一个网页</title>
7
</head>
8
<body>
9
  <h1>你好，世界！</h1>
10
  <p>这是我的第一个网页。</p>
11
</body>
12
</html>

每一行都在干什么：

代码	作用
`<!DOCTYPE html>`	声明这是 HTML5 文档，必须写在第一行
`<html lang="zh-CN">`	根元素，所有内容都在它里面；`lang` 声明页面语言
`<head>`	头部：放”看不见”的信息（编码、标题、CSS 引用等）
`<meta charset="UTF-8">`	字符编码，不写中文会乱码
`<meta name="viewport" ...>`	让手机端正常缩放
`<title>`	浏览器标签页上显示的文字
`<body>`	主体：所有”看得见”的内容都放这里

Tip

记住一个口诀：head 放设置，body 放内容。以后写任何页面，都从这个模板开始。

四、文本标签#

4.1 标题 `<h1>` ~ `<h6>`#

HTML 提供六级标题，h1 最大最重要，h6 最小。

1
<h1>一级标题</h1>
2
<h2>二级标题</h2>
3
<h3>三级标题</h3>
4
<h4>四级标题</h4>
5
<h5>五级标题</h5>
6
<h6>六级标题</h6>

1
# 一级标题
2
## 二级标题
3
### 三级标题
4
#### 四级标题
5
##### 五级标题
6
###### 六级标题

👀 点击查看效果

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

Important

一个页面通常只有一个 <h1>，标题要按层级使用。不要为了”字大”而用 <h1>——字号的问题交给 CSS。

4.2 段落 `<p>`、换行 `<br>`、水平线 `<hr>`#

1
<p>这是第一段。HTML 会忽略源代码里的
2
换行和    多余空格，所以这句还在同一行。</p>
3
<p>这是第二段，段落之间自动有间距。</p>
4
<p>如果想在段落内强制换行，<br>就用 br 标签。</p>
5
<hr>
6
<p>上面是一条水平分割线。</p>

1
这是第一段。
2

3
这是第二段，空一行就是新段落。
4

5
行尾加两个空格
6
就是换行。
7

8
---
9

10
上面是一条水平分割线。

👀 点击查看效果

这是第一段。HTML 会忽略源代码里的换行和多余空格，所以这句还在同一行。

这是第二段，段落之间自动有间距。

如果想在段落内强制换行，
就用 br 标签。

上面是一条水平分割线。

初学者最容易困惑的点

在 HTML 源代码里敲回车、敲空格是没用的，浏览器会把连续的空白压缩成一个空格。想换行请用 <br>，想分段请用 <p>。

4.3 文字强调与修饰#

1
<p><strong>重要（加粗）</strong> 和 <b>单纯加粗</b></p>
2
<p><em>强调（斜体）</em> 和 <i>单纯斜体</i></p>
3
<p><u>下划线</u>、<s>删除线</s>、<mark>高亮</mark></p>
4
<p>H<sub>2</sub>O 是水，E = mc<sup>2</sup> 是公式</p>
5
<p>行内代码用 <code>console.log()</code></p>
6
<p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制</p>
7
<p><small>这是一行小字，常用于版权声明</small></p>

1
**加粗**
2
*斜体*
3
~~删除线~~
4
`行内代码`
5

6
（下划线、高亮、上下标、kbd 等 Markdown 没有，需直接写 HTML）

👀 点击查看效果

重要（加粗） 和 单纯加粗

强调（斜体） 和 单纯斜体

下划线、~~删除线~~、高亮

H₂O 是水，E = mc² 是公式

行内代码用 console.log()

按 Ctrl + C 复制

<strong> 和 <b> 看起来一样，区别在语义：<strong> 表示”这很重要”，<b> 只是”把它弄粗”。<em> 与 <i> 同理。现代 HTML 更推荐使用有语义的 <strong> / <em>。

4.4 引用与代码块#

1
<blockquote>
2
  千里之行，始于足下。
3
</blockquote>
4

5
<p>他说：<q>明天见</q>。</p>
6

7
<pre>
8
保留    原始格式
9
  包括缩进和
10
换行
11
</pre>
12

13
<pre><code>function hello() {
14
  console.log("Hello");
15
}</code></pre>

1
> 千里之行，始于足下。
2

3
```js
4
function hello() {
5
  console.log("Hello");
6
}
7
```

👀 点击查看效果

千里之行，始于足下。

他说：明天见。

保留    原始格式
  包括缩进和
换行

<blockquote> 是块级引用，<q> 是行内短引用（浏览器会自动加引号）
<pre> 会原样保留空格和换行，通常和 <code> 搭配显示代码

五、列表#

HTML 有三种列表：无序列表、有序列表、定义列表。列表项都用 <li>（list item）。

1
<!-- 无序列表 unordered list -->
2
<ul>
3
  <li>苹果</li>
4
  <li>香蕉</li>
5
  <li>橙子</li>
6
</ul>
7

8
<!-- 有序列表 ordered list -->
9
<ol>
10
  <li>打开冰箱</li>
11
  <li>放入大象</li>
12
  <li>关上冰箱</li>
13
</ol>
14

15
<!-- 嵌套列表 -->
16
<ul>
17
  <li>前端
18
    <ul>
19
      <li>HTML</li>
20
      <li>CSS</li>
21
    </ul>
22
  </li>
23
  <li>后端</li>
24
</ul>
25

26
<!-- 定义列表 definition list -->
27
<dl>
28
  <dt>HTML</dt>
29
  <dd>网页的结构</dd>
30
  <dt>CSS</dt>
31
  <dd>网页的样式</dd>
32
</dl>

1
- 苹果
2
- 香蕉
3
- 橙子
4

5
1. 打开冰箱
6
2. 放入大象
7
3. 关上冰箱
8

9
- 前端
10
  - HTML
11
  - CSS
12
- 后端
13

14
（定义列表 Markdown 没有）

👀 点击查看效果

苹果
香蕉
橙子

打开冰箱
放入大象
关上冰箱

前端
- HTML
- CSS
后端

HTML: 网页的结构
CSS: 网页的样式

Note

<ol> 可以用 start="5" 指定从 5 开始编号，用 type="A" 改成字母编号，用 reversed 倒序。

六、链接 `<a>`#

链接是”超文本”中”超”的来源。标签名 a 是 anchor（锚）的缩写。

1
<!-- 最基本的链接 -->
2
<a href="https://astro.build">Astro 官网</a>
3

4
<!-- 在新标签页打开 -->
5
<a href="https://astro.build" target="_blank">新窗口打开</a>
6

7
<!-- 鼠标悬停提示 -->
8
<a href="https://astro.build" title="点我去 Astro">带提示的链接</a>
9

10
<!-- 页面内跳转（锚点）：跳到 id="top" 的元素 -->
11
<a href="#top">回到顶部</a>
12

13
<!-- 发邮件 / 打电话 -->
14
<a href="mailto:me@example.com">给我发邮件</a>
15
<a href="tel:10086">拨打电话</a>
16

17
<!-- 相对路径：链接到同目录下的 about.html -->
18
<a href="about.html">关于我</a>

1
[Astro 官网](https://astro.build)
2

3
[带提示的链接](https://astro.build "点我去 Astro")
4

5
（新窗口打开、锚点等需要直接写 HTML）

👀 点击查看效果

属性	说明
`href`	目标地址，可以是网址、相对路径、`#锚点`、`mailto:`、`tel:`
`target="_blank"`	在新标签页打开
`title`	悬停提示文字

七、图片 `<img>`#

1
<img src="/favicon/firefly-32.png" alt="Firefly 图标" width="64">
2

3
<!-- 带说明文字的图片 -->
4
<figure>
5
  <img src="/favicon/firefly-32.png" alt="Firefly 图标" width="48">
6
  <figcaption>图 1：Firefly 主题的图标</figcaption>
7
</figure>
8

9
<!-- 图片链接：把 img 包在 a 里 -->
10
<a href="https://astro.build">
11
  <img src="/favicon/firefly-32.png" alt="去 Astro" width="32">
12
</a>

1
![Firefly 图标](/favicon/firefly-32.png)
2

3
[![去 Astro](/favicon/firefly-32.png)](https://astro.build)
4

5
（Markdown 无法直接控制宽度，需要写 HTML）

👀 点击查看效果

图 1：Firefly 主题的图标

属性	说明
`src`	图片地址（必填）
`alt`	图片加载失败时显示的替代文字，也是屏幕阅读器读的内容（强烈建议填写）
`width` / `height`	宽高，单位像素；只写一个另一个会等比缩放

Warning

alt 不是可有可无的：它关系到无障碍访问和 SEO。养成每张图都写 alt 的习惯。

八、表格 `<table>`#

表格的结构稍微复杂一点，记住一个层级：表格 → 行 → 单元格。

1
<table>
2
  <thead>            <!-- 表头 -->
3
    <tr>             <!-- 一行 table row -->
4
      <th>姓名</th>   <!-- 表头单元格 table header -->
5
      <th>年龄</th>
6
      <th>城市</th>
7
    </tr>
8
  </thead>
9
  <tbody>            <!-- 表体 -->
10
    <tr>
11
      <td>小明</td>   <!-- 普通单元格 table data -->
12
      <td>18</td>
13
      <td>北京</td>
14
    </tr>
15
    <tr>
16
      <td>小红</td>
17
      <td>20</td>
18
      <td>上海</td>
19
    </tr>
20
  </tbody>
21
</table>

1
| 姓名 | 年龄 | 城市 |
2
| --- | --- | --- |
3
| 小明 | 18 | 北京 |
4
| 小红 | 20 | 上海 |

👀 点击查看效果

姓名	年龄	城市
小明	18	北京
小红	20	上海

合并单元格#

Markdown 做不到的事来了：colspan 横向合并、rowspan 纵向合并。

1
<table>
2
  <tr>
3
    <th colspan="2">横向合并两格</th>
4
  </tr>
5
  <tr>
6
    <td rowspan="2">纵向合并两格</td>
7
    <td>A</td>
8
  </tr>
9
  <tr>
10
    <td>B</td>
11
  </tr>
12
</table>

👀 点击查看效果

横向合并两格
纵向合并两格	A
纵向合并两格	B

九、容器与语义化标签#

9.1 `<div>` 和 `<span>`#

这两个标签本身没有任何样式和含义，纯粹是用来”打包”内容、方便配合 CSS 的：

<div> 是块级容器：独占一行，像一个箱子
<span> 是行内容器：不换行，像一个标签贴在文字上

1
<div class="card">
2
  <p>这是卡片里的一段话，其中 <span class="highlight">这几个字</span> 要高亮。</p>
3
</div>

块级 vs 行内

这是 HTML 里很重要的概念：

块级元素（div、p、h1、ul、table……）默认独占一行
行内元素（span、a、strong、img、code……）默认和文字排在一起

9.2 语义化标签#

HTML5 新增了一批”自带含义”的容器，它们的显示效果和 <div> 一模一样，但能让代码更易读、对搜索引擎和屏幕阅读器更友好：

1
<body>
2
  <header>网站头部：Logo、站名</header>
3
  <nav>导航栏：首页 / 归档 / 关于</nav>
4
  <main>
5
    <article>
6
      <h1>文章标题</h1>
7
      <p>文章正文……</p>
8
    </article>
9
    <aside>侧边栏：作者信息、推荐阅读</aside>
10
  </main>
11
  <footer>页脚：版权信息</footer>
12
</body>

标签	含义
`<header>`	页面或区块的头部
`<nav>`	导航链接区
`<main>`	页面主体内容（每页只有一个）
`<article>`	独立完整的内容，如一篇文章
`<section>`	内容的一个章节
`<aside>`	侧边栏、补充信息
`<footer>`	页面或区块的底部

一句话：能用语义化标签就别用 <div>。

十、表单 `<form>`#

表单是网页收集用户输入的方式——登录框、搜索框、评论区都是表单。这是 Markdown 完全做不到的事。

1
<form action="/submit" method="post">
2
  <!-- label 的 for 和 input 的 id 对应，点击文字也能聚焦输入框 -->
3
  <label for="name">昵称：</label>
4
  <input type="text" id="name" name="name" placeholder="请输入昵称" required>
5
  <br>
6

7
  <label for="pwd">密码：</label>
8
  <input type="password" id="pwd" name="pwd">
9
  <br>
10

11
  <label for="email">邮箱：</label>
12
  <input type="email" id="email" name="email">
13
  <br>
14

15
  <label>性别：</label>
16
  <input type="radio" name="gender" value="m" checked> 男
17
  <input type="radio" name="gender" value="f"> 女
18
  <br>
19

20
  <label>爱好：</label>
21
  <input type="checkbox" name="hobby" value="code"> 编程
22
  <input type="checkbox" name="hobby" value="music"> 音乐
23
  <br>
24

25
  <label for="city">城市：</label>
26
  <select id="city" name="city">
27
    <option value="bj">北京</option>
28
    <option value="sh" selected>上海</option>
29
    <option value="gz">广州</option>
30
  </select>
31
  <br>
32

33
  <label for="msg">留言：</label>
34
  <textarea id="msg" name="msg" rows="3" placeholder="想说点什么…"></textarea>
35
  <br>
36

37
  <button type="submit">提交</button>
38
  <button type="reset">重置</button>
39
</form>

👀 点击查看效果（可以试着操作）

常用的 <input type="...">：

type	说明
`text`	单行文本（默认）
`password`	密码，输入显示为圆点
`email` / `url` / `tel`	带格式校验的文本框
`number`	数字，可用 `min` / `max` / `step` 限制
`radio`	单选，同一组的 `name` 要相同
`checkbox`	多选
`date` / `time`	日期 / 时间选择器
`file`	文件上传
`submit` / `reset`	提交 / 重置按钮

Note

<form> 的两个关键属性：action 指定数据提交到哪个地址，method 指定提交方式（get 把数据拼在网址上，post 放在请求体里）。

十一、多媒体#

1
<!-- 音频：controls 显示播放控件 -->
2
<audio src="music.mp3" controls></audio>
3

4
<!-- 视频：可指定宽度、自动播放（autoplay）、循环（loop）、静音（muted） -->
5
<video src="movie.mp4" controls width="400"></video>
6

7
<!-- 内嵌另一个网页，常用于嵌入地图、B 站视频等 -->
8
<iframe src="https://example.com" width="600" height="400"></iframe>

十二、特殊字符（HTML 实体）#

有些字符在 HTML 里有特殊含义（比如 < 会被当成标签开头），想直接显示它们就要用”实体”写法：

想显示	要写成	说明
`<`	`<`	less than
`>`	`>`	greater than
`&`	`&`	ampersand
`"`	`"`	quote
空格	` `	不会被合并的空格
©	`©`	版权符号
← →	`←` `→`	箭头
❤	`&hearts;`	爱心

1
<p>在 HTML 中显示 &lt;p&gt; 标签需要用实体。</p>
2
<p>&copy; 2026 我的博客 &hearts;</p>

效果：

在 HTML 中显示 <p> 标签需要用实体。

十三、Markdown ↔ HTML 速查表#

你想要	Markdown	HTML
标题	`# 标题`	`<h1>标题</h1>`
段落	空一行	`<p>…</p>`
换行	行尾两个空格	`<br>`
加粗	`文字`	`<strong>文字</strong>`
斜体	`文字`	`<em>文字</em>`
删除线	`~~文字~~`	`<s>文字</s>`
行内代码	`code`	`<code>code</code>`
代码块	``` 包裹	`<pre><code>…</code></pre>`
引用	`> 文字`	`<blockquote>文字</blockquote>`
无序列表	`- 项目`	`<ul><li>项目</li></ul>`
有序列表	`1. 项目`	`<ol><li>项目</li></ol>`
链接	`[文字](url)`	`<a href="url">文字</a>`
图片	`![alt](src)`	`<img src="src" alt="alt">`
分割线	`---`	`<hr>`
表格	`\| a \| b \|`	`<table><tr><td>…`
表单、视频、合并单元格、下划线、高亮…	❌ 没有	✅ 直接写 HTML

十四、完整示例：一个个人主页#

把前面学的东西全部用上，这是一个完整的、可以直接保存运行的个人主页：

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>ELEC 的个人主页</title>
7
</head>
8
<body>
9
  <header>
10
    <h1>你好，我是 ELEC 👋</h1>
11
    <p>一个正在学习前端的博主</p>
12
  </header>
13

14
  <nav>
15
    <a href="#about">关于我</a> |
16
    <a href="#skills">技能</a> |
17
    <a href="#contact">联系</a>
18
  </nav>
19

20
  <hr>
21

22
  <main>
23
    <section id="about">
24
      <h2>关于我</h2>
25
      <img src="avatar.png" alt="我的头像" width="100">
26
      <p>我喜欢用 <strong>Astro</strong> 写博客，用 <em>Markdown</em> 记笔记。</p>
27
      <blockquote>Stay hungry, stay foolish.</blockquote>
28
    </section>
29

30
    <section id="skills">
31
      <h2>技能</h2>
32
      <table>
33
        <tr><th>技能</th><th>熟练度</th></tr>
34
        <tr><td>HTML</td><td>⭐⭐⭐⭐</td></tr>
35
        <tr><td>CSS</td><td>⭐⭐⭐</td></tr>
36
        <tr><td>JavaScript</td><td>⭐⭐</td></tr>
37
      </table>
38
    </section>
39

40
    <section id="contact">
41
      <h2>联系我</h2>
42
      <form action="/contact" method="post">
43
        <label for="email">你的邮箱：</label>
44
        <input type="email" id="email" name="email" required>
45
        <br>
46
        <label for="msg">留言：</label>
47
        <textarea id="msg" name="msg" rows="3"></textarea>
48
        <br>
49
        <button type="submit">发送</button>
50
      </form>
51
    </section>
52
  </main>
53

54
  <footer>
55
    <p><small>&copy; 2026 ELEC · 用 <a href="https://astro.build">Astro</a> 搭建</small></p>
56
  </footer>
57
</body>
58
</html>

动手试试

新建一个文本文件，粘贴上面的代码，保存为 homepage.html，用浏览器打开。然后试着改一改文字、加几行自己的内容——这是学 HTML 最快的方法。

十五、初学者常犯的错误#

忘记关闭标签：<p>段落 后面没有 </p>。浏览器通常会”猜”，但排版可能乱掉。
属性值不加引号：<a href=https://a.com> 能跑，但遇到空格就出错。请一律加引号。
用 <br> 控制间距：连敲五个 <br> 来”空几行”是错的，间距应该交给 CSS。
用 <table> 做页面布局：表格只用来放表格数据，布局用 CSS。
忘记 <meta charset="UTF-8">：中文乱码九成是这个原因。
图片没写 alt：图片挂了用户什么都看不到。

小结#

回顾一下这篇文章覆盖的内容：

HTML 由标签组成，标签 + 内容 = 元素，标签上可以挂属性
一个页面的骨架：<!DOCTYPE html> → <html> → <head> + <body>
文本：h1~h6、p、br、hr、strong、em、blockquote、code
结构：ul / ol / li、table / tr / td、div / span 及语义化标签
功能：a 链接、img 图片、form 表单、audio / video 多媒体
Markdown 是 HTML 的速记法，Markdown 里可以随时混写 HTML

学会了 HTML，你就掌握了网页的”骨架”。下一步自然是学 CSS 给它”穿衣服”，再学 JavaScript 让它”动起来”。

推荐练习

试着把你的一篇 Markdown 博文，手动翻译成完整的 HTML 文件。翻译完你会发现，HTML 其实一点也不难。

HTML 基础语法全解析：从零开始写网页（附 Markdown 对照）

一、HTML 是什么？#

HTML 和 Markdown 是什么关系？#

二、标签：HTML 的基本单位#

2.1 元素的结构#

2.2 属性：给标签加”参数”#

2.3 自闭合标签（空元素）#

2.4 注释#

2.5 嵌套：先开后关#

三、一个最小的 HTML 页面#

四、文本标签#

4.1 标题 <h1> ~ <h6>#

4.2 段落 <p>、换行 <br>、水平线 <hr>#

4.3 文字强调与修饰#

4.4 引用与代码块#

五、列表#

六、链接 <a>#

七、图片 <img>#

八、表格 <table>#

合并单元格#

九、容器与语义化标签#

9.1 <div> 和 <span>#

9.2 语义化标签#

十、表单 <form>#

十一、多媒体#

十二、特殊字符（HTML 实体）#

十三、Markdown ↔ HTML 速查表#

十四、完整示例：一个个人主页#

十五、初学者常犯的错误#

小结#

文章分享

4.1 标题 `<h1>` ~ `<h6>`#

4.2 段落 `<p>`、换行 `<br>`、水平线 `<hr>`#

六、链接 `<a>`#

七、图片 `<img>`#

八、表格 `<table>`#

9.1 `<div>` 和 `<span>`#

十、表单 `<form>`#