HTML 自学第一天之旅：全面剖析水平线标签与换行标签

2024-02-01 06:21:53

网页美观新视界：水平线标签

在HTML的世界里，水平线标签如同一条优雅的分割线，将网页的内容自然隔开，让网页变得更加美观有序。其代码简单明了，使用起来十分方便：

<hr/>

想要在网页中加入水平线，只需要在合适的位置加上这个代码即可。水平线将会自动生成一条横跨整个网页的直线，有效地将内容区隔开。

来看一个简单的例子：

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h1>这是标题一</h1>
<hr/>

<p>这是段落一</p>
<hr/>

<p>这是段落二</p>

</body>
</html>

运行这段代码，你将会看到水平线将网页中的标题和段落清晰地区分开来。网页内容一目了然，更加美观大方。

文本排版的利器：换行标签

有时，我们希望网页中的文本能够在特定的位置换行，以便更好地展示内容。这时候，换行标签就派上用场了。它的代码同样简单：

<br/>

通过在需要换行的位置加上这个代码，就可以轻松实现换行的效果。

举个例子：

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h1>这是标题一</h1>

<p>这是段落一。这是段落一。这是段落一。</p>

<br/>

<p>这是段落二。这是段落二。这是段落二。</p>

</body>
</html>

运行这段代码，你会发现第一段落中的文本在三个地方换行，而第二段落中的文本则在两个地方换行。这使得文本更加整齐易读，也更具美感。

完美排版的秘密武器：文字标签

文字标签是HTML中不可或缺的元素，它能够让网页中的文字拥有不同的样式，从而让网页更加美观。其代码如下：

<span>文字</span>

在使用文字标签时，可以通过在span标签中添加style属性来设置文字的样式。例如，要将文字的颜色设置为红色，可以这样写：

<span style="color: red;">文字</span>

当然，你也可以设置文字的大小、字体、加粗等样式。

再来看一个例子：

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h1>这是标题一</h1>

<p>这是段落一。这是段落一。这是段落一。</p>

<span style="color: red;">这是红色的文字。</span>

<p>这是段落二。这是段落二。这是段落二。</p>

</body>
</html>