html - 我的 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 建议？

score 5 · Accepted Answer

使用 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 仍然抱怨，请忽略。

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

4 回答 4