内容

• 脚步
• 方法 1（共 2 个）：使用 HTML 4.01
• 方法 2 of 2：使用 CSS / HTML5

本文将向您展示如何在 HTML 中添加水平线。水平线可用于分隔站点上的内容。创建该行的代码非常简单。但是，在 HTML 4.01 中，可以使用内部命令更改行的设计。在 HTML5 中，您必须使用 CSS 来设置线条的样式。

脚步

方法 1（共 2 个）：使用 HTML 4.01

1. 1 打开一个现有的或创建一个新的 HTML 文档。 HTML 文档可以使用文本编辑器（如记事本）或专用代码编辑器（如 Adob​​e Dreamweaver）进行编辑。按照以下步骤在您选择的程序中打开 HTML 文档：
   • 打开记事本或其他文本/代码编辑器。
   • 打开菜单 文件.
   • 点击 打开.
   • 选择 HTML 文件。
   • 点击 打开
2. 2 选择要插入线条的位置。 向下滚动，直到找到该行应出现在其上方的行，然后单击该行的最左侧，将光标直接移动到该行的开头。
3. 3 添加一个空行。 双击 ↵ 输入向下移动要在其前面插入一行的文本，然后将光标置于空行上。
4. 4 添加 hr> 标签。 进入 小时> 到行首的空白处。标签 小时> 允许您在整个页面上绘制一条水平线。
5. 5 通过按将“hr”标签后的光标移动到新行 ↵ 输入. 现在标签 小时> 应该在一个单独的行上。
6. 6 向水平线添加属性（可选）。 添加属性，例如长度、厚度、颜色和对齐方式。在“hr”之后立即将它们括在花括号中。要添加多个属性，请用空格分隔它们。
   • 进入 小时大小 = "#">改变线的粗细。将“#”替换为数字厚度值（例如，size =“10”）。
   • 进入 小时宽度 = "#">改变线宽。将“#”替换为像素数或页面宽度的百分比（例如，width = “200”或 width = “75%”）。
   • 进入 hr 颜色 = "#">更改线条颜色。将“#”替换为颜色名称或其十六进制代码（例如，color = “red”或 color = “#FF0000”）。
   • 进入 小时对齐 = "#">对齐线。将“#”替换为“right”（右）、“left”（左）或“center”（中心）（例如， hr 宽度 = "50%" align = "center">).
7. 7 保存 HTML 文件。 要将文本文件另存为 HTML 文档，您必须将文件扩展名（.txt、.docx）更改为“.html”。按照以下步骤保存您的 HTML 文档：
   • 打开菜单 文件.
   • 点击 另存为.
   • 在文件名字段中输入文件的名称。
   • 添加 .html 在文件名之后。
   • 点击 节省.
8. 8 检查您的 HTML 文档。 要检查 HTML 文件，请右键单击它并选择打开方式。然后选择您的网络浏览器。插入“hr”标签的地方应该会出现一条实线。 HTML 代码如下所示：

   !DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> 这行要和heading用一行分开./p1>/body>/html>

方法 2 of 2：使用 CSS / HTML5

1. 1 打开一个现有的或创建一个新的 HTML 文档。 HTML 文档可以使用文本编辑器（如记事本）或专用代码编辑器（如 Adob​​e Dreamweaver）进行编辑。按照以下步骤在您选择的程序中打开 HTML 文档：
   • 打开记事本或其他文本/代码编辑器。
   • 打开菜单 文件.
   • 点击 打开.
   • 选择 HTML 文件。
   • 点击 打开
2. 2 为 HTML 文档添加标题。 如果您的 HTML 文档还没有标题，请按照以下步骤添加一个标题。标题必须在 html> 标签之后和 body> 标签之前。
   • 进入 头> 在文档的顶部。
   • 双击 ↵ 输入添加两个新行。
   • 进入 /头>关闭标题。
3. 3 进入 样式类型 = "文本 / css"> 在标题内。 style 标签放置在两个标题标签之间，以创建一个可以使用 CSS 修改 HTML 设计的地方。
   • 或者，您可以使用外部样式表。阅读文章 ”如何在 HTML 中插入 CSS 文件»了解如何将外部 CSS 文件链接到 HTML 文件。
4. 4 进入 小时{. 这是用于设置水平线样式的 CSS 标签。将它添加到标题或外部 CSS 文件中的“style”标签之后。
5. 5 为 hr> 标签添加 CSS 样式。 它们必须在“hr {”标签之后。可以通过多种方式设计水平线的样式。下面是其中的一些。
   • 进入 宽度：## 像素；调整线宽。将“##”替换为以像素为单位的线宽。您可以使用百分比 (%) 代替像素 (px)。
   • 进入 高度：## 像素；调整线宽。将“##”替换为以像素为单位的线宽。
   • 进入 背景颜色： ＃＃;指定线条颜色。将“##”替换为颜色名称或哈希 (#)，后跟十六进制颜色代码。
   • 进入 边距右：## px；指定从右边缘开始的像素数。将“##”替换为像素数或代码“auto”。输入“auto”将线条向左或居中对齐。
   • 进入 左边距：## px；指定距左边缘的像素数。将“##”替换为像素数或代码“auto”。输入“auto”以将线条向右或居中对齐。
   • 进入 边距顶部：## 像素； 指定行的顶部填充。将“##”替换为与以像素为单位的填充相对应的数字。
   • 进入 边距底部：## 像素；指定行的底部填充。将“##”替换为与以像素为单位的填充相对应的数字。
   • 进入 边框宽度：## px；围绕线画一个框（可选）。将“##”替换为与边框宽度相对应的数字（以像素为单位）。
   • 进入 边框颜色： ＃＃;指定边框颜色（可选）。将“##”替换为颜色名称或哈希 (#)，后跟十六进制颜色代码。
6. 6 进入 } 在样式属性之后完成 hr> 标签的样式设置。
7. 7 进入 小时> 在 HTML 文档正文的任何​​位置添加一条水平线。 每次在 HTML 文档中使用 hr> 标签时，都会应用 CSS 样式设置。您的代码应如下所示：

   !DOCTYPE html> html> head> style type = "text / css"> hr {width: 50%;高度：20px；背景颜色：红色；右边距：自动；左边距：自动；边距顶部：5px；底边距：5px；边框宽度：2px；边框颜色：绿色； } /style>/head>body>h1>Heading/h1>hr>p1>这行要和标题用横线隔开/p1>/body>/html>