我的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的情况下查看页面。但是，谷歌页面速度背后的想法是使页面加载速度最快。

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

Answer 4

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

此增益非常小（取决于您加载的图像数量）。所以你大多可以忽略它。如果您尝试将它们定义为图像的实际尺寸以外的其他内容，则可以使用CSS为其指定尺寸。