文本标签-CSDN博客

本文链接：https://blog.csdn.net/weixin_43838296/article/details/120671065

文本标签

- 斜体
- 表示一段内容的着重点

<p>今天天气<em>真不错</em></p>

在这里插入图片描述

- 粗体
- 表示一个内容的重要性

<p><strong>注意：请不要靠近</strong></p>

在这里插入图片描述

这两个标签可以一起使用
em显示为斜体，而strong显示为粗体
- 斜体
- 粗体

<p>
    <i>我是i标签的内容</i>
    <b>我是b标签的内容</b>
</p>

以上两个标签没有语义，单纯表现
- 比父元素字号小一些
- 表示一类细则内容
- 如：合同中小字、网站版权声明等

<p>
    我是p标签的内容
    <small>我是small标签的内容</small>
</p>

在这里插入图片描述

<cite>
- 表示参考内容
- 比如：书名、歌名、电影名等等
<q>
- 引号
- 短引用（行内引用）
- 引号不能被选中

<p>
    <cite>《论语》</cite>真不错
</p>

<blockquote>
- 长引用（块级引用）

<p>
    子曰：<blockquote>学而时习之，不亦说乎</blockquote>
</p>

在这里插入图片描述

- 上标

<P>2<sup>2</sup></P>

在这里插入图片描述

下标

<P>H<sub>2</sub>O</P>

在这里插入图片描述

<ins>
- 下划线
- 表示插入的内容

<p>
    11+11=<ins>22</ins>
</p>

在这里插入图片描述

<del>
- 删除线
- 表示删除的内容

<p>
    <del>17.75</del>
    <br/>
    15.54
</p>

在这里插入图片描述

<pre>
- 预格式标签
- 保留代码原格式
<code>
- 表示代码

<pre>
    <code>
    window.onload = function () {
        alert("hello");
    }
    </code>
</pre>

在这里插入图片描述

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
</head>
<body>
    <p>今天天气<em>真不错</em></p>
    <p><strong>注意：请不要靠近</strong></p>
    <p>
        <i>我是i标签的内容</i>
        <b>我是b标签的内容</b>
    </p>
    <p>
        我是p标签的内容
        <small>我是small标签的内容</small>
    </p>
    <p>
        <cite>《论语》</cite>真不错
    </p>
    <p>
        子曰：<q>学而时习之，不亦说乎</q>
    </p>
    <p>
        子曰：<blockquote>学而时习之，不亦说乎</blockquote>
    </p>
    <P>2<sup>2</sup></P>
    <P>H<sub>2</sub>O</P>
    <p>
        <del>17.75</del>
        <br/>
        15.54
    </p>
    <p>
        11+11=<ins>22</ins>
    </p>
    <pre>
        <code>
        window.onload = function () {
            alert("hello");
        }
        </code>
    </pre>
</body>
<script type="text/javascript">

</script>
</html>