Не все теги HTML одинаковы.
Как интерфейсный разработчик, вы, несомненно, постоянно используете HTML и, вероятно, чувствуете, что в нем больше нет ничего неизвестного. Тем не менее, его развитие (в частности, с появлением HTML5) временами может вас удивить.
Я покажу вам 10 тегов HTML, которые вы, возможно, не используете или даже не знаете, которые помогают улучшить семантику и удобство обслуживания ваших веб-страниц.
Основные семантические теги HTML, такие как <header>
, <footer>
и <nav>
, почти не требуют пояснений. Но есть множество новых HTML-тегов, которые нам также необходимо использовать.
1 раз
Этот тег позволяет отображать на ваших веб-страницах машиночитаемую дату и / или время.
Поскольку вы можете просто размещать дату и время на странице, вы можете задаться вопросом, зачем вам вообще использовать временную метку. Простой ответ заключается в том, что, хотя вы можете отображать дату и время на своей странице различными способами, бывают случаи, когда вы можете захотеть, чтобы браузер четко понимал, что такое дата и / или время. Используя атрибут datetime тега <time>
, вы можете убедиться, что ясно, что дата и / или время представлены. Что еще более важно, используя сценарии или другое кодирование, вы можете получить доступ к этому машиночитаемому формату и использовать его для вычислений и многого другого.
Тег <time>
и его атрибут datetime поддерживаются всеми основными браузерами, включая Google Chrome 6.0+, Internet Explorer / Edge 9.0+, Safari 5.0+ Firefox 4.0+ и Opera 11.1+.
<p>Our party is going to be <time datetime="2018-08-11 17:00">the eleventh of August at 5:00pm</time></p>
Preview
Our party is going to be the eleventh of August at 5:00pm
2- DataList
<datalist>
tag обеспечивает интерфейс автозаполнения для <input>
elements. Каждый список содержит набор <option>
элементов, имеющих связанное значение. При связывании с <input>
с использованием атрибута «список» он может предоставлять раскрывающийся список или даже отображать предложения по мере ввода пользователем.
<label for="tutorial_choice">Tutorials: </label>
<input list="tutorial_types" name="tutorial_choice" id="tutorial_choice">
<datalist id="tutorial_types">
<option value="HTML">
<option value="CSS">
<option value="SQL">
</datalist>
Предварительный просмотр
3- Шаблон
<template>
используется для хранения фрагментов кода HTML, которые можно клонировать и вставлять в документ HTML.
Содержимое тега скрыто от пользователей и хранится на стороне клиента. Он инертен, пока не будет активирован с помощью JavaScript.
Браузер обрабатывает содержимое <template>
element при загрузке страницы, чтобы убедиться, что код действителен.
Шаблоны могут быть размещены где угодно внутри <head>
, <body>
или <frameset>
и могут содержать любой тип контента, который разрешен в этих элементах.
<template>
tag - новый элемент в HTML5.
Все в <template>
element анализируется как обычный HTML. Однако есть исключения:
- Он не отображается.
<script>
tags в нем не работают.<style>
tags в нем не оцениваются.- Внешние ресурсы не отображаются.
- Содержимое этого элемента не считается документом. Если на главной странице используется document.getElementById () или querySelector (), дочерние узлы шаблона не будут возвращены.
<template id="myTemplate"> <p>Template content</p> </template> <div id="normalContent"> <p>First paragraph</p> </div> <!-- JavaScript function clones the template and adds it to the document. --> <button onclick="useTemplate();">Show content</button> <script> function useTemplate() { var myTemplate = document.getElementById('myTemplate'); normalContent = document.getElementById('normalContent'); clonedTemplate = myTemplate.content.cloneNode(true); normalContent.appendChild(clonedTemplate);} </script>
Предварительный просмотр
4- OptGroup
<optgroup>
tag - отличный способ добавить небольшое определение между группами параметров внутри поля выбора. Например, если вам нужно сгруппировать списки фильмов по времени, это будет выглядеть так:
<label
for="showtimes">Showtimes</label>
<select
id="showtimes"
name="showtimes"> <optgroup
label="1PM"></optgroup> <option
value="titanic">Twister</option> <option
value="nd">Napoleon Dynamite</option> <option
value="wab">What About Bob?</option> <optgroup
label="2PM"></optgroup> <option
value="bkrw">Be Kind Rewind</option> <option
value="stf">Stranger Than Fiction</option> </select>
Предварительный просмотр
5- ‹abbr›
<abbr>
tag используется вместе с атрибутом заголовка, чтобы связать полнотекстовое объяснение с аббревиатурой или акронимом. Посетители веб-сайта не видят текст в атрибуте title, но браузеры, поисковые системы и вспомогательные технологии используют эту информацию.
<abbr
title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album.
Предварительный просмотр
6- Sup
Тег <sup>
используется для идентификации текста, который должен располагаться в верхнем индексе относительно окружающего текста.
<p>This text contains <sup>superscript</sup> text.</p>
Предварительный просмотр
7- Ins & Del
<ins>
tag подчеркивает то, что было добавлено в документ, а <del>
tag показывает, что было убрано с зачеркиванием.
John <del>likes</del> <ins>LOVES</ins> his new iPod.
Предварительный просмотр
8- Прогресс
<progress>
tag отображает ход выполнения задачи.
Он имеет два атрибута: value
(для указания состояния выполнения) и max
(для указания максимального достижимого значения). Если значение max
не задано, предполагается диапазон от 0 до 1, а value
может быть любым числом с плавающей запятой в этом диапазоне. Итак, чтобы показать индикатор выполнения задачи, выполненной на 50%, вы можете написать:
<progress value="50" max="100">50%</progress>
Or equivalently:<progress value="0.5">50%</progress>
Предварительный просмотр
9- Pre
Тег <pre>
позволяет нам отображать предварительно отформатированный текст в том виде, в котором он представлен в исходном тексте. Это означает, что несколько символов пробела не будут свернуты в один (изменение способа обработки пробелов браузерами по умолчанию). Этот тег идеален, когда вам нужно показать фрагмент кода, потому что он помогает сохранить отступы. Например, на странице у нас может быть что-то вроде этого:
<pre><code> function sayHello(name) { for (var i = 0; i < 3; i++) { console.log('Hi ' + name + '!'); } } sayHello('Aurelio'); </code></pre>
Предварительный просмотр
10- Подробности
<details>
tag создает виджет раскрытия информации, в котором информация видна только тогда, когда виджет переключен в «открытое» состояние. Сводка или метка могут быть предоставлены с помощью элемента <summary>
.
<details> <summary>Details</summary> Something small enough to escape casual notice. </details>
Предварительный просмотр
Надеюсь, вы расширите свои знания с помощью этих HTML-тегов.
Если я пропустил важные HTML-теги, не стесняйтесь вносить предложения ❤