1 排版相关标签

1.1 水平线与换行

  • <hr>:画一条水平分割线,单标签,<hr><hr /> 写法均可。
  • <br>:强制换行,单标签,用于在同一段落内换行,不产生段落间距。

1.2 段落标签

  • <p>:段落标签,前后自动产生间距,适合包裹一段完整的文字内容。

2 标题标签

HTML 提供 <h1> ~ <h6> 共六级标题,级别越小字号越大。不存在 <h7>,写了浏览器不报错但没有标题效果,只当普通文字显示。

注意:标题标签内不建议嵌套其他内容。

3 转义字符

部分字符在 HTML 中有特殊含义,需用转义字符表示。本例中 &nbsp; 表示一个空格,连写几个就有几个空格的效果:

&nbsp;&nbsp;&nbsp;&nbsp;-- 李白

4 标签总结

标签类型作用
<hr>单标签水平分割线
<br>单标签强制换行
<p>双标签段落,前后有间距
<h1> ~ <h6>双标签六级标题,逐级缩小
&nbsp;转义字符空格

5 完整代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>各种标签的使用⏺️⏺️⏺️⏺️</title>
</head>
 
<body>
    今天是个好日子
    <hr>
    哈哈, 好好学习, 天天向上!
    <hr />
    <p>静夜思</p>
    <!-- &nbsp;表示一个空格,加几个就有几个空格 -->
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-- 李白 <br>
    床前明月光, <br>
    疑是地上霜, <br>
    举头望明月, <br>
    低头思故乡. <br>
 
    <hr>
    <!-- 标题不能嵌套其它的内容 -->
    <h1>我是一级标题</h1>
    <h2>我二级标题</h2>
    <h3>我三级标题</h3>
    <h4>我四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
    <hr>
    <!-- 标签不存在,但是不会影响显示,依旧会显示出来,但是没有标题的效果而已 -->
    <h7>七级标题?有没有</h7>
 
</body>
 
</html>