我可以在 HTML 中为图像添加 id 吗？ [复制]答案

【问题标题】：Can I add a id to a image in HTML? [duplicate]我可以在 HTML 中为图像添加 id 吗？ [复制]
【发布时间】：2017-05-22 15:01:36
【问题描述】：

我想id HTML 中的图片以在 CSS 中编辑它，但它不起作用。代码如下：

#1{
  border-width: 0px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  width: 25%;
  height: 25%;
}

&lt;img src="https://static1.squarespace.com/static/5492f3e3e4b0c40c56916924/t/586590b3d1758e4aacbf4aa4/1483051196842/?format=1500w" id="1"/&gt;

但是图片的格式不是我想要的那样。那么我需要将代码添加到 HTML 本身中还是我需要做什么？

【问题讨论】：

你在哪里用 CSS 设计的？
id 必须以字母字符开头，例如 id='img1' 用于 img 标签并在 css 中引用它：#img1

标签： html css

【解决方案1】：

如果您将在任何其他图像上重复使用此样式，则应改为按类设置样式。

<img src="https://static1.squarespace.com/static/5492f3e3e4b0c40c56916924/t/586590b3d1758e4aacbf4aa4/1483051196842/?format=1500w" class="some-style"/>

然后：

.some-style {
    border-width: 0px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    width: 25%;
    height: 25%;
}

现在您可以反复使用相同的样式，而无需在 CSS 文件中添加更多内容，因为每页只能有一个 id 元素，但您可以在同一个类中添加任意数量的元素.

【讨论】：

【解决方案2】：

假设您正在学习 CSS，您很可能会寻找以下两个错误：

你的id不以数字开头：把id = 1改成id="one"
第二个可能的错误是您没有将 CSS 放在正确的区域。将 CSS 放入 <style></style> 标签中的 <head></head>

对于外部样式表，记得添加：

<link rel="stylesheet" type="text/css" href="mystyle.css">

【讨论】：

【解决方案3】：

您已经定义了 id 属性 id="1"，但是这个 id 值不符合以下条件。

必须至少包含一个字符

阅读the HTML5 specification。

但如果你使用 HTML 4 the specification 说：

ID 必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 (" _")、冒号 (":") 和句点 (".")。

试试

#myimage
{
    border-width: 0px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    width: 25%;
    height: 25%;
}

&lt;img src="https://static1.squarespace.com/static/5492f3e3e4b0c40c56916924/t/586590b3d1758e4aacbf4aa4/1483051196842/?format=1500w" id="myimage"/&gt;

【讨论】：

@downvoter : 也愿意给出理由吗？
我认为您被否决了，因为“1”是根据“字符”一词的定义所使用的字符。

【解决方案4】：

这是因为你使用了一个数字。改用“one”之类的东西。

想使用“1800number_box”之类的 ID 作为 ID？别。因为它不会起作用。类标识符允许以数字开头，但 ID 标识符不可以。

ID’s Cannot Start With a Number

【讨论】：

【解决方案5】：

试试这个：

#myimage, img.myimage {
        border-width: 0px;
        margin: 0px;
        padding: 0px;
        position: absolute;
        width: 25%;
        height: 25%;
        }

    &lt;img id="myimage" class="myimage" src="https://pp.vk.me/c837520/v837520867/16752/q1EHBfmdpgQ.jpg"&gt;

你也可以这样试试：

&lt;img id="myimage" class="myimage" src="https://pp.vk.me/c837520/v837520867/16752/q1EHBfmdpgQ.jpg" style="border-width: 0px; margin: 0px; padding: 0px; position: absolute; width: 25%; height: 25%;"&gt;

【讨论】：

【解决方案6】：

MDN 说：

注意：使用除 ASCII 字母和数字、'_'、'-' 和 '.' 以外的字符可能会导致兼容性问题，因为它们是不允许的 HTML 4。虽然在 HTML 5 中取消了这个限制，但一个 ID 为了兼容性，应该以字母开头。

来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

HTML 4.01 spec:

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0- 9])、连字符（“-”）、下划线（“_”）、冒号（“:”）和句点（“.”）。

但是，HTML5 spec 和 WHATWG HTML Living Standard 允许 ID 以数字开头：

对于 ID 可以采用的形式没有其他限制；在特别是，ID 可以只包含数字，以数字开头，开始带下划线，仅包含标点符号等。

所以我建议坚持 MDN 的建议：出于兼容性原因，不要以数字开头您的 ID 或名称。而不是id="1"，使用id="img1"之类的东西。

【讨论】：

我可以问一下为什么我的答案在我发布几秒钟后就被否决了吗？甚至不可能读得那么快……
我看到很多其他人在发布答案时投了反对票。这真的不应该被允许 - 为什么你会被允许发布答案并能够对其他人对同一问题的答案投反对票？
嗯？我在这里投的唯一一票是贝尼奥的回答（因为它非常好，我不知道）——这是一个赞成票。
我的意思是，可能是其他人回答了你，他们对你投了反对票，以使他们的回答更有可能被选中。
对不起，我误会了你。谢谢:-)