HTML区块

一、HTML区块元素

HTML中的元素可以分为块级元素和内联元素两种类型。

1、块级元素

块级元素（Block-level Elements）是独占一行的元素，它会在浏览器显示时以新行开始和结束。常见的块级元素包括 <h1>、<p>、<ul>、<table> 等。块级元素通常用于创建页面的结构和布局，可以包含其他块级元素或内联元素。

示例代码：

<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>

2、内联元素

内联元素（Inline Elements）不会独占一行，可以在一行内显示，并且与相邻元素共享空间。常见的内联元素包括 <span>、<a>、<strong>、<em> 等。内联元素通常用于包裹文本或对文本进行部分样式化。

示例代码：

这是一段文字中的一些<span class="highlight">特殊文本</span>。
<a href="https://example.com">一个链接</a>

注意：并非所有元素都可以简单地归类为块级元素或内联元素，还有一些元素具有特殊的显示行为。此外，通过CSS样式可以改变元素的显示行为，使其表现为块级元素或内联元素。

HTML 可以通过 <div> 和 <span> 将元素组合起来。

二、div元素

<div> 是一个块级元素，用于创建一个独立的分隔区域或容器。它通常用于将一组相关的元素组合在一起，并应用共同的样式或布局规则。例如使用 <div> 创建一个页面的页眉、页脚或侧边栏，<div> 可以包含其他 HTML 元素，如文本、图像、表单等。

示例代码：

<div>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<img src="image.jpg" alt="图片">
</div>

<div> 标签确实可以用于将 HTML 文档分割为独立的、不同的部分，它是一个通用的容器元素，没有特定的含义，通常用于组合其他 HTML 元素并对其应用样式或布局。由于 <div> 元素是块级元素，浏览器会在其前后显示折行，因此可以用于创建页面布局。

除了 <div> 标签，HTML5 还引入了许多其他新的语义元素来更好地定义文档结构和语义。例如，<header>、<nav>、<main> 和 <footer> 等元素都有特定的语义含义，可以更好地描述代码的内容。

三、span元素

<span> 是一个行内元素，用于对文本或其他行内元素进行分组，并应用共同的样式或操作。与 <div> 不同，<span> 并不会以自己的换行开始和结束，而是在同一行内显示。<span> 通常用于针对特定文本应用样式，或者用于通过 CSS 或 JavaScript 进行操作。

示例代码：

<p>这是一段文字，其中有一些需要特别突出的<span class="highlight">重要文本</span>。</p>

在上述示例中，<span class="highlight"> 标签用于将 "重要文本" 这部分文字突出显示，通过 CSS 可以对其应用特定的样式。