以下是两种利用HTML原生能力标记脚注(作者注、译者注、编者注等)的示例文本。其中,脚注〔1〕采用静态方式,脚注内容在段后。“增补的3页修订〔2〕则会在鼠标移动到关键词之上时显示提示条。代码清单1给出了这两种标记方式的实现代码。表1列出了这两种方式对用户体验的不同影响。

需要说明的是,脚注放在段落之后,而不是页脚,主要是为了方便导出Word文档后排版。因为网页长度不定,而Word排版文件页面长度固定,放到网页页脚的脚注在导出的Word文档中可能会跑到好几页之后,不便于排版人员查找。

以下是示例文本:

这本书要讲的正是这篇论文。它包含了图灵原版36页的论文〔1〕“On Computable Numbers, with an Application to the Entscheidungsproblem”和增补的3页修订〔2〕,并辅以背景材料和大量注解。阅读图灵的原版论文就是在探索他构建图灵机的思维过程,就像在他充满想象、内容丰富的思想中进行一次奇特的旅行。
〔1〕 阿兰•图灵,Proceedings of the London Mathematical Society,2nd series,Vol.42(1936),pp.230-265。 〔2〕 阿兰•图灵,Proceedings of the London Mathematical Society,2nd series,Vol.43,(1937),pp.544-546。

代码清单1 上面示例的实现代码

这本书要讲的正是这篇论文。它包含了图灵原版36页的论文<sup>〔1〕</sup>“On Computable Numbers, with an Application to the Entscheidungsproblem”和<span title="〔2〕 阿兰•图灵,Proceedings of the London Mathematical Society,2nd series,Vol.43,(1937),pp.544-546。">增补的3页修订<sup>〔2〕</sup></span>,并辅以背景材料和大量注解。阅读图灵的原版论文就是在探索他构建图灵机的思维过程,就像在他充满想象、内容丰富的思想中进行一次奇特的旅行。

<sub>〔1〕 阿兰•图灵,*Proceedings of the London Mathematical Society*,2nd series,Vol.42(1936),pp.230-265。</sub>   
<sub style="display:none;">〔2〕 阿兰•图灵,Proceedings of the London Mathematical Society,2nd series,Vol.43,(1937),pp.544-546。</sub>

表1 脚注的两种HTML原生标注方式对比

标注方式实现方式用户体验上的利弊
常规方式(见〔1〕)正文标注用sup,脚注文字用sub脚注直接出现在正文段落之后,字号更小,支持在引用格式中嵌套使用,且能保留格式,但会影响正常阅读
提示条方式(见〔2〕)在“常规方式”基础上,一方面把脚注内容再复制粘贴为span标签的title属性,另一方面再用CSS隐藏段后脚注文字(导出Word文档中仍可见)title属性默认在鼠标悬停时显示提示条,不会主动打断阅读,但无法保留格式,而且不能在引用格式中嵌套(如表后例子所示)

以下是在Markdown引用格式中嵌套使用时两种标注方式的示例文本:

这本书要讲的正是这篇论文。它包含了图灵原版36页的论文〔1〕“On Computable Numbers, with an Application to the Entscheidungsproblem”和<span title="〔2〕 阿兰•图灵,Proceedings of the London Mathematical Society,2nd series,Vol.43,(1937),pp.544-546。">增补的3页修订〔2〕,并辅以背景材料和大量注解。阅读图灵的原版论文就是在探索他构建图灵机的思维过程,就像在他充满想象、内容丰富的思想中进行一次奇特的旅行。

〔1〕 阿兰•图灵,Proceedings of the London Mathematical Society,2nd series,Vol.42(1936),pp.230-265。 〔2〕 阿兰•图灵,Proceedings of the London Mathematical Society,2nd series,Vol.43,(1937),pp.544-546。