如何在HTML中插入一行

下载PDF文件

本文教你如何在HTML中创建水平线。水平线可以用来分隔网站上的内容。创建一行的代码非常简单。但是，你可以在HTML 4.01中添加嵌入代码来设计行。在HTML5中，你需要使用CSS对行进行样式设置。^{[1]X研究来源}

方法 1

方法 1 的 2:

使用HTML 4.01

下载PDF文件

1
打开或创建一个新的HTML文档。可以使用文本编辑器（如“记事本”）编辑HTML文档。你还可以使用代码编辑器，如Adobe Dreamweaver。使用以下步骤在程序中打开HTML文档或者采用其他方法：
- 打开“记事本”，或者文本编辑器和代码编辑器。
- 点击文件菜单。
- 点击打开。
- 选择HTML文件。
- 点击打开
向下滚动，直到找到要插入这行的上面一行，然后点击这行的最左侧，将光标直接放在这一行的最前面。
按两次Enter，向下移动你想要在上面输入行的文本，然后将光标向上移动到空白区域。
在行开始前的空格中输入<hr>。<hr>标签负责在整个页面上创建一条水平线。
按Enter即可。这时， <hr>标签应该就在自己的那一行了。
6
向水平线添加属性（可选）。你可以向水平线添加属性，例如长度、宽度、颜色和对齐。在代码括号中的“hr”后面使用以下代码。可以在括号中添加多个属性，方法是用空格分隔它们。^{[2]X研究来源}
- 输入<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代码应该是这样的： ^{[3]X研究来源}
```
<!DOCTYPE html><html><body><h1>这是标题</h1><hr size="6" width="50%" align="left" color="green"><p1>这是段落文本，与标题之间用一行隔开。</p1></body></html>
```
广告

方法 2

方法 2 的 2:

使用CSS和HTML5

下载PDF文件

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文件。
这是用于设置水平线样式的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: ##;设置边框颜色（可选）。将##替换为颜色名称，或者井号（#）后面加上十六进制颜色代码。
这样就会关闭<hr>标签的样式设置。

How.com.vn 中文: Step 7 在HTML文档body标签中的任意位置输入<hr>。

这样就会向HTML文档添加一条水平线。任何时候在HTML文档中使用<hr>标签时，CSS样式设置都会适用。^{[4]X研究来源}你的代码应该是这样的：

<!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>