码迷,mamicode.com
首页 > 其他好文 > 详细

文本标签及文本样式

时间:2020-02-01 12:23:33      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:需要   nbsp   描述   oct   理论   编程   面向   页面   文本样式   

1 文本标签

1.1 概述

  • 标识网页中的不同内容。

1.2 <em>和<strong>

  • <em>标签用于表示一段内容中的着重点。
  • <strong>标签用于标识一个内容的重要性。
  • 两个标签可以单独使用,也可以一起使用。
  • 通常,<em>显示为斜体,而<strong>显示为粗体。

 

  • 示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
    <!--
        em和strong都表示一个强调的内容
        - em主要表示语气上的强调,em在浏览器中默认使用斜体表示
        - strong表示强调的内容,比em更强烈,默认使用粗体表示
    -->
    <p>今天天气<em>真不错</em></p>

    <p>
        <strong>好好学习,天天向上!</strong>
    </p>

</body>
</html>

1.3 <i>和<b>

  • i标签会使文字变为斜体。
  • b标签会使文字变为粗体。
  • 这两个标签和em以及strong类似,但是这两个标签没有语义。
  • 根据HTML5标准,如果我们只想设置文本的特殊显示,而不需要强调内容的时候就可以使用i和b标签。

 

  • 示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
    <!--
        em和strong都表示一个强调的内容
        - em主要表示语气上的强调,em在浏览器中默认使用斜体表示
        - strong表示强调的内容,比em更强烈,默认使用粗体表示
    -->
    <p>今天天气<em>真不错</em></p>

    <p>
        <strong>好好学习,天天向上!</strong>
    </p>
    <!--
        i标签中的内容会以斜体显示
        b标签中的内容会以粗体显示

        H5规范中规定,对于不需要着重的内容而是单纯的加粗或斜体,就可以使用i标签和b标签
    -->
    <p>
        <i>我是i标签中的文字</i>
        <b>我是b标签中的文字</b>
    </p>


</body>
</html>

1.4 <small>

  • small标签表示细则一类的旁注,通常包括免责声明、注意事项、法律限制、版权信息等。
  • 浏览器在显示small标签时会显示一个比父元素小的字号。

 

  • 示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
    <!--
        em和strong都表示一个强调的内容
        - em主要表示语气上的强调,em在浏览器中默认使用斜体表示
        - strong表示强调的内容,比em更强烈,默认使用粗体表示
    -->
    <p>今天天气<em>真不错</em></p>

    <p>
        <strong>好好学习,天天向上!</strong>
    </p>
    <!--
        i标签中的内容会以斜体显示
        b标签中的内容会以粗体显示

        H5规范中规定,对于不需要着重的内容而是单纯的加粗或斜体,就可以使用i标签和b标签
    -->
    <p>
        <i>我是i标签中的文字</i>
        <b>我是b标签中的文字</b>
    </p>
    <!--
        small标签中的内容会比它的父元素中的文字小一些
            在HTML5中,使用small标签来表示一些细则一类的内容
            比如:合同中的小字,网站的版权声明都可以放到small标签中
    -->
    <p>
        我是p标签中的文字
        <small>&copy;2020 版权所有,翻版必究。</small>
    </p>


</body>
</html>

1.5 <cite>

  • 使用cite标签可以指明对某内容的引用或参考。例如:戏剧、文章或图书的标题。歌曲、电影、照片的名称等。

 

  • 示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
    <!--
        em和strong都表示一个强调的内容
        - em主要表示语气上的强调,em在浏览器中默认使用斜体表示
        - strong表示强调的内容,比em更强烈,默认使用粗体表示
    -->
    <p>今天天气<em>真不错</em></p>

    <p>
        <strong>好好学习,天天向上!</strong>
    </p>
    <!--
        i标签中的内容会以斜体显示
        b标签中的内容会以粗体显示

        H5规范中规定,对于不需要着重的内容而是单纯的加粗或斜体,就可以使用i标签和b标签
    -->
    <p>
        <i>我是i标签中的文字</i>
        <b>我是b标签中的文字</b>
    </p>
    <!--
        small标签中的内容会比它的父元素中的文字小一些
            在HTML5中,使用small标签来表示一些细则一类的内容
            比如:合同中的小字,网站的版权声明都可以放到small标签中
    -->
    <p>
        我是p标签中的文字
        <small>&copy;2020 版权所有,翻版必究。</small>
    </p>

    <!--
        网页中的所有加书名号的内容都可以使用cite标签,表示参考的内容
            比如:书名、歌曲名、电影名……
    -->
    <p>
        <cite>《诗词》</cite>坐地日行八万里,巡天遥看一千河
    </p>


</body>
</html>

1.6 <blockquote>和<q>

  • blockquote和q表示标记所引用的文本。
  • blockquote用于长引用,q用于短引用。

 

  • 示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
    <!--
        em和strong都表示一个强调的内容
        - em主要表示语气上的强调,em在浏览器中默认使用斜体表示
        - strong表示强调的内容,比em更强烈,默认使用粗体表示
    -->
    <p>今天天气<em>真不错</em></p>

    <p>
        <strong>好好学习,天天向上!</strong>
    </p>
    <!--
        i标签中的内容会以斜体显示
        b标签中的内容会以粗体显示

        H5规范中规定,对于不需要着重的内容而是单纯的加粗或斜体,就可以使用i标签和b标签
    -->
    <p>
        <i>我是i标签中的文字</i>
        <b>我是b标签中的文字</b>
    </p>
    <!--
        small标签中的内容会比它的父元素中的文字小一些
            在HTML5中,使用small标签来表示一些细则一类的内容
            比如:合同中的小字,网站的版权声明都可以放到small标签中
    -->
    <p>
        我是p标签中的文字
        <small>&copy;2020 版权所有,翻版必究。</small>
    </p>

    <!--
        网页中的所有加书名号的内容都可以使用cite标签,表示参考的内容
            比如:书名、歌曲名、电影名……
    -->
    <p>
        <cite>《诗词》</cite>坐地日行八万里,巡天遥看一千河
    </p>
    <!--
        q标签表示一个短的引用(行内引用)
        q标签引用的内容,浏览器会默认加上引号

        blockquote标签表示一个长引用(块级引用)
    -->
    <p>
        子曰:<q>学而时习之,不亦说乎!</q>
    </p>

    <div>
        子曰: <blockquote>有朋自远方来,不亦乐乎?</blockquote>
    </div>
    

</body>
</html>

1.7 <sup>和<sub>

  • sup和sub用于定义上标和下标。

 

  • 示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
    <!--
        em和strong都表示一个强调的内容
        - em主要表示语气上的强调,em在浏览器中默认使用斜体表示
        - strong表示强调的内容,比em更强烈,默认使用粗体表示
    -->
    <p>今天天气<em>真不错</em></p>

    <p>
        <strong>好好学习,天天向上!</strong>
    </p>
    <!--
        i标签中的内容会以斜体显示
        b标签中的内容会以粗体显示

        H5规范中规定,对于不需要着重的内容而是单纯的加粗或斜体,就可以使用i标签和b标签
    -->
    <p>
        <i>我是i标签中的文字</i>
        <b>我是b标签中的文字</b>
    </p>
    <!--
        small标签中的内容会比它的父元素中的文字小一些
            在HTML5中,使用small标签来表示一些细则一类的内容
            比如:合同中的小字,网站的版权声明都可以放到small标签中
    -->
    <p>
        我是p标签中的文字
        <small>&copy;2020 版权所有,翻版必究。</small>
    </p>

    <!--
        网页中的所有加书名号的内容都可以使用cite标签,表示参考的内容
            比如:书名、歌曲名、电影名……
    -->
    <p>
        <cite>《诗词》</cite>坐地日行八万里,巡天遥看一千河
    </p>
    <!--
        q标签表示一个短的引用(行内引用)
        q标签引用的内容,浏览器会默认加上引号

        blockquote标签表示一个长引用(块级引用)
    -->
    <p>
        子曰:<q>学而时习之,不亦说乎!</q>
    </p>

    <div>
        子曰:
        <blockquote>有朋自远方来,不亦乐乎?</blockquote>
    </div>
    <!--
        sup和sub用于定义上标和下标
    -->
    <p>
        10<sup>3</sup>
        H<sub>2</sub>O
    </p>


</body>
</html>

1.8 <ins>和<del>

  • ins表示插入的内容,显示的时候通常会加上下划线。
  • del表示删除的内容,显示的时候通常会加上删除线。

 

  • 示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
    <!--
        em和strong都表示一个强调的内容
        - em主要表示语气上的强调,em在浏览器中默认使用斜体表示
        - strong表示强调的内容,比em更强烈,默认使用粗体表示
    -->
    <p>今天天气<em>真不错</em></p>

    <p>
        <strong>好好学习,天天向上!</strong>
    </p>
    <!--
        i标签中的内容会以斜体显示
        b标签中的内容会以粗体显示

        H5规范中规定,对于不需要着重的内容而是单纯的加粗或斜体,就可以使用i标签和b标签
    -->
    <p>
        <i>我是i标签中的文字</i>
        <b>我是b标签中的文字</b>
    </p>
    <!--
        small标签中的内容会比它的父元素中的文字小一些
            在HTML5中,使用small标签来表示一些细则一类的内容
            比如:合同中的小字,网站的版权声明都可以放到small标签中
    -->
    <p>
        我是p标签中的文字
        <small>&copy;2020 版权所有,翻版必究。</small>
    </p>

    <!--
        网页中的所有加书名号的内容都可以使用cite标签,表示参考的内容
            比如:书名、歌曲名、电影名……
    -->
    <p>
        <cite>《诗词》</cite>坐地日行八万里,巡天遥看一千河
    </p>
    <!--
        q标签表示一个短的引用(行内引用)
        q标签引用的内容,浏览器会默认加上引号

        blockquote标签表示一个长引用(块级引用)
    -->
    <p>
        子曰:<q>学而时习之,不亦说乎!</q>
    </p>

    <div>
        子曰:
        <blockquote>有朋自远方来,不亦乐乎?</blockquote>
    </div>
    <!--
        sup和sub用于定义上标和下标
    -->
    <p>
        10<sup>3</sup>
        H<sub>2</sub>O
    </p>
    <!--
        可以使用del标签表示一个删除的内容
        del标签中的内容,会自动添加删除线
    -->
    <p>
        <del>17.75</del>
        <br>
        15.54 <br>
    </p>
    <!--
        ins表示一个插入的内容
        ins中的内容,会自动增加下划线
    -->
    <p>
        我们的老师真<ins></ins>啊!
    </p>


</body>
</html>

1.9 <code>和<pre>

  • code标签专门用来表示一段代码。
  • pre标签表示预格式化文本。

 

  • 示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
    <!--
        em和strong都表示一个强调的内容
        - em主要表示语气上的强调,em在浏览器中默认使用斜体表示
        - strong表示强调的内容,比em更强烈,默认使用粗体表示
    -->
    <p>今天天气<em>真不错</em></p>

    <p>
        <strong>好好学习,天天向上!</strong>
    </p>
    <!--
        i标签中的内容会以斜体显示
        b标签中的内容会以粗体显示

        H5规范中规定,对于不需要着重的内容而是单纯的加粗或斜体,就可以使用i标签和b标签
    -->
    <p>
        <i>我是i标签中的文字</i>
        <b>我是b标签中的文字</b>
    </p>
    <!--
        small标签中的内容会比它的父元素中的文字小一些
            在HTML5中,使用small标签来表示一些细则一类的内容
            比如:合同中的小字,网站的版权声明都可以放到small标签中
    -->
    <p>
        我是p标签中的文字
        <small>&copy;2020 版权所有,翻版必究。</small>
    </p>

    <!--
        网页中的所有加书名号的内容都可以使用cite标签,表示参考的内容
            比如:书名、歌曲名、电影名……
    -->
    <p>
        <cite>《诗词》</cite>坐地日行八万里,巡天遥看一千河
    </p>
    <!--
        q标签表示一个短的引用(行内引用)
        q标签引用的内容,浏览器会默认加上引号

        blockquote标签表示一个长引用(块级引用)
    -->
    <p>
        子曰:<q>学而时习之,不亦说乎!</q>
    </p>

    <div>
        子曰:
        <blockquote>有朋自远方来,不亦乐乎?</blockquote>
    </div>
    <!--
        sup和sub用于定义上标和下标
    -->
    <p>
        10<sup>3</sup>
        H<sub>2</sub>O
    </p>
    <!--
        可以使用del标签表示一个删除的内容
        del标签中的内容,会自动添加删除线
    -->
    <p>
        <del>17.75</del>
        <br>
        15.54 <br>
    </p>
    <!--
        ins表示一个插入的内容
        ins中的内容,会自动增加下划线
    -->
    <p>
        我们的老师真
        <ins></ins>
        啊!
    </p>
    <!--
        需要在页面中编写一些代码

        pre标签是一个预格式标签,会将代码中的格式保存,不会忽略多个空格
        code专门用来表示代码
    -->
    <pre>
        <code>
            public class HelloWorld{
                public static void main(String[] args){
                    System.out.println("Hello World");
                }
            }
        </code>
    </pre>

</body>
</html>

1.10 列表

1.10.1 概述

  • 列表就相当于去超市购物时的那个购物清单。在HTML中也可以创建列表,在网页中一共有三种列表。
  • ①无序列表。
  • ②有序列表。
  • ③定义列表。

1.10.2 有序列表

  • 使用ol和li来创建一个有序列表。
  • 语法:
<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ol>

 

  • 示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>
<body>

    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>

</body>
</html>

1.10.3 无序列表

  • 使用ul和li来创建一个无序列表。
  • 语法:
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

 

  • 示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表</title>
</head>
<body>

    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>

</body>
</html>

1.10.4 定义列表

  • 使用dl、dt、dd来创建一个定义列表。
  • 语法:
<dl>
    <dt>定义项</dt>
    <dd>描述</dd>
</dl>

 

  • 示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义列表</title>
</head>
<body>

    <dl>
        <dt>Java</dt>
        <dd>
            <p>Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表,极好地实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程</p>
            <p>Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等。</p>
        </dd>
    </dl>

</body>
</html>

 

 

2 文本格式化

 

文本标签及文本样式

标签:需要   nbsp   描述   oct   理论   编程   面向   页面   文本样式   

原文地址:https://www.cnblogs.com/xuweiweiwoaini/p/12248021.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!