本文教你如何在HTML中创建水平线。水平线可以用来分隔网站上的内容。创建一行的代码非常简单。但是，你可以在HTML 4.01中添加嵌入代码来设计行。在HTML5中，你需要使用CSS对行进行样式设置。 打开或创建一个新的HTML文档。可以使用文本编辑器（如"记事本"）编辑HTML文档。你还可以使用代码编辑器，如Adobe Dreamweaver。使用以下步骤在程序中打开HTML文档或者采用其他方法： 打开"记事本"，或者文本编辑器和代码编辑器。 点击文件菜单。 点击打开。...
方法 1 ：使用HTML-4.01
1、打开或创建一个新的HTML文档。
可以使用文本编辑器（如“记事本”）编辑HTML文档。你还可以使用代码编辑器，如Adobe Dreamweaver。使用以下步骤在程序中打开HTML文档或者采用其他方法：
- 打开“记事本”，或者文本编辑器和代码编辑器。
- 点击文件菜单。
- 点击打开。
- 选择HTML文件。
- 点击打开
2、选择要插入行的位置。
向下滚动，直到找到要插入这行的上面一行，然后点击这行的最左侧，将光标直接放在这一行的最前面。
3、创建空白区域。
按两次Enter，向下移动你想要在上面输入行的文本，然后将光标向上移动到空白区域。
4、添加"<hr>"标签。
在行开始前的空格中输入<hr>。<hr>标签负责在整个页面上创建一条水平线。
5、将“hr”标签前面的行移到新行上。
按Enter即可。这时， <hr>标签应该就在自己的那一行了。
6、向水平线添加属性（可选）。
你可以向水平线添加属性，例如长度、宽度、颜色和对齐。在代码括号中的“hr”后面使用以下代码。可以在括号中添加多个属性，方法是用空格分隔它们。
- 输入<hr size="#">更改行的粗细。用粗细的数字（如，size="10"）替换#。
- 输入<hr width="#">更改行的宽度。用宽度的像素数或页面宽度的百分比（如，width="200", or width="75%"）替换#。
- 输入<hr color="#">更改行的颜色。用颜色或十六进制代码的名称（如，color="red" or color="#FF0000"）替换#。
- 输入<hr align="#">对齐行。用"right"、"left"或"center"（如，<hr width="50%" align="center">）替换#。
7、保存HTML文件。
要将文本文件保存为HTML文档，你需要将文件扩展名（.txt、.docx）替换成“.html”。使用下列步骤保存HTML文件：
- 点击文件菜单。
- 点击另存为。
- 在“文件名”旁边输入文件名称。
- 在文件名末尾输入.html。
- 点击保存。
8、测试HTML。
右击文件，选择打开方式。然后选择网页浏览器。在“hr”标签的位置应该会出现一条实线。你的HTML代码应该是这样的：
<!DOCTYPE html>
<html>
<body>
<h1>这是标题</h1>
<hr size="6" width="50%" align="left" color="green">
<p1>这是段落文本，与标题之间用一行隔开。</p1>
</body>
</html>
方法 2 ：使用CSS和HTML5
1、打开或创建一个新的HTML文档。
可以使用文本编辑器（如“记事本”）编辑HTML文档。你还可以使用代码编辑器，如Adobe Dreamweaver。使用以下步骤在程序中打开HTML文档或者采用其他方法：
- 打开“记事本”，或者文本编辑器和代码编辑器。
- 点击文件菜单。
- 点击打开。
- 选择HTML文件。
- 点击打开
2、在HTML文档中添加head标签。
如果HTML文档还没有head标签，采用以下步骤添加head标签。head标签位于“<html>”标签后面，“<body>”标签的前面。
- 在文档顶部输入<head>。
- 按两次Enter添加新的两行。
- 输入</head>结束head标签。
3、在head标签内输入<style type="text/css">。
style标签位于两个head标签之间。这样就创建了一个位置，你可以在其中输入CSS代码来设置HTML的样式。
- 或者你也可以用外部样式表。查看"如何将CSS文件添加到HTML"了解如何将外部CSS文件链接到HTML文件。
4、输入 hr {。
这是用于设置水平线样式的CSS标签。在head标签内的style标签后添加它，或者在外部CSS文件中添加。
5、添加"<hr>"标签的CSS样式。
这些样式在"hr {"标签的后面。设置水平线样式的方法有很多。下面提供一些示例。
- 输入width: ##px;设置行宽度。用行宽的像素数替换##。你还可以使用百分比（%）代替像素（px）。
- 输入height: ##px;设置行的粗细。用行粗细的像素数替换##。
- 输入background-color: ##;设置行的颜色。将##替换为颜色名称，或井号（#）后面加上十六进制颜色代码。
- 输入margin-right: ##px;设置右边距像素数。用像素数或“自动”替换##。输入“自动”将行左对齐或中间对齐。
- 输入margin-left: ##px;设置左边距像素数。用像素数或“自动”替换##。输入“自动”将行右对齐或中间对齐。
- 输入margin-top: ##px; 设置行的顶部外边距。将##替换为页边距的大小或像素数。
- 输入margin-bottom: ##px;设置行的底部外边距。将##替换为页边距的大小或像素数。
- 输入border-width: ##px;创建行周围的边框（可选）。用边框粗细的像素数替换##。
- 输入border-color: ##;设置边框颜色（可选）。将##替换为颜色名称，或者井号（#）后面加上十六进制颜色代码。
6、在样式设置后输入}。
这样就会关闭<hr>标签的样式设置。
7、在HTML文档body标签中的任意位置输入<hr>。
这样就会向HTML文档添加一条水平线。任何时候在HTML文档中使用<hr>标签时，CSS样式设置都会适用。你的代码应该是这样的：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
hr {
width: 50%;
height: 20px;
background-color: red;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 5px;
border-width: 2px;
border-color: green;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<hr>
<p1>这是用水平线分隔的段落文本</p1>
</body>
</html>
