html/xhtml 中的语法糖

Question

我目前正在手工编写 html/xhtml，这对我来说很好，但我想稍微简化一下，尤其是在编写脚注时。

今天，我是这样写脚注的：

<p>Here is a footnote<a id="ref1b" href="#ref1">[1]</a>.</p>
<!-- And at the end of the document -->
<div class="footnotes">
  <h2>Notes</h2>
  <p id="ref1">[1] But this one isn't very helpful.
    <!-- Let's add a go-back-to-the-text arrow -->
    <a href="#ref1b">↩</a>
  </p>
</div>

这个想法是让事情自动化，并可能在客户端（通过浏览器）完成，这样我就可以写这样的东西：

<p>Here is a footnote<ref id="1"/>.</p>
<!-- And at the end of the document -->
<div class="footnotes">
  <h2>Notes</h2>
  <ref-def id="1">But this one isn't very helpful.</ref-def>
</div>

因此ref和ref-def将简单地由浏览器即时评估。

这可能只使用 html/xhtml 和 css 吗？

Answer 1

您现在执行此操作的方式具有可访问性和符合标准的优势 - 它适用于任何浏览器 - 即使禁用了 javascript。 搜索引擎也将能够理解这一点。 所以这样做有一些好处。

如果您决定采用更短的替代方案，那么有很多 jQuery 插件可以让您的任务更轻松。 例如看https://github.com/nicholascloud/footnote.js

如果您采用这种方法，还请注意，您的网站速度将受到影响，因为用户必须下载大量 javascript 才能使您的脚注正常工作。

Answer 2

出于完整性的目的。 截至今天，HTML 中有一个footnote标签。

https://www.w3.org/MarkUp/html3/footnotes.html

它如何呈现给客户由实现者决定。 你可以使用更多的 html 或 css 以获得更好的格式。

 <DL> <DT>Hamlet: <DD>You should not have believed me, for virtue cannot so <a href="#fn1">inoculate</a> our old stock but we shall <a href="#fn2">relish of it</a>. I loved you not. <DT>Ophelia: <DD> I was the more deceived. <DT>Hamlet: <DD>Get thee to a nunnery. Why wouldst thou be a breeder of sinners? I am myself <a href="#fn2">indifferent honest</a> ... </DL> <fn id=fn1><i>inoculate</i> - graft</fn> <fn id=fn2><i>relish of it</i> - smack of it (our old sinful nature)</fn> <fn id=fn3><i>indifferent honest</i> - moderately virtuous</fn>