摘要 ：本文是 HTML5 零基础系列的第二篇。你将学习如何构建更完整的 HTML 文档结构，认识 lang 属性、字符编码等细节；掌握常用文本格式化标签（加粗、斜体、删除线、上下标等），让文字表达更有层次；学会使用有序列表 <ol> 和无序列表 <ul> 来展示并列或顺序内容；理解块级元素 <div> 与行内元素 <span> 的区别，为后续布局打下基础。每个知识点都配有可运行的示例代码，并预留图片位置供你记录浏览器效果。全篇无 CSS，专注标签本身。
一、前言
在上一篇中，我们了解了 HTML 的发展历史，安装了 Sublime Text 编辑器，并写出了第一个网页。我们学习了标题标签 <h1>~<h6>、段落 <p>、换行 <br>、水平线 <hr> 和注释。但是，一个完整的网页还需要更多标签来组织内容：比如加粗 关键词、标注斜体 、制作列表 、划分区域等等。今天我们就来补齐这些基础但非常重要的标签。
二、深入 HTML 文档结构
2.1 语言属性 lang
在 <html> 标签中，我们通常会加上 lang 属性，声明页面使用的主要语言。这对搜索引擎优化（SEO）和屏幕阅读器（盲人辅助工具）很重要。
html
<html lang="zh-CN">zh-CN表示简体中文。如果是英文网页，可以写成lang="en"。
2.2 <head> 内部的其他元信息
除了 <meta charset="UTF-8"> 和 <title>，<head> 中还可以添加：
-
页面描述
<meta name="description">：搜索引擎会抓取这段描述作为搜索结果摘要。 -
关键词
<meta name="keywords">：现在已经不太重要，但了解一下无妨。 -
作者
<meta name="author">。
示例：
html
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML5零基础教程，小白也能轻松学会">
<meta name="keywords" content="HTML5, 前端, 教程">
<meta name="author" content="小萌新老师">
<title>第二篇示例 - 丰富的HTML标签</title>
</head>三、字符实体（转义字符）
在 HTML 中，有些字符有特殊含义，比如 < 和 > 是标签的边界，如果要在页面中显示 < 本身，直接用的话浏览器会把它当作标签的开始。这时就需要使用 字符实体。
常用字符实体表：
| 显示结果 | 实体名称 | 实体编号（十进制） |
|---|---|---|
| 空格 | |
  |
| < | < |
< |
| > | > |
> |
| & | & |
& |
| " | " |
" |
| ' | ' |
' |
| © 版权 | © |
© |
| ® 注册商标 | ® |
® |
示例：
html
<p>在 HTML 中，标签使用 <h1> 这种写法。</p>
<p>如果你想连续打多个空格：你好 世界（中间有三个空格）</p>
<p>版权声明 © 2026 小萌新教程</p>
注意 ：HTML 默认会将连续的空格缩减为一个空格，所以要想显示多个空格，必须使用
实体。
四、文本格式化标签 ------ 让文字"有表情"
这些标签用来改变文字的样式（如加粗、倾斜），在 HTML5 中，它们不仅有样式效果，还带有一定的语义含义（比纯 CSS 更丰富）。
4.1 加粗与强调
| 标签 | 作用 | 语义 |
|---|---|---|
<b> |
粗体，没有强调含义 | 仅表示样式上的加粗 |
<strong> |
粗体，有强烈强调含义 | 屏幕阅读器会重读该部分 |
示例：
html
<p>这是一个 <b>普通加粗</b> 的文字。</p>
<p>这是一个 <strong>非常重要且强烈强调</strong> 的文字。</p>
4.2 斜体与强调
| 标签 | 作用 | 语义 |
|---|---|---|
<i> |
斜体，无额外强调 | 表示技术术语、外来语等 |
<em> |
斜体，有强调含义 | 表示语气上的强调 |
示例：
html
<p>这个词是 <i>italic</i> 斜体。</p>
<p>我真的 <em>非常非常</em> 喜欢你。</p>
4.3 小字号 <small>
表示旁注、免责声明或版权信息等。
html
<p>本教程售价 99 元。 <small>早鸟价仅 49 元（限前100名）</small></p>
4.4 删除线 <s> 或 <del>
表示不再正确或已删除的内容。<del> 语义更强（表示文档已删除）。
html
<p>原价 <s>199 元</s> 现价 99 元。</p>
<p><del>此方法已废弃</del> 请使用新方法。</p>
4.5 下划线 <u> 与插入 <ins>
-
<u>：添加下划线，注意避免与超链接混淆。 -
<ins>：表示插入的文本，通常也带下划线，语义更强。
html
<p><u>下划线文本</u> 请注意。</p>
<p>最新版本新增功能：<ins>支持离线存储</ins></p>
4.6 上标 <sup> 与下标 <sub>
-
<sup>：上标，常用于数学指数或脚注标号。 -
<sub>：下标，常用于化学方程式。
示例：
html
<p>爱因斯坦质能方程：E = m<sup>2</sup>c<sup>2</sup> （实际上是 m*c<sup>2</sup>，这里仅为演示）</p>
<p>正确的写法：E = mc<sup>2</sup></p>
<p>水的化学式：H<sub>2</sub>O</p>
<p>脚注示例：HTML5<sup>[1]</sup> 是一种标准。</p>
4.7 标记高亮 <mark>
模拟荧光笔标记的效果，HTML5 新增。
html
<p>请记住：<mark>HTML5 不是编程语言，而是标记语言</mark>。</p>
4.8 代码标签 <code>
用来显示一小段代码，通常用等宽字体。
html
<p>在 HTML 中，段落标签是 <code><p></code>。</p>
五、容器标签：<div> 和 <span> ------ 网页布局的积木
5.1 块级元素与行内元素的概念
-
块级元素 ：独占一行，默认宽度为父容器的100%，前后有换行。例如：
<h1>、<p>、<div>、<ul>、<li>等。 -
行内元素 ：不会换行，只占据自身内容所需的宽度。例如：
<a>、<span>、<strong>、<em>、<b>、<i>等。
5.2 <div> 标签 ------ 块级容器
<div> 是最常用的块级容器，本身没有任何视觉样式，纯粹用来划分区域 或分组 。后续学习 CSS 后，可以给 <div> 添加背景、边框、宽高等样式。现在我们先学习它的"分组"作用。
示例：
html
<div>
<h2>新闻板块</h2>
<p>今天发生了一件大事......</p>
<p>更多详情点击......</p>
</div>
<div>
<h2>天气预报</h2>
<p>晴，25℃~30℃</p>
</div>
5.3 <span> 标签 ------ 行内容器
<span> 是行内容器，用于包裹一小段文本或部分内容，便于后续单独控制样式。比如你想让一句话中的某几个字变红色（需要 CSS），就可以用 <span> 包裹。
示例（无 CSS 时看不出效果，但用途重要）：
html
<p>我的名字是 <span>小萌新</span>，很高兴认识大家。</p>
六、列表标签 ------ 让信息有序或无序排列
6.1 无序列表 <ul> + <li>
用于表示一组没有顺序关系的项目，比如购物清单、特点列表。每个列表项用 <li> 包裹，浏览器默认在左侧显示一个实心圆点（项目符号）。
示例：
html
<h3>我的技能（无序列表）</h3>
<ul>
<li>HTML5</li>
<li>即将学习 CSS</li>
<li>JavaScript 入门</li>
</ul>
6.2 有序列表 <ol> + <li>
用于表示有顺序关系的项目，比如操作步骤、排名。浏览器自动生成数字编号（1,2,3...）。
示例：
html
<h3>煮泡面步骤（有序列表）</h3>
<ol>
<li>烧开水</li>
<li>放入面饼和调料</li>
<li>煮3分钟</li>
<li>关火享用</li>
</ol>
6.3 自定义列表 <dl> + <dt> + <dd>
用于包含术语及其描述，类似词典条目。<dl> 定义列表，<dt> 表示术语/标题，<dd> 表示描述内容。
示例：
html
<h3>HTML术语解释</h3>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于构建网页结构。</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于控制网页样式。</dd>
<dt>JavaScript</dt>
<dd>一种脚本语言，让网页具有交互功能。</dd>
</dl>
6.4 列表嵌套
列表内部可以再放列表，实现多级结构。
示例：
html
<h3>前端学习路线（嵌套列表）</h3>
<ul>
<li>基础阶段
<ul>
<li>HTML5</li>
<li>CSS3</li>
</ul>
</li>
<li>进阶阶段
<ul>
<li>JavaScript</li>
<li>Vue / React</li>
</ul>
</li>
</ul>
七、全局属性 ------ 几乎所有标签都能用的属性
全局属性可以加在任意 HTML 标签上（少部分例外）。这里介绍几个最常用的：
| 属性 | 作用 |
|---|---|
id |
给元素一个唯一标识符，同一个页面中 id 不能重复。可用于 JS 操作或锚点链接。 |
class |
给元素添加一个或多个类名，用于 CSS 或 JS 分组。可以重复。 |
title |
鼠标悬停时显示提示文字。 |
style |
直接写内联 CSS（本系列暂不用，但知道就行）。 |
hidden |
布尔属性，只要出现就表示该元素隐藏。 |
示例（无 CSS，只演示 id 和 title 效果）：
html
<p id="firstPara" title="这是一段有趣的文字">鼠标悬停在我上面看看提示。</p>
<p hidden>这段文字因为 hidden 属性，不会显示在页面上。</p>注意：
hidden属性相当于display: none，元素在页面中完全不可见且不占位。
八、实操练习：制作一份"个人简历"网页
综合运用第二篇所学知识，用 Sublime Text 新建 resume.html，编写如下内容：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="description" content="小萌新的个人简历网页，使用HTML5标签构建">
<title>我的简历 | 小萌新</title>
</head>
<body>
<h1>小萌新</h1>
<p>求职意向：<strong>前端开发实习生</strong></p>
<hr>
<h2>联系方式</h2>
<p>📧 Email: xiaomengxin@example.com 📞 电话: 123-4567-8901</p>
<h2>技术技能</h2>
<ul>
<li>熟练掌握 <strong>HTML5</strong> 标签语言</li>
<li>正在学习 <em>CSS3</em> 和 <em>JavaScript</em></li>
<li>使用 Sublime Text 高效编写代码</li>
</ul>
<h2>教育经历</h2>
<ol>
<li>2024年 - 2026年 XX大学 计算机科学与技术专业</li>
<li>2021年 - 2024年 XX高中</li>
</ol>
<h2>项目经验</h2>
<dl>
<dt>个人博客搭建 (2025年)</dt>
<dd>使用纯 HTML5 构建静态页面，包含文章列表、个人简介等。</dd>
<dt>在线简历网页 (2026年)</dt>
<dd>本文就是项目示例，运用了列表、文本格式化、<code><div></code> 等标签。</dd>
</dl>
<h2>自我评价</h2>
<p>我是一个<mark>热爱学习、细心且耐心</mark>的小白。每天坚持写代码，目标是成为全栈工程师。</p>
<p>原计划学习6个月，<s>实际3个月</s> <ins>仅用2个月</ins>就完成了HTML5入门。</p>
<div>
<h3>版权声明</h3>
<p><small>© 2026 小萌新 保留所有权利。</small></p>
</div>
</body>
</html>保存后用浏览器打开，查看效果。
九、Sublime Text 进阶小技巧
多光标编辑 ：按住 Ctrl 键（macOS 为 Cmd）然后鼠标左键点击多个位置，可以同时编辑。或者选中一个词，按 Ctrl+D 逐个选中相同的词。
快速注释 ：选中一行或多行代码，按 Ctrl+/（Windows/Linux）或 Cmd+/（macOS），自动添加或取消 HTML 注释 <!-- -->。
标签自动闭合 ：输入 <div> 后，Sublime 会自动补全 </div>，不用手动敲斜杠。
十、常见错误与小贴士
-
忘记给
<li>写父标签 ：<li>必须放在<ul>、<ol>内部，否则浏览器可能显示异常。 -
嵌套列表层级错乱 ：内部
<ul>必须写在<li>里面，不能直接放在<li>外面。 -
误用
<br>制造列表 ：如果需要项目符号，应该用<ul>而不是手动<br>换行加符号。 -
特殊字符不显示 ：检查是否用了实体，比如显示
<要用<。
十一、总结
学到的核心内容：
文档结构深入 ：lang 属性、meta 描述与关键词。
字符实体 ：<、>、 、© 等，让特殊字符正确显示。
文本格式化标签 ：<b>/<strong> 加粗，<i>/<em> 斜体，<small>、<s>/<del>、<u>/<ins>、<sup>/<sub>、<mark>、<code>。每个都有语义和样式作用。
块级容器 <div> 和 行内容器 <span>，理解二者的换行行为区别。
列表标签 ：无序 <ul>、有序 <ol>、自定义 <dl>，以及列表嵌套。
全局属性 ：id、class、title、hidden。
完成了一份个人简历网页的综合实操，将所有新标签运用于实际场景。
如果这篇文章帮你解决了实操上的困惑，别忘记点击点赞、分享，也可以留言告诉我你遇到的其它问题，我会尽快回复。动手练习是掌握编程最快的方法，请务必亲手敲一遍本文的所有示例代码，并截图保存你的成果。你的关注是我坚持原创和细节共享的力量来源，谢谢大家。