项目2-2：HTML5常用标签
黑龙江旅游职业技术学院 · 《网页设计与制作》
授课教师：刘继峰
🎯 教学目标
知识目标

掌握文本、图像、区块、列表、链接、表格等常用标签及特殊字符。

能力目标

能使用HTML5标签独立制作简单的静态网页（如新闻页）。

素质目标

培养“大国工匠”精神，提升审美能力与严谨的工作态度。

🚩 任务1：制作“稻田画出乡村振兴图”新闻页面
💡 思政融入点： 通过展示黑龙江绥化北林区的稻田画“乡村振兴图”， 将网页制作技术与家乡美景、国家乡村振兴战略相结合，激发学生的爱国热情和建设家乡的使命感。

任务分析

  1. 内容结构： 页面包含标题、导航栏、新闻正文（含段落和图片）、版权信息。
  2. 技术选型： 使用 HTML5 语义化标签（<header>, <nav>, <article>, <figure>, <footer>）构建结构。
  3. 图文混排： 使用 <img> 标签插入稻田画图片，使用 <figcaption> 添加图片说明。

任务实现效果预览

🔤 知识点1：HTML5文本格式化标签

这些标签用于改变文本的外观或语义，例如加粗、斜体、上下标等。

标签 说明 示例与效果
<b> / <strong> 定义粗体或加重语气 这是一段普通文字，这是加粗文字，这是加重文字。
<i> / <em> 定义斜体或强调 这是一段普通文字，这是斜体文字，这是强调文字。
<u> / <ins> 定义下划线或插入文本 这是一段普通文字，这是下划线文字，这是插入的文字。
<s> / <del> 定义删除线 原价100元，现价50元。
<sup> 定义上标 水的化学式是 H2O，面积单位是 m2。
<sub> 定义下标 段落标签是 <p>，下标示例：x1。
<small> 定义小号字 这是一段正常文字。这是一段小号字，常用于版权信息或备注。
💻 知识点2：计算机输出标签

这些标签通常以等宽字体显示，用于表示代码或计算机相关的输入输出。

标签 说明 示例与效果
<code> 定义计算机源代码 在HTML中，段落标签写作 <p>。
<kbd> 定义键盘输入 请按 Enter 键确认，或按 Ctrl + C 复制。
<samp> 定义程序输出 系统提示：File not found。
<var> 定义变量 在公式 E=mc2 中，E 代表能量。
<pre> 定义预格式化文本
(保留空格和换行)		 
<html>
  <head>
    <title>示例</title>
  </head>
</html>
📖 知识点3：引文、引用及定义标签

这些标签用于定义特殊类型的文本，如缩写、地址、引用等，有助于SEO和语义化。

标签 说明 示例与效果
<abbr> 定义缩写词 你听说过 ETC 吗？ (鼠标悬停查看)
<address> 定义联系信息 联系地址：
黑龙江省学府路315号
<bdo> 定义文字方向 默认从左到右：Hello World | 从右到左：Hello World
<blockquote> 定义长引用（块级）
脚穿草鞋爬山峰，唔(不)怕雨来唔(不)怕风...
<q> 定义短引用 中国人有一句老话：不入虎穴，焉得虎子。
<cite> 定义作品标题 《红岩》是一部经典的长篇小说。
<dfn> 定义术语或特殊短语 HTML 的中文名是超文本标记语言。
🔶 知识点4：HTML5特殊字符

HTML中预留了一些字符（如 << /code> 和 >）用于定义标签，如果要在网页中显示这些字符，必须使用字符实体。

显示效果 描述 实体名称 实体编号
(空格) 不间断空格 &nbsp; &#160;
<< /td> 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 双引号 &quot; &#34;
¥ 人民币元 &yen; &#165;
© 版权符号 &copy; &#169;
® 注册商标 &reg; &#174;
🏗️ 知识点5：HTML5文档结构标签

HTML5引入了语义化标签，使网页结构更清晰，有利于搜索引擎优化（SEO）和屏幕阅读器解析。

标签 说明 应用场景
<header> 页眉/页头 放置网站Logo、导航栏、搜索框等。
<nav> 导航栏 包含主要的页面导航链接。
<main> 主要内容 页面独有的、核心的内容（每个页面仅一个）。
<article> 独立文章 论坛帖子、新闻报道、博客文章等独立内容块。
<section> 区域/节 将内容组织成不同的逻辑块。
<aside> 侧边栏/附属信息 广告、相关链接、作者信息等。
<figure>
<figcaption>		 独立媒体及其标题 图片、图表、视频及其说明文字。
注：您的PPT中提到的 <figurecaption> 标准写法为 <figcaption>
<footer> 页脚/页尾 版权信息、联系方式、备案号等。
📝 课堂测试
1. 请列举至少3个HTML5语义化标签，并说明其用途。

参考答案：

<header>：定义页眉，通常包含Logo或导航；

<nav>：定义导航链接的部分；

<article>：定义独立的内容区块，如新闻、博客；

<section>：定义文档中的节或区段；

<footer>：定义页脚，通常包含版权信息。

2. 在HTML中，如何正确显示小于号（<）和版权符号（©）？< /span>

参考答案：

小于号：&lt; 或 &#60;；

版权符号：&copy; 或 &#169;。

3. <strong> 标签和 <b> 标签有什么区别？

参考答案：

<b> 仅表示视觉上的加粗（物理样式）；

<strong> 表示内容的语义重要性（语义化标签），浏览器和屏幕阅读器会将其识别为重要文本。

📌 课堂总结

本节课我们深入学习了 HTML5 的常用标签，重点掌握了以下内容：

  1. 文本格式化： 区分了物理样式（如 <b>）与语义化标签（如 <strong>），了解了上下标和删除线的使用。
  2. 计算机输出： 掌握了 <code>、<pre> 等用于展示代码的标签。
  3. 语义化标签： 熟练使用 <header>、<nav>、<article>、<footer> 等构建清晰的网页骨架。
  4. 特殊字符： 记住了空格、版权符号等常用字符的实体编码写法。
💡 课后思考： 在制作新闻页面时，如何合理运用 <article> 和 <section> 来组织内容？ 同时，通过“乡村振兴”主题的页面制作，希望大家能利用技术手段讲好家乡故事，展现中国力量。