范仁义html+css课程---4、文本标签

一、总结

一句话总结：

文本标签大致掌握一下，做到它站在你对面的时候最好认得，认不得也没关系，直接百度

1、ins标签、u标签和del标签作用？

ins：<ins></ins>：效果为下划线，表示插入的文本

u：：效果为下划线，表示拼写错误的单词或者汉语中的专有名词

del：<del></del>：删除线

2、small标签作用？

定义小号文本

3、strong、em、b、i 标签的作用？

b：加粗

i：倾斜

em：强调倾斜

strong：强调加粗

4、pre标签和code标签的作用？

pre：原格式输出

code：<code>code里面内容</code>：表示 code里面内容为代码

5、sup标签和sub标签作用？

sup：上标

sub：下标

6、blockquote 标签作用？

blockquote：表示内容为引用

二、文本标签

课程对应的视频地址：4、文本标签
https://www.fanrenyi.com/video/2/9

1、ins标签、u标签和del标签

ins：<ins></ins>：效果为下划线，表示插入的文本

u：：效果为下划线，表示拼写错误的单词或者汉语中的专有名词

del：<del></del>：删除线

效果都可以用css代替

u标签对应的css：text-decoration: underline

del标签对应的css：text-decoration: line-through;

2、small标签

定义小号文本。

3、strong、em、b、i

b：加粗

i：倾斜

em：强调倾斜

strong：强调加粗

说明：

em和strong有强调的语义，b和i标签没有

strong的强调语气比em重

效果可以通过css来代替：

加粗的话可以通过设置font-weight来实现：font-weight: 600;

倾斜的话可以通过设置font-style来实现：font-style: italic;

4、pre标签和code标签

pre：原格式输出

code：<code>code里面内容</code>：表示 code里面内容为代码

5、sup标签和sub标签

sup：上标

sub：下标

6、blockquote 标签

blockquote：表示内容为引用

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The worlds leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

三、参考资料

1、strong、em、b、i标签的区别

1、b、i属于修饰类标签；strong、em属于内容类标签（strong和em是逻辑标签，b和i是物理标签）；
2、b、strong标签表现为加粗样式；em、i表现为倾斜样式；
3、strong、em表强调；strong比em语气更强烈；strong在html是页面上的强调，而em是句子中的强调；（物理逻辑就是说告诉浏览器我哪里加粗了，没有别的作用，而逻辑标签是强调语气，它强调语气是通过文本加粗来体现的，也可以通过别的样式来强调语气）；
4、strong和em真正做到了结构与样式分离，而b、i没有做到结构与样式的分离；
5、在搜索引擎优化strong和em比b和i重要的多。

2、u标签

标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。

提示：请尽量避免使用 为文本加下划线，用户会把它混淆为一个超链接。

注释：HTML5 规范建议开发者尽量使用其他元素替代 元素。

<p>This is a <u>parragraph</u>.</p>

3、ins标签和del标签实例

提示：<del> 和 <ins> 一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

4、q标签

定义短的引用

<p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

四、代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>html文本标签小实例</title>
  6 </head>
  7 <body>
  8 <!--ins-->
  9 这题的答案是 <ins>B</ins>
 10 <hr><br>
 11 
 12 <!--u-->
 13 下划线对应的单词是 <u>underliine</u>
 14 <hr><br>
 15 
 16 <!--表示下划线-->
 17 <span style="text-decoration: underline;">表示下划线</span>
 18 <hr><br>
 19 
 20 <!--del-->
 21 <del>删除</del><br>
 22 原价：<del>998</del> <span style="color: red;">388</span><br>
 23 <span style="text-decoration: line-through;">css实现删除效果</span>
 24 <hr><br>
 25 
 26 <!--small-->
 27 <div style="font-size: 20px;">
 28     <span>20px的字</span>
 29     <small>小一号的字
 30         <small>再小一号的字</small>
 31     </small>
 32 </div>
 33 <hr><br>
 34 
 35 
 36 
 37 <!--strong-->
 38 <i>i的效果</i><br>
 39 <b>b的效果</b><br>
 40 <strong>strong的效果</strong><br>
 41 <em>em的效果</em><br>
 42 <br>
 43 <span style="font-weight: 600;">css设置加粗</span><br>
 44 <span style="font-style: italic;">css设置倾斜</span><br>
 45 
 46 <hr><br>
 47 
 48 <!--pre-->
 49 <pre>
 50     心里的花，我想要带你回家
 51 在那深夜酒吧，哪管它是真是假
 52 请你尽情摇摆，忘记钟意的他
 53 你是最迷人噶，你知道吗
 54 
 55 来左边儿跟我一起画个龙
 56 在你右边儿画一道彩虹
 57 来左边儿跟我一起画彩虹
 58 在你右边儿再画个龙
 59 </pre>
 60 
 61 <hr><br>
 62 
 63 <!--code-->
 64 <code>
 65     <pre>
 66     class Animal {
 67         constructor(name) {
 68             this.name = name;
 69         }
 70         say() {
 71             console.log('我是'+this.name);
 72         }
 73     }
 74     class Bird extends Animal {
 75         constructor(name, age) {
 76             super(name);
 77             this.age = age;
 78         }
 79         fly() {
 80             console.log('我是'+this.name+','+this.age+'岁,我在自由自在的飞翔！');
 81         }
 82     }
 83     let animal1=new Animal('大动物');
 84     animal1.say();
 85     let monkey=new Bird('飞猴',15);
 86     monkey.fly();
 87     </pre>
 88 </code>
 89 <hr><br>
 90 
 91 <!--sup-->
 92 5<sup>3</sup><br>
 93 <hr><br>
 94 
 95 <!--sub-->
 96 X<sub>2</sub><br>
 97 <hr><br>
 98 
 99 <!--blockquote-->
100 <blockquote cite="http://www.worldwildlife.org/who/index.html">
101     For 50 years, WWF has been protecting the future of nature. The worlds leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
102 </blockquote>
103 <hr><br>
104 
105 心里的花，我想要带你回家 <br>
106 在那深夜酒吧，哪管它是真是假<br>
107 请你尽情摇摆，忘记钟意的他<br>
108 你是最迷人噶，你知道吗<br>
109 <br>
110 来左边儿跟我一起画个龙<br>
111 在你右边儿画一道彩虹<br>
112 来左边儿跟我一起画彩虹<br>
113 在你右边儿再画个龙<br>
114 
115 </body>
116 </html>