前端学习 -- Css -- 文本标签
2017-04-05 23:13
323 查看
em和strong
- 这两个标签都表示一个强调的内容,em主要表示语气上的强调,em在浏览器中默认使用斜体显示
strong表示强调的内容,比em更强烈,默认使用粗体显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> 今夕何夕兮,搴舟中流。 今日何日兮,得与王子同舟。 蒙羞被好兮,不訾诟耻。 <em>心几烦而不绝兮,得知王子。</em> <strong> 山有木兮木有枝,心悦君兮君不知。</strong> </p> </body> </html>
显示效果:
i标签中的内容会以斜体显示 b标签中的内容会以加粗显示
h5规范中规定,对于不需要着重的内容而是单纯的加粗或者是斜体,就可以使用b和i标签<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> 今夕何夕兮,搴舟中流。 <i>今日何日兮,得与王子同舟。</i> <b>蒙羞被好兮,不訾诟耻。</b> <em>心几烦而不绝兮,得知王子。</em> <strong> 山有木兮木有枝,心悦君兮君不知。</strong> </p> </body> </html>
效果:
small标签中的内容会比他的父元素中的文字要小一些
在h5中使用small标签来表示一些细则一类的内容比如:合同中小字,网站的版权声明都可以放到small
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> <small>今夕何夕兮,搴舟中流。</small> <br /> <i>今日何日兮,得与王子同舟。</i> <br /> <b>蒙羞被好兮,不訾诟耻。</b> <br /> <em>心几烦而不绝兮,得知王子。</em> <br /> <strong> 山有木兮木有枝,心悦君兮君不知。</strong> <br /> </p> </body> </html>
效果:
cite标签
网页中所有的加书名号的内容都可以使用cite标签,表示参考的内容,比如:书名 歌名 话剧名 电影名 。。。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> 出自先秦的<cite>越人歌</cite> <br /> <small>今夕何夕兮,搴舟中流。</small> <br /> <i>今日何日兮,得与王子同舟。</i> <br /> <b>蒙羞被好兮,不訾诟耻。</b> <br /> <em>心几烦而不绝兮,得知王子。</em> <br /> <strong> 山有木兮木有枝,心悦君兮君不知。</strong> <br /> </p> </body> </html>
效果:
行内引用和块引用
q标签表示一个短的引用(行内引用)q标签引用的内容,浏览器会默认加上引号
blockquote标签表示一个长引用(块级引用)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> <q>折花枝,恨花枝,准拟花开人共卮,开时人去时。</q> <br /> <blockquote> 怕相思,已相思,轮到相思没处辞,眉间露一丝。 </blockquote> </p> </body> </html>
效果:
sup标签
使用sup标签来设置一个上标<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> 2<sup>2</sup> </p> </body> </html>
效果:
sub标签
sub标签用来表示一个下标<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> H<sub>2</sub>O </p> </body> </html>
效果:
del标签
使用del标签来表示一个删除的内容del标签中的内容,会自动添加删除线
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> <del>17.75</del> <br /> 15.54 <br /> </p> </body> </html>
效果:
ins标签
ins表示一个插入的内容ins中的的内容,会自动添加下划线
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> <q>折花枝,恨花枝,准拟花开人共卮,开时人去时。</q> <br /> <ins> 怕相思,已相思,轮到相思没处辞,眉间露一丝。 </ins> </p> </body> </html>
效果:
pre标签和code标签
需要页面中直接编写一些代码pre是一个预格式标签,会将代码中的格式保存,不会忽略多个空格
code专门用来表示代码
我们一般结合使用pre和code来表示一段代码
pre演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <pre> Instant end = Instant.now(); System.out.println("耗费时间为:" + Duration.between(start, end).toMillis()); </pre> </body> </html>
效果:
code演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <code> Instant end = Instant.now(); System.out.println("耗费时间为:" + Duration.between(start, end).toMillis()); </code> </body> </html>
效果:
同时使用pre和code标签:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <pre> <code> Instant end = Instant.now(); System.out.println("耗费时间为:" + Duration.between(start, end).toMillis()); </code> </pre> </body> </html>
效果:
相关文章推荐
- 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖
- HTML&CSS基础学习笔记6-文本操作标签
- 前端学习 -- Css -- 文本样式
- 前端学习笔记7 CSS为文本添加样式
- web学习—html标签—文本的控制(一)
- web学习—html标签—文本的控制(二)
- CSS学习(4)--文本属性(上)
- css学习第二天 合理利用a标签实现菜单
- CSS教程(6):实例学习CSS如何控制网页文本
- 第十节 CSS学习——CSS 文本
- 前端攻城狮学习笔记六:常见前端面试题之HTML/CSS部分(一)
- CSS学习 -- 文本属性
- web前端学习笔记(CSS盒子的定位)
- 前端_CSS#background-position学习
- 2013年7月28日web前端学习笔记-------head相关标签应用
- 这几天买了很多书,最近这2个月的学习目标是:熟悉Linux、C、Python、Web前端基础(HTML、XHTML,CSS)
- CSS标签学习笔记(一)
- 前端学习笔记番外篇:仿WIN8 Metro UI DIV+CSS练习
- Css基础学习(四)—文本
- Css基础学习一:字体,文本,颜色,背景,边框,边距