2025年2月24日 星期一 甲辰(龙)年 腊月廿四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

HTML基础:2大类区块元素详解

时间:01-24来源:作者:点击数:18
城东书院 www.cdsy.xyz

本文详细介绍了HTML中的块级元素(如div、p、h1-h6等)和内联元素(如span、a等)的区别,包括显示特点、嵌套规则以及如何通过开发者工具判断元素类型。作者强调了这两种元素在网页构建中的重要性及其在结构和样式控制中的作用。

区块元素分为 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;
  •         padding10px;
  •         margin-bottom20px;
  •         border1px 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;
  •         padding20px;
  •         border1px solid #ccc;
  •       }
  •       .link {
  •         color: blue;
  •         text-decoration: underline;
  •         margin-right20px;
  •       }
  •       .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 文档中扮演着不同但同样重要的角色,合理运用它们可以更好地构建具有良好结构和视觉效果的网页内容。

城东书院 www.cdsy.xyz
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐