HTML示例06---水平线

最新推荐文章于 2025-02-26 10:40:06 发布

原创最新推荐文章于 2025-02-26 10:40:06 发布 · 6.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html #水平线 #宽度

前端基本知识点专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了HTML5中水平线元素的使用方法及其属性，包括宽度、高度和颜色的设置，展示了如何通过简单的代码实现文档结构的清晰划分，提高页面的可读性和美观度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.说明

水平线用于段落与段落之间的间隔，使文档结构清晰明白，也使文字的编排更整齐。水平线自身具有很多的属性，如宽度、高度、颜色、排列对齐等。在HTML5中经常会用到水平线，合理使用水平线可以获得非常好的页面装饰效果。一篇内容繁杂的文档，如果合理放置几条水平线，就会变得层次分明，便于阅读。

语法：

<hr>

下面给出一个设置水平线及宽度的示例。

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平线的宽度、高度、颜色</title>
</head>
<body>
<!--设置水平线的宽度、居左-->
<hr width=" 200" align="left">
<p>故事是这样开始的:</p>
<p align="center">
    当时看《简爱》的时候，哭的稀里哗啦
</p>
<p align="center">
    泪点在哪里呢？
</p>
<p align="center">
    我喜欢悲伤的故事
</p>
<p align="center">
    不喜欢悲伤的结局
</p>
<!--设置水平线的宽度、居右-->
<hr width=" 200" align="right">
<p align="right">故事是这样结束的</p>
</body>
</html>

3.运行结果