day03-文字效果标签及特殊符号

文章目录

- 一、知识回顾：
- 二、单元内容
三、学习内容
- 3.1 文字效果
- - 3.1.1 加粗标签和倾斜标签
  - - 简单案例1：
    - 中等案例2：找到淘宝网页中的加粗b标签，优先找到的同学给予加分。本周加分最高的同学有奖励。
  - 3.1.2 放大标签和缩小标签
  - 3.1.3 下划线标签（双）：``
  - 3.1.4 文字大小、颜色、字体标签(双)：``
  - 3.1.5 文字效果案例练习
- 3.2 特殊文字符号
- - 3.2.1 特殊文字符号讲解
  - 3.2.2 特殊文字符号案例
- 3.3 滚动标签(双) ` `
- - 3.3.1 滚动标签
  - 3.3.2 文字滚动方式、方向
  - 3.3.3 滚动文字的背景颜色属性设置
  - 3.3.4 滚动宽度及高度属性设置
- 3.4 第二个页面的制作

一、知识回顾：

2.1 什么是网页和网站
2.2 Web的三大标准
2.3 什么是超文本

知识点回顾：利用直播间刷屏的方式
2.4 HTML是什么
2.5 HTML语言的语法

知识点回顾：利用随机点名表随机点名的方式
2.6 HTML基本结构

知识点回顾：利用直播间直接点名的方式
2.7 标题标签及特点
2.8 段落标签格式
2.9 水平线标签格式
2.10 水平线标签属性

知识点回顾：利用随机点名的方式

二、单元内容

3.1 文字效果-（重点掌握）
3.2 特殊文字符号-（熟悉）
3.3 滚动标签-（了解）
3.4 第二个页面的制作-（重点掌握）

三、学习内容

3.1 文字效果

3.1.1 加粗标签和倾斜标签

小游戏引入：这首诗找人背一下大家在小学学过的咏鹅。

淘宝网，大家常用的购物网站-淘宝网-（网址https://www.taobao.com/），经常有文字加粗的效果：

What ：加粗标签（双）： 

Why：网页中标题标签或者字体加粗的需要

Where：标题标签或者字体加粗

When：网页项目标题等

How: 双标签，包裹需要加粗的文字

知识点讲解前，我们的代码可以完成的效果如图所示：

课堂代码：倾斜标签（双）： 

<b>咏鹅</b>

<i>鹅鹅鹅，曲项向天歌。</i><br>

<i>白毛浮绿水，红掌拨清波。</i>

课堂练习：

完成如下案例截图发到微信群里，

发出后给予同学正向鼓励和表扬：

美杰老师送上跑车x1314 ，求围观！求祝福！奥利给等

简单案例1：

中等案例2：找到淘宝网页中的加粗b标签，优先找到的同学给予加分。本周加分最高的同学有奖励。

3.1.2 放大标签和缩小标签

课前小游戏：利用扑克牌或者10元5元钱拿在手里让学生随意猜大小，引出接下来的案例。

课堂提问抢答：大和小的单词？回答正确的同学给予加分。回答错误的同学可以给予小惩罚-大冒险等游戏

案例展示：网页中有比较大的文字和比较小的文字，例如小米官网底部：

课堂代码：放大标签（双）：<big></big>

缩小标签（双）：

<big>预售维修服务</big> <br/>
<small>售后政策</small>

代码效果：

3.1.3 下划线标签（双）：``

案例展示：网页中有带有下划线的文字，例如百度网页头部-（网址：百度官网）

课堂代码：

<u>新闻</u>
<u>hao123</u>

代码效果：

删除线标签：

哈哈哈

课堂互动：使用随机点名的方式选择切换屏幕共享浏览学生代码，完成的同学给予个人加分。

3.1.4 文字大小、颜色、字体标签(双)：``

案例展示：网页的文字大小和颜色均有不同，举例链家网站：

代码展示：

<font face="微软雅黑" size="3">总有人劝你多喝热水，却少有人劝你多读好书。 </font> <br>

<font color="blue">《身体知道答案》推荐理由：这本书提倡我们回归身体，将身体与心灵链接起来，成为真实的你自己。</font>

案例效果：

案例总结笔记

属性：face=“字体” size="1~7"字号大小 color=“颜值”

1.font :文字

2.face ：脸，文字的脸，就是字体

3.size ：大小，文字的大小1-7

4.color ：文字的颜色

3.1.5 文字效果案例练习

课堂互动：大家都玩的游戏有什么？有谁玩的游戏王者荣耀，在游戏中当你击败敌人后会有声音特效，我们利用文字效果练习一下这个小特效。

效果图实现代码

<h3>你的荣耀</h3>
<font size="2" color="red" > First Blood 第一滴血</font><br>
<font size="3" color="red">Double kill（双杀）</font><br>
<font size="4" color="red">Triple kill（三杀）</font><br>
<font size="5" color="red">ultra kill(四杀)</font><br>
<font size="3" color="red">Rampage(五杀)</font><br>

课堂互动：使用砸金蛋点名的方式选择切换屏幕共享浏览学生代码，完成的同学给予个人加分。

3.2 特殊文字符号

3.2.1 特殊文字符号讲解

案例展示-淘宝和百度底部的特殊字符作业帮也有类似的效果：

3.2.2 特殊文字符号案例

案例效果图

案例思路分析

1.字体加粗，需要标题标签

2.>可以利用特殊文字符号完成

3.间距可以用&emsp 等空格来完成

具体代码实现，对应上面思路分析

 <h3>热门楼盘 > &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; 看房团 ></h3>

特殊文字符号总结：

课堂练习：利用特殊文字符号将下面的案例敲出来

互动环节：随机点名同学敲2-3个效果，并给予加分和评价。

案例分析

1.特殊字符总结如上笔记

**课堂案例代码实现 **

<p> 0 &lt; 5</p><p>8 &gt; 2.5</p><p>0 = 0</p><p>你 &nbsp; 好 ！</p><p>我&amp;你</p><p>再见&emsp;来不及挥手</p><p>她说：&quot;淡黄的长裙，蓬松的头发&quot;</p><p>&quot;淡黄的长裙，蓬松的头发&quot;</p><h3>热门楼盘 > &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; 看房团 ></h3>

3.3 滚动标签(双) `<marquee></marquee>`

3.3.1 滚动标签

课前小游戏：我比划大家猜-比划滚动的标签，可以借助鸡蛋球等辅助类型工具，引出今天的滚动标签

课堂互动：看电视看动漫的弹幕，类似于跑马灯效果

滚动标签的展示网页效果hao123网址

3.3.2 文字滚动方式、方向

这边原本是有视频效果图的，但是目前不支持视频上传，转换为gif格式也太大了，所以就给删除了

案例思路分析

1.marquee：选取框；大天幕；华盖；即跑马灯标签

2.behavior：行为举止反应；alternate：来回滚动；scroll：默认循环滚动；slide ：滑动一次

3.文字滚动的方向：direction属性，属性的参数值有down下、left左、right右、up上共四个单一可选值

具体代码实现，对应上面思路分析

课堂代码练习：

写出你喜爱的电视剧中你想发射的弹幕，比如甄嬛传中，安其拉只剩下啊一个拉~有人在《大宋提刑官》里，发现了玉娘头上的联通LOGO（弹幕说玉娘是联通的吗）。曹贵人设计让甄嬛跳惊鸿舞，安陵容和沈眉庄一起帮助她解围(弹幕：后宫SHE正式出道)搞笑弹幕等

3.3.3 滚动文字的背景颜色属性设置

案例效果图

案例思路分析

背景颜色属性：bgcolor=“颜值”
高度属性：height=“100px”
宽度属性：width=“200px”

具体代码实现，对应上面思路分析

3.3.4 滚动宽度及高度属性设置

案例效果图

案例思路分析

1.增加宽度的单词width和高度的单词height

具体代码实现

3.4 第二个页面的制作

页面效果图（hao123网站侧边栏) 其中我们把百度风云榜和实时热点进行跑马灯效果的展现

课堂互动：

有思路的同学可以提供思路给大家，给予加分。

案例思路分析

1.独占一行的为段落标签p标签，文字颜色利用font标签更改

2.文字之间间距用&emsp；

3.换一换下面用下划线u标签

4.文字的颜色不同利用文字font标签

5.两条水平分割线利用hr标签

6.跑马灯效果的应用

具体代码实现截图：

最后课堂结束前对加分最高的同学给予表扬，其他同学给予激励。大家发表情鼓掌或者老师给予小奖励。

通用鼓励语句给予上课回答正确的孩子刷屏：

美杰老师为包意聪精神小伙送上火箭x1314 ，求围观！求祝福！

美杰老师为包金兰小可爱送上鲜花x1314 ，求围观！求祝福！

奥利给66666！！！