《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第3课 应用HTML5中的文本

第课第课应用HTML5中的文本的基基本本PAGE1431应用HTML5应用HTML5中的文本第课321PAGE133212应用HTML5中的文本3212应用HTML5中的文本第课PAGE1

课题应用HTML5中的文本课时2课时（90min）教学目标知识技能目标：（1）掌握标题和段落标签的使用方法（2）掌握基本的文本格式化标签和新增文本标签的使用方法（3）了解特殊字符的使用思政育人目标：（1）培养学生一丝不苟、严谨、认真的工作态度（2）在学习中拓展学生的视野，开阔学生的眼界教学重难点教学重点：标题和各种标签的使用方法教学难点：在HTML5中插入标题和各种标签教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：知识讲解（35min）第2节课：导入新知（4min）知识讲解（21min）

编程比赛（15min）

课堂小结（3min）

作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况导入新知

（4min）【教师】提出问题，引出本节课内容网页主要是通过文本向浏览者传递信息的，所以说文本是网页中不可缺少的重要内容使用HTML5语言的第一步就是了解它的标签和文本格式，在HTML语言中如何正确的使用标签和文本格式呢【学生】思考、讨论通过问答的方式，让学生主动思考，如何在HTML5语言对标签和文本格式进行使用，引起学生的学习兴趣预备知识

（25min）【教师】通过学生的回答引入新的知识点，讲解标题和段落标签1．标题标签HTML5中提供了6个级别的标题，可用<h1>～<h6>标签来标记，其中<h1>的标题级别最高，<h6>的标题级别最低。默认情况下，这些标签都具有字体加粗效果，并按照标题级别的降低，字号依次减小。标题可以看作网页的大纲，根据网页内容合理安排各级别标题可以更清晰地表达出网页的概要内容。【教师】演示例【2-1】的操作过程，实现图2-1的效果（具体操作详见教材）图2-1“诗词精选”网页的大纲2．段落标签网页的正文部分一般使用段落文本显示，在HTML5中使用<p>标签标记段落文本。虽然使用其他标签也能实现段落文本的显示效果，但是不建议使用，因为可能会妨碍搜索引擎的识别。【教师】演示例【2-2】的操作过程，实现图2-2的效果（具体操作详见教材）图2-2应用<p>标签的页面效果【学生】聆听、观看案例演示、记录、思考【教师】讲述基本的文本格式化标签1．强调在HTML5中，使用<strong>和<em>标签强调文本，<em>的强调语气轻于<strong>，它们可以嵌套使用。默认情况下，<strong>标签中的文本会添加字体加粗效果，<em>标签中的文本则添加斜体效果，如果<em>嵌套在<strong>中，其中的文本将同时添加斜体和粗体效果。【教师】演示例【2-3】的操作过程，实现图2-3的效果（具体操作详见教材）图2-3应用<strong>和<em>标签的页面效果2．上下标上标与下标是很重要的排版格式，在HTML5中，分别使用<sup>与<sub>标签来标记上标文本与下标文本。上标文本比主体文字稍高，常见的上标有指数、商标符号等。下标文本比主体文字稍低，常见的下标有脚注、化学符号脚标等。【教师】演示例【2-4】的操作过程，实现图2-4的效果（具体操作详见教材）图2-4应用<sup>和<sub>标签的页面效果3．插入与删除的文本在HTML5中，分别使用<ins>与<del>标签标记插入与删除的文本。默认情况下，<ins>标签中的文本会添加下划线效果，<del>标签中的文本会添加删除线效果。【教师】演示例【2-5】的操作过程，实现图2-5的效果（具体操作详见教材）图2-5应用<ins>和<del>标签的页面效果4．引用在HTML5中，使用<q>标签标记较短的引用文本，其中的文本两侧会添加引号。如果引用的文本过长，需要从周围的文本中分离出来，则可以使用<blockquote>标签，其中的文本两侧会添加缩进效果，有时会添加斜体效果。除此之外，HTML5中还有一个标记引用文本的<cite>标签，表示引用或参考的对象，其中的文本会添加斜体效果。【教师】演示例【2-6】的操作过程，实现图2-6的效果（具体操作详见教材）图2-6应用引用标签的页面效果5．注解在HTML5中，使用<small>标签标记行内的注解文本，如注意事项、免责声明等。默认情况下，<small>标签中的文本会添加字号减小效果，可以嵌套使用。【教师】演示例【2-7】的操作过程，实现图2-7的效果（具体操作详见教材）图2-7应用<small>标签的页面效果6．缩写词在HTML5中，使用<abbr>标签标记简称或缩写词，并使用其title属性提供简称或缩写词的全称，当鼠标指针移至<abbr>标签上时，将显示该全称。【教师】演示例【2-8】的操作过程，实现图2-8的效果（具体操作详见教材）图2-8应用<abbr>标签的页面效果7．文本换行与文本方向在HTML5中，使用<br/>标签实现文本的换行显示（不建议大量使用），使用<bdo>标签控制文本的输出方向。<bdo>标签有一个dir属性，它有两个属性值，分别是ltr（从左至右）和rtl（从右至左）。dir属性省略时默认为从左至右显示。【教师】演示例【2-9】的操作过程，实现图2-9的效果（具体操作详见教材）图2-9应用<br/>和<bdo>标签的页面效果8．其他文本格式化标签除上述标签外，HTML5还提供了一些其他文本格式化标签，下面简单介绍。（1）<code>标签。用于标记代码或文件名。（2）<pre>标签。用于标记预定义格式的文本，可以保留文本固有的换行和空格等。（3）<dfn>标签。用于标记专用术语，其中的文本会添加斜体效果。【教师】演示例【2-10】的操作过程，实现图2-10的效果（具体操作详见教材）图2-10应用其他文本格式化标签的页面效果【学生】聆听、观看案例演示、记录、思考【教师】板书基本的文本格式化标签，着重讲解【学生】记录板书内容，做好课堂笔记【教师】提出问题，让学生思考HTML5基本标签中，是否可以混合使用？标签的顺序对标签的使用是否有影响。【学生】思考、讨论、交流【教师】根据所讲知识出几个案例，让学生进行操作【学生】根据所学知识进行操作【教师】公布正确代码，并进行讲解通过讲解知识点和案例，让学生进一步了解HTML5中的各类文本标签交流讨论

（4min）【教师】安排组间讨论，设置讨论话题安排小组之间两两讨论，分析HTML5中使用标签的原因，使用单个标签和混合使用标签各自的优缺点。【学生】完成小组讨论，记录讨论内容让学生有自我反省的意识，并且及时回顾学习的内容第二节课导入新知

（4min）【教师】复习上一节课内容，引出新的知识点上一节课主要学习了HTML5中的基本标签，但是为了满足用户的需求，在此基础之上，还增加了许多新的文本标签，这些新标签的使用，丰富了HTML5语言的内容。【学生】聆听、思考通过复习上一节课的内容，让学生了解HTML5中新增的文本标签知识讲解

（21min）【教师】讲解HTML5新增的文本标签1．突出显示文本在HTML5中，使用<mark>标签标记页面中需要突出显示的文本内容。默认情况下，其中的文本会添加黄色背景。【教师】演示例【2-11】的操作过程，实现图2-11的效果（具体操作详见教材）图2-11应用<mark>标签的页面效果2．进度在HTML5中，使用<progress>标签标记一项任务的完成进度，在页面中显示为一个进度条，使用标签属性可以设置进度条的最大值（max，默认值为1）和已完成任务量（value）等，如两者皆省略则显示为加载状态（谷歌浏览器的显示效果为左右来回移动的色块）。【教师】演示例【2-12】的操作过程，实现图2-12的效果（具体操作详见教材图2-12应用<progress>标签的页面效果3．计量在HTML5中，使用<meter>标签标记分数的值或某个范围的计量结果。例如，已售票数（共800张，已售300张）和磁盘使用量（共300G，已用180G）等。支持<meter>标签的浏览器会自动显示测量值，并根据设定的属性值显示为不同的颜色。<meter>标签包含7个属性，下面分别介绍。（1）value。所显示的实际值，默认值为0，必须标注且其值在min与max值之间。（2）max。显示范围的最大值，默认值为1。（3）min。显示范围的最小值，默认值为0。（4）low。合理范围的最低限度，当value小于low并大于min时，计量条显示为计量过低的颜色。（5）high。合理范围的最高限度，当value大于high并小于max时，计量条显示为计量过高的颜色。（6）optimum。最佳值，其值必须在min与max之间。（7）form。设置<meter>标签所属的一个或多个表单。【教师】演示例【2-13】的操作过程，实现图2-13的效果（具体操作详见教材）图2-13应用<meter>标签的页面效果4．联系信息在HTML5中，使用<address>标签标记与页面或页面某部分有关的作者、组织的联系信息。当表示与页面有关的联系信息时，通常位于页面底部的<footer>标签中；当表示与某个<article>有关的联系信息时，则位于该<article>中。联系信息可以是作者的电子邮件地址或通信地址，也可以是指向联系信息的链接。默认情况下，其中的文本会添加斜体效果，有些浏览器还会在其前后增加空行。【教师】演示例【2-14】的操作过程，实现图2-14的效果（具体操作详见教材）图2-14应用<address>标签的页面效果5．换行断点在HTML5中，使用<wbr>标签标记可换行点。它不会像<br/>标签一样直接将文本截断，而是表示该段文本过长，当窗口宽度变化需要换行显示时可在该标签处截断。【教师】演示例【2-15】的操作过程，实现图2-15的效果（具体操作详见教材）图2-15应用<wbr>标签的页面效果6．注音在HTML5中，使用<ruby>标签为字符添加注音（也称旁注）。注音是东亚语言（如中文或日文）中的一种惯用符号，一般位于要标注字符的上方或右侧。<ruby>标签在使用时需要与<rt>标签连用，<rt>标签标记字符需要标注的内容，也就是注音。【教师】演示例【2-16】的操作过程，实现图2-16的效果（具体操作详见教材）图2-16应用<ruby>标签的页面效果【学生】聆听、观看案例演示、记录、思考【教师】讲解特殊字符在网页中编辑文本时，可能会遇到无法直接输入的字符，如版权符号“©”、注册商标符号“®”等。HTML5为这些特殊字符准备了专门的代码，如表2-1所示表2-1常用特殊字符的代码特殊字符含义代码空格 <大于号<>小于号>&逻辑与符号&￥人民币符号¥©版权符号©®注册商标符号®°度符号°±正负号±×乘号×÷除号÷【教师】演示例【2-17】的操作过程，实现图2-17的效果（具体操作详见教材）图2-17使用代码输出特殊字符的页面效果【学生】聆听、观看案例演示、记录、思考通过讲解知识点，让学生了解HTML5中新增的文本标签编程比赛

（15min）【教师】组织编程比赛，设置比赛题目创建“图书简介”页面【教师】解析比赛题目网络技术的发展推动了电子商务的发展与成熟，各种类型的电子商务网站如雨后春笋般涌现出来，其中就包括网上书店。本节将使用HTML5中的文本标签创建网上书店中常见的“图书简介”页面，最终效果如图2-18所示图2-18“图书简介”页面的最终效果【学生】参加编程比赛，完成编程任务【教师】巡视课堂，营造公平竞争的环境通过编程比赛的设置，让学生熟练掌握HTML5中新增标签的使用课堂小结

（3mi