【0010】HTML水平线标签详解
如果你觉得我的文章写的不错,请关注我哟,请点赞、评论,收藏此文章,谢谢!
本文内容体系结构如下:

一、水平线标签概述
在HTML中,<hr>标签用于在网页上插入一条水平线,其主要目的是分隔网页上的不同内容区域,以增强网页的可读性和结构清晰度。<hr>是一个空元素,这意味着它不需要闭合标签。XHTML及HTML5中水平线标签推荐写法为<hr />
二、<hr>和<hr />的区别
<hr>和<hr />在HTML中均用于表示水平线标签,但在不同的HTML版本和规范中,它们的用法和推荐程度有所不同。以下是两者的详细区别:
2.1 语法结构
<hr>:这是HTML4.01及更早版本中常见的写法,表示一个开始标签,没有结束标签。因为<hr>是一个空元素,它不需要包含任何内容。<hr />:这是XHTML及HTML5中更推荐的写法。在XHTML中,所有的空元素都必须被正确地自闭合,因此<hr />是符合XHTML规范的写法。在HTML5中,虽然自闭合不是强制性的,但<hr />仍然被广泛接受和使用,因为它提供了更好的兼容性和清晰性。
2.2 浏览器兼容性
- 无论是
<hr>还是<hr />,现代的主流浏览器都能够正确地解析和渲染它们。因此,从浏览器兼容性的角度来看,两者没有实质性的差异。
2.3 语义清晰性
- 使用
<hr />可以更清晰地表明这是一个自闭合的标签,这对于阅读和维护HTML代码的人来说是有益的。它有助于避免混淆和误解,特别是在复杂的HTML结构中。
2.4 最佳实践
- 尽管在HTML5中
<hr>和<hr />>都是有效的,但出于语义清晰性和兼容性的考虑,推荐使用
`作为水平线标签的写法。 - 值得注意的是,在HTML5中,
<hr>标签被赋予了更多的语义意义,它不仅仅表示一条水平线,还用于表示段落级元素之间的主题转换。因此,在使用<hr>标签时,应该考虑到它在网页结构和语义上的作用。
综上所述,<hr>和<hr />>在功能上是等效的,但出于语义清晰性、兼容性和最佳实践的考虑,推荐使用<hr />作为水平线标签的写法。
三、<hr />标签的基础语法
3.1 语法结构
<hr />
这是<hr />标签最简单的使用方式。它不需要任何属性,只需要在需要插入水平线的位置放置该标签。
浏览器渲染效果如下图所示:

3.2 可选属性(历史遗留)
尽管在HTML5中,<hr />标签不再支持align、color、size、width等属性,但了解这些历史遗留属性有助于理解<hr />标签的演变。
align:指定水平线的对齐方式(左对齐、右对齐或居中对齐)。color:设置水平线的颜色。size:定义水平线的高度(厚度)。width:指定水平线的宽度(百分比或具体像素值)。
代码如下所示:
<!-- 设置水平线对齐方式为左对齐,颜色为红色,厚度(高度)为10px,宽度为100px -->
<hr align="left" color="red" size="10px" width="100px"/><!-- 设置水平线对齐方式为左对齐,颜色为蓝色,厚度(高度)为20px,宽度为浏览器宽度的30% -->
<hr align="center" color="blue" size="20px" width="30%"/><!-- 设置水平线对齐方式为左对齐,颜色为绿色,厚度(高度)为30px,宽度为浏览器宽度的50% -->
<hr align="right" color="green" size="30px" width="50%"/>
浏览器渲染效果如下:

注意:在现代HTML和CSS实践中,推荐使用CSS来设置这些样式属性。
四、<hr />标签的HTML历史背景
在HTML4及更早版本中,<hr>标签支持上述提到的可选属性。然而,随着HTML5的推出,这些属性被废弃,因为CSS提供了更灵活和强大的样式设置方式。
五、<hr />标签的默认渲染效果
在不使用CSS进行样式自定义的情况下,<hr />标签的默认渲染效果因浏览器而异。但大多数情况下,它表现为一条细线,颜色、宽度和高度由浏览器的默认样式表决定。
六、使用<hr />标签分隔内容
<hr />标签常用于分隔网页上的不同部分,如段落、章节、文章等。它提供了一种视觉上的分隔,帮助用户更容易地浏览和理解网页内容。
6.1 示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>使用<hr />标签分隔内容示例</title>
</head>
<body><h1>文章标题</h1><p>这是文章的引言部分。</p><hr /><h2>文章正文</h2><p>这是文章的正文部分,包含主要的信息。</p><hr /><h2>文章结论</h2><p>这是文章的结论部分,总结了文章的主要观点。</p><hr /><p>感谢阅读!</p>
</body>
</html>
在上述示例中,<hr />标签被用来分隔文章的引言、正文、结论和感谢语部分。

七、<hr />标签与SEO的关系
从SEO的角度来看,<hr />标签本身对搜索引擎排名没有直接影响。然而,合理使用<hr />标签可以帮助改善网页的可读性和结构,从而间接提升用户体验,这对SEO是有益的。
八、<hr />标签的常见误区
- 误区一:认为
<hr />标签只能用于分隔段落。实际上,<hr />标签可以用于分隔任何需要视觉分隔的内容区域。 - 误区二:在HTML5中仍然使用废弃的属性(如
align、color、size、width)。这些属性在HTML5中已被废弃,应使用CSS来设置样式。 - 误区三:过度使用
<hr />标签。过多的水平线可能会使网页看起来杂乱无章,影响用户体验。
九、总结
通过本课程的学习,你将能够更深入地理解HTML中<hr />标签的用法、历史背景、默认渲染效果以及在实际网页设计中的应用。希望这些信息能够帮助你更有效地使用<hr />标签来分隔网页内容,提升网页的可读性和结构清晰度。
相关文章:
【0010】HTML水平线标签详解
如果你觉得我的文章写的不错,请关注我哟,请点赞、评论,收藏此文章,谢谢! 本文内容体系结构如下: 一、水平线标签概述 在HTML中,<hr>标签用于在网页上插入一条水平线,其主要…...
FastExcel与Reactor响应式编程深度集成技术解析
一、技术融合背景与核心价值 在2025年企业级应用开发中,大规模异步Excel处理与响应式系统架构的结合已成为技术刚需。FastExcel与Reactor的整合方案,通过以下技术协同实现突破性性能: 内存效率革命:FastExcel的流式字节操作与Re…...
Netty是如何实现零拷贝的?
大家好,我是锋哥。今天分享关于【Netty是如何实现零拷贝的?】面试题。希望对大家有帮助; Netty是如何实现零拷贝的? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Netty是一个高性能的Java网络应用框架,它…...
【大模型➕知识图谱】大模型结合医疗知识图谱:解锁智能辅助诊疗系统新范式
【大模型➕知识图谱】大模型结合医疗知识图谱:解锁智能辅助诊疗系统新范式 大模型结合医疗知识图谱:解锁智能辅助诊疗系统新范式引言一、系统架构1.1 系统架构图1.2 架构模块说明1.2.1 用户输入1.2.2 大模型(语义理解与意图识别)1.2.3 Agent(问题解析与任务分配)1.2.4 问…...
Spring Boot @Component注解介绍
Component 是 Spring 中的一个核心注解,用于声明一个类为 Spring 管理的组件(Bean)。它是一个通用的注解,可以用于任何层次的类(如服务层、控制器层、持久层等)。通过 Component 注解,Spring 会…...
MulFS-CAP: Multimodal Fusion-supervisedCross-modal
一种用于无注册红外-可见图像融合的单阶段框架。与传统的两阶段方法不同,MulFS-CAP结合了隐式注册和融合,简化了处理流程并增强了实用性。该方法使用共享的浅层特征编码器,同时进行特征对齐和图像融合。通过引入可学习的模态字典,…...
WordPress多语言插件GTranslate
GTranslate是一个免费的WordPress多语言插件,它允许您将网站内容翻译成多种语言。这个插件提供了一个简单易用的界面,让您可以在WordPress后台直接进行翻译操作。以下是GTranslate插件的一些主要特点: 免费使用:GTranslate插件完…...
wordpress子分类调用父分类名称和链接的3种方法
专为导航而生,在wordpress模板制作过程中常常会在做breadcrumbs导航时会用到,子分类调用父分类的名称和链接,下面这段简洁的代码,可以完美解决这个问题。 <?php echo get_category_parents( $cat, true, » ); ?…...
Prometheus + Grafana 监控
Prometheus Grafana 监控 官网介绍:Prometheus 是一个开源系统 监控和警报工具包最初由 SoundCloud 构建。自 2012 年成立以来,许多 公司和组织已经采用了 Prometheus,并且该项目具有非常 活跃的开发人员和用户社区。它现在是一个独立的开源…...
初学STM32之简单认识IO口配置(学习笔记)
在使用51单片机的时候基本上不需要额外的配置IO,不过在使用特定的IO的时候需要额外的设计外围电路,比如PO口它是没有内置上拉电阻的。因此若想P0输出高电平,它就需要外接上拉电平。(当然这不是说它输入不需要上拉电阻,…...
springboot2.7.18升级springboot3.3.0遇到的坑
druid的警告,警告如下: 运行警告2025-02-28T09:20:31.28508:00 WARN 18800 --- [ restartedMain] trationDelegate$BeanPostProcessorChecker : Bean com.alibaba.druid.spring.boot3.autoconfigure.stat.DruidSpringAopConfiguration of type [com.a…...
gtest 和 gmock讲解
Google Test(gtest)和 Google Mock(gmock)是 Google 开发的用于 C 的测试框架和模拟框架,以下是对它们的详细讲解: Google Test(gtest) 简介 Google Test 是一个用于 C 的单元测试框…...
GC垃圾回收介绍及GC算法详解
目录 引言 GC的作用域 什么是垃圾回收? 常见的GC算法 1.引用计数法 2.复制算法 3.标记清除 4.标记整理 小总结 5.分代收集算法 ps:可达性分析算法? 可达性分析的作用 可达性分析与垃圾回收算法的关系 结论 引言 在编程世界中,…...
2020 年英语(一)考研真题 笔记(更新中)
Section I Use of English(完型填空) 原题 Directions:Read the following text. Choose the best word (s) for each numbered blank and mark A, B, C or D on the ANSWER SHEET. (10 points) Even if families are less likely to si…...
【springboot】Spring 官方抛弃了 Java 8!新idea如何创建java8项目
解决idea至少创建jdk17项目 问题 idea现在只能创建最少jdk17,不能创建java8了吗?解决 问题 idea现在只能创建最少jdk17,不能创建java8了吗 我本来以为是 IDEA 版本更新导致的 Bug,开始还没在意。 直到我今天自己初始化项目时才发现&am…...
playbin之autoplug_factories源码剖析
一、autoplug_factories_cb /* Called when we must provide a list of factories to plug to pad with caps.* We first check if we have a sink that can handle the format and if we do, we* return NULL, to expose the pad. If we have no sink (or the sink does not…...
正浩创新内推:校招、社招EcoFlow社招内推码: FRQU1CY
EcoFlow社招内推码: FRQU1CY 投递链接: https://ecoflow.jobs.feishu.cn/s/Vo75bmlNr6c...
一文了解:部署 Deepseek 各版本的硬件要求
很多朋友在咨询关于 DeepSeek 模型部署所需硬件资源的需求,最近自己实践了一部分,部分信息是通过各渠道收集整理,so 仅供参考。 言归正转,大家都知道,DeepSeek 模型的性能在很大程度上取决于它运行的硬件。我们先看一下…...
有没有什么免费的AI工具可以帮忙做简单的ppt?
互联网各领域资料分享专区(不定期更新): Sheet 正文 1. 博思AIPPT 特点:专为中文用户设计,支持文本/文件导入生成PPT,内置海量模板和智能排版功能,涵盖商务、教育等多种场景。可一键优化布局、配色,并集成AI绘图功能(文生图/图生图)。适用场景:职场汇报、教育培训、商…...
python绘图之灰度图
灰度图(Gray Scale Image)是一种将图像中的像素值映射到灰度范围(通常是0到255)的图像表示方式。它在图像处理和计算机视觉中具有重要作用.本节学习使用python绘制灰度图 # 导入必要的库 import numpy as np import matplotlib.py…...
UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
工程地质软件市场:发展现状、趋势与策略建议
一、引言 在工程建设领域,准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具,正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...
安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?
现有的 Redis 分布式锁库(如 Redisson)相比于开发者自己基于 Redis 命令(如 SETNX, EXPIRE, DEL)手动实现分布式锁,提供了巨大的便利性和健壮性。主要体现在以下几个方面: 原子性保证 (Atomicity)ÿ…...
快刀集(1): 一刀斩断视频片头广告
一刀流:用一个简单脚本,秒杀视频片头广告,还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农,平时写代码之余看看电影、补补片,是再正常不过的事。 电影嘛,要沉浸,…...
Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要: 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式(自动驾驶、人工驾驶、远程驾驶、主动安全),并通过实时消息推送更新车…...
