探索HTML线的无限可能

在HTML中，线（line）是一种基本的图形元素，它可以帮助我们创建各种形状和图案，HTML线可以通过<hr>标签来创建水平线，通过 标签来创建换行，以及通过CSS样式来创建自定义的线。

我们来看一下如何使用<hr>标签来创建水平线。<hr>标签是一个自闭合标签，它不需要任何结束标签，你可以在HTML文档中的任何地方插入一个<hr>标签，它将在页面上创建一个水平线。

<!DOCTYPE html>
<html>
<head>
    <title>HTML Line Example</title>
</head>
<body>
    <h1>Welcome to my website!</h1>
    <hr>
    <p>This is a paragraph.</p>
    <hr>
    <p>This is another paragraph.</p>
</body>
</html>

在上面的例子中，我们在两个段落之间插入了两个<hr>标签，这将在页面上创建两个水平线。

接下来，我们来看一下如何使用 标签来创建换行。 标签也是一个自闭合标签，它也不需要任何结束标签，你可以在HTML文档中的任何地方插入一个 标签，它将在页面上创建一个换行。

<!DOCTYPE html>
<html>
<head>
    <title>HTML Line Example</title>
</head>
<body>
    <p>This is a long paragraph that will be broken into multiple lines using the <br> tag.</p>
</body>
</html>

在上面的例子中，我们在一个段落中使用了多个 标签，这将使段落中的文本在需要时自动换行。

我们来看一下如何使用CSS样式来创建自定义的线，你可以使用CSS的border属性来创建线。

<!DOCTYPE html>
<html>
<head>
    <title>HTML Line Example</title>
    <style>
        .custom-line {
            border-top: 2px solid black;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="custom-line"></div>
</body>
</html>

在上面的例子中，我们创建了一个名为.custom-line的CSS类，它使用border-top属性来创建一个顶部有黑色线条的线，我们在HTML文档中创建了一个<div>元素，并为其添加了.custom-line类，这将在页面上创建一个自定义的线。