HTML水平线怎么添加_HTML的hr标签添加分隔线教程

在HTML中添加一条横线，直接写入
。
CSS决定样式、宽度和位置，所以不要盲目使用。
基本：
自动拆分。
CSS 更改颜色粗细样式，例如 3 像素点状蓝色。
宽度：父宽度的 6 0%，自动边距。
语义：将它们划分为主题，不要随意使用它们。
示例：渐变颜色
和中心虚线
。
总结：
不要滥用简单而丰富的CSS。

如何控制HR标签制作的网页水平线的长度和颜色？

现在我们来解释一下如何创建这个网页。

1 .创建一个新文档。
您可以将其命名为任何您喜欢的名称。
后缀是​​。
从标准语句 5 开始。
这是下一行。


这必须写在第一行，前导空格不存在。

2 接下来，写出下面的基本结构。
网页必须有头部和主体。
像这样的事情：
<头> <title>第一个网页</title> </头> <正文> 单击此处查看网页内容 </正文> </>
看，有一个包含所有内容的 <head>。
头部是<head>，描述了网页的标题。
正文是<body>，网页上出现的所有内容都放在这里。

3 接下来，如果要添加水平线，请使用
标记。
该标签为单面标签。
也就是说，你可以在不关闭标签的情况下这样写：

代表一条水平线。

4 可以通过多种方式修改此
标记。
例如，“大小”设置线条粗细。
例如，宽度设置线的长度。
设置颜色和线条颜色。
它也是无阴影的，让您看到纯色，没有灰白色的光和暗影效果。

5 .最后一步是保存它。
文件。
然后在浏览器中打开它。
查看浏览器中显示的效果。
不就是一条水平线吗？这就是我们创建带有水平线的网页的方式。

你明白这个解释的意思吗？

HTML水平线怎么设计？分隔内容的4种hr样式优化

哈，你问的是这个吗？其实我之前做项目的时候也想到过这个HR标签，觉得挺有趣的。

上周，一位客户问我是否想在他们的活动页面添加一个漂亮的分隔线，所以我看了一下这些提示。

1 .改变颜色实际上是最简单的方法。
标准的浅灰色太普通了。
只需设置边距：无；然后使用边框顶部。
去年做金融项目的时候，用的是006 6 cc的深蓝色顶边框，看起来很专业。
关键是要记住这是顶部的边框，而不是边框​​颜色。
我掉进了这个陷阱。

2 虚线和虚线的效果非常多变。
当我在做一个儿童用品网站时，我使用了虚线，让它看起来更活泼。
代码看起来简单实际上很重要，尤其是点和破折号很容易拼写错误。
一个小技巧是将 width 和 border-top-width 一起使用，例如B.宽度：8 0%；顶部边框：2 px 虚线 aaa；使总宽度为 8 0%，并且该线是 2 像素的虚线。

3 宽度和对齐是最实用的步骤。
我之前有一个政府网站项目。
老板要求分隔线要在页面中间，但只占宽度的6 0%。
当时我用的是 width: 6 0%;边距：2 0px 自动；来解决问题。
请记住，margin-left 和 margin-right 可以使用 auto 水平居中。
这个技巧经常被使用。

4 渐变色是现在最火的颜色。
今年春天，当我重新设计我的电子商务网站时，我使用线性渐变作为整个网站的分隔线，这创造了一种特别现代的效果。
但要注意高度。
如果太薄，就看不出来；如果太厚，就会弹跳太多。
我尝试了3 像素的高度，感觉刚刚好。
就方向而言，最常用的是正向，但有时向下的方向也很酷。

但是你最好测试一下。
我有一个项目，使用线性渐变直接导致IE浏览器出现问题，最后使用边框图像解决了。
因此，所有常见浏览器（Chrome、Firefox、Edge、Safari）都应该进行测试。
另请记住，“border”必须设置为“none”，否则会出现错误。

无论如何，这取决于你。
如果运用这些技巧，效果肯定会不一样。
我仍在考虑如何实现阴影分隔线......

HTML中如何插入水平线

坦白说，在HTML中插入横线其实很简单，只需要使用
标签即可。
但这比较复杂，需要根据具体情况选择合适的用法。
我们先来说说最重要的事情。
标签是自闭合的，不需要结束标签。
浏览器会自动将其渲染为水平线。
例如，在我们去年运行的一个项目中，我们在分隔博客文章中的段落和划分表单的功能区域时广泛使用了此标签。

另一件事是
的语义是主题变化，就像章节变化和场景转换一样，因此相关场景通常是博客文章的段落分隔符。
但一开始我以为只能做视觉分离，后来发现错了。
它还可以传达内容的结构变化。

还有一个更重要的细节，就是可以通过CSS美化
标签。
例如，调整颜色、粗细和间距，甚至创建渐变效果。
我们去年创建的一个网站使用了 CSS 渐变效果，使水平线看起来更有设计感。

如果你只是想创建视觉分隔，没有语义需求，那么你可以考虑使用
结合 CSS。
这样做的好处是你可以完全自定义样式，而无需引入额外的语义。
例如，有时我们使用纯色分隔线或边框分隔线来区分 UI 元素。

等等，还有一件事，选择哪种方法取决于您的具体需求。
如果内容有主题变化，例如章节变化，则使用
；如果只是视觉分隔，那么使用
+CSS 更合适。

最后，我认为值得尝试的是根据内容的结构来选择一个工具，既满足语义要求，又考虑视觉美感。
这样你的页面就会清晰漂亮。
标签： HTML水平线 HR标签
上一篇： css外部样式文件
下一篇： 网址后缀html是什么意思