用于水平换行符的HTML5标记

Question

我确实找到了一个关于使用<hr>标签插入换行符的帖子,但当我在w3网站(http://www.w3schools.com/tags/tag_hr.asp)上查找标签时,它说的是所有属性HTML5中不支持该标记.显然我想让我的网站HTML5兼容,那么插入可见水平线的最佳方法是什么？

谢谢

Answer 1

你仍然可以使用<hr>水平线,你可能应该这样做.在HTML5中,它定义了内容中的主题中断,而没有对其显示方式做出任何承诺.HTML5规范中不支持的属性都与标记的外观相关.外观应该在CSS中设置,而不是在HTML本身中设置.

因此,使用<hr>不带属性的标记,然后在CSS中设置样式以按照您想要的方式显示.

Answer 2

只需在HTML文件中使用 hr标记,并在CSS文件中添加以下代码.

    hr {
       display: block;
       position: relative;
       padding: 0;
       margin: 8px auto;
       height: 0;
       width: 100%;
       max-height: 0;
       font-size: 1px;
       line-height: 0;
       clear: both;
       border: none;
       border-top: 1px solid #aaaaaa;
       border-bottom: 1px solid #ffffff;
    }

它完美地运作.

Answer 3

您可以创建一个与<hr>标记具有相同属性的div .这样它完全可以定制.以下是一些示例代码:

HTML:

<h3>This is a header.</h3>
<div class="customHr">.</div>

<p>Here is some sample paragraph text.<br>
This demonstrates what could go below a custom hr.</p>

CSS:

.customHr {
    width: 95%
    font-size: 1px;
    color: rgba(0, 0, 0, 0);
    line-height: 1px;

    background-color: grey;
    margin-top: -6px;
    margin-bottom: 10px;
}

要了解项目结果如何,这里是上面代码的JSFiddle:http://jsfiddle.net/SplashHero/qmccsc06/1/