标题中带有空格的页面锚点

Question

我有一个页面，其中包含一些带有<h1 name="Header Name">标签。请注意，名称属性中有一个空格。我想使用锚点跳转到标题。我以为将%20替换空格就能行，但事实并非如此。

目前我很忙，所以不想编辑源码并重新部署，使每个标题都具有带连字符的ID或标题。

<!-- non-working example of what I want -->
<a href="mypage.html#Header%20Name" />  
<h1 title="Header Name">Foo</h1>

我已经阅读了这里的规范，但没有找到答案。我也在谷歌和stackoverflow上没有找到答案。

http://www.w3.org/TR/html4/struct/links.html

有没有一种方法可以这样做？

- mrtsherman

Answer 1

那不是锚标签的使用方法。您可以跳转到锚标签的名称或任何元素的ID。不幸的是，您无法跳转到标题属性。您需要修改HTML，而您不想这样做，或者包含JavaScript来实现您所要求的内容。

编辑：标准始终指出ID属性不能包括空格，包括HTML5，它说：

HTML5取消了对id属性的其他限制。唯一剩下的要求是在文档中必须是唯一的，并且值必须至少包含一个字符（不能为空），并且不能包含任何空格字符。

- Duffmaster33

---

哦，我把“标题”和“名称”混淆了。谢谢你注意到这个问题！ - mrtsherman

哦，在现代浏览器中，您可以使用任何元素的ID或锚元素的名称。因此，无论是否有空格，您都无法按名称链接到h1。我会更新我的答案。 - Duffmaster33

Answer 2

这里是W3C规范https://www.w3.org/TR/REC-html40-971218/types.html#h-6.2

ID和NAME标记必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母、数字([0-9])、连字符（“-”）、下划线（“_”）、冒号（“:”）和句点（“.”）。

不能有空格。

- Mark Lu

Answer 3

目标锚点应该由一个id属性定义，并且它不能包含空格。(HTML5移除了所有其他限制，但不允许空格和空值。早期的HTML版本则更加严格。) 因此：

<h1 id="HeaderName">Foo</h1>

或者，您可以使用带有name属性的a元素，但这种方法很笨拙且已过时（在HTML5中被禁止，尽管它仍然有效，如果正确使用）：

<h1><a name="HeaderName">Foo</a></h1>

你只能在少数元素中使用name属性，例如不能在h1中使用，并且只有在a元素中才具有作为目标锚点的含义。 title属性可以用于任何元素（至少按照HTML5的规定），但它只是一个建议性的标题，与链接无关。

构造<a href="mypage.html#Header%20Name" />表示一个空的a元素，这是一个可用性噩梦，并且实际上不起作用（它仅被视为元素的开始标记），除非在使用XML文档类型时提供XHTML，而这可能不是你正在做的。因此，除非对于声明为空的元素，否则根本不要使用“自闭合”语法。

- Jukka K. Korpela

Answer 4

锚点指向name或id属性。它无法找到您的title属性。

使用<h1 id="Header Name">，它应该可以工作，但理想情况下，您不应该在那里留有空格。

- Niet the Dark Absol

---

不，它不应该工作：没有HTML规范允许在“id”属性值中包含空格。 - Jukka K. Korpela

Answer 5

有一种方法可以在不违反HTML规范的情况下使用带空格的锚点。使用<a name="my%20name%20with%20spaces"></a>。规范明确指出，在使用<a>和name属性时，可以使用百分号编码。但是，在使用id时，不应该对属性进行百分号编码，而且由于id属性中不允许包含空格，因此唯一的选择是改用<a name=...>。

更多信息：https://blog.markasoftware.com/post/spaces-in-anchor-names/

- markasoftware