html连续的横线怎么打

在HTML中，创建连续的横线（通常被称为水平线或水平规则）可以通过使用<hr>标签来实现，这是一个空的标签，意味着它没有结束标签，并且不包含任何内容，当浏览器解释到这个标签时，它会在页面上绘制一条水平线。

基本用法

HTML中的<hr>标签非常直接，只需在需要横线出现的位置插入该标签即可。

<p>这是一些文本。</p>
<hr>
<p>这是另一些文本。</p>

在上述代码中，两条段落之间会显示一条水平线。

自定义样式

默认情况下，<hr>标签生成的水平线是直的、灰色的、1像素高的，你可以使用CSS来改变它的外观，包括颜色、高度、宽度、样式等。

设置颜色

要更改水平线的颜色，可以使用CSS的color属性，但是请注意，<hr>标签本身不支持color属性，你需要通过设置边框颜色来达到目的。

<hr style="border-color: red;">

设置高度和宽度

通过设置height属性可以改变水平线的高，通过设置width属性可以改变水平线的宽。

<hr style="height: 5px; width: 80%;">

在上面的例子中，水平线的高被设置为5像素，宽被设置为页面宽度的80%。

添加样式

除了简单的直线外，还可以给水平线添加样式，如虚线、点状线等，这可以通过CSS的border-style属性来完成。

<hr style="border-style: dotted;">

上面的代码将生成一个点状的水平线。

兼容性和替代方法

虽然<hr>标签在现代浏览器中广泛支持，但在某些旧版本的浏览器中可能会遇到问题，为了更好的兼容性，有些开发者会选择使用其他元素和CSS来模拟水平线，比如使用<div>元素结合边框样式。

<div style="border-top: 1px solid black; width: 100%;"></div>

这种方法的好处是可以更精细地控制水平线的样式，并且兼容性更好，不过，对于简单的应用来说，直接使用<hr>标签通常已经足够了。

常见问题与解答

Q1: 如何移除默认的间距？

A1: <hr>标签默认会在其上下有一定的空白间距，如果希望去掉这个间距，可以使用CSS的margin属性设置为0。

<hr style="margin: 0;">

Q2: 如何让水平线居中？

A2: 如果想让水平线在页面中居中显示，可以使用CSS的margin-left和margin-right属性进行设置。

<hr style="margin-left: auto; margin-right: auto;">

或者，将<hr>标签放入一个容器中，并使容器居中也是一个好方法。

<div style="text-align: center;">
    <hr>
</div>

以上就是关于HTML中如何打出连续的横线的一些基本介绍和技巧，通过合理运用<hr>标签和CSS，可以方便地在网页中创建出满足不同设计需求的水平线。