以上就是 HTML 支持的所有元素在 HTML 这里只介绍部分元素，本文档介绍常用的文本元素

h 元素

h 元素，head，是一个家族，一共有六个，分别是 h1~h6，用来表示标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

p 元素

p 元素，paragraphs，表示段落

<p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>

lorem

在 VSCODE 里面是默认支持 lorem 的，lorem 是用来生成随机字符的插件，这个生成的随机字符我们称为乱数假文，也就是一堆没有实际含义的文字，我们可以使用 lorem 快速生成随机字符方便测试，如下所示

span 元素

span 元素是一个毫无意义的元素，这似乎和我们的语义化有点冲突，但有时候我们确实需要这种毫无意义的元素，这个元素毫无意义，但却必须要，我们举以下例子

 <p>
     这是红，绿，蓝三原色
</p>

如果我要将红，绿，蓝这三个字加上颜色，那么我就必须要给他加上 span 元素，如下所示

<p>
        这是<span style="color: red;">红</span>，<span style="color: green;">绿</span>，<span style="color: blue;">蓝</span>三原色
    </p>

显示效果如下

很显然，span 元素与其说他是一个元素，不如说他是一个容器，就是专门用来设置样式的。

拓展

读者细心观察，span 元素并没有换行，而我们前面的 p 元素，包括 h 元素，都是独占一行的，所以其实某些元素会独占一行，某些元素则不会独占一行。 在以前，独占一行的元素叫做块（block）级元素，而不独占一行的则是行（inline）级元素 但实际上，到了 HTML 5 弃用了这种说法，我们可以去 MDN 查询到相关问题，关于 MDN 中提到的内容类别就留在以后再来介绍。弃用的原因也很简单，块级、行级元素本质上是指显示效果，但我们讲究样式、结构相分离，我们一个元素代表的应该是具体含义，和显示效果无关。

^7ee53e

pre 元素

pre 元素中的内容不会产生空白折叠

空白折叠

在源代码中连续的空白字符（空格、换行、制表符），在页面显示的时候会被折叠为一个空格

^584012

<pre>
        ^(*￣(oo)￣)^
        ^(*￣(oo)￣)^
        ^(*￣(oo)￣)^
</pre>

我们可以看到，在 pre 元素的内容你源代码写成什么样那么其显示出来就是什么样，不会产生任何空白折叠，这个元素最大的用途就是在网页中显示代码。

pre 元素的原理是一个 CSS 属性，所以理论上来说其他元素加上这个 CSS 属性也可以做到，这个 CSS 属性为 white-space: pre;，其他元素加上这个属性也可以实现这个效果。 理解这个原理之后，我们就可以用其他元素来显示代码，一般来说，如果我们需要显示一些代码，我们一般使用 code 元素，例如 CSDN 就是这么干的