模块2任务2.1：编写第一个HTML页面（课件）-《网页设计与制作》（电子工业出版社）上好课

任务2.1：编写第一个HTML页面 网页设计与制作 电子工业出版社 理解HTML文档的基本结构，掌握<!DOCTYPE>、<html>、<head>、<body>四个核心部分的作用 掌握<head>中<title>网页标题、<meta charset="UTF-8">字符集等常用子标签的写法 能独立、规范地书写HTML文档的基本结构 能使用标题标签<h1>、段落标签<p>组织页面文字，完成简单网页的制作 培养规范的代码编写习惯，自觉遵循语法规则与行业规范 在反复修改与调试中养成耐心细致、精益求精的工匠精神 知识目标 能力目标 素养目标 01 02 03 学习目标 目录 Part 01 教学导入 Part 02 知识讲授 Part 03 课堂问答 Part 04 课堂练习 Part 05 课堂小结 教学导入：同样文字，为什么效果不同？ 看视频思考一下：同样是文字，为什么放进浏览器就变漂亮了？ 教学导入：同样文字，为什么效果不同？ 看视频思考一下：同样是文字，为什么放进浏览器就变漂亮了？ 记事本里的“纯文本” 在记事本里敲下“欢迎学习网页设计与制作，这是我的第一个HTML页面”，不给文字加任何标记。 结果：没有标题层级、没有分段、没有格式，和记事本里看到的一模一样。 浏览器里的“HTML页面” 同样一句话，外面包上一层“尖括号标签”，再交给浏览器打开。 结果：文字变成大标题＋正文段落，有了字号、加粗和分段——是标签决定了显示效果。 教学导入：网页的“骨架”是什么 💡 网页的“骨架” 一个网页就像一栋房子：<html> 是整体框架，<head> 是看不见的水电管线，<body> 是能看见的房间与家具。三者搭起来，才有了一个完整的网页。 🏷️ 内容用什么装？ 网页上要展示的文字，都要用“标签”包起来，成对出现： <h1>欢迎学习网页设计与制作</h1> <p>这是我的第一个HTML页面</p> 第一部分 知识讲授 HTML文档基本结构 知识讲授：HTML文档的基本结构 <!DOCTYPE> 文档类型声明 位于文档最前面，向浏览器声明当前文档所遵循的HTML标准。只有通过声明，浏览器才把文档识别为有效HTML并按标准解析。 <html> 根标签 文档的根标签。<html> 标志浏览器解析的开始，</html> 标志结束，其他所有HTML标签都必须嵌套在它内部。 <head> 头部标签 定义文档的头部信息，主要封装 <title>、<meta>、<link>、<style> 等标签，描述标题、字符集、样式引用等元数据，不会直接显示。 <body> 主体标签 定义文档的显示内容，页面中展示的所有文本、图像、音频、视频都必须位于该标签内，是网页的核心展示区域。 💡 记忆口诀：声明在前 · 根标签包住全身 · head 管配置 · body 管显示 知识讲授：文档类型声明与根标签 <!DOCTYPE> 文档类型声明 写在一个HTML文档的最前面，用于向浏览器声明当前文档所遵循的HTML或XHTML标准，浏览器据此按指定标准解析文档。 书写不区分大小写：<!DOCTYPE html> 与 <!doctype html> 都可以。 <html> 根标签 <html> 标签是HTML文档的根标签，标志着浏览器解析的开始，</html> 标志着结束。 所有的其他HTML标签都必须嵌套在该标签内，它是最外层的“父标签”。 知识讲授：头部标签与主体标签 <head> 头部标签 用于定义HTML文档的头部信息，主要封装 <title>、<meta>、<link>、<style> 等标签，描述文档的标题、作者、字符集、样式引用等元数据。这些信息不会直接在网页中显示。 <body> 主体标签 用于定义HTML文档的显示内容，浏览器中展示的所有文本、图像、音频、视频等信息都必须位于该标签内，它是网页的核心展示区域。 知识讲授：HTML文档的基本语法结构--速记速测 示例代码：一个最简单的HTML文档 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> <h1>欢迎学习网页设计与制作</h1> <p>这是我的第一个HTML页面</p> </body> </html> 矩形框里都是什么？有什么用？ 知识讲授：HTML文档的基本语法结构 示例代码：一个最简单的HTML文档 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> <h1>欢迎学习网页设计与制作</h1> <p>这是我的第一个HTML页面</p> </body> </html> 结构要点速记 ① 声明在前 <!DOCTYPE html> 永远写在第一行，它不属于任何标签。 ② 成对出现 <html>、<head>、<body> 都是双标签，有开始标签就必须有结束标签。 ③ 先内后外 结束标签必须由内而外依次关闭，绝不能交叉嵌套。 知识讲授：<head> 标签的常用子标签 <title> 网页标题标签 定义网页的标题。该标题显示在浏览器窗口的标题栏中，也是网页被加入收藏夹时的名称，还会作为搜索引擎结果的页面标题。 写法：<title>我的第一个网页</title> <meta> 元数据标签 提供HTML文档的元数据，机器可读但不会在页面中显示，可定义字符集、关键词、描述、作者等信息。 写法：<meta charset="UTF-8"> 观看视频，看一下title标签和meta标签的作用和效果。 知识讲授：<head> 标签的常用子标签 小技巧： 1：输入！号，按table键可以快速生成html文档结构。 2：输入标签部分内容，按table键可以快速补全。 3：利用vscode分屏功能，可以编写代码，边实时预览网页。ctrl+s保存后可以看到网页。 <style> 与 <link> 标签 <style> 用于定义文档中指定区域的样式信息；<link> 用于链接外部资源和外部样式表。二者都写在 <head> 内部。后续讲解css会详细介绍。 观看视频，看一下title标签和meta标签的作用和效果。 知识讲授：字符集声明与中文乱码 <meta charset="UTF-8"> 字符集声明 charset 是 character set 的简写，即字符集设置。浏览器默认采用 ISO-8859-1 西文字符集，要正确显示中文，就必须告诉浏览器使用哪种字符集，最常用的是 UTF-8。 <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> ✅ 正确写法：<meta charset="UTF-8"> UTF-8 是目前最常用的国际化字符编码格式。 忘记声明会怎样？ 如果不声明字符集，浏览器会按默认的西文字符集解析文档，页面上的中文就会显示成一串看不懂的“乱码”。 <head> <title>我的第一个网页</title> </head> <!-- 页面中的中文显示为乱码 --> ⚠️ 排错口诀：页面中文乱码，先查字符集声明。 补上 <meta charset="UTF-8"> 再刷新，中文即可正常显示。 第二部分 HTML标签分类和任务实操 知识讲授 知识讲授：标签的分类 双标签 📖 基本格式 有开始标签和结束标签两部分，成对出现： <标签名 属性="值">内容</标签名> 🧩 常见例子 <html></html>、<head></head>、<body></body> <h1></h1>、<p></p> 单标签 📖 基本格式 用一个标签就能描述一个完整功能，末尾带“/”：<标签名/> 🧩 常见例子 <meta charset="UTF-8"> <link rel="stylesheet" href="my.css"/> ⚠️小贴士 单标签末尾的“/”建议保留，写法更规范。 注释标签 语法格式：<!--注释内容--> 注释内容不会在网页中显示，只有查看源代码时才能看到。 写注释是规范代码的好习惯，可标注标签功能、作者信息、创建日期。 知识讲授：标签的两种关系 嵌套关系（包含关系） 📖 定义 一个双标签中包含其他标签。如 <html> 中包含着 <head> 和 <body>。最外层称为“父标签”，内层称为“子标签”。 ⚠️ 书写规则 必须先结束内层内容的标签，再按照由内而外的顺序依次关闭。严禁交叉嵌套。 并列关系（兄弟关系） 📖 定义 两个标签处于同一级别，不存在包含关系。例如 <head> 与 <body> 就是并列关系。 🧩 常见例子 在 <html> 内部，<head> 与 <body> 同级并列，顺序固定：head 在前，body 在后。 标签大小写与规范 🔤 大小写 HTML标签的书写格式不区分大小写，<H1> 与 <h1> 效果一致。 ✅ 行业规范 行业规范要求统一使用小写形式，标签成对书写、及时闭合，以提高代码可读性。 知识讲授：典型错误代码诊断 错误现象：标签未闭合、交叉嵌套——页面显示异常，却找不到原因。 ❌ 错误示范 <h1><p>这是标题</h1></p> 先关闭了内层的 <h1>，却把 <p> 留在了里面。 ✅ 正确写法 <h1>这是标题</h1> <p>这是一个段落</p> 先内后外，逐个成对关闭。 ⚠️ 原因分析：结束标签必须“由内而外”依次关闭。把 <p> 留在 <h1> 里面，浏览器无法判断内容的层次关系，页面就会显示异常。 知识讲授：常用特殊字符代码 特殊字符 描述 字符代码 空格 空格 &nbsp; < 小于号 &lt; > 大于号 &gt; © 版权符号 &copy; ® 注册商标 &reg; & 和号 &amp; 网页中“<”和“>”符号无法直接输出，因此HTML为这些特殊字符专门设置了替代代码，即 表2-1 所示的特殊字符代码。 知识讲授：任务实施步骤自己试一试 步骤1：准备工作 打开VS Code，创建名为“任务2-1.html”的文件。 注意：扩展名必须是 .html，否则浏览器无法识别。 步骤2：在HTML页面结构中编写代码 先写 <!DOCTYPE>、<html>、<head>、<body> 搭好框架，再在 <body> 中用 <h1>、<p> 写入页面文字。 步骤3：查看效果 先保存文件，再单击运行按钮，在浏览器中打开“任务2-1.html”，查看页面效果。 💡 核心提示：先保存、再运行——忘记保存是初学者“改了却没效果”最常见的原因。 知识讲授：任务实施步骤对照视频总结自己步骤的所学知识 知识讲授：任务2-1.html 完整代码 完整代码：任务2-1.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> <h1>欢迎学习网页设计与制作</h1> <p>这是我的第一个HTML页面</p> </body> </html> 代码要点说明 ① 文档类型声明 第一行永远是 <!DOCTYPE html>，它不属于任何标签，写在最前面。 ② 头部配置 <meta charset="UTF-8"> 保证中文正常显示，<title> 决定浏览器标签页上的名字。 ③ 主体内容 <h1> 是标题标签、<p> 是段落标签，页面上能看到的文字都写在 <body> 里。 课堂问答 概念题 HTML文档由哪几个核心部分组成？它们各自的作用是什么？ 由4部分组成： <!DOCTYPE>文档类型声明、<html>根标签、 <head>头部标签、 <body>主体标签。 理解题 为什么在<head>里写了<meta charset="UTF-8">，页面中文就不会乱码？ 浏览器默认按西文字符集解析文档，中文会显示为乱码。声明UTF-8后，浏览器就知道该用哪种字符集解码，中文才能正确显示。 辨析题 <h1><p>这是标题</h1></p> 这种写法正确吗？为什么？ 不正确。标签必须严格嵌套，结束标签要由内而外依次关闭。应写成 <h1>这是标题</h1> 和 <p>这是一个段落</p>。 背诵记忆 HTML文档的4个核心部分 📖 依次记牢 <!DOCTYPE html>　文档类型声明 <html>　　　　　根标签 <head>　　　头部：标题、字符集 <body>　　　　　主体 💡 记忆口诀 声明在前、根标签包住全身， head 管配置、body 管显示。 <head> 中的常用子标签 🏷️ 网页标题 <title>我的第一个网页</title> 显示在浏览器窗口的标题栏中 🔤 字符集 <meta charset="UTF-8"> 保证页面中文不乱码 标签的分类与关系 📖 标签分类 双标签：<html></html> 单标签：<meta charset="UTF-8"> 注释标签：<!--注释内容--> 🔗 标签关系 嵌套关系：先结束内层，再由内而外关闭 并列关系：同级，如 <head> 与 <body> 练习题1：HTML文档中，用来存放页面可见内容的标签是（ ） A. <head> B. <html> C. <body> D. <style> 答案：C 解析：<body> 是主体标签，存放页面展示给用户的内容；<head> 是头部，存放网页配置信息，不会直接显示。 课堂练习 练习题2：以下代码中，存在“交叉嵌套”错误的是（ ） A. <head><title>标题</title></head> B. <h1><p>这是标题</h1></p> C. <body><h1>欢迎</h1></body> D. <meta charset="UTF-8"> 答案：B 解析：标签必须严格嵌套，结束标签要由内而外依次关闭。B选项先关闭了<h1>，却把<p>留在里面，属于交叉嵌套。 课堂练习 课堂练习 填空题 补全代码：<html><head>（ ）</head><body>你好</body></html>，页面中文才能正常显示。 填 <meta charset="UTF-8">。它声明文档使用UTF-8字符集，浏览器据此正确解码中文；不写则默认按西文字符集解析，中文会显示为乱码。 判断题 HTML标签都是成对出现的，不存在单标签。（ ） ✗ 错误。HTML标签分为双标签和单标签。 思考题 把 <h1> 写成 <H1>，页面显示效果会变吗？为什么？ 不会变。HTML标签不区分大小写，<H1> 与 <h1> 效果一致。但行业规范要求统一使用小写，以提高代码的可读性和可维护性。 课堂小结 HTML文档的基本结构 <!DOCTYPE>：文档类型声明，写在文档最前面 <html>：根标签，所有HTML标签都必须嵌套在其中 <head>：头部标签，定义<title>标题、<meta charset>字符集等元数据，不会直接显示 <body>：主体标签，存放页面中展示的所有可见内容 标签分类与标签关系 双标签：<html></html>　单标签：<meta charset="UTF-8"> 注释标签：<!--注释内容--> 嵌套关系：先结束内层，再由内而外依次关闭，严禁交叉嵌套 并列关系：同级标签，如 <head> 与 <body> 💡 核心总结：结构是网页的骨架，标签规范是代码的地基——先搭好结构，再谈美化。 课堂小结 基本语法结构 📖 骨架代码 <!DOCTYPE html> <html> <head><title>标题</title></head> <body>内容</body> </html> ✅ 书写要点 声明在前 · 标签成对 · 先内后外 · 统一小写 特殊字符代码 &nbsp; 不换行空格 &lt; 小于号　　&gt; 大于号 &amp; 和号 &copy; 版权符号　&reg; 注册商标 💡 为什么要用 标签中的“<”和“>”无法直接输出，必须用替代代码。 常见错误清单 漏写结束标签：忘记写 </body>、</html> 交叉嵌套：<h1><p></h1></p> 是错误写法 中文乱码：忘记写 <meta charset="UTF-8"> 作业布置： 1. 预习任务2.2 使用页面格式化标签组织课程概况。 2. 完成教材“试一试2-1.html”任务：为页面设置自定义标题，在代码中添加3条不同的注释，并验证注释是否会在页面中显示。 3. 整理本节课笔记，用自己的话描述HTML文档基本结构四个核心部分的作用；并在“任务2-1.html”的基础上，把标题文字改为自己的姓名和班级，重新运行查看效果。 课后任务 谢谢观看 THANKS 单击此处编辑母版标题样式 单击此处编辑母版副标题样式 EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn $