第一章 html5 第一节 HTML5入门基础

一、前言

欢迎来到网页开发系列的第一节课！从今天开始，我们将一步步走进网页开发的世界，而 HTML5 作为网页的骨架，是我们接触的第一个核心技术。

本节课我们将带你认识 HTML5 的基本概念 、核心优势 ，掌握 HTML5 的基础结构 和常用标签（包括双标签、单标签的核心区别），并通过分步引导完成第一个简单的网页制作，为后续学习打下坚实基础。

二、认识 HTML5

1. 什么是 HTML5？

HTML 的全称是 HyperText Markup Language（超文本标记语言），它不是编程语言，而是一种用于描述网页结构的标记语言。

HTML5 是 HTML 的第五个版本，于 2014 年正式发布，是对原有 HTML 标准的重大更新和完善。简单来说，HTML5 就像是网页的"骨架"，它定义了网页中应该包含哪些内容（比如标题、段落、图片、链接等）以及这些内容的排列结构。

我们后续学习的 CSS3（美化网页）和 JavaScript（实现交互），都是基于这个"骨架"进行拓展的。

2. HTML5 的优势（相比 HTML4）

相比之前的 HTML4 版本，HTML5 带来了很多实用的改进，让网页开发更简单、功能更强大：

语义化更强 ：新增了 header、nav、main 等语义化标签，让代码更易读、更利于搜索引擎优化（SEO）；
原生支持多媒体 ：无需依赖插件，就能直接嵌入视频（video）和音频（audio）；
表单功能优化 ：新增了 email、tel、date 等专用表单元素，简化了表单验证；
兼容性更好：支持大部分现代浏览器（Chrome、Firefox、Edge 等），对移动设备的适配也更友好；
新增 API：提供了本地存储、画布（Canvas）、地理定位等功能，拓展了网页的应用场景。

三、HTML5 的基本结构

任何一个 HTML5 网页都有固定的基础结构，就像盖房子需要先搭建框架一样。下面我们先来看完整的基础结构代码，再逐一拆解每个部分的作用。

1. 完整基础结构

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个HTML5网页</title>
</head>
<body>
    <!-- 这里是网页的主体内容 -->
    <h1>欢迎学习HTML5</h1>
    <p>这是我的第一个网页，从此开启网页开发之旅！</p>
</body>
</html>

注意：vscode中可以输入!后，按Tab或Enter键快速生成以上基础结构代码。

2. 结构拆解

（1）`<!DOCTYPE html>`

作用：声明当前文档是 HTML5 文档，告诉浏览器按照 HTML5 的标准解析网页；
注意：这不是 HTML 标签，是一个声明语句，必须放在网页的最开头，不区分大小写。

（2）`<html>` 标签

作用：整个 HTML 文档的根标签，所有的 HTML 内容都必须放在这个标签内部；
属性：lang="zh-CN" 表示网页的语言是中文（zh-CN），如果是英文网页可以设置为 lang="en"，有助于搜索引擎识别网页语言。

（3）`<head>` 标签

作用：用于存放网页的元数据（元数据是描述网页的信息，不直接显示在页面上）；
常见子标签：
- <meta charset="UTF-8">：设置网页的字符编码为 UTF-8，UTF-8 几乎支持所有字符（包括中文、英文、特殊符号等），避免出现乱码；
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：适配移动设备的关键设置，让网页在手机等小屏幕设备上正常显示；
- <title>：设置网页的标题，显示在浏览器的标签栏上，不显示在网页主体中。

（4）`<body>` 标签

作用：存放网页的主体内容，所有需要显示在网页上的内容（比如标题、段落、图片、链接等）都放在这个标签内部；
注意：一个 HTML 文档只能有一个 <body> 标签。

四、HTML5 基础标签（含双标签/单标签）

基础标签是构成网页内容的基本单元，在学习具体标签前，我们先掌握 HTML 标签的核心分类------双标签和单标签：

核心概念：双标签 vs 单标签

类型	定义	语法格式	示例
双标签	有开始标签和结束标签，内容包裹在两个标签之间	`<标签名>内容</标签名>`	`<p>段落内容</p>`
单标签（自闭合标签）	只有开始标签，没有结束标签，通常用于无需包裹内容的场景（如换行、分隔线）	`<标签名>` 或 `<标签名/>`	`<br>`、`<hr/>`

1. 标题标签（h1 - h6）------ 双标签

作用：用于定义网页中的标题，从 h1 到 h6 字体大小依次递减，h1 是最大的标题，h6 是最小的标题；
特点：每个标题标签独占一行，自带加粗效果；
注意：一个网页中建议只使用一个 h1 标签（通常作为网页的主标题），有利于 SEO 优化。

示例代码：

html 复制代码

<h1>这是一级标题（最大）</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题（最小）</h6>

2. 段落标签（p）------ 双标签

作用：用于定义网页中的段落文本；
特点：段落之间会自动换行，并且段落前后会有默认的间距；
注意：不要使用多个   标签来实现段落间距，应该使用 p 标签来区分不同段落。

示例代码：

html 复制代码

<p>这是第一个段落。HTML5是网页开发的基础，掌握好HTML5的结构和标签，才能更好地学习后续的CSS3和JavaScript。</p>
<p>这是第二个段落。学习网页开发需要多写代码、多实践，每一个知识点都要通过案例来巩固，这样才能真正掌握。</p>

3. 换行标签（br）------ 单标签

作用：用于在段落内部实现强制换行；
特点：是一个自闭合标签（不需要闭合标签），没有内容；
场景：比如在诗歌、地址等需要换行的文本中使用。

示例代码：

html 复制代码

<p>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</p>

4. 水平线标签（hr）------ 单标签

作用：在网页中插入一条水平线，用于分隔不同的内容区域；
特点：自闭合标签，独占一行，默认带有一定的间距。

示例代码：

html 复制代码

<p>这是上方内容区域</p>
<hr>
<p>这是下方内容区域</p>

5. 强调标签（strong / em）------ 双标签

作用：用于强调文本内容；
区别：
- ：表示"重点强调"，文本会显示为加粗效果；
- ：表示"语气强调"，文本会显示为斜体效果；
注意：强调标签是语义化标签，不是为了单纯的样式（样式后续用 CSS 控制），要根据语义选择使用。

示例代码：

html 复制代码

<p>学习HTML5，<strong>多实践</strong>是关键，<em>每天坚持写代码</em>才能快速进步。</p>

五、案例：搭建第一个简单网页（个人简介页面骨架）

1. 需求

制作一个简单的个人简介页面，包含以下内容：

网页标题：我的个人简介
主体内容：
- 主标题：我的个人简介
- 个人基本信息（姓名、年龄、职业）
- 个人爱好（用段落表示，可加入换行优化排版）
- 分隔线
- 座右铭（用强调标签突出）

2. 分步拆解任务 & 逐步实现

步骤1：搭建 HTML5 基础框架

首先，我们先写出 HTML5 的标准基础结构，这是所有网页的"骨架"：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 步骤2会修改这里的标题 -->
    <title>待修改</title>
</head>
<body>
    <!-- 后续步骤的内容都写在这里 -->
</body>
</html>

步骤2：设置网页标题

将 <title> 标签的内容改为"我的个人简介"，这会显示在浏览器标签栏：

html 复制代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人简介</title>
</head>

步骤3：添加页面主标题

在 <body> 标签内，用 <h1>（双标签）添加页面的主标题"我的个人简介"：

html 复制代码

<body>
    <h1>我的个人简介</h1>
</body>

步骤4：添加个人基本信息

用  标签（双标签）依次添加姓名、年龄、职业信息，每个信息单独一个段落：

html 复制代码

<body>
    <h1>我的个人简介</h1>
    <p>姓名：张三</p>
    <p>年龄：22岁</p>
    <p>职业：网页开发初学者</p>
</body>

步骤5：添加个人爱好（含换行优化）

用  标签包裹爱好内容，并用  （单标签）实现换行，让排版更清晰：

html 复制代码

<body>
    <h1>我的个人简介</h1>
    <p>姓名：张三</p>
    <p>年龄：22岁</p>
    <p>职业：网页开发初学者</p>
    
    <p>我的爱好：<br>
    1. 学习网页开发（HTML5/CSS3/JavaScript）<br>
    2. 阅读技术文档和前端博客<br>
    3. 打篮球、跑步（保持运动）<br>
    每天都会花1-2小时学习，希望未来能成为一名优秀的前端开发工程师。
    </p>
</body>

步骤6：添加分隔线

用 <hr> 标签（单标签）在爱好和座右铭之间添加水平线，分隔不同内容区域：

html 复制代码

<body>
    <h1>我的个人简介</h1>
    <p>姓名：张三</p>
    <p>年龄：22岁</p>
    <p>职业：网页开发初学者</p>
    
    <p>我的爱好：<br>
    1. 学习网页开发（HTML5/CSS3/JavaScript）<br>
    2. 阅读技术文档和前端博客<br>
    3. 打篮球、跑步（保持运动）<br>
    每天都会花1-2小时学习，希望未来能成为一名优秀的前端开发工程师。
    </p>
    
    <hr>
</body>

步骤7：添加座右铭（强调效果）

用  标签包裹座右铭，并用  标签（双标签）突出"座右铭："这几个字：

html 复制代码

<body>
    <h1>我的个人简介</h1>
    <p>姓名：张三</p>
    <p>年龄：22岁</p>
    <p>职业：网页开发初学者</p>
    
    <p>我的爱好：<br>
    1. 学习网页开发（HTML5/CSS3/JavaScript）<br>
    2. 阅读技术文档和前端博客<br>
    3. 打篮球、跑步（保持运动）<br>
    每天都会花1-2小时学习，希望未来能成为一名优秀的前端开发工程师。
    </p>
    
    <hr>
    
    <p><strong>座右铭：</strong>坚持就是胜利，每天进步一点点！</p>
</body>

3. 完整代码

将以上步骤整合，得到最终的完整代码：

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>姓名：张三</p>
    <p>年龄：22岁</p>
    <p>职业：网页开发初学者</p>
    
    <p>我的爱好：<br>
    1. 学习网页开发（HTML5/CSS3/JavaScript）<br>
    2. 阅读技术文档和前端博客<br>
    3. 打篮球、跑步（保持运动）<br>
    每天都会花1-2小时学习，希望未来能成为一名优秀的前端开发工程师。
    </p>
    
    <hr>
    
    <p><strong>座右铭：</strong>坚持就是胜利，每天进步一点点！</p>
</body>
</html>

4. 运行效果

将上述代码保存为后缀名为 .html 的文件（比如 index.html），然后用浏览器打开，就能看到以下效果：

浏览器标签栏显示"我的个人简介"；
页面中显示一级标题"我的个人简介"；
依次显示姓名、年龄、职业等基本信息；
个人爱好部分通过换行标签排版更清晰；
一条水平线分隔爱好和座右铭区域；
最后显示加粗的"座右铭："和对应的文字内容。

5. 代码说明

遵循了 HTML5 的标准基础结构，包含 <!DOCTYPE html> 声明和 html、head、body 标签；
正确区分并使用了双标签（h1/p/strong）和单标签（br/hr）；
使用 meta 标签设置了字符编码和移动设备适配，避免乱码和显示问题；
代码缩进规范，内容分层清晰，语义化合理。

六、总结与练习

1. 知识点总结

了解了 HTML5 的定义和相比 HTML4 的核心优势；
掌握了 HTML5 的基础结构，以及 VSCode 快速生成骨架的技巧；
核心区分：双标签（需闭合、包裹内容）和单标签（自闭合、无内容）的用法；
学会了常用基础标签（h1-h6、p、br、hr、strong、em）的使用场景和特点；
掌握了"分步拆解任务→逐步实现→整合完整代码"的网页开发思路。

2. 练习任务

修改案例中的个人简介内容，替换成自己的信息（姓名、年龄、爱好等）；
尝试在爱好部分加入  标签，强调你最感兴趣的学习方向（比如 HTML5）；
保存代码后用浏览器打开，查看运行效果，检查是否有语法错误（比如双标签是否闭合、单标签是否正确使用）。

下一节课我们将学习 HTML5 的语义化标签，进一步优化网页的结构，让代码更具可读性和规范性。

第一章 html5 第一节 HTML5入门基础

一、前言

二、认识 HTML5

1. 什么是 HTML5？

2. HTML5 的优势（相比 HTML4）

三、HTML5 的基本结构

1. 完整基础结构

2. 结构拆解

（1）<!DOCTYPE html>

（2）<html> 标签

（3）<head> 标签

（4）<body> 标签

四、HTML5 基础标签（含双标签/单标签）

核心概念：双标签 vs 单标签

1. 标题标签（h1 - h6）------ 双标签

2. 段落标签（p）------ 双标签

3. 换行标签（br）------ 单标签

4. 水平线标签（hr）------ 单标签

5. 强调标签（strong / em）------ 双标签

五、案例：搭建第一个简单网页（个人简介页面骨架）

1. 需求

2. 分步拆解任务 & 逐步实现

步骤1：搭建 HTML5 基础框架

步骤2：设置网页标题

步骤3：添加页面主标题

步骤4：添加个人基本信息

步骤5：添加个人爱好（含换行优化）

步骤6：添加分隔线

步骤7：添加座右铭（强调效果）

3. 完整代码

4. 运行效果

5. 代码说明

六、总结与练习

1. 知识点总结

2. 练习任务

（1）`<!DOCTYPE html>`

（2）`<html>` 标签

（3）`<head>` 标签

（4）`<body>` 标签