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

归途风景111

已于 2022-07-13 16:14:19 修改

阅读量1.5k

点赞数 2

分类专栏：初始HTML页面

于 2022-04-05 21:11:12 首次发布

本文链接：https://blog.csdn.net/weixin_58032613/article/details/123971568

版权

网络 http https

初始HTML页面专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、知识回顾：

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 &#61; 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>