前端学习 -- Css -- 文本标签

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>

效果:

时间: 2024-10-12 23:00:25

前端学习 -- Css -- 文本标签的相关文章

前端学习 -- Css -- 行间距

在CSS并没有为我们提供一个直接设置行间距的方式,我们只能通过设置行高来间接的设置行间距,行高越大行间距越大.使用line-height来设置行高 .行高类似于我们上学单线本,单线本是一行一行,线与线之间的距离就是行高,网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示.行间距 = 行高 - 字体大小. 通过设置line-height可以间接的设置行高,可以接收的值: 1.直接就收一个大小: 2.可以指定一个百分数,则会相对于字体去计算行高: 3.可以直接传一个数值,

前端学习 -- Css -- 兄弟元素选择器

为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1 +

前端学习 -- Css -- 否定伪类

语法::not(.选择器) 作用:可以从已选中的元素中剔除出某些元素. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p:not(.soyoungboy){ background-color: cadetblue; color: red } &l

前端学习——css(初级)

1.Css盒模型(box model) web开发中,html的每个元素都是盒子,盒子可以装内容(content).可以有填充物(padding).有外壳(border) 和 外保护层(margin) .下图为控制台中的盒子详解:浏览器的控制台是我们了解一个元素最好的一个工具,下图可以清晰的看出一个盒子所拥有的属性. 元素的实际宽高 上图可清晰的看出 元素实际的宽=border-left+padding-left+元素内容宽+padding-right+border-right 元素实际的高=b

前端学习 -- Css -- 字体的几个属性学习

font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置italic和oblique它们的效果往往是一样的 - 一般我们只会使用italic font-weight可以用来设置文本的加粗效果 可选值: normal,默认值,文字正常显示 bold,文字加粗显示 该样式也可以指定100-900之间的9个值, 但是由于用户的计算机往往

前端学习 --Css -- 子元素的伪类

:first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元素,在所有的子元素中排序: :first-of-type 寻找指定类型中的第一个子元素 :last-of-type 寻找指定类型中的最后一个子元素 :nth-of-type 寻找指定类型中的指定子元素 可以使用even,来找到偶数的子元素 可以使用odd,来找到奇数的子元素 demo: <!DOCT

前端学习 -- Css -- 属性选择器

属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]:选取属性值以指定内容开头的元素 [属性名$="属性值"]:选取属性值以指定内容结尾的元素 [属性名*="属性值"]:选取属性值中包含指定内容的元素 demo:(注:这么尴尬的诗句肯定不是我写的) <!DOCTYPE html> <html> &l

前端学习 -- Css -- 选择器的优先级

当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示. 优先级的规则 内联样式 , 优先级 1000 id选择器,优先级 100 类和伪类, 优先级 10 元素选择器,优先级 1 通配* , 优先级 0 继承的样式,没有优先级 当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式.

前端学习 -- Css -- 默认样式

浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果, 所以为很多的元素都设置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的. 所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉. 如何去除默认样式? 添加如下css代码: /* * 清除浏览器的默认样式 */ *{ margin: 0; padding: 0; }