添加水平线以分解页面上的内容

如何将HR标签用于Web文档

HR标签传统上用于向Web文档添加水平线(有时称为水平线)。 要添加一行,请输入:


以指示浏览器使用默认设置在页面或父元素的整个宽度上绘制一条线。 该默认行很简单并且通常用于其目的,但可以指定属性来更改行的大小,颜色和位置以及其他特征。 修改水平线的外观的方法在HTML4和HTML5之间改变。

人力资源标签语义?

在HTML4中,HR标签不是语义的。 语义元素用浏览器和开发人员易于理解的术语来描述它们的含义。 HR标签只是一种将简单线条添加到文档的任何地方的方法。 只将元素的顶部或底部边框设计为您希望线条出现的位置,在元素的顶部或底部放置一条水平线,但一般而言,HR标签更容易用于此目的。

从HTML5开始,人力资源标签变得语义化,现在它定义了段落级主题中断,这是内容流的中断,不保证新页面或其他更强的分隔符 - 这是主题的变化。 例如,您可能会在故事中发生场景更改后发现HR标签,也可能会指示参考文档中的主题发生更改。

HR属性在HTML4和HTML5中

在HTML4中,可以给HR标签分配简单的属性,包括“align”,“width”和“noshade”。 对齐可以设置为左侧,中间,右侧或对齐。 宽度调整了水平线的宽度,使其横跨页面的默认百分比为100%。 noshade属性呈现了纯色线条而不是阴影色。 这些属性在HTML5中已过时,您应该使用CSS来设置HTML5中的HR标签。 例如,在HTML 4中:


生成一个高度为10像素的水平线。

使用CSS和HTML5,设计一个10像素高的水平线:


使用CSS来设计你的水平线可以让你在设计网页时有很大的自由度。 您可以在此样式HR标签文章中看到很多HR标签样式的示例。 只有宽度和高度样式在所有浏览器中保持一致,所以在使用其他样式时可能需要一些试验和错误。 默认宽度始终为网页或父元素宽度的100%。 规则的默认高度是两个像素。