Question

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

此代码用于为CSS中的图像进行叠加文本转换，但如果我想验证此HTML代码，则表示我有一个重复的ID（此处为“first”和“desc”）但我老实说不会'我知道如何简化这一点。我需要用font-size和“desc”调整“first”的大小。

例如：ID为“first”的段落必须为14px，带“desc”的段落必须为12px。

只有那些＆lt;“p”＆gt; （不带引号）元素不能是“span”元素中的子元素。

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

感谢您的回答，我已经将ID更改为了一个类。

尽管如此，我不知道如何在两种不同的字体大小中调整类“first”和“desc”的大小，因为将块元素放在内联元素中显然“没有完成”

编辑3：解决了！使用div是最好的解决方案，我正在将它用于学校（某种项目）来制作图库。随着浮动：左;我可以将这些图像放在一起。

感谢您的提示！

Answer 1

你犯了几个错误：

id属性的类型为#ID，由HTML / SGML标准定义为唯一，如果要显示重复项，则应使用class属性（这是为什么有getElement s  ByClassName返回一个列表，但getElementById只返回JavaScript DOM API中的一个项目）

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

Answer 2

只需将其更改为：

<p class="first">

和

<p class="desc">

编辑：您最好完全删除spans。你不需要它们。如果您认为需要它们来包装块级元素，则可以使用divs

执行此操作

Answer 3

这是由于元素类型。

<p> tag is block level element 

<span> tag is a inline element

因此，在内嵌级别元素中封装块级别元素是不正确的。

Answer 4

因为您可以使用类变化：

1

id="first" -- into --> class="first"
id="desc" -- into --> class="desc"

2。
除了 span之外，您无法将其他标记添加到, , , and ...标记中使用 ，您的span代码

中可以包含2行

为什么重复ID在HTML5检查中出错？

4 个答案: