当想要使用 "http://example.com/#foo
" 方法引用网页的某个部分时,应该使用什么?
<h1><a name="foo"/>Foo Title</h1>
或者<h1 id="foo">Foo Title</h1>
它们都可以使用,但是它们是否完全相等,还是有语义上的区别?
当想要使用 "http://example.com/#foo
" 方法引用网页的某个部分时,应该使用什么?
<h1><a name="foo"/>Foo Title</h1>
或者<h1 id="foo">Foo Title</h1>
它们都可以使用,但是它们是否完全相等,还是有语义上的区别?
关于标记的一个观察:在之前版本的HTML中,标记表单提供了一个锚点。HTML5中使用id属性的标记表单,虽然大多数等效,但需要一个元素来标识,其中几乎所有元素都预期包含内容。
例如,可以使用空的span或div,但这种用法看起来很不正常。
有一种想法是使用wbr元素来实现这个目的。wbr具有空内容模型,并声明可能有一个换行符;这仍然是一种略显过度的标记标签使用,但比过度的文档分割或空文本跨度要少得多。
wbr
的更多信息:http://www.w3.org/TR/html-markup/wbr.html使用`<wbr id="foo" />而不是
<a name="foo"></a>`。 - Luke现在不是关于支持的问题,因为谁会在2021年关心比IE6更旧的浏览器呢?
请注意,Stackoverflow仍在使用锚点和“name”属性,而不是“id”属性。
为什么?
因为您:
#sample
{
color: red;
}
<div id="postNr4245 sample"> Sample text </div> <!-- coloring doesn't work -->
<a href="#postNr4245">Jump to Post</a> <!-- jumping doesn't work -->
好的,你可以使用“class”来实现这样的事情。
这是真的,但是如果您的网站只有单个元素需要进行样式设置,则不应使用class。
为什么?
因为如果您使用CSS选择器#idName并且Web浏览器找到该元素,则不会继续查找。它可以加快网站的加载速度。
如果您使用.class,则需要查找DOM的每个位置,因为Web浏览器不知道您是否使用了.class一次或多次。
http://example.com#foo
(所以在 # 前面没有 /)。 - Danahttp://example.com#foo
和http://example.com/#foo
是等效的。 - Oliver<h1 id="foo"></h1>
可以在 Javascript 中从window.foo
引用,这可能不是您所期望的,请参见 https://dev59.com/BXRB5IYBdhLWcg3w3K8J#28568419。 - Flimm