Язык гипертекстовой разметки (HTML) — это обычный язык разметки страниц, который нужен для отображения контента в браузерах пользователей.
Давайте начнем!
1. Совет по производительности.
Вы можете использовать loading=lazy атрибут, чтобы отложить загрузку изображения до тех пор, пока пользователь не прокрутит до него.
<img src='image.jpg' loading='lazy' alt='Alternative Text'>
2. Ссылки на электронную почту, звонки и SMS:
<a href="mailto:{email}?subject={subject}&body={content}">Отправить</a>
<a href="tel:{phone}">Позвонить нам</a>
<a href="sms:{phone}?body={content}">Написать СМС</a>
3. Упорядоченные списки с атрибутом start.
Используйте start атрибут, чтобы изменить начальную цифру для ваших упорядоченных списков.
4. Элемент `meter`
- Вы можете использовать этот <meter>элемент для отображения количества. Не требуется JavaScript/CSS.
<label for="value1">Low</label>
<meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter>
<label for="value2">Medium</label>
<meter id="value2" min="0" max="100" low="30" high="75" optimum="80" value="50"></meter>
<label for="value3">High</label>
<meter id="value3" min="0" max="100" low="30" high="75" optimum="80" value="80"></meter>
5. Очистка кэша Favicon
Чтобы обновить значок вашего веб-сайта, вы можете заставить браузеры загружать новую версию, добавив ?v=2к имени файла.
Это очень полезно использовать в рабочей среде.
<link rel="icon" href="/favicon.ico?v=2" />
6. Тег «mark»
Вы можете использовать <mark>тег для выделения текста.
7. Используйте .webp формат изображения
Используйте .webp формат изображения, чтобы уменьшить размер изображений и повысить производительность вашего веб-сайта.
<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="logo">
</picture>
8. Элемент base в HTML
Если вы хотите открыть все ссылки в документе в новой вкладке, вы можете использовать элемент <base>:
<head><base target="_blank"> </head>
9. Атрибут «проверка правописания»
Используйте spellcheck атрибут, чтобы определить, может ли элемент проверяться на орфографические ошибки.
<label for="input1">spellcheck="true"</label>
<input type="text" id="input1" spellcheck="true">
10. Тег <pre>
Используйте <pre>тег, чтобы отобразить предварительно отформатированный текст точно так, как он написан в файле HTML:
<pre> .center {
display: flex;
align-items: center;
justify-content: center;
}
</pre>
