模块2任务2.2和2.3：使用页面格式化标签组织课程概况和使用图像展示课程特色（课件）-《网页设计与制作》（电子工业出版社）上好课

模块2 任务2.2和2.3 页面格式化标签与图像标签 网页设计与制作 电子工业出版社 掌握<h1>～<h6>标题标签与<p>段落标签的语法格式和align属性用法 掌握<hr/>、<br/>、<pre>的作用与常用属性，了解四种网页图像格式 能运用页面格式化标签制作层级清晰、重点突出的“课程概况”页面 能用<img/>插入图像并正确书写相对路径，做出图文混排的页面 培养规范的HTML代码编写习惯，树立知识产权保护意识 养成“语义优先”的编码意识，理解<strong>与<b>的区别 知识目标 能力目标 素养目标 01 01 01 学习目标 目录 Part 01 教学导入 Part 02 知识讲授 Part 03 师生互动 Part 04 课堂练习 Part 05 课堂小结 教学导入：文字堆砌 vs 标签排版 思考一下：同样的课程概况，差别在哪？ “文字堆砌版” 教学导入：文字堆砌 vs 标签排版 思考一下：同样的课程概况，差别在哪？ “格式化标签版” 教学导入：文字堆砌 vs 标签排版 思考一下：同样的课程概况，差别在哪？ “文字堆砌版” 把课程简介、课程目标、核心技术全部堆在一起，没有标题层级，也没有分隔线。 结果：关键技术名词淹没在正文中，看不出哪是标题、哪是正文，根本读不下去。 “格式化标签版” 用<h1><h2>搭建标题层级，用<ul>组织正文，用<hr/>分隔板块。 结果：层级分明、重点突出，一眼就能抓住核心信息。 教学导入：让页面从“能看”到“好读” 标签决定显示效果 网页上的一切——大标题、二级标题、正文段落、分隔线——都不是靠敲空格敲出来的，而是被一对一对“尖括号标签”包起来的。标签写对了，浏览器才知道该怎么显示。 本课的两个任务 任务2.2：用页面格式化标签把“课程概况”页面组织得层级分明、重点突出；任务2.3：用图像标签展示“课程特色”，做成图文混排的效果。 第一部分 页面格式化标签组织课程概况 知识讲授 知识讲授：什么是页面格式化标签 什么是页面格式化标签？ 核心定义 一篇文章通常包含标题、段落和分割线，HTML网页也是如此。为了让网页中的文本显示得更有条理，HTML提供了专门的页面格式化标签：<hn>做标题、<p>做段落、<hr/>做分隔线。 CORE SKILL / 核心技能 用标签排版 FORMAT THE CONTENT “用标签告诉浏览器：哪里是标题、哪里是正文、哪些是重点” 知识讲授：五个常用页面格式化标签 标题标签 <hn> HTML提供<h1>～<h6>六级标题，字号依次递减，<h1>级别最高，常用于页面主标题。 段落标签 <p> <p>用于定义网页中的段落，段落在浏览器中会自动换行，段前段后带空白间距。 水平线标签 <hr/> 单标签，在网页中默认添加一条水平线，把段落与段落分隔开，让结构更清晰。 换行标签 <br/> 同样是单标签，只实现强制换行，不会在前后添加任何空白间距。 核心要点：还有 <pre> 标签——让文字按源码原样保留换行与空格，排版效率更高。 知识讲授：五个常用页面格式化标签 核心要点：还有 <pre> 标签——让文字按源码原样保留换行与空格，排版效率更高。 知识讲授：标题标签与段落标签 标题标签 <hn> · 语法与示例 语法：<hn align="对齐方式">文本标题</hn>，其中 n 的取值为 1～6，align 为可选属性。 核心要点： align 的三个属性值——left 左对齐、right 右对齐、center 居中对齐。 段落标签 <p> · 语法与示例 语法：<p align="对齐方式">段落文本</p>，同样可以用 align 属性控制段落的对齐方式。 易错警告： <hn> 与 <p> 都是双标签，写了开始标签就必须补上 </hn>、</p>，不能漏写。 知识讲授：换行标签与预格式化 换行用 <br/> 还是 <p>？ <br/> 只换行、不带间距；<p> 是独立段落、自带段前段后间距。想要紧凑换行用 <br/>，想要另起一段用 <p>。 知识讲授：换行标签与预格式化 换行用 <br/> 还是 <p>？ <br/> 只换行、不带间距；<p> 是独立段落、自带段前段后间距。想要紧凑换行用 <br/>，想要另起一段用 <p>。 搞清楚：回车键为什么不换行 在 VS Code 里按回车键换行 浏览器中并不会真正换行，只会显示为一个空格 怎么办：<pre> 标签 让文字按源码里的样子保留换行与空格 可替代大量的 <br/> 和 &nbsp;，提高排版效率 特别注意 浏览器会把多个回车符和多个空格都默认为单个空格——这是把Word排版习惯带进代码最容易踩的坑。 知识讲授：<hr/> 常用属性 属性名 含义与取值 属性名 含义与取值 align left / right / center size 像素值，如 3px color 颜色名 / #RRGGBB / rgb() width 像素值或窗口百分比 <hr/> 是单标签，默认添加一条水平线，用 align、size、color、width 四个属性修改样式。 知识讲授：文本格式化标签 核心法则：做加粗优先用 <strong>，少用 <b>。其他标签同理，因为语义比外观更重要。 知识讲授：文本格式化标签 <b> / <strong> · 加粗 <b>：单纯把文字变粗，不含任何语义。 <strong>：表示内容非常重要，搜索引擎、读屏软件会识别为重点信息。 <u> / <ins> · 下划线 <u>：单纯给文字加下划线，不含语义。 <ins>：表示文档中新添加、增补进来的内容。 <i> / <em> · 倾斜 <i>：单纯把文字变倾斜，不含语义。 <em>：表示语气上需要重点、突出的词。 <s> / <del> · 删除线 <s>：单纯加删除线，不含语义。 <del>：表示已被删除、废弃的旧内容。 核心法则：做加粗优先用 <strong>，少用 <b>。其他标签同理，因为语义比外观更重要。 背诵记忆（一） 页面格式化标签 ① 标题六级 <h1>～<h6> 共六级， 字号依次递减 ② align 三值 left / right / center （左 / 右 / 居中） 换行与空格 ③ hr 四属性 align、size、color、width <br/> 与 <p> <p> 带间距，<br/> 只换行 原样与易错 <pre> 原样 保留源码中的换行与空格 易错提醒 回车键在 HTML 里只是一个空格 背诵记忆（二） 文本格式化标签 加粗与下划线 <b>/<strong> 加粗 <u>/<ins> 下划线 倾斜与删除线 <i>/<em> 倾斜 <s>/<del> 删除线 语义区分 语义四标签 <strong>重要　<em>着重 <ins>新增　<del>已删除 只有样式 <b>、<i> 只有样式，没有语义 记忆口诀·抽查 口诀（上） 标题六级定层级，段落成行写正文， 口诀（下） 水平线分隔板块，标签成对不落单。 课堂问答（一） 概念题 <p> 标签和 <br/> 标签都能实现换行，它们的区别是什么？ <p> 是段落标签，自带段前段后间距；<br/> 只强制换行，前后不带任何间距。 理解题 想在网页中保留一首诗原有的换行排版，应该使用哪个标签？ 用 <pre>：浏览器原样显示源码中的换行与空格，不必堆大量 <br/>。 辨析题 <strong> 和 <b> 的显示效果几乎一样，为什么推荐用 <strong>？ <strong> 表示“内容重要”，搜索引擎与读屏软件能识别；<b> 只是加粗样式。 练习题1：在HTML中，用于在网页中添加一条水平线、把段落与段落分隔开的标签是（　　） A. <br/>　　B. <hr/>　　C. <p>　　D. <pre> 答案：B 解析：<hr/> 是水平线标签，且是单标签；<br/> 只换行，<p> 定义段落，<pre> 保留原排版。 课堂练习 练习题2：在VS Code中敲回车键换行，保存后用浏览器打开，页面上的文字会（　　） A. 正常换行　　B. 显示为一个空格 C. 自动分段　　D. 页面报错 答案：B 解析：HTML会把多个回车符和多个空格都默认为单个空格。要换行必须用 <br/>，要独立成段必须用 <p>。 课堂练习 例题分析：制作“课程概况” 任务要求 打开VS Code，创建“任务2-2.html”文件：用<h1>、<h2>搭建标题层级，用<p>组织正文，用<hr/>分隔板块，用<strong>强调关键词，用<ul>展示课程目标，做出教材图2-3的效果。 实施要点 先把 <!DOCTYPE>、<html>、<head>、<body> 四个部分搭好框架，再往 <body> 里依次添加标签。养成“先写结构、再补属性”的习惯，边写边给关键步骤加注释。 例题分析：代码讲析 <h1> 页面主标题 代码：<h1 align="center">…</h1> 作用：一级标题居中，全页只用一次。 <hr/> 红色分隔线 代码：<hr width="80%" … size="1"/> 作用：红色细线，宽 80%，放在主标题下。 <strong> 强调关键词 代码：<strong>HTML5</strong> 作用：表示内容重要；<b> 只有加粗样式。 <h2> 与 <ul> 列表 代码：<h2>课程目标</h2> + <ul><li>…</li></ul> 作用：二级标题分层级，列表列目标。 任务实施：任务2-2.html 实施步骤 步骤1：新建“任务2-2.html”，用 VS Code 打开。 步骤2：按右侧代码编写页面内容。 步骤3：保存后在浏览器中预览效果。 先保存再运行 扩展名 .html 任务2-2.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>课程概况</title> </head> <body> <h1 align="center">网页设计与制作课程</h1> <hr width="80%" align="center" color="#FF0000" size="1"/> <h2>课程简介</h2> <p>本课程旨在帮助学生掌握<strong>HTML5</strong> 和<strong>CSS3</strong>的核心技术。</p> <h2>课程目标</h2> <ul> <li>理解Web标准和网页开发流程</li> <li>使用HTML5创建结构良好的网页</li> <li>使用CSS3美化网页样式</li> </ul> </body> </html> 第二部分 知识讲授 任务2.3 使用图像展示课程特色 知识讲授：网页图像格式 GIF 格式 支持动画，且是无损压缩、支持透明，适合Logo、小图标和其他色彩相对单一的图像。 PNG 格式 网页常用的无损压缩格式，支持透明、画质无损失，但不支持动画；静态图可用PNG8取代GIF。 JPG 格式 有损压缩但色彩丰富，专为照片设计，适合横幅广告、商品照片与较大的插图。 WebP 格式 Google开发的高效格式，有损压缩比JPEG再小25%～34%，还能替代GIF做高质量动画。 选用原则：小图用GIF/PNG-8 · 半透明用PNG32 · 照片用JPG/WebP · 动图用GIF/WebP。 知识讲授：图像标签 什么是图像标签？ 要在网页中显示图像，就要用图像标签 <img/>，它是单标签，src 是必备属性。 核心属性速记 01. src —— 指定图像路径与文件名，缺了它页面就找不到图 alt 替代 title 提示 宽高属性 02. border 设边框，align 设对齐方式，hspace 设图像与文字的水平间距。 知识讲授：图像常用属性 属性 描述 属性 描述 src 图像的路径（必备） width 设置图像的宽度 alt 图像不能显示时的替代文本 height 设置图像的高度 title 鼠标悬停时显示的内容 border 设置图像的边框 align left 左对齐 / right 右对齐 hspace 图像的水平间距 图像标签为 <img/>，语法格式为 <img src="图像URL"/>。其中 src 属性用于指定图像文件的路径和文件名，是 <img/> 标签的必备属性，如表2-5所示。 知识讲授：两种路径写法 什么是文件路径？ 计算机查找文件时需要明确文件的路径。网页中的文件路径分为绝对路径和相对路径两类。 绝对路径 D:\website\images\logo.gif http://www.example.com/images/logo.gif 带盘符的完整硬盘路径，或完整的网络地址。 相对路径 img/zhineng.png ../images/logo.gif 以HTML网页文件为起点，通过层级关系描述目标图像的位置，不含盘符。 特别注意 网页一旦发布到服务器，原来的盘符就失效了，所以做网页一律推荐使用相对路径。 知识讲授：相对路径写法 图像文件的位置 写法与示例 图像文件的位置 写法与示例 与网页在同一 文件夹中 src="logo.gif" 在网页的 子文件夹中 src="images/logo.gif" 在网页的多级 子文件夹中 src="images/banner/logo.gif" 在网页的上一级 文件夹中 src="../images/logo.gif" 相对路径没有盘符，通常以 HTML 网页文件为起点，通过层级关系描述目标图像文件的位置。相对路径设置分为以下 4 种。 例题分析：图文混排页面 插入图像 · 核心代码 相对路径引用 images 子文件夹里的图像；width 控制显示尺寸；align="left" 配合 hspace="30" 实现图像居左、文字环绕。 核心要点： alt 是图像不能显示时的替代文本，title 是鼠标悬停时的提示——两个都要写。 插入图像 · 样式代码 绝对路径引用images子文件夹里的图像 易错警告： 路径写成绝对路径，换台电脑就打不开；只写 width 不写 height，图片容易变形。 课堂问答（二） 概念题 绝对路径和相对路径有什么区别？做网页时应该用哪一种？ 绝对路径带盘符或是完整的网络地址；相对路径以当前网页文件为起点、不含盘符。做网页推荐用相对路径。 理解题 教材示例中的 width="200px" 与 hspace="30" 分别控制什么？ width 控制图像的显示宽度；hspace 控制图像与周围文字之间的水平间距，配合 align="left" 就能实现文字环绕。 辨析题 网页中一张较小的 Logo 图标，用 JPG 格式保存合适吗？为什么？ 不合适。色彩相对单一的 Logo 应该用 GIF 或 PNG-8；JPG 是有损压缩、专为照片设计的格式，用在小图标上得不偿失。 背诵记忆 图像格式选用原则 四条原则 ① 较小的图像或网页元素用 GIF、PNG-8；② 半透明图像用真彩色 PNG；③ 色彩丰富的图像用 JPG 或 WebP；④ 动态图像用 GIF 或 WebP。 为什么重要 1. 选对格式，能在几乎不损失画质的前提下大幅缩小体积。 2. 主流浏览器与设计工具均已兼容 WebP，值得优先尝试。 相对路径四写法 ① 同一文件夹 直接写文件名：logo.gif ② 子文件夹 images/logo.gif ③④ 多级 / 上一级 images/banner/logo.gif、 ../images/logo.gif 避坑关键细节 多个空格、多个回车在HTML中只显示为一个空格，别用空格键做缩进。 图像找不到会出现“裂图”，此时页面只会显示 alt 里的替代文本。 网上下载的图像用于公开发布的网站前，必须确认授权与出处。 任务实施：任务2-3.html 实施步骤 步骤1：新建“任务2-3.html”，同级建 img 文件夹，放入素材 景色1.jpg。 步骤2：按右侧代码编写页面内容。 步骤3：保存后在浏览器中预览图文环绕效果。 先建 img 相对路径 任务2-3.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>图文混排新闻</title> </head> <body> <img src="img/景色1.jpg" width="200px" alt="景色" align="left" hspace="30" title="景色"/> <h2><font face="微软雅黑" size="6" color="#545454">雪山景色？</font></h2> <hr color="#CCCCCC" size="1" /> <p>雪山景色是以山和雪为主题的景观， 人们看到后<strong>震撼</strong>与<strong>心动</strong>并存</p> </body> </html> 任务实施：任务2-3.html 实施步骤 步骤1：新建“任务2-3.html”，同级建 img 文件夹，放入素材 景色1.jpg。 步骤2：按右侧代码编写页面内容。 步骤3：保存后在浏览器中预览图文环绕效果。 先建 img 相对路径 课堂练习：试一试 2-3 练习要求 创建“试一试2-3.html”文件，完成以下练习： ① 下载 GIF、PNG、JPG 三种格式的图像放入 img 文件夹并插入页面，分别设置不同的 width、height、border； ② 为每张图像添加 alt 和 title，测试图像无法显示时的效果； ③ 把其中一张设为 align="right"，观察文字环绕效果。 素养提示 从网上下载的图像若用于公开发布的网站，必须确认授权与出处，树立知识产权保护意识。完成后同桌互查路径写法，再选取 2～3 名同学广播展示作品，并说明自己图像路径的书写依据。 知识讲授：图像排错三招 第一招：查路径 先核对图像与网页的位置关系，确认相对路径的层级有没有写错。 第二招：查文件名 文件名、扩展名必须与 img 文件夹中的完全一致，注意大小写也要一致。 第三招：查 alt 文本 页面上本该出现图像的位置显示了 alt 的替代文字，就说明浏览器没找到这张图。 排错口诀：图像不显示，先看路径与文件名，再看 alt 替代文本——三步就能定位问题。 课堂小结 页面格式化标签 <h1>～<h6>：标题六级，字号依次递减；align 三值 left / right / center。 <p> 段落带间距，<br/> 只换行不带间距，<pre> 按源码原样显示。 <hr/>：单标签，align / size / color / width 四个属性控制显示效果。 文本格式化与图像 <b>/<strong> 加粗、<u>/<ins> 下划线、<i>/<em> 倾斜、<s>/<del> 删除线。 <img src="" alt="" title="" width="" height="" border="" align=""/>，src 是必备属性。 路径：绝对路径带盘符或完整网址，相对路径的 4 种写法必须记牢。 核心总结：<p> 带间距、<br/> 只换行；<strong> 有语义、<b> 只有样式。写代码要“语义对、路径对、来源合法”。 作业布置： 1. 预习任务2.4“使用列表组织课程大纲”：<ul> 与 <ol> 分别适合展示什么？ 2. 完善“课程概况”页面：补充 <h2>课程特色</h2> 小节，至少一次 <hr/>、一次 <br/>、一处 <strong>。 3. 制作“课程特色”图文混排页面：至少放入 2 张图像，用相对路径引用，设置 width 与 border，添加 alt 和 title，其中一张用 align="right" 实现图文环绕，并用 <pre> 展示一段 HTML 学习笔记。 4. 源文件提交至学习平台，下节课抽查展示。 课后任务 谢谢观看 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 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 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 $