html/xhtml 中的语法糖 [英] Syntactic sugar in html/xhtml

问题描述

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

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

<p>这是一个脚注<a id="ref1b" href="#ref1">[1]</a>.</p><!-- 在文档的末尾--><div class="footnotes"><h2>注意事项</h2><p id="ref1">[1] 但是这个不是很有帮助.<!-- 让我们添加一个返回到文本的箭头--><a href="#ref1b">↩</a></p>

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

<p>这是一个脚注<ref id="1"/>.</p><!-- 在文档的末尾--><div class="footnotes"><h2>注意事项</h2><ref-def id="1">但这不是很有帮助.</ref-def>

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

这只能使用 html/xhtml 和 css 吗?

解决方案

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

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

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

I'm currently writing html/xhtml by hand, and that's fine to me, but I would like to ease things a little bit, especially for writing footnotes.

Today, here is how I write footnotes:

<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>

The idea would be to make things automatic, and potentially done on the client side (by the browser), so that I could write something like that:

<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>

So ref and ref-def would simply be evaluated on the fly by the browser.

Is this possible only using html/xhtml and css?

解决方案

the way you're doing this now has the advantage of being accessible and standards compliant - it will work with any browser - even with javascript disabled. Also search engines will be able to make sense out of this. So there are some benefits in doing it this way.

if you decided to go for a shorter alternative, then there's plenty of jQuery plugins that will make your task more comfortable. e.g. look at https://github.com/nicholascloud/footnote.js

If you go for that approach please also note, that your site speed will suffer as users will have to download plenty of javascript to get your footnotes working.

这篇关于html/xhtml 中的语法糖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！