Мой HTML-код не является допустимой разметкой, пожалуйста, помогите

StackOverflow https://stackoverflow.com/questions/1175802

  •  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 для придания ему размеров, если вы пытаетесь определить их как нечто отличное от фактических размеров изображения.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top