html区块元素

HTML 区块元素

HTML 区块

块元素和行内元素

在 HTML 中，元素通常可以分为 块元素 和 行内元素，一个很重要的区分标准就是：是否独占一行。

块元素

基本特点

  • 块元素通常会从新行开始。
  • 块元素默认会独占一整行。
  • 块元素一般占据整行宽度。
  • 块元素可以包含其他块元素和行内元素。

常见块元素

  • <div>
  • <p>
  • <h1> 到 <h6>
  • <ul>
  • <ol>
  • <li>
  • <table>
  • <form>

使用场景

  • 块元素通常用于组织页面的主要结构和内容。
  • 常用于创建页面中的大区域或逻辑区块。
1
2
3
4
5
<div class="content">
  <h1>文章标题</h1>
  <p>文章内容</p>
  <p>文章内容</p>
</div>

课堂示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="nav">
  <a href="#">链接 1</a>
  <a href="#">链接 2</a>
  <a href="#">链接 3</a>
  <a href="#">链接 4</a>
  <a href="#">链接 5</a>
</div>

<div class="content">
  <h1>文章标题</h1>
  <p>文章内容</p>
  <p>文章内容</p>
  <p>文章内容</p>
  <p>文章内容</p>
  <p>文章内容</p>
</div>

行内元素

基本特点

  • 行内元素通常不会独占一行。
  • 多个行内元素可以显示在同一行内。
  • 行内元素只占据内容本身所需要的宽度。
  • 行内元素通常不能直接包含块元素，但可以包含其他行内元素。

常见行内元素

  • <span>
  • <a>
  • <strong>
  • <em>
  • <img>
  • <br>
  • <input>

使用场景

  • 行内元素通常用于文本中的局部修饰和局部功能。
  • 常用于给一小段文字添加样式、链接或图片等内容。
1
2
3
4
<span>这是第 1 个 span 标签</span>
<span>这是第 2 个 span 标签</span>
<span>这是第 3 个 span 标签</span>
<a href="#">链接</a>

课堂示例代码

1
2
3
4
5
6
<span>这是第 1 个 span 标签</span>
<span>这是第 2 个 span 标签</span>
<span>这是第 3 个 span 标签</span>
<span>这是第 4 个 span 标签</span>
<hr>
<span>链接点击这里 <a href="#">链接</a></span>

块元素与行内元素的区别

核心区别

  • 块元素：通常独占一行。
  • 行内元素：通常不独占一行。

其他区别

  • 块元素更适合做页面布局和结构划分。
  • 行内元素更适合做文本局部修饰和小范围内容展示。

知识点总结

  • 判断一个元素是块元素还是行内元素，最直观的方法就是看它是否默认独占一行。
  • div 常用于创建块级容器。
  • span 常用于包裹一小段文本内容，本身不换行。

复习表达

HTML 元素通常分为块元素和行内元素。块元素默认会从新的一行开始，并且独占一整行，适合做页面结构和布局，比如 div、p、h1 等。行内元素不会独占一行，只占内容本身的宽度，适合做局部文本修饰和小范围内容展示，比如 span、a、strong、img 等。