【前端学习整理】HTML（4）：块级、内联元素与网页的布局

本文链接：https://blog.csdn.net/qq_43944712/article/details/88032589

本文介绍了HTML中的块级元素和内联元素的特性。块级元素如ul、h1、p、div等默认独占一行，而内联元素如a、b、img、span等则从左向右堆叠。在网页布局中，通常使用块级元素作为容器，内联元素常用于文本容器。理解这些基础知识对于构建网页布局至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页布局直接影响到网站的外观，所以一个好的网站，页面布局的设计非常重要。

div元素是一个块级元素
span元素是一个内联元素
块级元素和内联元素还有很多，一个完整的网站由这些元素合理组成，才不会杂乱无章。

<h2>什么是块级、内联</h2>
	<div>这是一个块级元素</div>
	<div>这是一个块级元素</div>
	<div>这是一个块级元素</div>
	<span>这是一个内联元素</span>
	<span>这是一个内联元素</span>
	<span>这是一个内联元素</span>
	<hr/>
	<div>
		<span>这是一个嵌入在块级元素里的内联元素</span>
		<span>这是一个嵌入在块级元素里的内联元素</span>
		<span>这是一个嵌入在块级元素里的内联元素</span>
	</div>

浏览器显示效果如下
在这里插入图片描述
下面写一个简单的网页大区域例子

<h2>什么是布局</h2>
			<p>网页布局直接影响到网站的外观，所以一个好的网站，页面布局的设计非常重要。以下为简单布局:</p>
			<div>
				<h1 style="width:100%;height:50px;text-align: center;background: greenyellow;margin:0">我来组成标题</h1>
				<ul style="list-style:none;width:10%;padding: 0;text-align: center;float:left;margin:0">
					<li style="background: aqua;">第一列</li>
					<li style="background: aqua;">第二列</li>
					<li style="background: aqua;">第三列</li>
					<li style="background: aqua;">第四列</li>
				</ul>
				<div style="float:left;width:90%;height:84px;background: #D2CEDF;">我是文章内容:
					<p>style属性内容为CSS内容，用于给HTML元素设置样式属性。CSS后续进行学习。</p>
				</div>
				<div style="width:100%;height:30px;background: #FFA500;clear: both;">我在块级标签的底部，我也是一个块级标签</div>
			</div>

浏览器显示效果如下
在这里插入图片描述

笔记
1.块级元素在浏览器中默认以新的一行来开始，并且独占一行，从左开始计算大小，之后的块级元素默认向下排列。常见的块级标签有：ul、h1、p、div等等。
2.内联元素不会以新的一行开始，从左向右依次堆叠。内联元素可以被包裹在块级元素内。内联元素有：a、b、img、span等等。
3.在常见的页面布局中，一般用块级元素作为容器，包裹其他内容形成一个区块(块级标签内可以包裹块级元素也可以包裹内联元素)。
4.<div>元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
5.HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义