这篇文章给大家介绍怎么在HTML标签中给文本设置修饰线,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

html是什么
html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体,html文本是由html命令组成的描述性文本,html命令可以说明文字,图形、动画、声音、表格、链接等,主要和css+js配合使用并构建优雅的前端网页。
text-decoration属性介绍
text-decoration 属性是用来设置文本修饰线呢,text-decoration 属性一共有4个值。
text-decoration属性值说明表
| 值 | 作用 |
|---|---|
| none | 去掉文本修饰线 |
| underline | 设置下划线 |
| overline | 设置上划线 |
| line-through | 设置删除线 |
HTML标签自带修饰线
在开始实践text-decoration 属性之前,笔者先给大家普及下HTML 中的标签自带修饰线如:u标签 、s标签 ,若有不全大家可以在下面评论中告诉笔者,毕竟笔者也是前端的一个小白,希望和大家相互交流,互帮互助,共同进步。
u标签
下面让我们进入u 标签的实践,u 标签自带的是文本下划线。
代码块
设置文本修饰线 成功不是击败别人,而是改变自己
结果图

注意:u 标签也可以配合HTML 中的其他标签使用,举例:将u 标签嵌套到h2 标签中使用。
代码块
成功不是击败别人,而是改变自己
s标签
下面让我们进入s 标签的实践,s 标签自带的是文本删除线。
代码块
设置文本修饰线 成功不是击败别人,而是改变自己
结果图

注意:s 标签也可以嵌套,和u 标签一致,笔者就不过多的介绍了。
none去除修饰线
让我们进入text-decoration 属性的none 值实践,实践内容如:笔者将HTML 页面中的s 标签自带的删除线给去除掉。
代码块
设置文本修饰线 成功不是击败别人,而是改变自己
结果图

注意:u 标签、s 标签、包括text-decoration 属性值的所有的修饰线都可以去掉哦。
underline设置下划线
让我们进入text-decoration 属性的underline 值实践,实践内容如:笔者将HTML 页面中的h3 标签中的文本设置一个下划线。
代码块
设置文本修饰线 成功不是击败别人,而是改变自己
结果图

overline设置上划线
让我们进入text-decoration 属性的overline 值实践,实践内容如:笔者将HTML 页面中的h3 标签中的文本设置一个上划线。
代码块
设置文本修饰线 成功不是击败别人,而是改变自己
结果图

line-through设置删除线
让我们进入text-decoration 属性的line-through 值实践,实践内容如:笔者将HTML 页面中的h3标签中的文本设置一个删除线。
代码块
设置文本修饰线 成功不是击败别人,而是改变自己
结果图

关于怎么在HTML标签中给文本设置修饰线就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:怎么在HTML标签中给文本设置修饰线-创新互联
URL网址:http://www.jxjierui.cn/article/dpiios.html


咨询
建站咨询
