范仁义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标签要点? ...
随机推荐
- Dockerfile 基本命令
1. 前言 Dockerfile 是用来构建自定义 Docker 镜像的文本文档.我们通过docker build 命令用于从Dockerfile 文件构建镜像.如果你要构建自定义镜像,Dockerf ...
- java集合-遍历arraylist-for循环-从指定下标开始遍历-for的用法
转载:http://www.9191boke.com/blogdetails/681220549.html java集合的for循环遍历有多种方式,但是都是从下标0开始遍历,有时会有从中间下标开始遍历 ...
- OpenStack核心组件-cinder存储服务
1. cinder 介绍 Block Storage 操作系统获得存储空间的方式一般有两种: 1) 通过某种协议(SAS,SCSI,SAN,iSCSI 等)挂接裸硬盘,然后分区.格式化.创建文 ...
- jmeter+nmon+crontab简单的执行接口定时压测
一.概述 临时接到任务要对系统的接口进行压测,上面的要求就是:压测,并发2000 在不熟悉系统的情况下,按目前的需求,需要做的步骤: 需要有接口脚本 需要能监控系统性能 需要能定时执行脚本 二.观察 ...
- Codeforecs H. Subsegments
思路: 刚开始: 利用map来统计长度为k的一段上的数字及其出现次数,不断更新区段位置,减去退出区段的数字的出现次数,加上新出现的数字及其出现次数,每次都从后向前遍历一遍map,如果遇到一个数且出现次 ...
- Calendar.getInstance()获取指定时间点(定时)
public class Test1 { public static void main(String[]args){ System.out.println("时间为:\n"+ge ...
- drf框架总结复习(1)
Serializers 序列化组件 为什么要用序列化组件 当我们做前后端分离的项目~~我们前后端交互一般都选择JSON数据格式,JSON是一个轻量级的数据交互格式. 那么我们给前端数据的时候都要转成j ...
- numpy函数库中一些常用函数的记录
##numpy函数库中一些常用函数的记录 最近才开始接触Python,python中为我们提供了大量的库,不太熟悉,因此在<机器学习实战>的学习中,对遇到的一些函数的用法进行记录. (1) ...
- async-validator 表单验证注意事项
1. this.$refs[formName].validate()里面的内容不执行 解决问题出处:https://segmentfault.com/q/1010000009679079 问题描述:1 ...
- strtok在keil中使用小笔记及字符串转换为多个浮点数的方法
在pc上面使用这个字符串函数,是没有问题的,但是我在keil中结合rtos来处理字符串的时候,比如char *s = "1.01313;17.2609;17.4875";那么就只能 ...