HTML块级元素及行内元素
时间：03-04来源：作者：点击数：
在 HTML 中，标签（tag）通常又被称作元素（element）。例如 <a> 标签又叫做 <a> 元素，<p> 标签也叫作 <p> 元素。HTML 元素根据其表现形式可以分为 2 种：
- 块级元素
- 行内元素
任何 HTML 元素都属于这两者中的任意一种。
提示：块级元素和行内元素的概念极其重要，同时也是学习 CSS 的基础知识之一，请读者不要忽略。
1. 块级元素
块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。常见的块级元素如下表：
| 块级元素 | 说明 |
|---|---|
| div | 最典型的块元素 |
| p | 表示段落 |
| h1-h6 | 表示1-6级标题（默认加粗） |
| br | 表示换行 |
| ol | 有序列表 |
| ul | 无序列表 |
2. 行内元素
行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。常见的行内元素如下表：
行内元素
| 行内元素 | 说明 |
|---|---|
| a | 超链接 |
| span | 常用行级 |
| strong | 加粗，强调 |
| b | 加粗，不强调 |
| em | 斜体，强调 |
| i | 斜体，不强调 |
| img | 图片 |
| input | 输入框 |
| select | 下拉列表 |
1) 实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素与行内元素</title>
</head>
<body>
<div>div标签（块级标签）</div>
<p>p标签（块级标签）</p>
<span>span标签（行内标签）</span>
<a href="#">a标签（行内标签）</a>
</body>
</html>
在浏览器中运行效果如下图：
图1：块元素与行内元素区别
通过运行结果可以发现，<div> 标签和 <p> 标签分别独占一行，因为它们是块级元素；而 <span> 标签和 <a> 标签在同一行中显示，因为它们是行内元素。
注意，这里我们说的独占一行是指元素在浏览器中的运行效果，并不是在编辑器中独占一行。在编辑器中，不论怎么书写代码，都不会影响它在浏览器中的运行效果。
3. 元素的嵌套
HTML 中的各个元素之间是可以互相嵌套的，例如：
- 块元素可以嵌套块元素
- 块元素可以嵌套行内元素
- 行内元素可以嵌套行内元素
- 行内元素可以嵌套块元素
值得注意的是我们不建议在行内元素中嵌套块元素，这样不仅不符合开发规范，还会导致行内元素也独占一行。
下面来看一段元素之间互相嵌套的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素间的嵌套</title>
</head>
<body>
<!-- 块级元素嵌套块级元素 -->
<div>
<p>p标签（块级元素）</p>
<div>div标签（块级元素）</div>
</div>
<!-- 块级元素嵌套行内元素 -->
<div>
<span>span标签（行内元素）</span>
</div>
<!-- 行内元素嵌套 -->
<span>
<span>span标签（行内元素）</span>
<a href="#">a标签（行内元素）</a>
</span>
</body>
</html>
浏览器运行效果如下图：
图2：元素之间的嵌套
4. 总结
- 块级元素的宽度是 100%，在浏览器中默认独占一行。
- 行内元素在浏览器中默认与其它行内元素共占一行。只有当多个行内元素的总宽度大于浏览器的宽度时，才会换行显示。
- 块级元素内部可以嵌套块级元素或行内元素。
- 建议行内元素里面只嵌套行内元素。
方便获取更多学习、工作、生活信息请关注本站微信公众号
上一篇:URL结构解析
下一篇:HTML有序列表+无序列表+定义列表
湘公网安备 43102202000103号