前端HTML篇-05HTML修饰标签

标

修饰标签的作用是什么？
修饰标签包含了哪些元素？
修饰标签常用的元素作用（重点）？

修饰标签的作用？

突出一篇文章的重点区域，快速修饰文本内容的样式，避免全篇文章都是白纸黑字，引起视觉疲劳。

修饰过后的文章

修饰标签的元素

斜体

作用：文字倾斜

标签：i、em

区别：em是会被搜索引擎收录

<i>我是倾斜标签i</i>
<em>我是倾斜标签em</em>

倾斜效果

粗体

作用：文字加粗

标签：b、strong

区别：strong是会被搜索引擎收录

<b>我是加粗标签b</b>
<strong>我是加粗标签strong</strong>

加粗效果

上下标

作用：对文本进行补充说明

标签：sup上标sub下标

上下标运用

上下标效果

划线标

作用：对文本增强注意

标签：ins下划线del删除线

划线标运用

划线标效果

显示标

作用：对文本进行高亮显示

标签：mark

显示标运用

显示标效果

缩小标

作用：对文本进行缩小显示

标签：small

缩小标运用

思维导图

修饰标签

更多前端教程，敬请关注微信公众号：前端旺

篇文章继续为大家介绍html常用修饰标签介绍。我们今天主要说下样式标签、内容修饰标签等的语法以及使用技巧。

1）样式标签

使用语法：文章内容

标签是没有语义的，它的作用就是为了设置单独的样式用的。如果现在我们想要修改一篇文章中的几个字字体效果，为它设置和其它文字不同的样式，所以这样情况下就可以用到标签了。比如我们设置字体颜色为蓝色，并设置字号大小为30px，代码如下图所示：

代码在浏览器中显示的效果就如下图所示：我们可以清楚的看到被span标签包裹的文字内容已经变成了蓝色，字体大小也变成了30px；

2）内容修饰标签

内容修饰标签有很多，这里我们简单的来列举一下标签的名称以及标签的作用。

文字斜体标签： 、

文字加粗标签： 、

文字下标标签：

文字上标标签：

文字下划线标签： <ins></ins>

文字删除线标签： <del></del>

具体的代码如下所示：

代码在浏览器中显示的效果就如下图所示：每个被标签包裹的内容都赋予了其独立的效果。

好了以上就是我们所说的修饰标签，每个标签都有单独的意义，在以后练习的时候可以自己多实践一下，只有自己亲自动手去写了才能明白其中的含义以及效果。

附赠一句经典语录：每一天，都要尽心尽力的工作，每一件小事情，都力争高效的完成，不是为了看到老板的笑脸，而是为了自身不断的进步。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。

ext-decoration属性介绍#

text-decoration属性是用来设置文本修饰线呢，text-decoration属性一共有4个值。

text-decoration属性值说明表#

值作用none去掉文本修饰线underline设置下划线overline设置上划线line-through设置删除线

HTML标签自带修饰线#

在开始实践text-decoration属性之前，笔者先给大家普及下HTML中的标签自带修饰线如：u标签、s标签，若有不全大家可以在下面评论中告诉笔者,毕竟笔者也是前端的一个小白,希望和大家相互交流，互帮互助，共同进步。

u标签#

下面让我们进入u标签的实践，u标签自带的是文本下划线。
代码块

Copy<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>设置文本修饰线</title>
 
</head>
<body>
 <u>成功不是击败别人，而是改变自己</u>
</body>
</html>

结果图

在线咨询

上一篇：最好用的文本编辑工具：notepad++
下一篇：SOLIDWORKS PDM系统中如何实现PDF文件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。