HTML标签块级元素与行内块元素区别，以及一些特殊元素的使用！

最新推荐文章于 2025-09-27 16:37:54 发布

原创最新推荐文章于 2025-09-27 16:37:54 发布 · 492 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5

本文介绍了HTML的基本概念及其块级元素和行内元素的特点与用途。详细解释了不同元素的作用及使用建议，帮助读者更好地理解HTML结构。

一、HTML简介

HTML不是一个编程语言，它是一门超文本标记语言。很多才学习前端的小伙伴总是将html认为是一门编程语言。它的作用是在于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

HTML特点：

超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。

2.可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。

3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

4.通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

二、HTML的块级元素

作用：搭建网页结构

特点：

独占一行空间
默认宽度为100%，（有父元素，宽度就相对于父元素，没有父元素，宽度相对于body（浏览器可视区域））
高度由子元素或内容决定（将元素撑起）
可以通过css指定其宽高。
块级元素可以包含块级元素或行内元素（有些特殊的块级元素除外）

元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...

建议：不要将块级元素嵌套在行内元素中。

元素	作用	已有CSS效果
div	无意义的块元素
h1~h3	标题标题	margin font-size font-weight
p	段落	margin
ul,li	无序列表	margin padding list-style
ol,li	有序列表	margin padding list-style
dl,dt,dd	定义列表	dl - margin dd - margin
html
body		margin
header	H5新增的语义化标签`<br>`(样式与div类似)	`<div class="header"></div>`
footer		`<div class="footer"></div>`
nav		`<div class="nav"></div>`
article		`<div class="article"></div>`
section		`<div class="section"></div>`
aside		`<div class="aside"></div>`
address		`<div class="address"></div>`

三、HTML行内块元素

作用：在结构中填充网页内容

特点：

与其他行内元素共享一行
宽高由自身决定
行内相对来说只能包含行内。

元素：span、a、img、strong、b、i、em、sub、sup...

四、特殊的块级元素

有一些特殊的块级标签，他们不建议包含块级元素或只包含指定的块级元素。

我们可以先把所有的块元素再次划分成几个级别的，我们已经知道<html>是在最外层，<html>下一级里面只会有<head>、<body>、<frameset>、<noframes>。而我们已经知道了可视的元素只会出现在<body>里，所以我们把<body>划在第一个级里面，接着，把不可以自由嵌套的元素划在第三个级，其他的就归进第二个级。所谓的不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>；段落标记的<p>；分隔线<hr>和一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。

注意！！！！：<ul>、<ol>、<dl>、<table>，它们的子一层必须是指定元素，<ul>、<ol>的子一级必须是<li>；<dl>的子一级必须是<dt>或者<dd>；<table>的子一层必须是<caption> 或<thead>、<tfoot>、<tbody>等，而再子一层必须是<tr> （<tr>只存在于<thead>、<tfoot>、<tbody>中），之后才是可放内容的<td>或者<th>。<p>标签不建议放入其他的块级元素，放入其他块级元素，会使一个p标签变成两个p标签。建议<p>标签放行内元素就可以了。