HTML rel标签

Question

我试图用w3c验证我的HTML5文档.我正在使用fancybox jQuery插件来处理简单的灯箱和图像库.为了区分每个图库,我正在使用rel标签.

当我验证我的页面时,我收到以下错误:

属性rel的错误值库元素a:不是绝对IRI.字符串库不是已注册的关键字或绝对URL.

这是我的代码:

<div class="portItem">
    <div class="thumbs">
        <div class="items">
        <img src="images/rsl.jpg" class="col" alt="A website for R.S.Lynch and Company"/>
        <div class="caption">
            <a class="fancybox" rel="gallery1" href="images/rs1.jpg">R.S.Lynch & Company</a>
            <div class="hidden">
            <a class="fancybox" rel="gallery1" href="images/rs2.jpg"></a>
            <a class="fancybox" rel="gallery1" href="images/rs3.jpg"></a>
            <a class="fancybox" rel="gallery1" href="images/rs4.jpg"></a>
            <a class="fancybox" rel="gallery1" href="images/rs5.jpg"></a>
            </div>
        </div>
        </div>
    </div>
</div>

是否有更好的标签可以使用并获得相同的结果？谢谢

Answer 1

我建议data在这里使用-family属性,如下所示:

<a class="fancybox" data-gallery="1" href="images/rs1.jpg">R.S.Lynch & Company</a>
<a class="fancybox" data-gallery="1" href="images/rs2.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/rs3.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/rs4.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/rs5.jpg">...</a>

...因为这种类型的属性专门用于将一些数据附加到DOM元素.class在我看来,它比使用更具语义.

您可以使用$('some selector').data('gallery')语法轻松访问这些值.

至于rel属性,它看起来像在HTML5中,它仅限于预定义属性集,并用于定义文档之间的更高级别关系.