为什么重复的ID在HTML5检查中出错？ [英] Why are duplicate ID's an error in HTML5 checkup?

问题描述

我在HTML中有以下代码：

 < span> 
< a href =＃> 
< span class =caption> 
< p id =first> Text1< / p> 
< p id =desc>点击阅读< / p> 
< / span> 
< img class =img_linksrc =img / thing1.jpgwidth =218height =181
 alt =thing1/> 
< / a> 
< / span> 
< span> 
< a href =＃> 
< span class =caption> 
< p id =first> Text2< / p> 
< p id =desc>点击阅读< / p> 
< / span> 
< img class =img_linksrc =img / thing2.jpgwidth =218height =181
 alt =thing2/> 
< / a> 
< / span> 
  

此代码用于为CSS中的图像制作叠加文本转换，但如果要验证这个HTML代码，它说我有一个重复的ID（这里第一和desc），但我真的不知道我可以如何简化这个。我需要调整字体大小的第一，以及desc。

例如：id为first的段落必须是14px，而desc段落必须是12px。

只有那些<p>（不含引号）的元素才能成为span元素中的子元素。

I不知道如何解决这个问题，你们有解决方案吗？

感谢您的答案，我已经将ID更改为类。

但是，我不知道如何调整两个不同字体大小的类first和desc，因为它显然没有完成将块元素放入内联元素

编辑3：解决！使用div's是最好的解决方案，我将它用于制作画廊的学校（某种项目）。随着浮动：左;我可以将这些图片放在彼此旁边。

感谢您的提示！

解决方案

您犯了几个错误：

• id属性的类型为#ID，由HTML / SGML标准定义为是独一无二的，如果你想显示重复你应该使用class属性（这是为什么有getElement s 的一部分ByClassName返回一个列表，但getElementById只返回单个项目JavaScript DOM API）


• 跨度是内联元素，而p是块元素，HTML不允许内联元素中的块元素。你应该用div来替换你的span。如果您希望它像内嵌级别元素一样显示，您可以使用 display：inline 或 display：inline-block 。内联元素的示例包括：a，span等;块元素的例子包括：div，p，ul，li等。

I have the following code in HTML:

<span>
    <a href="#">
        <span class="caption">
            <p id="first">Text1</p>
            <p id="desc">click to read</p>
        </span>
        <img class="img_link" src="img/thing1.jpg" width="218" height="181" 
             alt="thing1"/>
    </a>
</span>
<span>
    <a href="#">
        <span class="caption">
            <p id="first">Text2</p>
            <p id="desc">click to read</p>
        </span>
        <img class="img_link" src="img/thing2.jpg" width="218" height="181" 
             alt="thing2"/>
    </a>
</span>

This code is used for making an overlayed text transition for images in CSS, but if I want to validate this HTML code, it says I have a duplicate ID (here "first" and "desc") but I honestly wouldn't know how I can simplify this. I need to resize "first" with font-size, and "desc" too.

For example: the paragraph with id "first" has to be 14px, and the paragraph with "desc" has to be 12px.

Only those <"p"> (without the quote) elements can not be a child element in the "span" element.

I wouldn't know how to solve this, do you guys have a solution?

Thanks for the answers, I've already changed the ID's to a class.

Still, I wouldn't know how to resize class "first" and "desc" in two different font sizes, because it's apparently "not done" to put a block element in an inline element

EDIT 3: Solved! Using div's is the best solution, I'm using this for school (kind of a project) for making a gallery. With float: left; I can place those images next to eachother.

Thanks for the tips!

解决方案

You've made several mistakes:

• id attribute is of type #ID which by the HTML/SGML standard is defined to be unique, if you want to show duplicates you should use class attribute (this is part of why there's getElementsByClassName returning a list but getElementById returning only a single item in the JavaScript DOM API)
• span is inline element, while p is a block element, HTML does not allow block element inside inline element. You should replace your span with div. You can use display: inline or display: inline-block if you want it to appear like inline level elements. Example of inline elements include: a, span, etc; example of block elements include: div, p, ul, li, etc.

这篇关于为什么重复的ID在HTML5检查中出错？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！