我的 HTML INPUT 不是有效的标记，请帮助

Question

在我的网站上，我有以下代码：

<input type="image" src="images/btn.png" alt="Submit" border="0" height="25" width="102" />

当我通过众多 HTML 验证器之一运行我的网站时，它们会提示通知我：

• 边框
• 高度
• 宽度

是 INPUT 元素的无效属性。

然而，YSlow 和 Google PageSpeed 告诉我，我应该始终包含图像尺寸，以提高解析 HTML 的速度。

还有什么其他方法可以让我使用图像提交按钮，同时仍然保持 HTML 有效并遵循 YSlow 建议？

Answer 1

使用 CSS 来达到同样的目的。 内联 CSS：

<input type="image" src="images/btn.png" alt="Submit"
       style="border:0; width:102px; height:25px;" />

或者更好的是，在 CSS 文件中使用样式：

HTML:

<input type="image" src="images/btn.png" alt="Submit"
       class="somethingMeaningful" />

CSS:

input.somethingMeaningful { border: 0; width: 102px; height: 25px; }

如果 yslow 或 Google PageSpeed 仍然抱怨，请忽略。

Answer 2

验证和解析速度是两个不同的东西，这三个工具各有侧重。
关于验证器上的警告，这是因为没有规范包含这些标签上的此类信息，并且可以使用 CSS 而不是 HTML 添加它们。

input{ 
    border: none; 
    height:25px; 
    width: 102px; 
}

Answer 3

您应该通过 CSS 外部文件添加这些内容，因为 HTML 验证器会进行检查以确保未设置样式值。

验证背后的想法是页面应该能够在没有任何 CSS 的情况下查看。 但是，Google Page 速度背后的想法是使页面加载速度最快。

如果您使用 CSS 添加这些声明，则应该能够通过验证器。 只要您正确调整了实际图像文件的大小，加载时间也应该没问题。

Answer 4

border、height 和 width 不是 W3C 规范的一部分：http://www.w3schools.com/TAGS/tag_input.asp 因此无效。 它们无助于加快 HTML 解析速度，但有助于加快图像渲染速度，因为浏览器不需要计算尺寸。

这个增益非常小（取决于您加载的图像数量）。 所以你基本上可以忽略它。 如果您尝试将尺寸定义为图像实际尺寸以外的尺寸，则可以使用 CSS 为其指定尺寸。