HTML+CSS基础入门-第三天上（HTML-格式标记）

客官°小女子只卖身不卖艺 2022-09-30 00:50 217阅读 0赞

## <br>强制换行标记 ##

### 描述 ###

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

### 代码： ###

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

### 显示结果为： ###

![换行标记][SouthEast]

## <p>换段落标记 ##

### 描述 ###

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

### 代码： ###

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

### 显示结果: ###

![段落标记][SouthEast 1]

## <center>居中对齐标记 ##

### 描述 ###

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

### 代码 ###

<body>
    
            <center>文字居中显示</center>
    
            <p>
                <center>
                    段落居中显示段落居中显示段落居中显示段落居中显示段落居中显示段落居中显示段落居中显示段落居中显示段落居中显示段落居中显示
                </center>
            </p>
    
        </body>

### 显示结果 ###

![居中显示][SouthEast 2]

## <pre>预格式化标记 ##

### 描述 ###

预留预先编排好的格式

### 代码 ###

### 显示结果 ###

![预格式化标记][SouthEast 3]

## <li>列表项目标记 ##

### 描述 ###

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

### 代码 ###

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

### 显示结果 ###

![列表项目标记][SouthEast 4]

## <ul>无序列表标记 ##

### 描述 ###

通常跟<li>一起用

### 代码 ###

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

### 显示结果 ###

![这里写图片描述][SouthEast 5]

## <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>

### 显示结果 ###

![这里写图片描述][SouthEast 6]

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

### 使用场合 ###

对列表进行剪短的说明

### 代码 ###

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

### 显示结果 ###

![这里写图片描述][SouthEast 7]

## <hr>水平分割线标记 ##

### 描述 ###

段落之间的分割线

### 代码 ###

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

### 显示结果 ###

![这里写图片描述][SouthEast 8]

## <div>层标记 ##

### 描述 ###

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

### 代码 ###

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

### 显示结果 ###

![这里写图片描述][SouthEast 9]

[SouthEast]: /images/20220708/ffb36f9d5cc0417d8b8c8bc46f9efb14.png
[SouthEast 1]: /images/20220708/64bbffada1494e8194d9af3ecfaf92d8.png
[SouthEast 2]: /images/20220708/1e8f39f3b7a840c9908aa72e2c26b5b3.png
[SouthEast 3]: /images/20220708/25bf5b64d9a64c08915a55ac48c495b0.png
[SouthEast 4]: /images/20220708/f2e1ef69985440078875b750e26923f5.png
[SouthEast 5]: /images/20220708/0ae72db8453c4daeae4eff73d40f7d00.png
[SouthEast 6]: /images/20220708/f1400ec38f5c4634b0fe56c01af8335e.png
[SouthEast 7]: /images/20220708/f0dce757ba77417785e672662762a51b.png
[SouthEast 8]: /images/20220708/04a0e336113445d98800fc63ea101a67.png
[SouthEast 9]: /images/20220708/6bd693cb606e4d45bc8ab5ccc8859ee9.png