Изучение некоторых из наименее известных и используемых тегов в HTML, полезных для конкретных случаев использования, несмотря на низкую популярность.
Когда вы впервые изучали HTML, вы вероятно познакомились с наиболее распространенными тегами, которые используются на многих веб-сайтах и достаточны для подавляющего большинства сценариев. Наверняка каждый веб-разработчик слышал о тегах вроде <html>, <body>, <p>, <a> и конечно же <div>.
Однако подобно языкам программирования в HTML есть нечто большее чем просто основы. Помимо известных тегов, есть ряд редких тегов, которые очень полезны для более сложных и специфических случаев использования, несмотря на их низкую популярность.
Было бы хорошо, если бы Вы расширили свои знания HTML узнав об этих редко используемых тегах, мы рассмотрим 10 из них в этой статье.
Тег <abbr>определяет аббревиатуру или аббревиатуру, например HTML, CSS, PHP, JS, CS, и т.д.
Я читаю о тегах <abbr title="Язык гипертекстовой разметки">HTML</abbr> на сайте <abbr title="Coding Beauty">CB</abbr>.
Аббревиатура по умолчанию обозначается пунктирной линией.
Наведение курсора на элемент <abbr>.
Тег <q>указывает, что текст внутри него является короткой встроенной цитатой.
<q>Coding создает информативные руководства по технологиям веб-разработки</q>
Современные браузеры обычно реализуют этот тег, заключая заключенный в него текст в кавычки:
Мы используем <s>тег для рендеринга текста с перечеркнутой линией (перечеркнутый). Это полезно для представления вещей, которые больше не актуальны или неверны.
Купить за <s>200 долл. США</s> 100 долл. США
Указание на изменение цены с помощью тега <s>.
Подобно тегу <s>, <del>который также отображает зачеркнутый текст, но предназначен для использования с <ins>тегом для обозначения редакционных изменений в уже опубликованном документе.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
del {
background-color: lightsalmon;
}
ins {
украшение текста: нет;
цвет фона: светло-зеленый;
}
</style>
</head>
<body>
Мой любимый язык программирования — <del>JavaScript</del>
<ins>TypeScript</ins>
</body>
</html>
Указание редакционных изменений в документе с помощью тегов <del> и <ins>.
Мы используем <mark>тег для определения текста, который должен быть помечен или выделен.
Кодирование веб-сайта <mark>Beauty</mark>
По умолчанию <mark>применяет ярко-желтый фон к заключенному тексту:
Этот тег полезен для выделения результатов текстового поиска в документе, как это делают многие браузеры при использовании Find on Page инструмента.
Отображение результатов поиска по букве «е» с <mark>тегом.
Тег <wbr>(Word Break Opportunity) определяет определенные позиции в тексте, где можно было бы добавить разрыв строки.
Когда текст переносится в браузере, слова в конце переноса могут быть слишком длинными и прерываться не в том месте.
<p>это-очень-длинный-текст-созданный-для-проверки-тега-wbr</p>
Текст прерывается в месте, выбранном браузером.
После уменьшения окна браузера приведенный выше текст был перенесен и разорван в точке, выбранной браузером, что может быть не тем, что нам нужно.
С помощью <wbr>тега мы указываем точные места в слове, где его можно было бы сломать.
<p>это-очень-длинный-те<wbr />xt-созданный-для-тестирования-тега-wbr</p>
Текст прерывается в месте, заданном тегом <wbr>.
С помощью <details>тега мы можем указать дополнительные сведения о веб-странице в виджете раскрытия информации, который пользователь может просмотреть или скрыть, когда захочет.
<details>
<summary>Lorem Ipsum</summary>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti eos
quod fugiat Quasi Repudiandae, минус quae facere. Сед, киа? Quod
cupiditate asperiores neque iste consectetur tempore eum repellat incidunt
qui.
</details>
Виджет раскрытия закрыт (состояние по умолчанию).
Виджет раскрытия открыт.
Тег <optgroup>группирует связанные параметры в <select>элементе. Это может облегчить пользователям понимание их выбора, когда список вариантов длинный.
<select name="country" id="countries">
<optgroup label="Северная Америка">
<option value="us">США</option>
<option value="ca">Канада</option>
</optgroup>
<optgroup label="Европа">
<option value="uk">Великобритания</option>
<option value="fr">Франция</option>
</optgroup>
</select>
Здесь мы группируем страны в списке в соответствии с их континентами.
Мы используем <datalist>элемент, чтобы указать список предопределенных опций для <input>элемента. Он содержит набор <option>элементов, представляющих рекомендуемые или разрешенные параметры, из которых может выбирать пользователь.
<form>
<label for="lang">Выберите язык:</label>
<input list="langs" name="lang" id="lang" />
<datalist id="langs">
<option value="Английский" />
<option value="Французский" />
<option value="Испанский" />
<option value="Китайский" />
<option value="Немецкий " />
</datalist>
</form>
Чтобы связать <input>элемент с <datalist>элементом, мы устанавливаем idатрибут <datalist>и устанавливаем listатрибут <input>этого же идентификатора.
Список доступных вариантов ввода отображается в раскрывающемся списке.
Доступные параметры меняются в зависимости от того, что пользователь вводит при вводе.
Элемент <fieldset>используется для группировки нескольких связанных элементов в форме. Визуальное разделение, которое обеспечивает этот элемент, может облегчить пользователям понимание ваших форм.
<form>
<fieldset>
<legend>Имя</legend>
<label for="fname">Имя:</label>
<input type="text" id="fname" name="fname" /><br />
<label for="mname">Отчество:< /label>
<input type="text" id="mname" name="mname" /><br />
<label for="lname">Фамилия:</label>
<input type="text" id= "lname" name="lname" />
</fieldset>
<br />
<label for="email">Электронная почта:</label>
<input type="email" id="email" name="email" / >
<br /><br />
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" />
</form>
Мы используем <legend>тег, чтобы определить заголовок для <fieldset>элемента.
Мы используем <sup>тег для определения текста, который должен отображаться как верхний индекс. Надстрочный текст обычно появляется на полсимвола выше обычной строки и имеет меньший шрифт.
С другой стороны, текст нижнего индекса отображается на полсимвола ниже обычной строки. Он также имеет меньший шрифт, и мы используем <sub>тег для его отображения.
<p>Этот текст содержит текст <sub>подстрочный</sub></p>
<p>Этот текст содержит текст <sup>надстрочный</sup></p>
Вот более практический пример:
푥<sup>2</sup> - 3푥 - 28 = 0. Найдите 푥. <br />
H<sub>2</sub>SO<sub>4</sub> + NaOH → Na<sub>2</sub>SO<sub>4</sub> +
H<sub>2</sub>O
В этой статье мы рассмотрели некоторые из наименее известных и используемых тегов в HTML. Эти редкие теги могут быть весьма полезны в определенных ситуациях, несмотря на их редкое использование.
Задумались, как сделать пульсирующий элемент на чистом css/html. В данной статей, мы покажем саймый простой пример того, как реализоваться анимацию пульсацию, используя html и css.
Специальные символы HTML. Для отображения символов, которых нет на клавиатуре, применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;)
Стили могут относиться к различным типам медиа. Например, можно создать отдельный стиль для страницы, которая будет просматриваться в браузере, и другой стиль для печати страницы.