范仁义html+css课程---4、文本标签
范仁义html+css课程---4、文本标签
一、总结
一句话总结:
文本标签大致掌握一下,做到它站在你对面的时候最好认得,认不得也没关系,直接百度
1、ins标签、u标签和del标签 作用?
ins:<ins></ins>:效果为下划线,表示插入的文本
u:<u></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:<u></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标签
<u> 标签定义与常规文本风格不同的文本,像拼写错误的单词或者汉语中的专有名词。
提示:请尽量避免使用 <u> 为文本加下划线,用户会把它混淆为一个超链接。
注释:HTML5 规范建议开发者尽量使用其他元素替代 <u> 元素。
<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>
四、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html文本标签小实例</title>
</head>
<body>
<!--ins-->
这题的答案是 <ins>B</ins>
<hr><br> <!--u-->
下划线对应的单词是 <u>underliine</u>
<hr><br> <!--表示下划线-->
<span style="text-decoration: underline;">表示下划线</span>
<hr><br> <!--del-->
<del>删除</del><br>
原价:<del>998</del> <span style="color: red;">388</span><br>
<span style="text-decoration: line-through;">css实现删除效果</span>
<hr><br> <!--small-->
<div style="font-size: 20px;">
<span>20px的字</span>
<small>小一号的字
<small>再小一号的字</small>
</small>
</div>
<hr><br> <!--strong-->
<i>i的效果</i><br>
<b>b的效果</b><br>
<strong>strong的效果</strong><br>
<em>em的效果</em><br>
<br>
<span style="font-weight: 600;">css设置加粗</span><br>
<span style="font-style: italic;">css设置倾斜</span><br> <hr><br> <!--pre-->
<pre>
心里的花,我想要带你回家
在那深夜酒吧,哪管它是真是假
请你尽情摇摆,忘记钟意的他
你是最迷人噶,你知道吗 来左边儿跟我一起画个龙
在你右边儿画一道彩虹
来左边儿跟我一起画彩虹
在你右边儿再画个龙
</pre> <hr><br> <!--code-->
<code>
<pre>
class Animal {
constructor(name) {
this.name = name;
}
say() {
console.log('我是'+this.name);
}
}
class Bird extends Animal {
constructor(name, age) {
super(name);
this.age = age;
}
fly() {
console.log('我是'+this.name+','+this.age+'岁,我在自由自在的飞翔!');
}
}
let animal1=new Animal('大动物');
animal1.say();
let monkey=new Bird('飞猴',15);
monkey.fly();
</pre>
</code>
<hr><br> <!--sup-->
5<sup>3</sup><br>
<hr><br> <!--sub-->
X<sub>2</sub><br>
<hr><br> <!--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>
<hr><br> 心里的花,我想要带你回家 <br>
在那深夜酒吧,哪管它是真是假<br>
请你尽情摇摆,忘记钟意的他<br>
你是最迷人噶,你知道吗<br>
<br>
来左边儿跟我一起画个龙<br>
在你右边儿画一道彩虹<br>
来左边儿跟我一起画彩虹<br>
在你右边儿再画个龙<br> </body>
</html>
范仁义html+css课程---4、文本标签的更多相关文章
- 范仁义html+css课程---2、html常用标签
范仁义html+css课程---2.html常用标签 一.总结 一句话总结: html常用的标签有 标题标签.div.span.p.hr.br标签 等 1.html中的标题标签有哪些? <h1& ...
- 范仁义html+css课程---11、html补充知识
范仁义html+css课程---11.html补充知识 一.总结 一句话总结: 小于号(<):< 大于号(>):> 空格: 二.html 字符实体 1.小于号(<)和大 ...
- 范仁义html+css课程---10、其它标签
范仁义html+css课程---10.其它标签 一.总结 一句话总结: 了解iframe.Figure与Figcaption.address.progress.meter.datalist.field ...
- 范仁义html+css课程---9、video、audio、canvas和svg元素略讲
范仁义html+css课程---9.video.audio.canvas和svg元素略讲 一.总结 一句话总结: video:HTML5视频标签. audio:html5音频标签. canvas:绘制 ...
- 范仁义html+css课程---8、新元素布局
范仁义html+css课程---8.新元素布局 一.总结 一句话总结: 推荐用新标签(语义化的标签)来布局:header(头部),footer(尾部),aside(侧边栏),nav(导航),artic ...
- 范仁义html+css课程---7、表单
范仁义html+css课程---7.表单 一.总结 一句话总结: 表单标签的话主要掌握form标签.input标签(以及input标签的不同的type值).select标签.textarea等标签,及 ...
- 范仁义html+css课程---6、表格
范仁义html+css课程---6.表格 一.总结 一句话总结: 表格中最常用的元素就是table.tr.td.th,还有语义化的thead.tbody.tfoot标签 1.表格构成三个基本要素? t ...
- 范仁义html+css课程---5、列表
范仁义html+css课程---5.列表 一.总结 一句话总结: 学会基本的使用有序列表.无序列表.定义列表,设置样式的话尽量通过css而不是属性 1.无序列表基本形式(实例)? ul标签包裹li标签 ...
- 范仁义html+css课程---3、图片和超链接
范仁义html+css课程---3.图片和超链接 一.总结 一句话总结: img标签是图片标签,定义 HTML 页面中的图像 a标签是超链接标签,用于从一个页面链接到另一个页面. 1.img标签要点? ...
随机推荐
- CentOS - Eclipse安装Shelled
一,下载Shelled: https://sourceforge.net/projects/shelled/ 二,打开Eclipse,以离线方式安装: Help->Install New Sof ...
- Android为TV端助力之反射基本知识
- 软工作业 wc-java
项目要求: 实现一个统计程序,它能正确统计程序文件中的字符数.单词数.行数,以及还具备其他扩展功能,并能够快速地处理多个文件. 具体功能 -c 返回文件字符数 -w 返回词的数目 -l 返回行数 扩展 ...
- java-检查IP和端口在超时时间内是否可以连接
检查IP和端口在超时时间内是否可以连接 /** * 检查IP和端口是否可以连接 * @param ip * @param port * @return */ private static boolea ...
- kindedtor 数据传输问题
<script src="/static/kindeditor/kindeditor-all.js"></script><script src=&qu ...
- mongodb replica-set
mongodb 主从复制 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系 ...
- spring cloud (一) 服务注册中心 Eueka
1 pom.xml 添加依赖包 <dependency> <groupId>org.springframework.cloud</groupId> <arti ...
- Kotlin协程第一个示例剖析及Kotlin线程使用技巧
Kotlin协程第一个示例剖析: 上一次https://www.cnblogs.com/webor2006/p/11712521.html已经对Kotlin中的协程有了理论化的了解了,这次则用代码来直 ...
- 两个不同的账户登录两个浏览器,导入同样的excel表格。数据出现重复
1.场景: 两个不同的账户登录两个浏览器,导入同样的excel表格.业务逻辑已经有验重校验,但数据仍然出现重复,锁定是并发问题导致. 2.参考博客: https://cloud.tencent.com ...
- PCA: PCA的具体实现过程
数据预处理:mean normalization & feature scaling 先进行均值归一化(mean normalization),计算出每个特征的均值(uj),然后用xj-uj ...