HTML的块级元素（常用整理）

article/2025/9/19 3:11:42

emmm，最近想整理复习一下前端的基础，最开始的HTML想了好久也没想好怎么写，最后也是决定以行块这样整理，再在后面补充吧。
说到HTML，什么是HTML呢？

        什么是 HTML？HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页

也就是说HTML不是像java一样的一门编程语言，而是一门标记性语言。

那我们常说的HTML标签是什么意思呢？

            HTML 标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词，比如 <html>HTML 标签通常是成对出现的，比如 <b> 和 </b>标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签

也就是说，一对标签中包含着元素。而我们学习HTML也就是在学习HTML的标签。

现在开始，就把HTML中常用的块级元素整理出来。

一、HTML 标题

标题（Heading）是通过《h1》到《h6》等标签进行定义的。

《h1》定义最大的标题。《h6》定义最小的标题。

<h1>这是一个h1标签</h1><h2>这是一个h2标签</h2><h3>这是一个h3标签</h3><h4>这是一个h4标签</h4><h5>这是一个h5标签</h5><h6>这是一个h6标签</h6>

像这样的在网页显示的就是：
在这里插入图片描述
这里可以再说一下另一个标签–>hr 元素可用于分隔内容。
例如上面的例子我们在每个h标签中间加上一个hr标签。

        <h1>这是一个h1标签</h1><hr><h2>这是一个h2标签</h2><hr><h3>这是一个h3标签</h3><hr><h4>这是一个h4标签</h4><hr><h5>这是一个h5标签</h5><hr><h6>这是一个h6标签</h6>

这样显示出来的话就是这样：
在这里插入图片描述
哎？说到了hr标签，那就得说一下br标签。
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 br 标签：

<h1>这是一 <br> 个h1标签</h1>

在h1标签中加上一个br标签（标签是可以嵌套的）
在这里插入图片描述

二、HTML 段落

段落是通过 p标签定义的

        <p>这是第一个p标签</p><p>这是第二个p标签</p>

我们打印一下看看，也是块级元素。
在这里插入图片描述
这里可以说一下，

        <p>这是第一个p标签</p><p></p><p>这是第二个p标签</p>

像这样在标签中间插入一个空的p标签可以起到换行的作用，但是最好不要这么做，用上面说的那个br标签。

三、表格

表格由 table标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

举个例子看看。

        <table><tr><td>11</td><td>12</td></tr><tr><td>21</td><td>22</td></tr><tr><td>31</td><td>32</td></tr></table>

然后看一下在网页上显示的是什么样子的。
在这里插入图片描述
嘶，这和我想象的表格不太一样啊，emm，其实主要是少了边框，这里涉及了css的样式，就先把它看成一个表格吧，边框先自己想象。

表格的表头
表格的表头使用 th标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：
例如我在这个表格上加上一个表头：

        <table><tr><th>这是第一列</th><th>这是第二列</th></tr><tr><td>11</td><td>12</td></tr><tr><td>21</td><td>22</td></tr><tr><td>31</td><td>32</td></tr></table>

看一下效果哈：
在这里插入图片描述

关于表格还有一些其他的点我可能没有说到，如果需要用到的话可能就得在找别的资料了。

四、HTML 列表

无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 ul 标签。每个列表项始于 li。
这个也是比较常用的列表
我们来写一下：

        <ul><li>这是第一个li</li><li>这是第二个li</li><li>这是第三个li</li><li>这是第三个li</li></ul>

然后我们看一下这个是啥样的。
在这里插入图片描述
Ok，那我们再看另一个。
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 ol标签。每个列表项始于 li 标签。

        <ol><li>这是第一个li</li><li>这是第二个li</li><li>这是第三个li</li><li>这是第三个li</li></ol>

就是把ul换成了ol，这回再看一下这个怎么有序。
在这里插入图片描述

五、HTML div 元素

HTML div元素是块级元素，它是可用于组合其他 HTML 元素的容器。

div元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，div元素可用于对大的内容块设置样式属性。

元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

简单来说的话，div是一个块级元素，主要用来进行页面布局，进行组合其他的HTML元素，也可以把它当成一个容器。

这里，就说这五个常用的块级元素。OK，结束。