（图片来源网络，侵删）
1、使用<hr>标签
<hr>标签是HTML中用于创建水平线的元素，它不需要任何属性，只需要将它放在想要添加水平线的位置即可。
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>添加横线示例</title> </head> <body> <p>这是一段文本。</p> <hr> <p>这是另一段文本。</p> </body> </html>2、使用CSS样式
除了使用<hr>标签，还可以使用CSS样式来自定义水平线的外观，需要在HTML文件中添加一个<style>标签，然后在其中编写CSS代码。
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>添加横线示例</title> <style> hr { width: 100%; /* 设置水平线的宽度 */ border: none; /* 去掉默认的边框 */ height: 1px; /* 设置水平线的高度 */ backgroundcolor: #333; /* 设置水平线的颜色 */ } </style> </head> <body> <p>这是一段文本。</p> <hr> <p>这是另一段文本。</p> </body> </html>3、使用borderbottom属性
可以为HTML元素（如<div>、<p>等）添加一个底部边框，从而实现类似水平线的效果。
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>添加横线示例</title> <style> .horizontalline { borderbottom: 1px solid #333; /* 设置底部边框的样式 */ width: 100%; /* 设置元素的宽度 */ marginbottom: 20px; /* 设置底部边框与下方元素之间的距离 */ } </style> </head> <body> <div class="horizontalline"></div> <p>这是一段文本。</p> <div class="horizontalline"></div> <p>这是另一段文本。</p> </body> </html>4、使用背景图片作为水平线
如果需要使用自定义的水平线图片，可以将图片设置为元素的背景。
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>添加横线示例</title> <style> .horizontalline { width: 100%; /* 设置元素的宽度 */ height: 10px; /* 设置元素的高度 */ backgroundimage: url(horizontalline.png); /* 设置背景图片 */ backgroundrepeat: repeatx; /* 设置背景图片重复方式为水平平铺 */ backgroundposition: center; /* 设置背景图片位置为居中 */ backgroundsize: cover; /* 设置背景图片大小覆盖整个元素 */ marginbottom: 20px; /* 设置元素与下方元素之间的距离 */ } </style> </head> <body> <div class="horizontalline"></div> <p>这是一段文本。</p> <div class="horizontalline"></div> <p>这是另一段文本。</p> </body> </html>在HTML中添加横线有多种方法，可以根据实际需求选择合适的方法。<hr>标签是最简单直接的方法，而使用CSS样式和borderbottom属性可以自定义水平线的外观，如果需要使用自定义的图片作为水平线，可以使用背景图片的方法。
