兩種利用HTML原生能力標記腳註的方式對比

以下是兩種利用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。}