你好,我是云桃桃。
一个希望帮助更多朋友快速入门 WEB 前端程序媛。
今天聊聊区块元素。
区块元素分为 2 大类,块级元素和内联元素,它们有着不同的特点和用途。
那我们一起来看看吧。
2 类元素
一、块级元素
常见的 HTML 块级元素包括但不限于:
-
<div>
:用于创建块级容器,通常用于组织和布局页面内容。 -
<p>
:用于表示段落文本,每个段落通常占据一行。 -
<h1>
~<h6>
:用于表示标题,级别从大到小依次递减,一般用于页面的标题结构。 -
<ul>
:无序列表,用于显示项目之间没有顺序关系的内容。 -
<ol>
:有序列表,用于显示项目之间有顺序关系的内容。 -
<li>
:列表项,通常作为<ul>
或<ol>
的子元素使用。
综合运用这些块级元素,可以创建一个简单的 HTML 页面示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML块级元素示例</title>
<style>
body {
font-family: Arial, sans-serif;
}
.box {
background-color: #f0f0f0;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<h1>HTML块级元素示例</h1>
<div class="box">
<p>这是一个段落文本。</p>
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
<li>无序列表项3</li>
</ul>
</div>
<div class="box">
<h2>这是一个标题</h2>
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
</ol>
</div>
</div>
</body>
</html>
这个示例展示了如何使用<div>
、<p>
、<h1>
、<h2>
、<ul>
、<ol>
和<li>
等块级元素,通过 CSS 设置样式实现页面布局和内容展示。
二、内联元素
常见的 HTML 内联元素有:
-
<span>
:用于对文本进行样式化或者添加额外的标记,是最常见的内联元素之一。 -
<a>
:表示超链接,用于跳转到其他页面或者下载资源。 -
<strong>
:表示强调文本,通常呈现为粗体显示。 -
<em>
:表示强调文本,通常呈现为斜体显示。
以下是一个内联元素的 HTML 简单案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML内联元素示例</title>
<style>
.container {
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
.link {
color: blue;
text-decoration: underline;
margin-right: 20px;
}
.emphasis {
font-style: italic;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<span class="link"><a href="#">链接文本</a></span>
<span class="emphasis">强调文本</span>
<span class="highlight">高亮文本</span>
<p>这是一个内联元素示例,展示了内联元素的特点和样式效果。</p>
</div>
</body>
</html>
在这个案例中,<span>
元素用于包裹内联元素,并通过 CSS 样式控制了内联元素的颜色、字体样式、背景色等效果,展示了内联元素的特点和样式控制方法。
那综合下来,块级元素和内联元素在 HTML 中有哪些不同呢?主要包括以下几个方面:
显示特点:
-
块级元素默认占据一行,即它们会独占一行空间,垂直排列。可以设置宽高,边距、内边距、边框等样式属性。
-
内联元素默认不会独占一行空间,它们可以在同一行内水平排列。
允许嵌套的元素:
-
块级元素可以包含其他块级元素和内联元素,可以嵌套形成更复杂的结构;
-
内联元素只能包含其他内联元素或文本内容,不能包含块级元素。
如何判断?
那,这么多我记不住是块元素还是内联元素,怎么办?
可以通过在浏览器中,按 F12 打开元素面板, 在开发者工具模式下,具体怎么看呢,有 3 个方法:
1、悬停查看:
在 Elements 面板中选中要查看的元素,比如 div。
悬停在该元素上,通常会有一个高亮的方框显示出来。
如果元素是块级元素,该方框通常会占据区域块一整行的宽度;如果是内联元素,该方框通常只会包裹住元素的内容。
2、计算框模型:
在 Elements 面板中选中要查看的元素。
在样式部分中查找 "盒模型" 或 "Box Model",可以看到该元素的盒模型信息。
如果是块级元素,通常会显示正常的盒模型,包括内容区、内边距、边框和外边距,有宽高,如图。
如果是内联元素,通常只有内容区和可能的内边距,如图。
3、检查元素面板:
在浏览器中右键点击要查看的元素,选择 "检查" 或 "元素"- "计算样式"。
在 Elements 面板中选中要查看的元素,查看其样式部分。
如果元素是块级元素,通常会显示 display: block;
,就这么理解,block 就是块。
如果是内联元素,通常会显示 display: inline;
,inline 就是内联,如图。
通过以上,可以很方便地查看一个元素是块级元素还是内联元素,帮助开发者更好地理解和调试页面的结构和样式。
工具不熟练,怎么办?做页面的时候,会经常用调试工具的,慢慢就熟练了。
总结
综上,块级元素和内联元素在 HTML 文档中扮演着不同但同样重要的角色,合理运用它们可以更好地构建具有良好结构和视觉效果的网页内容。
ok,以上,本文完。