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.mzph.cn/news/894846.shtml

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

相关文章

【字节青训营-7】：初探 Kitex 字节微服务框架（使用ETCD进行服务注册与发现）

【字节青训营-7】：初探 Kitex 字节微服务框架（使用ETCD进行服务注册与发现）

本文目录 一、Kitex概述二、第一个Kitex应用三、IDL四、服务注册与发现 一、Kitex概述 长话短说&#xff0c;就是字节跳动内部的 Golang 微服务 RPC 框架&#xff0c;具有高性能、强可扩展的特点&#xff0c;在字节内部已广泛使用。 如果对微服务性能有要求&#xff0c;又希望…
阅读更多...
【数学】矩阵、向量（内含矩阵乘法C++）

【数学】矩阵、向量（内含矩阵乘法C++）

目录 一、前置知识&#xff1a;向量&#xff08;一列或一行的矩阵&#xff09;、矩阵1. 行向量2. 列向量3. 向量其余基本概念4. 矩阵基本概念5. 关于它们的细节 二、运算1. 转置&#xff08;1&#xff09;定义&#xff08;2&#xff09;性质 2. 矩阵&#xff08;向量&#xff0…
阅读更多...
浅尝yolo11全程记录1-准备环境＋官网模型推理（个人备份）

浅尝yolo11全程记录1-准备环境＋官网模型推理（个人备份）

准备工作&#xff08;虚拟环境、导入项目&#xff09; 安装Anaconda 主要是为了创建和管理虚拟环境&#xff0c;在pycharm里按照项目里的requirments.txt安装依赖的时候&#xff0c;使用虚拟环境会好很多&#xff08;我记得不用Anaconda也可以直接在pycharm的terminal里头创建…
阅读更多...
5.攻防世界 fileinclude

5.攻防世界 fileinclude

进入题目页面如下 提示flag在flag.php ctrlu&#xff0c;查看源码 给出了一段PHP代码&#xff0c;进行代码审计 <?php // 检查是否开启了错误显示功能 if( !ini_get(display_errors) ) {// 如果没有开启&#xff0c;则将错误显示功能设置为开启状态ini_set(display_error…
阅读更多...
红包雨项目前端部分

红包雨项目前端部分

创建项目 pnpm i -g vue/cli vue create red_pakage pnpm i sass sass-locader -D pnpm i --save normalize.css pnpm i --save-dev postcss-px-to-viewportpnpm i vantlatest-v2 -S pnpm i babel-plugin-import -Dhttps://vant.pro/vant/v2/#/zh-CN/<van-button click&…
阅读更多...
蓝桥杯嵌入式备赛（三）—— LED +按键 + LCD

蓝桥杯嵌入式备赛（三）—— LED +按键 + LCD

目录 一、LED1、原理图介绍2、程序代码 二、按键1、原理图介绍2、程序代码 三、LCD1、原理图介绍2、程序代码 一、LED 1、原理图介绍 如果所示&#xff0c;STM32G431RBT6中有八个LED&#xff0c;由八个GPIO控制&#xff0c;分别为PC8-15&#xff0c;当输出为低电平时点亮。其中…
阅读更多...
[Java基础]函数式编程

[Java基础]函数式编程

Lambda函数 JDK8新增的语法形式, 使用Lambda函数替代某些匿名内部类对象&#xff0c;从而让程序代码更简洁&#xff0c;可读性更好。 基本使用 lambda表达式只能简化函数式接口的匿名内部类写法 // 1.定义抽象类 abstract class Animal {public abstract void crt(); }publi…
阅读更多...
Vim 多窗口编辑及文件对比

Vim 多窗口编辑及文件对比

水平分割 :split 默认使用水平分割的方式。 :split :sp 垂直分割 :vsplit :vs 带文件的分割 :split 文件名 :sp 文件名 在光标所在的窗口&#xff0c;输入分割窗口命令就会对那个窗口进行分割。 切换窗口 Ctrlw 切换正在编辑的窗口 快速分割窗口 Ctrlwn 快速分割当前…
阅读更多...
二级C语言题解：十进制转其他进制、非素数求和、重复数统计

二级C语言题解：十进制转其他进制、非素数求和、重复数统计

目录 一、程序填空&#x1f4dd; --- 十进制转其他进制 题目&#x1f4c3; 分析&#x1f9d0; 二、程序修改&#x1f6e0;️ --- 非素数求和 题目&#x1f4c3; 分析&#x1f9d0; 三、程序设计&#x1f4bb; --- 重复数统计 题目&#x1f4c3; 分析&#x1f9d0; 前言…
阅读更多...
使用服务器部署DeepSeek-R1模型【详细版】

使用服务器部署DeepSeek-R1模型【详细版】

文章目录 引言deepseek-r1IDE或者终端工具算力平台体验deepseek-r1模型总结 引言 在现代的机器学习和深度学习应用中&#xff0c;模型部署和服务化是每个开发者面临的重要任务。无论是用于智能推荐、自然语言处理还是图像识别&#xff0c;如何高效、稳定地将深度学习模型部署到…
阅读更多...
央行发布《贸易金融分布式账本技术要求》，参考架构包括5部分

央行发布《贸易金融分布式账本技术要求》，参考架构包括5部分

《银行科技研究社》（作者 木子剑）：2024年12月11日，中国人民银行发布金融行业标准《贸易金融分布式账本技术要求》（JR/T 0308-2024）（以下简称“《要求》”），当日实施。据悉，该文件的起草单位包括6大行和多家股份制银行等。 《要求》规定了分布式账本技术在贸易金融领域…
阅读更多...
Python aiortc API

Python aiortc API

本研究的主要目的是基于Python aiortc api实现抓取本地设备媒体流&#xff08;摄像机、麦克风&#xff09;并与Web端实现P2P通话。本文章仅仅描述实现思路&#xff0c;索要源码请私信我。 1 demo-server解耦 1.1 原始代码解析 1.1.1 http服务器端 import argparse import …
阅读更多...
记录 | WPF基础学习Style局部和全局调用

记录 | WPF基础学习Style局部和全局调用

目录 前言一、Style1.1 例子1.2 为样式起名字1.3 BasedOn 继承上一个样式 二、外部StyleStep1 创建资源字典BaseButtonStyle.xamlStep2 在资源字典中写入StyleStep3 App.xaml中写引用路径【全局】Step4 调用三、代码提供四、x:Key和x:Name区别 更新时间 前言 参考文章&#xff…
阅读更多...
吴恩达深度学习——卷积神经网络实例分析

吴恩达深度学习——卷积神经网络实例分析

内容来自https://www.bilibili.com/video/BV1FT4y1E74V&#xff0c;仅为本人学习所用。 文章目录 LeNet-5AlexNetVGG-16ResNets残差块 1*1卷积 LeNet-5 输入层&#xff1a;输入为一张尺寸是 32 32 1 32321 32321的图像&#xff0c;其中 32 32 3232 3232是图像的长和宽&…
阅读更多...
【Uniapp-Vue3】z-paging插件组件实现触底和下拉加载数据

【Uniapp-Vue3】z-paging插件组件实现触底和下拉加载数据

一、下载z-paing插件 注意下载下载量最多的这个 进入Hbuilder以后点击“确定” 插件的官方文档地址&#xff1a; https://z-paging.zxlee.cn 二、z-paging插件的使用 在文档中向下滑动&#xff0c;会有使用方法。 使用z-paging标签将所有的内容包起来 配置标签中的属性 在s…
阅读更多...
【B站保姆级视频教程：Jetson配置YOLOv11环境（七）Ultralytics YOLOv11配置】

【B站保姆级视频教程：Jetson配置YOLOv11环境（七）Ultralytics YOLOv11配置】

Jetson配置YOLOv11环境&#xff08;7&#xff09;Ultralytics YOLOv11环境配置 文章目录 1. 下载YOLOv11 github项目2. 安装ultralytics包3. 验证ultralytics安装3.1 下载yolo11n.pt权重文件3.2 推理 1. 下载YOLOv11 github项目 创建一个目录&#xff0c;用于存放YOLOv11的项目…
阅读更多...
第二天：系统从BIOS/UEFI到GRUB/bootloader的启动过程

第二天：系统从BIOS/UEFI到GRUB/bootloader的启动过程

目录 **一、BIOS/UEFI初始化阶段****二、引导加载程序&#xff08;GRUB&#xff09;的启动过程****1. BIOS模式下的GRUB分阶段加载****2. UEFI模式下的GRUB加载** **三、操作系统内核加载与初始化****四、关键组件与配置文件****五、故障排查与恢复****总结**常见问题如何在UEF…
阅读更多...
【容器技术01】使用 busybox 构建 Mini Linux FS

【容器技术01】使用 busybox 构建 Mini Linux FS

使用 busybox 构建 Mini Linux FS 构建目标 在 Linux 文件系统下构建一个 Mini 的文件系统&#xff0c;构建目标如下&#xff1a; minilinux ├── bin │ ├── ls │ ├── top │ ├── ps │ ├── sh │ └── … ├── dev ├── etc │ ├── g…
阅读更多...
【C语言系列】深入理解指针（5）

【C语言系列】深入理解指针（5）

深入理解指针&#xff08;5&#xff09; 一、sizeof和strlen的对比1.1sizeof1.2strlen1.3sizeof和strlen的对比 二、数组和指针笔试题解析2.1 一维数组2.2 字符数组2.2.1代码1&#xff1a;2.2.2代码2&#xff1a;2.2.3代码3&#xff1a;2.2.4代码4&#xff1a;2.2.5代码5&#…
阅读更多...
【蓝桥杯嵌入式】2_LED

【蓝桥杯嵌入式】2_LED

1、电路图 74HC573是八位锁存器&#xff0c;当控制端LE脚为高电平时&#xff0c;芯片“导通”&#xff0c;LE为低电平时芯片“截止”即将输出状态“锁存”&#xff0c;led此时不会改变状态&#xff0c;所以可通过led对应的八个引脚的电平来控制led的状态&#xff0c;原理图分析…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023