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>