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

news2025/2/7 6:02:15

目录

前言

一、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.coloradmin.cn/o/2294133.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

机器学习中的关键概念：通过SKlearn的MNIST实验深入理解

机器学习中的关键概念：通过SKlearn的MNIST实验深入理解

欢迎来到我的主页&#xff1a;【Echo-Nie】 本篇文章收录于专栏【机器学习】 1 sklearn相关介绍 Scikit-learn 是一个广泛使用的开源机器学习库&#xff0c;提供了简单而高效的数据挖掘和数据分析工具。它建立在 NumPy、SciPy 和 matplotlib 等科学计算库之上&#xff0c;支持…
阅读更多...
用NeuralProphet预测股价：AI金融新利器（附源码）

用NeuralProphet预测股价：AI金融新利器（附源码）

作者&#xff1a;老余捞鱼 原创不易&#xff0c;转载请标明出处及原作者。 写在前面的话&#xff1a;我用NeuralProphet模型预测了股票价格&#xff0c;发现其通过结合时间序列分析和神经网络算法&#xff0c;确实能提供比传统Last Value方法更精准的预测。经过一系列超参数调优…
阅读更多...
深度学习-103-RAG技术之通过分块技术提升RAG的效果

深度学习-103-RAG技术之通过分块技术提升RAG的效果

文章目录 1 RAG中的分块技术1.1 RAG是什么1.2 分块chunking是什么1.3 分块的重要性1.4 分块的技巧2 固定字符大小分块2.1 固定字符大小分块的优缺点2.2 自定义分块代码2.3 LangChain的CharacterTextSplitter3 递归字符文本分割3.1 递归字符文本分割的优缺点3.2 LangChain的Recu…
阅读更多...
【B站保姆级视频教程：Jetson配置YOLOv11环境（六）PyTorchTorchvision安装】

【B站保姆级视频教程：Jetson配置YOLOv11环境（六）PyTorchTorchvision安装】

Jetson配置YOLOv11环境&#xff08;6&#xff09;PyTorch&Torchvision安装 文章目录 1. 安装PyTorch1.1安装依赖项1.2 下载torch wheel 安装包1.3 安装 2. 安装torchvisiion2.1 安装依赖2.2 编译安装torchvision2.2.1 Torchvisiion版本选择2.2.2 下载torchvisiion到Downloa…
阅读更多...
Java进阶14 TCP日志枚举

Java进阶14 TCP日志枚举

Java进阶14 TCP&日志&枚举 一、网络编程TCP Java对基于TCP协议得网络提供了良好的封装&#xff0c;使用Socket对象来代表两端的通信端口&#xff0c;并通过Socket产生IO流来进行网络通信。 1、TCP协议发数据 1.1 构造方法 方法 说明 Socket(InetAddress address…
阅读更多...
[LVGL] 在VC_MFC中移植LVGL

[LVGL] 在VC_MFC中移植LVGL

前言&#xff1a; 0. 在MFC中开发LVGL的优点是可以用多个Window界面做辅助扩展 1.本文基于VC2022-MFC单文档框架移植lvgl8 2. gitee上下载lvgl8.3 源码&#xff0c;并将其文件夹改名为lvgllvgl: LVGL 是一个开源图形库&#xff0c;提供您创建具有易于使用的图形元素、漂亮的…
阅读更多...
Crewai框架配置回调函数

Crewai框架配置回调函数

官方文档里只指提了一句 不过不太难&#xff0c;在crew.py文件里配置一下就行了&#xff0c;下面是一个demo&#xff0c;这个函数会在research_task任务执行完触发&#xff08;配置LLM这里请看我这篇博客&#xff09; from crewai import Crew, Process, Agent, Taskfrom src.…
阅读更多...
拧紧“安全阀”，AORO-P300 Ultra防爆平板畅通新型工业化通信“大动脉”

拧紧“安全阀”，AORO-P300 Ultra防爆平板畅通新型工业化通信“大动脉”

在油气管道泄漏的浓烟中&#xff0c;在矿道坍塌的密闭空间里&#xff0c;在洪水肆虐的救援现场&#xff0c;传统通讯设备频频失效的困境已成为历史。AORO-P300 Ultra防爆平板集5G通讯、红外感知、应急照明等实用功能于一体&#xff0c;以军工级防护与全场景智能应用&#xff0c…
阅读更多...
基于docker搭建Kafka集群，使用KRaft方式搭建，摒弃Zookeeper

基于docker搭建Kafka集群，使用KRaft方式搭建，摒弃Zookeeper

KAFKA基于docker使用KRaft进行集群搭建 环境&#xff1a;已成功搭建kafka服务 可点击链接跳转至安装kafka-3.8.0版本 并启用SASL认证 教程 使用基于Zookeeper方式搭建集群教程 kafka-3.8.0版本 并启用SASL认证 教程 搭建kafka-ui可视化工具 192.168.2.91 192.168.2.92 192…
阅读更多...
CAD导入与解析，助力工业数据可视化高效呈现

CAD导入与解析，助力工业数据可视化高效呈现

背景 在企业的日常设计与管理中&#xff0c;CAD图纸早已成为不可或缺的重要资产&#xff0c;多年来知识积累的载体&#xff0c;凝聚了大量的心血与智慧。然而&#xff0c;CAD图纸往往只作为静态文件保存&#xff0c;应用场景较为有限。在数字经济时代&#xff0c;如何让CAD图纸…
阅读更多...
基于docker部署kafka-3.8.0版本，并开启SASL认证模式

基于docker部署kafka-3.8.0版本，并开启SASL认证模式

1、下载安装包 &#xff08;1&#xff09;https://kafka.apache.org/downloads 下载如下图版本 2、解压安装包 执行tar -xvf kafka_2.13-3.8.0.tgz命令对安装包进行解压。 3、增加配置文件 &#xff08;1&#xff09;进入 /kafka_2.13-3.8.0/config 目录 &#xff08;2&a…
阅读更多...
从零开始人工智能Matlab案例-KNN的二维数据分类

从零开始人工智能Matlab案例-KNN的二维数据分类

基于K最近邻&#xff08;K-Nearest Neighbors, KNN&#xff09;算法的二分类案例&#xff0c;包含完整MATLAB代码、算法原理和核心思想说明。此案例使用合成数据集&#xff0c;无需复杂数据预处理&#xff0c;适合快速理解。 案例&#xff1a;基于KNN的二维数据分类 目标&…
阅读更多...
Spring AOP 扫盲

Spring AOP 扫盲

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…
阅读更多...
DeepSeek 提示词之角色扮演的使用技巧

DeepSeek 提示词之角色扮演的使用技巧

老六哥的小提示&#xff1a;我们可能不会被AI轻易淘汰&#xff0c;但是会被“会使用AI的人”淘汰。 在DeepSeek的官方提示库中&#xff0c;有“角色扮演&#xff08;自定义人设&#xff09;”的提示词案例。截图如下&#xff1a; 在“角色扮演”的提示词案例中&#xff0c;其实…
阅读更多...
python3中错误与异常初识

python3中错误与异常初识

一. 简介 在 编写 Python时&#xff0c;经常会遇到一些报错信息。接下来开始学习 Python3 中错误和异常。 本文首先初步了解一下 Python3中的错误和异常。 二. python3 中错误与异常初识 Python 中有两种错误&#xff1a;语法错误与异常。 1. 语法错误 Python 的语法错误…
阅读更多...
【图像处理】- 基本图像操作

【图像处理】- 基本图像操作

基本图像操作详解 基本图像操作是图像处理的基础&#xff0c;涵盖了对图像进行简单但重要的变换。以下是几种常见的基本图像操作及其详细说明&#xff1a; 1. 裁剪 (Cropping) 描述&#xff1a;从原始图像中提取一个矩形区域。 实现方法&#xff1a; 使用图像的坐标系指定…
阅读更多...
Attention is All You Need-Transformer模型论文精读+架构分析--简单易懂版

Attention is All You Need-Transformer模型论文精读+架构分析--简单易懂版

Foreword写在前面的话&#xff1a; 大家好&#xff0c;我是一名刚开始学习Transformer的新手。这篇文章是我在学习Transformer过程中的一些笔记和心得&#xff0c;希望能和同样在学习人工智能深度学习模型的朋友们分享。由于我的知识有限&#xff0c;文章中可能存在错误或不准确…
阅读更多...
Qt跨屏窗口的一个Bug及解决方案

Qt跨屏窗口的一个Bug及解决方案

如果我们希望一个窗口覆盖用户的整个桌面&#xff0c;此时就要考虑用户有多个屏幕的场景&#xff08;此窗口要横跨多个屏幕&#xff09;&#xff0c;由于每个屏幕的分辨率和缩放比例可能是不同的&#xff0c;Qt底层在为此窗口设置缩放比例&#xff08;DevicePixelRatio&#xf…
阅读更多...
Spark--算子执行原理

Spark--算子执行原理

一、sortByKey SortByKey是一个transformation算子&#xff0c;但是会触发action&#xff0c;因为在sortByKey方法内部&#xff0c;会对每个分区进行采样&#xff0c;构建分区规则&#xff08;RangePartitioner&#xff09;。 内部执行流程 1、创建RangePartitioner part&…
阅读更多...
javaEE-6.网络原理-http

javaEE-6.网络原理-http

目录 什么是http? http的工作原理&#xff1a; 抓包工具 fiddler的使用 HTTP请求数据: 1.首行:​编辑 2.请求头(header) 3.空行&#xff1a; 4.正文&#xff08;body&#xff09; HTTP响应数据 1.首行&#xff1a;​编辑 2.响应头 3.空行&#xff1a; 4.响应正文…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023