интересные html коды для сайтов
Интересные HTML теги, о которых никто не знает
Наверно не многие из Вас знают, что в языке HTML есть специальный тег для задания аббревиатур, или тег для обозначения адреса. В данной заметке будет приведено несколько html тегов которые могут очень пригодиться при создании сайтов, но очень редко используются.
Атрибут tabindex
Этот тег определяет порядок перехода между полями формы по клавише «Tab»:
В этом примере по нажатию клавиши «Tab» мы пропускаем ссылку «Забыли пароль».
Тег
Тег позволяет указать браузеру, где нужно сделать сброс строки, когда это необходимо:
Нeразрывный пробел
В данном случае название фирмы перенесется на следующую строку вместе, а не раздельно.
Тег
Тег является «младшим братом» тега
. Этот тег определяет текст на странице как ссылку. По-умолчанию, текст внутри этого тега выделяется курсивом, что легко меняется с помощью стилей.
Использовать этот тег можно для цитирования библиографий и других ссылок сайта.
Тег
Тег позволяет логически и визуально объединить элементы select-а:
Тег
Тег
Как видно из названия, этот тег семантически выделяет адреса на странице. Адрес выделяется курсивом, что тоже легко меняется с помощью стилей:
Теги
Тег
Этот тег нужно(!) использовать во всех формах. С помощью этого тега задаются метки элементам формы. Иными словами, при клике мышью на текст в теге переводится фокус к соответствующему элементу формы, что существенно упрощает навигацию по форме. Например, этот тег просто незаменим в голосовалках:
Тег
Тег логически группирует элементы формы. С помощью тега можно задать название группе. Визуально группа выделяется рамкой вместе с меткой:
Теги HTML: 10 крутых вещей которые они могут делать
В общем сложности, сегодня в HTML присутствует 142 элемента, которые стандартизованы W3C, исключая те, которые находятся в разработке или устарели (такие как: strike, center, font, plaintext и многие другие).
1. Map картинок
тег может быть использован для создания кликабельных областей на картинке, которые могут быть использованы в перенаправлении пользователя на другой сайта или перемещение экрана на другую область страницы.
2. Input подсказки
Используя можно сделать список подсказок, которые будут появляться по время ввода данных в input.
3. Подсветка текста
4. Template
Внимание: Данный тег не поддерживается в IE.
5. Small
Иногда требуется сделать размер шрифта меньше — не таким как основной. Например: условия, цитаты, юридические права и так далее. Для этого подойдет тег .
6. Ссылка на корень сайта
Тег указывает корневую ссылку для всех ссылок внутри используемого документа. Так же об этом теге можно прочитать на официальном сайта Mozilla Developers.
7. Picture тег
Количество девайсов с разными расширениями экрана расчет с каждым днем. Для телефона надо одно разрешение, для компьютера другое. Теперь такой вопрос — как быть с картинками? Ведь их нужно адаптировать под разные экраны. Проблема решена, мы будем использовать HTML5 тег —
, который позволяет добавлять разные картинки под разные расширения.
Внимание: данный тег работает только в Chrome. Для того, чтобы это работало в FireFox нужно поставить dom.image.picture.enable как true в about:config.
8. Color Picker или выбор цвета
HTML5 представил очень много разных возможностей. Одним из них — это возможность выбора цвета. Input элемент, с type=»color», теперь позволяет выбрать цвет из окошка, которое появляется при нажатии на поле.
9. Группирование
Внимание: данный тег может принимать свойства CSS.
Малоизвестные, но крутые атрибуты в HTML
Спросите случайного фронтендера, какие атрибуты HTML он использует — и услышите что-то вроде «src, href, style, class. » и прочую чепуху, которую всем ещё в младенчестве вживили на чипе агенты IETF. Между тем, стандарты веба не стоят на месте, и с каждым годом в браузерах появляются всё более крутые фичи не только для монструозного CSS, но и для обычных элементов HTML. Вы знали, что с помощью атрибутов можно пинговать* произвольный адрес, а элементы формы могут многократно переопределять её поведение? Вряд ли.
* — нет, это не настоящий пинг. Но так даже лучше.
Продвинутый выбор даты
Мы ограничили выбор даты одним месяцем, не бог весть какой рокетсайенс:
Теперь оставим только субботы, потому что проводить вечеринку на буднях идея так себе:
Как поссорить форму саму с собой
Если игры с выбором даты давно освоены, не огорчайтесь! Вот пачка действительно необычных атрибутов для тега button :
Несмотря на указанную в родителе отправку данных на some-endpoint, кнопка Submit, как и нажатие enter в инпутах, отправит GET-запрос на some-other-endpoint! Ну и валидация полей также отключается. Играясь с такими кнопками можно запилить форму с условным поведением, круто.
Несколько email-ов в одном поле
Опциональный атрибут inputmode=»text» Bramus Van Damme предлагает использовать для удобства пользователей на iOS, у которых нет запятой на клавиатуре для ввода почты.
Цветовые схемы вне CSS
Если вы по-настоящему глубоко изучили все аспекты применения тёмной темы, то наверняка знаете про возможность сообщить браузеру о поддержке цветовых схем. Это нужно для покрытия мелких назойливых элементов с дефолтными браузерными стилями (для светлой темы), которые иначе задолбаешься переопределять в CSS. Так выглядит классическое определение тем:
А так работают профессионалы:
Первой указывается предпочтительная тема ( prefers-color-scheme в CSS всё равно переопределит её), то есть при dark light браузер покажёт тёмную тему, если не получит других инструкций, а при light dark — наоборот.
NB: в мозилле поддержку ещё не завезли:
Собираем метрики прямо из ссылок
Заключение
Если бы веб-стандарты принимались и применялись в браузерах быстрее, мы бы жили в совершенно другом мире. Ну знаете, как на картинках с летающими машинами и смешных форм небоскребами. В любом случае, недра спеков что по CSS, что по HTML всегда таят в себе что-то интересное и необычное. Заглядывайте туда почаще.
На правах рекламы
Серверы для размещения сайтов — это про наши эпичные! Все серверы «из коробки» защищены от DDoS-атак, скорость интернет-канала 500 Мегабит, автоматическая установка удобной панели управления VestaCP для размещения сайтов. Лучше один раз попробовать 😉
FloodSpamBook
Последние записи
Рубрики
Полезные html коды
Бегущая строка
Вставить поиск на страницу.код
border=»0″ — рамочка вашего баннера, widt h=»88″ — ширина баннера, height=»31″ — высота
Send mail
my e-mail
чтобы вставить любую картинку вместо текста впишите URL картинки, используя тег на вставку рисунка
Вставка ссылки на страничку
Любое описание вашей ссылки
Крупный шрифт
Ваш текст
Цвет текста
подчеркнутый текст
ваш текст
Спрятать текст или картинку
< cut >
вставлять без промежутков
для уменьшения картинки поменять величину «width» на нужную.
Пробел в документе
& # 160 ;
‘Блок прокрутки с текстом, баннерами,
ссылками или просто картинками.
ВАШ ТЕКСТ
ВАШ ТЕКСТ
ИЛИ ЛЮБАЯ
КАРТИНКА
DIRECTION=»DOWN» — движение вниз
DIRECTION=»LEFT» — движение справа налево
DIRECTION=»RIGHT» — движение слева направо
DIRECTION=»UP» — движение вверх
height=»значение» — высота
width=»значение» — ширина
hspace=»значение» — размер свободного места в пикселах слева и справа от бегущей строки
vspace=»значение» — размер свободного места в пикселах сверху и снизу от бегущей строки
bgcolor=»цвет» — цвет фона бегущей строки
scrolldelay=»значение» — задержка между двумя движениями в миллисекундах (по умолчанию 85)
scrollamount=»значение» — скорость движения строки (от 1 до 10: 1 — самое медленное движение, 10 — самое быстрое)
loop=»значение» — сколько раз прокрутится строка
— расстановка этого тега указывает браузеру место, где при необходимости можно перенести текст на следущую строку, чтобы страница не разъезжалась.
, используется для выделения цитат.
— используется для создания меню — группирует опции в списке select.
— выделяет внесенные изменения (в виде подчеркивания).
— выделяет текст, который был удален в новой версии документа (зачеркивание).
— тег группирует данные, заключая их в рамку.
Он-Лайн переводчик!
Тэг для выпадающего списка
Добавление страницы в избранное
Установка домашней страницы
Готовые решения для сайтов. Как сделать.
Сниппеты. Готовые решения для сайтов. Фрагменты кода HTML, CSS и JavaScript.
Вы можете использовать данные готовые решения (сниппеты) на своих сайтах. Это ускорит и облегчит вам написание кода веб-страниц. В данных примерах используются всего лишь три технологии: HTML + CSS + JavaScript. Также вы можете изменять код (например, стилизацию страниц с помощью CSS), приспосабливая его для своих веб-проектов.
Слайдшоу
Форма входа
Меню Аккордеон
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.