Если хотите хоть как-то отличаться от других HTML-щиков, изучите нераспространённые приёмы языка.
Каждый раз, когда новички изучают что-то новое, им кажется что необходимо узнать слишком большой массив информации и потратить на это кучу времени и сил, а потому забрасывают это дело. Конечно, это не про всех.
Сегодня, когда информация общедоступна, но оценить её качество и доступность достаточно трудно, нужно научиться выделять самое необходимое, чтобы не запутаться в том, что нерелевантно для вас.
Мы решили сделать подборку интересных приёмов в HTML (кажется, каждый программист уже умеет в этот язык разметки), про которые не напишут в обычных учебниках и не расскажут в видеокурсах. Эти приёмы были отобраны вручную среди сотен других, посоветованных участниками Stack Overflow. Кстати, тем, кто ещё не знаком с этой платформой, советуем взять на вооружение. Здесь удобно находить ответы на стандартные и нестандартные вопросы, а если вы чего-то просто не понимаете, то вам помогут опытные пользователи, по крайней мере, на это стоит надеяться. Ну что, пора приступать к рассмотрению интересных HTML-приёмов!
1. Использование независимого от протокола абсолютного пути
Если браузер просматривает страницу в SSL через HTTPS, он работает с протоколом HTTPS, если же нет, то с HTTP.
Это предотвращает появление в Internet Explorer сообщения об ошибке «Эта страница содержит как защищённые, так и незащищенные элементы» и сохраняет все ваши запросы в рамках одного и того же протокола.
Предостережение: при использовании или @import для таблицы стилей, 7-я и 8-я версия Internet Explorer загружают файл дважды. Тем не менее, в остальном всё отлично.
2. Связь с тего label
Тег label логически связывается с элементом формы, используя атрибут «for». Большинство браузеров превращают это в ссылку, которая активирует связанный элемент формы.
3. Свойства contentEditable
This text can be edited
This text can be edited
Это делает ячейки доступными для редактирования! Можете протестировать, если не верите.
4. Тег optgroup
Тег optgroup — это одна из функций, которая зачастую не используется, большинство даже не в курсе его существования.
Optgroup, как контейнер объединяет в группу теги. Этот тег выделяет варианты в выпадающем списке select в отдельную группу.
Пример работы:
Volvo
Saab
Mercedes
Audi
5. Тег base
Если вам нужно использовать маршрутизацию или перезаписывать URL, то можно воспользоваться тегом .
Допустим, вы располагаетесь на этом адресе —www.anypage.com/folder/subfolder/
Обычный анкор
Click here
указывает на www.anypage.com/folder/subfolder/test.html
Теперь, если добавить тег :
Click here
То анкор поведёт на www.anypage.com/test.html
6. Onerror
onerror — это JavaScript событие, которое будет запущено прямо перед отображением маленького красного крестика.
Это можно использовать для написания сценариев замены «битых» изображений каким-либо альтернативным контентом.
На первый взгляд это может показаться бесполезным, потому что нельзя знать заранее такие вещи, но, предположим, что вы используете изображение со стороннего ресурса, который вы не контролируете. Stack Overflow обслуживается gravatar.com, они его не контролируют, но если что, то у SO, будут проблемы.
7. Тег kbd
Элемент kbd может обозначать как набираемый текст, так и горячие клавиши. Многие заменяют его с помощью CSS.
Тег kbd используют для обозначения клавиш на клавиатуре. Например (да, выглядит страшновато):
Ctrl+Alt+Del
8. Теги, выделяющие текст
Тег blink
Должен использоваться для чего-либо крайне важного на сайте. Элементы под тегом будут мигать.
Тег marquee
Если использовать этот тег, элементы будут ездить по странице. Не совсем понятно, зачем это нужно, но быть может у вас есть идеи применения.
9. Lowsrc
Это малоизвестно, но вы можете указать lowsrc для показа превью, пока загружается основное изображение из src:
Это будет полезно, если вы не уважаете чересстрочные изображения.
Однако ещё в 2000-м году это свойство использовалось для атаки на Hotmail.
10. Маркировка удалённых элементов
Для того, чтобы промаркировать удалённые элементы, можно использовать теги <del> и <ins>: