在后端网页的开发中，我们有时需要使用水平分割线来划分不同的文档分割线html，这样会让整个网页看起来美观整洁，同时也能体现出某个文字的重要性，那么水平分割线应该怎样设置呢？网页中的一行是什么？ 意识到？ 本文将与大家分享如何在html中实现水平分割线。
html中有一个标签，该标签可以很方便地设置一条较长的水平线。
我们先简单了解一下标签的定义。
标签在 HTML 页面中创建一条水平线； 水平标尺（horizontal Rule）可以在视觉上将文档分成各个部分。
在 HTML 中，标签是没有结束标签的单个标签。
接下来我们详细解释一下html
如何设置标签的水平分割线
标签设置横线的特点是100%长度的水平分割线，但是占用单行，并且标签设置的横线与上下内容会有一定的距离。
它是块级元素分割线html，因此占用单行，并且可以设置宽度和高度。
接下来我们看一下设置标签水平分割线的示例代码
桃之夭夭，灼灼其华。之子于归，宜其室家。
桃之夭夭，有蕡其实。之子于归，宜其家室。
桃之夭夭，其叶蓁蓁。之子于归，宜其家人。
标签设置水平分割线效果如下：
描述：标签和
这篇文章就到这里全部结束了。 关于标签更详细的内容，可以参考php英文网站上的html在线指南进一步了解。
前段时间在做项目迭代的时候，遇到一个需求，里面有一条分割线，大致是这样的：
然后在项目之前就听说了分割线的实现方式，基本上是这样实现的：
<div>物料下载(仅内网可下载)</div>
div{
height: 40px;
line-height: 40px;
text-align: center;
font-size: 12px;
color: #ccc;
position: relative;
margin-bottom: 15px;
&::before {
content: '';
position: absolute;
left: -20px;
top: 19px;
z-index: 1;
background-color: #ddd;
width: 35%;
height: 1px;
}
&::after {
content: '';
position: absolute;
right: -20px;
top: 19px;
z-index: 1;
background-color: #ddd;
width: 35%;
height: 1px;
}
}
于是，我搜索了一下，发现大家好像都是这样实现分割线的，于是我偷偷用自己的方法实现了一套“华丽”的【分割线】，以下是我的实现方法：
<fieldset>
<legend>物料下载(仅内网可下载)</legend>
</fieldset>
当我不添加任何样式时，它看起来像这样
现在分割线 html，让我们再添加一些样式：
fieldset {
border: 0;
border-top: 1px solid #ddd;
text-align: center;
legend {
padding: 0 5%;
}
}
当当当，只需几行款式，就能展现出与之前方案一模一样的疗效。 是不是一下子减少了很多工作量？ 您可以在我构建的 codePen 项目中看到这两种实现。
最后，我们来谈谈这里的fieldset和legend标签：
上面的截图是MDN中对其的解释和使用。
我们可以看到fieldset标签实际上是用来呈现分组样式的。 一般我们可能用的比较多的是形式。 除了legend元素之外，fieldset标签还可以包裹其他元素，但是legend的呈现方式会像这组我想到用这个来实现分割线，因为我在学习html很久的时候就记住了这个属性前一段时间，但我还没有实际使用过它，因为它的大部分样式都不能满足我们的UI。 设计，但这天我突发奇想，抱着尝试的心态，居然找到了它的“最佳实践”。 哈哈哈，推荐给你~
也欢迎您关注我，一起学习分割线 html，一起进步：
B站（短视频类别，基本控制在10分钟以内，把一个小知识点讲解清楚）：Web前端aliveAmy
CSDN：活着的艾米
掘金（之前没怎么用过雄鹿，以后会更新）：aliveAmy
如果您有任何疑问，也可以给我发邮件，我看到后会及时回复您：aliveAmy719@gmail.com
