blocks|key|230663|text|我的简短回答和我的做法是，当没有其他方法可以用CSS干净利落地完成时，我会使用<hr>，对我来说，这意味着我花了很多年编写超文本标记语言，而且从来没有使用过<hr>。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|230664|最终，如果我只是试图在相同内容的两个部分之间放置某种标记，我可以看到自己在使用<hr>。|230665|举一个博客帖子的例子:当我觉得从一个主题转换到另一个主题在视觉上很重要时，我会放一个<hr>。|230666|entityMap^0|13|4|26|4|0|13|4|0|16|4|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|K|$]]

My short answer and the way I've gone about it is that I use <code>&lt;hr&gt;</code>'s when there is just no other way for it to be done cleanly with CSS. For me this has translated into many years of writing html and never having to use an <code>&lt;hr&gt;</code>.

Eventually, I could see myself using an <code>&lt;hr&gt;</code> if I am just trying to put some kind of marker between two sections of the same content.

Using an example of a blog post: I would put an <code>&lt;hr&gt;</code> when I I feel it's visually important to transition from one topic to another.

blocks|key|230697|text|比方说，当你有几个段落有两个不同的主题时，使用它是合适的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|230698|Paragraph+about+domestic+kittens
Paragraph+about+kittens'+favourite+foods
Paragraph+about+kittens'+playfulness
<hr>
Paragraph+about+my+day+at+work|code-block|syntax|javascript|230699|如果你想在图片和内容之间分开主题，我相信这也是合适的。|230700|<img+src="/img/kitten.jpg"+alt="kitten+playing+with+ball">
<img+src="/img/kitten1.jpg"+alt="kitten+drinking+milk">
<hr>
<img+src="/img/zebra.jpg"+alt="zebras+in+the+wild">|230701|hr的新用法似乎只是为了区分主题。如果你发现你的内容是连接良好的，不要觉得你需要使用标签。|offset|length|style|CODE|230702|entityMap^0|0|0|0|0|0|2|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

It's proper to use it when you have, say, several paragraphs with two distinct themes.

<pre><code>&lt;p&gt;Paragraph about domestic kittens&lt;/p&gt;
&lt;p&gt;Paragraph about kittens' favourite foods&lt;/p&gt;
&lt;p&gt;Paragraph about kittens' playfulness&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Paragraph about my day at work&lt;/p&gt;
</code></pre>

If you'd like to otherwise separate themes among images and content, I believe this is also appropriate.

<pre><code>&lt;img src="/img/kitten.jpg" alt="kitten playing with ball"&gt;
&lt;img src="/img/kitten1.jpg" alt="kitten drinking milk"&gt;
&lt;hr&gt;
&lt;img src="/img/zebra.jpg" alt="zebras in the wild"&gt;
</code></pre>

The new use of <code>hr</code> seems to just be for distinguishing topics within HTML. If you find that your content is well-connected, don't feel that you need to use the tag.

blocks|key|230707|text|根据this+article的说法|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|230708|230709|在HTML4.01中，<hr>标记表示一条水平线。|blockquote|style|CODE|230710|230711|在HTML5中，<hr>标签定义了一个主题分隔符。|230712|但是，在可视化浏览器中，<hr>标记仍然可以显示为水平线，但现在是在语义术语中定义的，而不是表征性术语。|230713|HTML4.01中的所有布局属性(对齐、无阴影、大小和宽度)在HTML4.01中都已弃用，在HTML5中也不受支持。改为使用CSS设置<hr>元素的样式。|230714|230715|在HTML5中，当您要从先前编写的段落转移主题时，请使用<hr>。|230716|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/tags/tag_hr.asp^0|2|C|0|0|0|B|4|0|0|8|4|0|C|4|0|1V|4|0|0|S|4|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|-4|5|6|7|15|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|16|8|@$A|17|B|18|H|I]]|9|@]|C|$]]|$1|J|3|-4|5|6|7|19|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|1A|8|@$A|1B|B|1C|H|I]]|9|@]|C|$]]|$1|M|3|N|5|6|7|1D|8|@$A|1E|B|1F|H|I]]|9|@]|C|$]]|$1|O|3|P|5|6|7|1G|8|@$A|1H|B|1I|H|I]]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1J|8|@]|9|@]|C|$]]|$1|R|3|S|5|6|7|1K|8|@$A|1L|B|1M|H|I]]|9|@]|C|$]]|$1|T|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]]|U|$V|$5|W|X|Y|C|$Z|10]]]]

According to <a href="https://www.w3schools.com/tags/tag_hr.asp" rel="nofollow noreferrer">this article</a>
<blockquote>
In HTML 4.01, the <code>&lt;hr&gt;</code> tag represented a horizontal rule.
In HTML5, the <code>&lt;hr&gt;</code> tag defines a thematic break.
However, the <code>&lt;hr&gt;</code> tag may still be displayed as a horizontal rule in
visual browsers, but is now defined in semantic terms, rather than
presentational terms.
All layout attributes (align, noshade, size, and width) in HTML 4.01
was deprecated in HTML 4.01, and is not supported in HTML5. Use CSS to
style the <code>&lt;hr&gt;</code> element instead.
</blockquote>
In HTML5, use <code>&lt;hr&gt;</code> when you are diverting your topic from the previously written paragraph.

The <a href="http://dev.w3.org/html5/html-author/#the-hr-element" rel="noreferrer">HTML5 reference</a> says that

<blockquote>
 The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.
</blockquote>

That description is not enough descriptive to me. I use the <code>hr</code> element in my HTML documents as a way to separate content. Is this correct?

Could anyone give a few examples on when to use it (apart from the examples shown) and when to use <a href="http://www.w3.org/Style/CSS/" rel="noreferrer">CSS</a> styling instead?

When is it semantically correct to use the hr element?

HTML5

说 hr元素表示段落级别的主题中断，例如，故事中的场景变化，或者转换到参考书部分中的另一个主题。这种描述对我来说不够描述性。我在超文本标记语言文档中使用hr元素作为分隔内容的方法。这是正确的吗？谁能举几个例子来说明什么时候使用它(除了所示的例子之外)，以及什么时候使用样式？

问什么时候使用hr元素在语义上是正确的？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么时候使用hr元素在语义上是正确的？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么时候使用hr元素在语义上是正确的？
EN