HTML 区块学习笔记

HTML 中的元素可以分为两类：行内元素和块级元素。块级元素会在页面上生成一个矩形区域，并且会独占一行或多行。本文将介绍 HTML 中常见的块级元素。

<div> 元素

<div> 元素是定义 HTML 文档中的一个分区或节（division/section）的通用容器。它可以用来组织其他 HTML 元素，并且可以应用 CSS 样式来美化它的展示效果。

例如，下面的代码定义了一个 <div> 元素，其中包含了一张图片和一段文字：

htmlCopy Code
<div>
  <img src="example.jpg" alt="Example Image" />
  <p>This is an example of a paragraph.</p>
</div>

<p> 元素

<p> 元素是用来表示段落的块级元素。它会在页面上创建一个新的段落，并且自动添加一些间距以与其他段落区分开来。

例如，下面的代码定义了一个包含两个段落的 <div> 元素：

htmlCopy Code
<div>
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>
</div>

<ul> 和 <li> 元素

<ul> 和 <li> 元素分别用于创建无序列表和列表项。无序列表通常用于显示一组项目，这些项目没有特定的顺序，每个项目由一个小圆点表示。

例如，下面的代码创建了一个包含三个列表项的无序列表：

htmlCopy Code
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ol> 和 <li> 元素

<ol> 和 <li> 元素分别用于创建有序列表和列表项。有序列表通常用于显示一组项目，这些项目有特定的顺序，每个项目由一个数字表示。

例如，下面的代码创建了一个包含三个列表项的有序列表：

htmlCopy Code
<ol>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>

<pre> 元素

<pre> 元素用于呈现预格式化文本，其中空格和换行符等字符会保留在原样。它通常用于在 HTML 中嵌入代码示例或其他 ASCII 艺术。

例如，下面的代码展示了一个带有 ASCII 艺术的 <pre> 元素：

htmlCopy Code
<pre>
 _______
< hello >
 -------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||
</pre>

以上就是 HTML 区块学习笔记，希望能够帮助你更好地理解 HTML 中的块级元素。