masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > html水平分割线怎么设置？html水平分割线的代码示例讲解

html水平分割线怎么设置？html水平分割线的代码示例讲解

不言
Lepaskan： 2018-10-31 11:29:36
asal
42696 orang telah melayarinya

在前端网页的开发中我们有时候需要用到水平分割线来分割不同的文档，会让整个网页看起来美观和整洁，也会凸显某一段文字的重要性，那么网页中水平分割线该如何实现呢？ 本篇文章就给大家来分享一下html水平分割线的实现方法。

在html中有一个

标签，
标签可以非常轻松地久设置一条水平线。

我们先来简单看一下

标签的定义

标签在 HTML 页面中创建一条水平线；水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

在 HTML 中，

标签是一个单标签，没有结束标签。

接着我们就来详细讲解一下html中的
标签如何设置水平分割线

标签设置水平线的特点是100%宽度水平分割线，并且独占一行，
标签设置的水平线将与上下内容有一定距离。

是块级元素，所以
独占于一行并且可以设置宽高。

下面我们就来看看

标签设置水平分割线的实例代码

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p >
           桃之夭夭，灼灼其华。之子于归，宜其室家。
           <hr width="300" align="left">
           桃之夭夭，有蕡其实。之子于归，宜其家室。
           <hr width="300" align="left">
           桃之夭夭，其叶蓁蓁。之子于归，宜其家人。
           <hr width="300" align="left">
        </p> 
    </body>
</html>
Salin selepas log masuk

标签设置水平分割线效果如下：

2345截图20181031111808.png

说明：

标签和
标签一样也会强制执行一个简单的换行，段落对齐会重新回到左对齐。

本篇文章到这里就全部结束了，关于

标签的更多详细内容大家可以参考php中文网的html在线手册进一步了解。

Atas ialah kandungan terperinci html水平分割线怎么设置？html水平分割线的代码示例讲解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
html水平分割线
sumber：php.cn
Artikel sebelumnya：做网页需要什么软件？五个好用的网页编辑器软件推荐 Artikel seterusnya：HTML编辑器有哪些？最好用的4款HTML编辑器推荐
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2268
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2401
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
2015
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1900
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1970
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan