HTML排版标签、语义化标签、块级和行内元素详解

目录

前言

一、HTML中的排版标签

1. 文本相关标签

1.1 标题标签

~

1.2 段落标签

1.3 强调和加粗

1.4 换行标签

1.5 水平线标签

二、HTML中的语义化标签

2.1 语义化标签概述

2.2 常见的语义化标签

示例（核心代码部分）：

三、HTML元素的分类：块级元素与行内元素

3.1 块级元素（Block-level Elements）

常见的块级元素：

3.2 行内元素（Inline Elements）

常见的行内元素：

四、注意点与最佳实践

1. 不要滥用

标签

2. 避免错误的嵌套

3. 利用CSS控制元素行为（扩展了解）

4. 合理使用与

5. 避免空标签和冗余标签

五、总结与最佳实践

排版标签的使用：

语义化标签的使用：

块级元素与行内元素的区分：

注意事项：

前言

在Web开发中，HTML是构建网页的基础，掌握HTML的排版标签、语义化标签以及元素的分类（块级元素与行内元素）是每个前端开发者的必备技能。理解这些标签及其行为，有助于你编写结构清晰、语义明确的网页，提升网页的可读性和可访问性。

今天，我们将详细探讨HTML中的排版标签、语义化标签、块级和行内元素，并讨论一些使用时需要注意的要点。

一、HTML中的排版标签

HTML提供了多种排版标签，用于控制文本的显示效果。通过这些标签，开发者可以格式化文本，使网页的内容更加清晰和结构化。

1. 文本相关标签

1.1 标题标签 <h1> ~ <h6>

HTML提供了6级标题标签，用于标识页面中不同层级的标题。<h1>表示最大级别的标题，而<h6>表示最小级别的标题。

<h1>网页主标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
  • 注意： <h1> 标签通常用于页面的主标题，搜索引擎通常会依赖它来理解页面内容。
1.2 段落标签 <p>

<p> 标签用于定义段落。文本会自动在两段之间插入空行，使内容更加分隔清晰。

<p>这是一个段落。</p>
  • 注意：不要使用 <p> 标签嵌套其他块级标签（如 div、h1）。这会破坏HTML文档的结构。
1.3 强调和加粗
  • <strong>：用于强调文本，一般表现为加粗，具有语义意义，表示该文本在上下文中重要性较高。
  • <em>：用于强调文本，一般表现为斜体，具有语义意义，表示该文本在上下文中有特别强调。
<p>这是 <strong>重要</strong> 的文本。</p>
<p>这是 <em>强调</em> 的文本。</p>
1.4 换行标签 <br>

<br> 标签用于在文本中插入换行，它没有闭合标签。

<p>这是第一行<br>这是第二行</p>
1.5 水平线标签 <hr>

<hr> 标签用于在网页中插入水平分隔线，用于视觉上的区分，通常表示内容的分割。

<p>内容部分1</p>
<hr>
<p>内容部分2</p>

 

 

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>排版标签</title>
</head><body><!-- <h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3><h4>我是四级标题</h4><h5>我是五级标题</h5>  <h6>我是六级标题</h6><div> <p>我是段落</p><p>我是段落</p><p>我是段落</p> --><h1>点“金”之道丨深耕中国 外资如何发力？</h1><h2>如何发力？</h2><div><p>近日，<strong>国际货币基金组织（IMF）</strong>发布《世界经济展望报告》更新内容，上调2025年中国经济增长预期。</p><p><hr><em>很多外资也趁势加码投资中国，他们将在哪些方面重点发力？</em></p>
</div>
</body>
</html>

 

二、HTML中的语义化标签

HTML5引入了一些语义化标签，使网页结构更加清晰，帮助搜索引擎更好地理解页面内容，且对屏幕阅读器友好，提升了网页的可访问性。

2.1 语义化标签概述

语义化标签是指那些明确表达元素含义的标签，它们不仅仅是为了样式或布局。语义化标签有助于增强HTML文档的可读性，同时对SEO和网页可访问性有积极作用。

2.2 常见的语义化标签
  • <header>：表示网页或网页部分的头部区域，通常包含网站logo、导航、搜索框等元素。
  • <footer>：表示网页或网页部分的底部区域，通常包含版权信息、联系信息等。
  • <nav>：表示导航栏，包含指向其他页面的链接。
  • <article>：表示独立的内容块，通常用于博客文章、新闻报道等。
  • <section>：表示文档中的独立区域，用于将内容分割成不同的部分。
  • <aside>：表示与主内容关系不大的内容，例如侧边栏、广告等。
  • <main>：表示页面的主要内容区域，每个页面只能有一个 <main> 元素。
  • <mark>：用于高亮显示搜索结果或关键字。
示例（核心代码部分）：
<header><h1>欢迎访问我的网站</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">联系我们</a></li></ul></nav>
</header><main><section><h2>文章标题</h2><p>文章内容...</p></section><section><h2>更多内容</h2><p>更多的文章或信息...</p></section>
</main><footer><p>&copy; 2024 我的公司</p>
</footer>

 

注意：该部分后续会讲解，大家可以自行上网查询。 

三、HTML元素的分类：块级元素与行内元素

HTML元素根据其显示行为，可以分为两类：块级元素和行内元素。理解它们的区别和特点，有助于你更好地进行页面布局和排版。

3.1 块级元素（Block-level Elements）

块级元素是指默认占据整行空间的元素，并且后续的元素会被放置在它的下方。块级元素通常用于布局和构建页面结构。

常见的块级元素：
  • <div>：通用容器，用于组合其他元素。
  • <p>：段落。
  • <header>：网页头部。
  • <footer>：网页底部。
  • <article>：文章。
  • <section>：内容区块。
<div><h2>这是一个块级元素</h2><p>块级元素通常占据整行。</p>
</div>
  • 特点：
    • 占据一整行，后续内容自动跳到下一行。
    • 可以设置宽度、高度、内外边距（margin/padding）。
    • 常用于页面布局。

3.2 行内元素（Inline Elements）

行内元素是指不会打断文档流的元素，它们只占据自身所需的空间，其他元素会与其同行显示。

常见的行内元素：
  • <span>：通用的行内容器，常用于样式控制。
  • <a>：超链接。
  • <img>：图片。
  • <strong>：强调文本（加粗）。
  • <em>：强调文本（斜体）。
<p>这是一个 <strong>行内元素</strong> 示例。</p>
  • 特点：
    • 只占据自身内容的宽度。
    • 不能设置宽度和高度（除非通过CSS改变其表现为块级元素）。
    • 可以与其他行内元素在同一行内显示。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>块类与行类元素</title>
</head>
<body><!-- 块级元素，独占一行 --><marquee>hello world!</marquee><marquee>I love you!</marquee><h1> hello</h1><p>你好世界！</p><p>我爱你！</p><div>------</div><div>------</div><!-- 行级元素，在一行内显示 --><input type="text"></input><input type="text"></input><!-- 规则:块级元素中能放行级元素，块级元素，行级元素不能放块级元素 ，但是能写行级元素--><div><input type="text"><input type="text"></div></input></div><span><span> hello </span><input type="text"></input><span> world </span></span>
<!-- 标题不能嵌套 ,p标签不能写块元素-->
</body>
</html>

 

四、注意点与最佳实践

1. 不要滥用 <div> 标签

<div> 是一个通用的块级容器元素，但过度使用它会使代码变得冗长和难以维护。使用语义化标签，如 <header>、<footer>、<article> 等，不仅有助于代码的可读性，还能提高页面的SEO效果。

2. 避免错误的嵌套

HTML标签有一定的嵌套规则，错误的嵌套会导致网页的渲染出现问题。常见的错误包括：

  • <p>标签嵌套其他块级标签：<p> 标签应只包含文本或行内元素，不能直接包含块级标签（如 <div>、<ul> 等）。

    错误示例：

    <p>这是一个段落 <div>错误的块级元素</div></p>

    正确示例：

    <p>这是一个段落</p>
<div>这是一个块级元素</div>

  • <ul> 标签嵌套其他标签时应注意顺序：<ul> 中的子元素应该是 <li> 标签，避免直接嵌套其他块级标签。

    错误示例：

    <ul><div>错误的块级元素</div>
</ul>

    正确示例：

    <ul><li>第一个列表项</li><li>第二个列表项</li>
</ul>

该元素在列表的内容中会讲解，这里了解知道即可

3. 利用CSS控制元素行为（扩展了解）

在以后的CSS学习中会讲到

理解HTML元素的类型（块级元素和行内元素）有助于构建结构化的布局。为了使行内元素呈现为块级元素或反之，你可以通过CSS来改变它们的显示行为。

例如，将行内元素转换为块级元素：

span {display: block;
}

同样，你也可以将块级元素转换为行内元素：

div {display: inline;
}

通过CSS的 display 属性，开发者能够灵活控制页面布局，优化用户体验。

4. 合理使用<span>与<div>

  • <span> 是行内元素，通常用于小范围的内容区分（如文本内的某一部分）。它没有任何布局功能，主要用于样式控制和包裹文本。

    例如：

    <p>这是一段文本，其中 <span class="highlight">某些文本</span> 需要突出显示。</p>

  • <div> 是块级元素，用于创建页面中的区块，通常用于布局容器。它没有语义功能，但能够帮助我们组织页面结构。

    例如：

    <div class="container"><h1>欢迎来到我的网站</h1><p>这里是网站的介绍部分。</p>
</div>

合理使用 <span> 和 <div> 标签能够帮助你实现清晰的页面结构和更好的可读性。

5. 避免空标签和冗余标签

在HTML中，应尽量避免使用没有实际效果的标签。例如，避免使用空的 <div> 或 <span> 标签，它们没有任何内容，只是占据空间。减少冗余标签可以使HTML代码更加简洁和高效。

不推荐：

<div></div>
<span></span>

推荐使用具有实际意义的标签：

<article><h2>文章标题</h2><p>文章内容...</p>
</article>

五、总结与最佳实践

排版标签的使用：

HTML提供了丰富的文本格式化标签，如 <h1>~<h6>（标题标签）、<p>（段落标签）、<strong>（加粗文本）等，帮助开发者对网页的文本进行排版和格式化。

语义化标签的使用：

语义化标签使页面结构更加清晰，并有助于SEO和可访问性。常用的语义化标签包括 <header>、<footer>、<article>、<section> 等。这些标签不仅有助于人类开发者理解页面结构，还能帮助搜索引擎更好地解析页面内容。

块级元素与行内元素的区分：

  • 块级元素（如 <div>、<p>、<section>）占据整个行宽，通常用于布局和结构化页面。
  • 行内元素（如 <span>、<a>、<strong>）只占据内容的宽度，通常用于格式化文本或链接。

理解这些元素的不同特性，能够帮助你更好地组织网页内容和布局。

注意事项：

  • 使用语义化标签，使HTML更加清晰、易于维护，并提高SEO和可访问性。
  • 注意标签的嵌套规则，避免无效或错误的标签嵌套。
  • 使用CSS控制元素的显示行为，使网页布局更加灵活。
  • 避免冗余标签和空标签，使HTML更加简洁高效。

希望这篇博客能帮助大家更好地理解HTML的排版标签、语义化标签以及块级与行内元素。欢迎在评论区留言交流！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/12838.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

20250205——Windows系统基于ollama的DeepSeek-R1本地安装

20250205——Windows系统基于ollama的DeepSeek-R1本地安装

1、安装ollama 1.1 Windows系统 打开ollama官网链接Download Ollama on Windows&#xff0c;根据自己的系统下载安装包&#xff0c;如果是Windows系统&#xff0c;下载Windows版本。 1.1 Linux系统 &#xff08;这个是因为运行遇到报错了&#xff0c;想自己记录一下解决方法&a…
阅读更多...
DeepSeek R1 x ApiSmart

DeepSeek R1 x ApiSmart

根据美国业界的说法&#xff1a;如果一个模型能够在生成良好代码方面表现更出色&#xff0c;那么通常它也能对非代码生成类型的其他用户查询产生更好的答案。 在AI编程领域&#xff0c;市面上已有多款大模型和工具供我们选择。常见的有OpenAI系列模型、Claude 3.5 Sonnet&#…
阅读更多...
解决threeJS加载obj gltf和glb模型后颜色太暗的方法

解决threeJS加载obj gltf和glb模型后颜色太暗的方法

网上找到的部分解决方法 网上找到的部分解决方法 咱们有时候去glb官方下载glb或gltf模型时候&#xff0c;模型显示太黑 其实通过查找后不难发现网上给出了很多解决方法&#xff0c;但是大部分都无法从根本上解决问题。我之前看到有一篇文章对gltf的解决方法是让gltf增加自发光…
阅读更多...
GitHub Copilot 越狱漏洞

GitHub Copilot 越狱漏洞

研究人员发现了两种操控 GitHub 的人工智能&#xff08;AI&#xff09;编码助手 Copilot 的新方法&#xff0c;这使得人们能够绕过安全限制和订阅费用、训练恶意模型等。 第一种技巧是将聊天交互嵌入 Copilot 代码中&#xff0c;利用 AI 的问答能力&#xff0c;使其产生恶意输…
阅读更多...
动态规划练习八（01背包问题）

动态规划练习八（01背包问题）

一、问题介绍与解题心得 01背包问题就是每个物品数量只有一个&#xff0c;每个物品可以取或不取&#xff0c;来达到收益最大&#xff0c;或者收益在某个值。 限制条件&#xff1a;背包容量有限&#xff0c;物品个数只有1个 解决问题&#xff1a;从价值入手&#xff08;价值最…
阅读更多...
Java实习生面试题汇总

Java实习生面试题汇总

Java实习生面试题汇总 简介 本人是二本大三学生&#xff0c;下半年大四。暑假在上海这边找实习工作&#xff0c;面了几家公司&#xff0c;所问到的问题记录在下面。 因为是在校生&#xff0c;没任何实习经历&#xff0c;一般找我面试的都是小公司&#xff0c;一般问的比较简…
阅读更多...
开源安全一站式构建！开启企业开源治理新篇章

开源安全一站式构建！开启企业开源治理新篇章

在如今信息技术日新月异、飞速发展的数字化时代&#xff0c;开源技术如同一股强劲的东风&#xff0c;为企业创新注入了源源不断的活力&#xff0c;然而&#xff0c;正如一枚硬币有正反两面&#xff0c;开源技术的广泛应用亦伴随着不容忽视的挑战。安全风险如影随形&#xff0c;…
阅读更多...
xxl-job 自定义告警短信发送

xxl-job 自定义告警短信发送

官方介绍 代码实现 实现 JobAlarm 重写 doAlarm 方法 Component public class SmsJobAlarm implements JobAlarm {Overridepublic boolean doAlarm(XxlJobInfo info, XxlJobLog jobLog) {boolean alarmResult true;// 简单内容&#xff0c;根据业务自行修改String template …
阅读更多...
大数据学习之Spark分布式计算框架RDD、内核进阶

大数据学习之Spark分布式计算框架RDD、内核进阶

一.RDD 28.RDD_为什么需要RDD 29.RDD_定义 30.RDD_五大特性总述 31.RDD_五大特性1 32.RDD_五大特性2 33.RDD_五大特性3 34.RDD_五大特性4 35.RDD_五大特性5 36.RDD_五大特性总结 37.RDD_创建概述 38.RDD_并行化创建 演示代码&#xff1a; // 获取当前 RDD 的分区数 Since ( …
阅读更多...
【分布式架构理论3】分布式调用（2）：API 网关分析

【分布式架构理论3】分布式调用（2）：API 网关分析

文章目录 一、API 网关的作用1. 业务层面&#xff1a;简化调用复杂性2. 系统层面&#xff1a;屏蔽客户端调用差异3. 其他方面&#xff1a; 二、API 网关的技术原理1. 协议转换2. 链式处理3. 异步请求机制1. Zuul1&#xff1a;同步阻塞处理2. Zuul2&#xff1a;异步非阻塞处理 三…
阅读更多...
3.【BUUCTF】XSS-Lab1

3.【BUUCTF】XSS-Lab1

进入题目页面如下 好好好&#xff0c;提示点击图片&#xff0c;点进去页面如下&#xff0c;且url中有传参&#xff0c;有注入点 发现题目给出了源码 查看得到本题的源码 分析一下代码 <!DOCTYPE html><!--STATUS OK--> <!-- 声明文档类型为 HTML5&#xff0c;告…
阅读更多...
uniapp小程序自定义中间凸起样式底部tabbar

uniapp小程序自定义中间凸起样式底部tabbar

我自己写的自定义的tabbar效果图 废话少说咱们直接上代码&#xff0c;一步一步来 第一步&#xff1a; 找到根目录下的 pages.json 文件&#xff0c;在 tabBar 中把 custom 设置为 true&#xff0c;默认值是 false。list 中设置自定义的相关信息&#xff0c; pagePath&#x…
阅读更多...
105，【5】buuctf web [BJDCTF2020]Easy MD5

105，【5】buuctf web [BJDCTF2020]Easy MD5

进入靶场 先输入试试回显 输入的值成了password的内容 查看源码&#xff0c;尝试得到信息 什么也没得到 抓包&#xff0c;看看请求与响应里有什么信息 响应里得到信息 hint: select * from admin where passwordmd5($pass,true) 此时需要绕过MD5&#xff08;&#xff09;函…
阅读更多...
JVM监控和管理工具

JVM监控和管理工具

基础故障处理工具 jps jps(JVM Process Status Tool)&#xff1a;Java虚拟机进程状态工具 功能 1&#xff1a;列出正在运行的虚拟机进程 2&#xff1a;显示虚拟机执行主类(main()方法所在的类) 3&#xff1a;显示进程ID(PID&#xff0c;Process Identifier) 命令格式 jps […
阅读更多...
【大模型】AI 辅助编程操作实战使用详解

【大模型】AI 辅助编程操作实战使用详解

目录 一、前言 二、AI 编程介绍 2.1 AI 编程是什么 2.1.1 为什么需要AI辅助编程 2.2 AI 编程主要特点 2.3 AI编程底层核心技术 2.4 AI 编程核心应用场景 三、AI 代码辅助编程解决方案 3.1 AI 大模型平台 3.1.1 AI大模型平台代码生成优缺点 3.2 AI 编码插件 3.3 AI 编…
阅读更多...
机器学习--2.多元线性回归

机器学习--2.多元线性回归

多元线性回归 1、基本概念 1.1、连续值 1.2、离散值 1.3、简单线性回归 1.4、最优解 1.5、多元线性回归 2、正规方程 2.1、最小二乘法 2.2、多元一次方程举例 2.3、矩阵转置公式与求导公式 2.4、推导正规方程0的解 2.5、凸函数判定 成年人最大的自律就是&#xff1a…
阅读更多...
2025最新软件测试面试大全（附答案+文档）

2025最新软件测试面试大全（附答案+文档）

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、问&#xff1a;你在测试中发现了一个bug&#xff0c;但是开发经理认为这不是一个bug&#xff0c;你应该怎样解决? 首先&#xff0c;将问题提交到缺陷管理库里…
阅读更多...
手写MVVM框架-环境搭建

手写MVVM框架-环境搭建

项目使用 webpack 进行进行构建&#xff0c;初始化步骤如下: 1.创建npm项目执行npm init 一直下一步就行 2.安装webpack、webpack-cli、webpack-dev-server&#xff0c;html-webpack-plugin npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin 3.配置webpac…
阅读更多...
如何自定义软件安装路径及Scoop包管理器使用全攻略

如何自定义软件安装路径及Scoop包管理器使用全攻略

如何自定义软件安装路径及Scoop包管理器使用全攻略 一、为什么无法通过WingetUI自定义安装路径&#xff1f; 问题背景&#xff1a; WingetUI是Windows包管理器Winget的图形化工具&#xff0c;但无法直接修改软件的默认安装路径。原因如下&#xff1a; Winget设计限制&#xf…
阅读更多...
数据结构实战之线性表（三）

数据结构实战之线性表（三）

目录 1.顺序表释放 2.顺序表增加空间 3.合并顺序表 4.线性表之链表实现 1.项目结构以及初始代码 2.初始化链表(不带头结点) 3.链表尾部插入数据并显示 4.链表头部插入数据 5.初始化链表&#xff08;带头结点&#xff09; 6.带头结点的链表头部插入数据并显示 7.带头结…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023