Мой HTML-код не является допустимой разметкой, пожалуйста, помогите
-
19-09-2019 - |
Вопрос
На моем веб-сайте у меня есть следующий код:
<input type="image" src="images/btn.png" alt="Submit" border="0" height="25" width="102" />
Когда я запускаю свой веб-сайт с помощью одного из многочисленных валидаторов HTML, они запрашивают сообщить мне, что:
- граница
- высота
- ширина
являются недопустимыми атрибутами входного элемента.
Однако YSlow и Google PageSpeed сообщают мне, что я всегда должен указывать размеры изображения, чтобы ускорить синтаксический анализ HTML.
Какой еще способ существует для меня, чтобы использовать кнопку отправки изображения, оставаясь при этом допустимым в формате HTML и следуя рекомендациям YSlow?
Решение
Используйте 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 все еще жалуются, игнорируйте.
Другие советы
Валидация и скорость синтаксического анализа - это две разные вещи, эти три инструмента ориентированы сами на себя.Что касается предупреждения в валидаторе, это связано с тем, что нет спецификации, которая включала бы такую информацию в эти теги, и они могут быть добавлены с помощью CSS вместо HTML.
input{
border: none;
height:25px;
width: 102px;
}
Вы должны добавить их через внешний файл CSS, потому что валидаторы HTML проверяют, не заданы ли значения стиля.
Идея, лежащая в основе проверки, заключается в том, что страницу можно просматривать без какого-либо CSS.Но идея, лежащая в основе Google Page speed, заключается в том, чтобы страница загружалась как можно быстрее.
Если вы добавите эти объявления с помощью CSS, вы сможете передать оба средства проверки.До тех пор, пока вы правильно определили размер вашего фактического файла изображения, у вас также должно быть все в порядке со временем загрузки.
border
, height
и width
не являются частью спецификаций W3C : http://www.w3schools.com/TAGS/tag_input.asp и, следовательно, недействителен.Они помогают ускорить не синтаксический анализ HTML, а рендеринг изображений, поскольку браузеру не нужно будет вычислять размеры.
Этот выигрыш очень мал (в зависимости от того, сколько изображений вы загружаете).Так что в основном вы можете игнорировать это.Вы могли бы использовать CSS для придания ему размеров, если вы пытаетесь определить их как нечто отличное от фактических размеров изображения.