HTML 段落与格式化

文丑颜不良啊

已于 2022-09-21 10:50:11 修改

阅读量711

点赞数

分类专栏： HTML 与 CSS 文章标签： html 前端 html 段落 html 格式化

于 2022-09-20 14:30:27 首次发布

本文链接：https://blog.csdn.net/jiaomubai/article/details/126947400

版权

HTML 与 CSS 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

HTML 可以将文档分割成若干段落，段落是通过 标签定义的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML 段落示例</title>
</head>
<body>
    <p>这是一个段落</p>
    <p>这是另一个段落</p>
</body>
</html>

浏览器会自动在段落与段落之间添加空行的。需要注意段落 与 的区别：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML 段落示例</title>
</head>
<body>
    <p>这是一个段落</p>
    <p>这是另一个段落</p>

    <!-- 段落与分行的区别 -->
    <p>这个段落包含了<br>分行</br>的部分</p>
    <p>这个段落只是单纯的段落</p>
</body>
</html>

个人理解是：段落与段落之间的关系就如同课本里的自然段的概念，也类似于在 word 文档中设置段前段后的磅值一样；而段落之中嵌套的分行就相当于另起一行的概念。结合 CSDN 来说：

红色框就是两个 标签，红框中每一行的内容就相当于一个 ，CSDN 中一个回车就相当于一个 段落。

需要注意的是：我们无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会自动移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格；所有连续的空行（换行）也被显示为一个空格。也就是说，如果我们需要按照课本上的格式去输出一首古诗的话，就不能在 HTML 中使用回车去完成分行，而应该根据实际情况选择 或者 来实现分行的需求。

可以很明显的看到，回车和多个空格都被浏览器当作一个空格解读了。那么如果要按照课本上的格式(一行一句)输出古诗的话，要怎么做呢？可以通过 标签或 和 标签实现。

要注意单纯使用 标签和 与 混合使用的不同效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML 段落示例</title>
</head>
<body>
    <!-- <p>这是一个段落</p> -->
    <!-- <p>这是另一个段落</p> -->

    <!-- 段落与分行的区别 -->
    <!-- <p>这个段落包含了<br>分行</br>的部分</p> -->
    <!-- <p>这个段落只是单纯的段落</p> -->

    <!--  输出一首古诗 -->
    <p>折戟沉沙铁未销，自将磨洗认前朝。
        东风不与周郎便，
                                   铜雀春深锁二乔。
    </p>


    <p>折戟沉沙铁未销，</p>
    <p>自将磨洗认前朝。</p>
    <p>东风不与周郎便，</p>
    <p>铜雀春深锁二乔。</p>

    <p>折戟沉沙铁未销，<br />自将磨洗认前朝。<br />东风不与周郎便，<br />铜雀春深锁二乔。
    </p>

</body>
</html>

格式化

文本格式化主要是对页面中出现的一些文字尽心加粗或斜体以及一些引用等的处理。常用的标签有：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML 标题示例</title>
</head>
<body>

    <b>这是一段加粗文字</b>
    <br />
    <strong>这是一段加粗文字</strong>
    <br />
    <hr />

    <i>这是一段斜体文字</i>
    <br />
    <em>这是一段斜体文字</em>
    <br />
    <hr />

    <big>这段文字字体放大</big>
    <br />
    <small>这段文字字体放小</small>
    <br />
    <hr />

    <p>
        这段文字包含<sub>下标</sub>
        <br />
        这段文字包含<sup>上标</sup>
    </p>
    <hr />

    <pre>这是一段预格式文本
    可将换行
    和空格   原样输出
    </pre>
    <hr />

    <p>
        <del>删除字</del>
        <br />
        <ins>插入字</ins>
    </p>
    <hr />

    <p>
        <abbr title="etcetera">etc.</abbr>
        <br />
        <acronym title="World Wide Web">WWW</acronym>
    </p>
    <hr />

    <p>
        该段落文字从左到右显示。
        <br /> 
        <bdo dir="rtl">该段落文字从右到左显示。</bdo>
    </p>
    <hr />

    <p>
        <code>计算机输出</code>
        <br />
        <kbd>键盘输入</kbd>
        <br />
        <tt>打字机文本</tt>
        <br />
        <samp>计算机代码样本</samp>
        <br />
        <var>计算机变量</var>
    </p>
    <hr />

</body>
</html>

文章参考自：HTML 段落 | 菜鸟教程

HTML 文本格式化 | 菜鸟教程