<svg>
- 25 января 2023
✔️ Актуальный |
Тег <svg> используется для определения векторного изображения, которое можно бесконечно масштабировать без потери качества. Он позволяет создавать сложные фигуры, анимацию и интерактивную графику.
<svg>
<!-- SVG графика и фигуры -->
</svg>
Вот простой пример, который рисует красный круг:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
Атрибуты тега <svg>:
width— ширина в пикселях или процентах.height— высота в пикселях или процентах.viewBox— положение и размер области просмотра.
Примеры использования
Рисование основных фигур:
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100" fill="blue" />
<circle cx="100" cy="100" r="40" fill="white" />
<line x1="50" y1="150" x2="150" y2="50" stroke="white" stroke-width="5" />
</svg>
Создание анимации:
<svg width="200" height="200">
<circle cx="100" cy="100" r="40" fill="blue">
<animate attributeName="cx" values="50;150;50" dur="2s" repeatCount="indefinite" />
</circle>
</svg>
Построение интерактивной графики:
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100" fill="red" onclick="alert('Clicked!')" />
</svg>
Для чего использовать тег <svg>
- создание иконок или логотипов;
- построение интерактивных графиков и диаграмм;
- рисование иллюстраций и анимации;
- создание карт и планов этажей;
- проектирование интерфейсов;
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
- Изображения SVG могут быть более сложными, чем обычные изображения, что может привести к увеличению размера файла и замедлению загрузки страницы.
- Синтаксис SVG может быть сложнее обычного HTML.
- Некоторые старые веб-браузеры могут не поддерживать все возможности SVG.
Нюансы
В некоторых ситуациях SVG-изображение отображается не так, как ожидалось, из-за неправильного синтаксиса или использования неподдерживаемых функций.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Справочник по HTML
Введение
Структура HTML-документа: <!DOCTYPE>, <html>, <head> и <body>.
Основные HTML-теги
Форматирование текста: <b>, <i>, <u>, <strong>, <em> и другие.
Абзацы и разрывы строк: <p>, <br>
Списки: <ul>, <ol>, <li>, <dl>, <dt>, <dd>
Ссылки: <a>
Картинки: <img>
Атрибуты и мета-теги
Глобальные атрибуты: class, id, style.
Атрибуты событий: onclick, onload и т. д.
Основные мета-теги: charset, viewport, description.
Формы
Элемент формы: <form>
Поля ввода: <input>, <textarea>, <button>, <select>, <option>.
Валидация форм разными способами.
Таблицы
Основная структура таблицы: <table>, <tr>, <td>, <th>
Расширенные функции таблицы: <caption>, <colgroup>, <col>, <thead>, <tfoot>, <tbody>
Аудио, видео, встроенные элементы
Аудио и видео: <audio>, <video>
Встроенные элементы: <embed>, <iframe>, <object>
Семантика, структура и доступность
Семантические теги: <header>, <footer>, <nav>, <article>, <section>, <aside>, <figure>, <figcaption>
Цитаты и источники: <blockquote>, <q>, <cite>
Дополнительные элементы
Интерактивные элементы: <details>, <summary>
Скрипты: <script>, <noscript>
Шаблоны: <template>
Проверка и тестирование документа
💡 Авторы и редакторы — Евгений Шкляр, Лена Цимбалист, Настя Ткачёва, Саша Ермайкина.
Вёрстка, оформление — Саша Ермайкина.
- 12 сентября 2023
<source>
Тег <source> нужен для указания адреса картинок в теге <picture>, аудио в теге <audio> или видео в теге <video>. Он не используется как отдельный тег.
<audio>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Ваш браузер не поддерживает аудиоэлемент.
</audio>
Для картинок:
<picture>
<source media=""(min-width: 650px)" srcset="large-image.jpg">
<source media=""(min-width: 465px)" srcset="medium-image.jpg">
<img src="small-image.jpg" alt="Изображение">
</picture>
Атрибуты тега <source>:
type: Определяет формат мультимедиа ресурса, напримерvideo/mp4илиimage/jpeg.src: Указывает на конкретный мультимедийный файл.srcset: Предоставляет разные версии изображения, обычно для разных разрешений экрана.sizes: Определяет, какой размер изображения должен быть выбран в зависимости от размера экрана устройства.media: Определяет условия (например, минимальная ширина экрана), при которых данный источник должен быть использован.widthиheight: Указывают размеры мультимедиа ресурса.
- 8 августа 2023
Вставка элементов на страницу. Тег <object>
✔️ Актуальный |
Тег <object> используется для вставки на страницу какого-то содержимого, например, видео с YouTube, PDF-файлов, Google Maps или других элементов. Этот тег может использоваться вместо устаревших <embed> и <applet>.
<object data="movie.mp4" width="400" height="300"></object>
<object data="music.mp3" width="200" height="50"></object>
<object data="document.pdf" width="500" height="600"></object>
Атрибуты тега <object>:
data— URL или относительный путь к объекту.type— MIME-тип объекта.name— имя объекта.usemap— URL карты изображения.width— ширина объекта.height— высота объекта.
- 8 августа 2023
Наглядное отображение чисел. Тег <meter>
✔️ Актуальный |
Тег <meter> используется для наглядного отображения числовых данных — например, надёжности пароля, уровня зарядки или громкости звука.
Атрибуты тега <meter>:
value— значение на шкале измерений. Обязательный атрибут, значение должно находиться междуminиmaxmin— минимальное значение.max— максимальное значение.low— нижнее пороговое значение.high— верхнее пороговое значение.optimum— оптимальное пороговое значение.
Вместо тега <meter> можно использовать <div> или <span> с CSS-стилями.
- 8 августа 2023
Показ текста при отключенном JavaScript. <noscript>
✔️ Актуальный | 🏗️ Не семантический |
Содержимое тега <noscript> отображается в браузерах с отключенным JavaScript. Если JS включён, содержимое тега <noscript> игнорируется.
Внутри тега <noscript> можно использовать только ограниченное количество тегов, допустимых внутри <body>. В их числе <p>, <h1> —<h6>, <ul>, <ol>, <li>, <blockquote>, <address>, <hr>, <pre>, <figure>, <figcaption>, <table>.
- 8 августа 2023
Добавление меню. Тег <menu>
✔️ Актуальный |
Тег <menu> используется для создания меню на странице. Например, такого:
Тег <menu> может содержать только элементы <li>. Но внутри <li> можно использовать изображения, ссылки, текст и другие списки.
Браузеры могут не отображать меню, если оно не содержит хотя бы один элемент <li>.
- 7 августа 2023
Вставка строки в HTML-таблицу. Тег <tr>
✔️ Актуальный |
Тег <tr> создаёт в таблице строку. Он содержит ячейки <td> или заголовки <th>.
Чтобы таблица отображалась корректно, все ячейки должны быть заполнены. Также ячейки можно объединять с помощью атрибута colspan.
Если необходимо создать таблицу без использования тега <tr>, можете воспользоваться другими тегами для создания разметки, например,<div>, <ul> или <dl>. Однако это может затруднить стилизацию таблицы с помощью CSS.
- 7 августа 2023
Подвал таблицы. Тег <tfoot>
✔️ Актуальный |
Тег <tfoot> создаёт нижнюю часть таблицы — с результатами или другой информацией. Он используется вместе с тегами <table> и <tbody> для структурирования содержимого HTML-таблицы.
Тег <tfoot> — необязательный. Таблица может иметь верхний и нижний колонтитул, но не обязана иметь ни то, ни другое. Если вы не хотите использовать тег <tfoot>, можете заменить его на <div>, <section> или <footer>.
- 7 августа 2023
Как создать шаблон с разметкой. Тег <template>
✔️ Актуальный |
Тег <template> создаёт на странице шаблоны с разметкой, которые можно использовать многократно без копирования кода. Это упрощает работу с динамическим содержимым JavaScript и ускоряет загрузку страницы.
Например, вот шаблон для карточки товара:
<template>
<div class="card">
<h2></h2>
<img src="">
<p></p>
<button></button>
</div>
</template>
⚠️ Содержимое шаблона не отображается на странице, пока не будет склонировано и вставлено в документ при помощи JavaScript.
- 7 августа 2023
Элемент списка в HTML. Тег <li>
✔️ Актуальный |
Тег <li> используется для создания элементов списка. Тег может быть вложен в элемент маркированного списка — <ul>, нумерованного списка — <ol> или меню — <menu>.
В маркированном списке:
В нумерованном списке:
- 7 августа 2023