HTML 区块

把网页想象成积木拼成的画面：有的积木独占一整行，有的则和邻居挤在同一行。HTML 元素按此分成两大类——块级元素与内联元素，而 <div> 和 <span> 正是最常用的两个"万能区块"标签。

块级元素

块级元素总是从新的一行开始，并尽可能占满整行宽度，后面的内容会换到下一行。常见的块级元素有 <p>、<h1>~<h6>、<ul>、<table> 以及下面要讲的 <div>。

<p>这是第一段，独占一行。</p>
<p>这是第二段，从新的一行开始。</p>

在浏览器中显示为：两段文字各占一行，段落之间有默认间距。

内联元素

内联元素不会另起一行，只占自身内容的宽度，多个内联元素可以排在同一行里。常见的有 <a>、<b>、<em>、<img> 以及 <span>。

<p>我<span style="color:red;">爱</span>学习 HTML。</p>

在浏览器中显示为：一句话中只有"爱"字显示为红色，其余文字颜色不变，整句仍是一行。

div 块容器

<div>（division 分区）是最常用的块级容器，本身没有样式，只负责把一组内容"圈"成一块，方便用 class、id 或 CSS 统一设置背景、边距、布局等。

<div style="background-color:#eee;padding:10px;">
  <h3>公告栏</h3>
  <p>这里放公告内容。</p>
</div>

在浏览器中显示为：一个浅灰底的矩形区域，里面有标题"公告栏"和一行公告文字。

span 行内容器

<span> 是最常用的内联容器，同样不带样式，用于给一行文字中的某一部分"打标记"，比如单独给几个字换颜色、加粗或绑定事件，不会破坏行的连贯性。

<p>今日气温 <span style="color:blue;">25℃</span>，适合出行。</p>

在浏览器中显示为：一句话中"25℃"显示为蓝色，其余部分颜色正常。

div 与 span 的选择

• 需要独占一行、承载整块内容做布局时，用 <div>。
• 只想微调一行文字中的小片段时，用 <span>。 两者经常结合 class 属性使用，例如 <div class="menu">，CSS 就能精准命中它，这是网页布局的基础套路。

小结

块级元素独占一行、内联元素排队同行；div 圈整块、span 标小段。分清这两类元素，配合 class 就能随心所欲地组织与美化页面结构。