HTML+CSS基础入门-第三天上（HTML-格式标记）_body居中怎么换行-优快云博客

本文介绍了HTML中的基础格式标记，包括换行<br>、段落<p>、居中对齐<center>、预格式化<pre>、列表<li>、无序列表<ul>、有序列表<ol>、定义型列表<dl>、水平分割线<hr>以及层<div>的使用方法，详细讲解了每个标记的描述、代码示例及显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<br>强制换行标记

描述

让后面的文字，图片，表格等等，显示在下一行。

代码：

    <body>
        尊敬的领导 <br/> 我是Bree
    </body>

显示结果为：

换行标记

<p>换段落标记

描述

换段落，由于多个空格和回车在html中会被等效为一个空格，所以html中要换段落就要用<p>,<p>段落中也可以包含<p>。

代码：

    <body>
        <p>
        第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段
        </p>
        <p>
        第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段
        </p>
    </body>

显示结果:

段落标记

<center>居中对齐标记

描述

让段落或者文字相对于福标记居中显示

代码

    <body>

        <center>文字居中显示</center>

        <p>
            <center>
                段落居中显示段落居中显示段落居中显示段落居中显示段落居中显示段落居中显示段落居中显示段落居中显示段落居中显示段落居中显示
            </center>
        </p>

    </body>

显示结果

居中显示

<pre>预格式化标记

描述

预留预先编排好的格式

代码

    <body>

        第一句        第二句
        <pre>第一句        第二句</pre>

    </body>

显示结果

预格式化标记

<li>列表项目标记

描述

每一个列表使用一个lt;li>标记

代码

    <body>
        <li>第一个列表</li>
        <li>第二个列表</li>
        <li>第三个列表</li>
        <li>第四个列表</li>
        <li>第五个列表</li>
    </body>

显示结果

列表项目标记

<ul>无序列表标记

描述

通常跟<li>一起用

代码

    <body>
        <ul>
            <li>第一个列表</li>
            <li>第二个列表</li>
            <li>第三个列表</li>
            <li>第四个列表</li>
            <li>第五个列表</li>
        </ul>
    </body>

显示结果

这里写图片描述

<ol>有序列表标记

描述

可以显示特定的一些顺序

格式

<ol  type=“符号类型”>
<li  type=“符号类型”></li>
<li  type=“符号类型”></li>
</ol>

有序列表的type属性值

1：阿拉伯数字123等等，默认的type的属性值
A：大小字母A,B,C等等
a：小写字a，b，c等等
I：大写罗马数字
i：小写罗马数字

value

制定一个新的数列起始值

列表可以进行嵌套

代码

<body>
        <ol type="A">
            <li type="1">第一个列表</li>
            <li type="1" value="3">第二个列表</li>
            <li type="1">第三个列表</li>
            <li type="1">第四个列表</li>
            <li type="1">第五个列表</li>
        </ol>

        <ol type="1"> 
            <li type="1">   A
                <ol type="A">
                    <li type="A">第一个列表</li>
                    <li type="A" >第二个列表</li>
                    <li type="A">第三个列表</li>
                    <li type="A">第四个列表</li>
                    <li type="A">第五个列表</li>
                </ol>
            </li>

            <li type="1" >第二个列表</li>
            <li type="1">第三个列表</li>
            <li type="1">第四个列表</li>
            <li type="1">第五个列表</li>
        </ol>
    </body>

显示结果

这里写图片描述

<dl> <dt> <dd>定义型列表

使用场合

对列表进行剪短的说明

代码

    <body>
        <dl>
            <dt>软件说明</dt>
            <dd>简单介绍软件的功能及基本应用</dd>
            <dt>软件界面</dt>
            <dd>用于选择软件的外观</dd>
        </dl>
    </body>

显示结果

这里写图片描述

<hr>水平分割线标记

描述

段落之间的分割线

代码

    <body>
        段落分割线上边
        <hr/>
        段落分割线下边
    </body>

显示结果

这里写图片描述

<div>层标记

描述

也成为分区显示标记，用来编排一大段的HTML段落，也可以用于格式化表，和<p>很相似，层可以多层嵌套使用。

代码

    <body>

        <div>
            段落分割线上边
            <hr/>
            段落分割线下边
        </div>

        <div>
            段落分割线上边
            <hr/>
            段落分割线下边
        </div>
    </body>

显示结果

这里写图片描述