Комментарии(пояснение либо отзыв) в HTML
начинаются с <!-- и заканчиваются на -->.
Не забывайте о восклицательном знаке в начале тега! Но вам не нужно добавлять его в конце.
HTML-комментарии не отображаются в браузере. Комментарии к коду очень важны при работе в команде, поэтому не ленитесь их писать)
начинаются с <!-- и заканчиваются на -->.
Не забывайте о восклицательном знаке в начале тега! Но вам не нужно добавлять его в конце.
HTML-комментарии не отображаются в браузере. Комментарии к коду очень важны при работе в команде, поэтому не ленитесь их писать)
👍7
Спецсимволы HTML, или символы-мнемоники, используются для вставки специальных символов в текст веб-страницы, которые недоступны на стандартной клавиатуре или не поддерживаются кодировкой страницы. Это могут быть символы пунктуации, математические символы, буквы других алфавитов, специальные значки и т.д.
Чтобы вставить спецсимвол, необходимо использовать его HTML-код или мнемонику, например, © для символа копирайта ©. Спецсимволы чувствительны к регистру, поэтому их необходимо вводить точно так, как указано в таблице символов.
Если спецсимвол не имеет мнемоники, его можно вставить с помощью номерного кода, записанного в десятичной или шестнадцатеричной системе счисления, например, ☰ или ☰ для символа "гамбургер" ☰ 🍔.
Спецсимволы могут использоваться как внутри тегов HTML, так и в качестве значений свойств CSS, например, в свойстве content. При этом они наследуют цвет от родительского элемента, но его можно изменить с помощью свойства color или тега <span>.
Чтобы вставить спецсимвол, необходимо использовать его HTML-код или мнемонику, например, © для символа копирайта ©. Спецсимволы чувствительны к регистру, поэтому их необходимо вводить точно так, как указано в таблице символов.
Если спецсимвол не имеет мнемоники, его можно вставить с помощью номерного кода, записанного в десятичной или шестнадцатеричной системе счисления, например, ☰ или ☰ для символа "гамбургер" ☰ 🍔.
Спецсимволы могут использоваться как внутри тегов HTML, так и в качестве значений свойств CSS, например, в свойстве content. При этом они наследуют цвет от родительского элемента, но его можно изменить с помощью свойства color или тега <span>.
👍8✍4
Тег <html> и его атрибуты (lang, dir)
Атрибут lang для элемента html определяет основной язык документа.
Атрибут dir определяет направление письма для содержания элемента. Возможны следующие значения:
ltr — слева-направо;
rtl — справа-налево;
auto — направление письма для данного элемента следует определить автоматически, независимо от направления письма для родительского элемента.
Атрибут lang для элемента html определяет основной язык документа.
Атрибут dir определяет направление письма для содержания элемента. Возможны следующие значения:
ltr — слева-направо;
rtl — справа-налево;
auto — направление письма для данного элемента следует определить автоматически, независимо от направления письма для родительского элемента.
👍8
Поговорим еще про теги
Тег <head> никак не отображается в браузере, а просто является контейнером для следующих элементов:
Тег <noscript> это заголовок страницы и один из самых важных для поисковиков элементов метаданных. С его помощью алгоритмы понимают, насколько контент на странице соответствует запросу пользователя.
Тег <meta> используется для передачи метаданных о странице, т.е. с его помощью можно сообщить браузеру и роботам о том, какие данные и в каком виде на этой странице находятся.
Тег <head> никак не отображается в браузере, а просто является контейнером для следующих элементов:
Тег <noscript> это заголовок страницы и один из самых важных для поисковиков элементов метаданных. С его помощью алгоритмы понимают, насколько контент на странице соответствует запросу пользователя.
Тег <meta> используется для передачи метаданных о странице, т.е. с его помощью можно сообщить браузеру и роботам о том, какие данные и в каком виде на этой странице находятся.
✍6
Тег body предназначен для хранения содержания веб-страницы, отображаемого в окне браузера.
Атрибуты тега body:
alink — устанавливает цвет активной ссылки;
background — задаёт фоновый рисунок на веб-странице;
link — цвет ссылок на веб-странице;
vlink — цвет посещённых ссылок.
...
Их очень много, но всё это можно будет задать и в css-свойствах
Атрибуты тега body:
alink — устанавливает цвет активной ссылки;
background — задаёт фоновый рисунок на веб-странице;
link — цвет ссылок на веб-странице;
vlink — цвет посещённых ссылок.
...
Их очень много, но всё это можно будет задать и в css-свойствах
👍7
Тег div в HTML разбивает документ на отдельные части, которые отличаются друг от друга.
Его можно использовать исключительно для отделения одной части (например, текста) от другой (например, рисунка).
Обычно теги div применяют для разделения веб-страницы на отдельные участки (например, шапка, область меню, раздел содержимого, подвал и т.п.).
Также его используют для выделения участков содержимого, которые должны отличаться по стилю от основного текста (например, для отображения на веб-страницы исходных кодов программ).
Для более эффективного применения тега div можно добавить атрибуты id и/или class, которые позволяют конкретному разделу дать уникальное имя и задать свои свойства (такие как шрифт, цвет текста, выравнивание и т.п.).
Его можно использовать исключительно для отделения одной части (например, текста) от другой (например, рисунка).
Обычно теги div применяют для разделения веб-страницы на отдельные участки (например, шапка, область меню, раздел содержимого, подвал и т.п.).
Также его используют для выделения участков содержимого, которые должны отличаться по стилю от основного текста (например, для отображения на веб-страницы исходных кодов программ).
Для более эффективного применения тега div можно добавить атрибуты id и/или class, которые позволяют конкретному разделу дать уникальное имя и задать свои свойства (такие как шрифт, цвет текста, выравнивание и т.п.).
👍6
Тег span применяется к внутренним (inline) элементам страницы, то есть к словам и фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и т. п.
Тег span можно использовать для следующих задач:
Выделение участка текста определённым цветом, фоном или фоновым изображением.
Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.
Создание различных форматирующих стилей для выбранного участка текста.
Использование скриптовых языков программирования к выбранным текстовым участкам, например, подсветка синтаксиса кода и т. п.
Тег span можно использовать для следующих задач:
Выделение участка текста определённым цветом, фоном или фоновым изображением.
Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.
Создание различных форматирующих стилей для выбранного участка текста.
Использование скриптовых языков программирования к выбранным текстовым участкам, например, подсветка синтаксиса кода и т. п.
👍7
Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой.
Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега <br> можно сделать так, чтобы следующая строка начиналась ниже элемента.
Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега <br> можно сделать так, чтобы следующая строка начиналась ниже элемента.
👍5
HTML тег <hr> (horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину.
Горизонтальная линия будет полезна для разделения тематического вступления и основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.
Горизонтальная линия будет полезна для разделения тематического вступления и основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.
👏5
Тег <a> используется для создания ссылки на что-либо в интернете. Эта ссылка может вести на другую веб-страницу, на какое-то место внутри той же веб-страницы, на файл, электронный адрес или на любое другое место.
Ссылкой может быть не только текст, но и любой другой элемент, например, картинка или кнопка, если его поместить внутри тега <a>.
Самый важный атрибут тега <a> - это атрибут "href", который содержит адрес, на который ведет ссылка. Этот атрибут указывает, куда именно будет вести ссылка при ее нажатии.
Короче говоря, тег <a> позволяет создавать активные ссылки на разные объекты в интернете, чтобы пользователь мог переходить по ним.
Ссылкой может быть не только текст, но и любой другой элемент, например, картинка или кнопка, если его поместить внутри тега <a>.
Самый важный атрибут тега <a> - это атрибут "href", который содержит адрес, на который ведет ссылка. Этот атрибут указывает, куда именно будет вести ссылка при ее нажатии.
Короче говоря, тег <a> позволяет создавать активные ссылки на разные объекты в интернете, чтобы пользователь мог переходить по ним.
👍4🫡2
Тег <abbr> используется для обозначения сокращений, аббревиатур и акронимов на веб-странице. Это очень полезно, потому что не все пользователи могут быть знакомы со всеми сокращениями, которые используются.
Основное назначение тега <abbr> - это предоставить расшифровку сокращения с помощью атрибута "noscript". Когда пользователь наводит курсор на элемент, обозначенный тегом <abbr>, он видит всплывающую подсказку с полным значением сокращения.
Основное назначение тега <abbr> - это предоставить расшифровку сокращения с помощью атрибута "noscript". Когда пользователь наводит курсор на элемент, обозначенный тегом <abbr>, он видит всплывающую подсказку с полным значением сокращения.
👍4👌3
Тег <article> в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.
Тегом <article> размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте <article> для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
Тегом <article> размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте <article> для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
👍4🔥1😁1
Тег <audio> предназначен для встраивания аудиоконтента на веб-страницу. Он позволяет добавлять аудиофайлы, которые могут проигрываться в браузере.
Основные атрибуты тега <audio>:
1. src - указывает путь к аудиофайлу, который необходимо воспроизвести.
2. controls - добавляет элементы управления воспроизведением аудио (play, pause, volume и т.д.).
3. autoplay - позволяет автоматически запускать воспроизведение аудио при загрузке страницы.
4. loop - заставляет аудио проигрываться в бесконечном цикле.
5. muted - изначально выключает звук аудио.
Основные атрибуты тега <audio>:
1. src - указывает путь к аудиофайлу, который необходимо воспроизвести.
2. controls - добавляет элементы управления воспроизведением аудио (play, pause, volume и т.д.).
3. autoplay - позволяет автоматически запускать воспроизведение аудио при загрузке страницы.
4. loop - заставляет аудио проигрываться в бесконечном цикле.
5. muted - изначально выключает звук аудио.
👍3
Тег <b> (от англ. «bold» — полужирный) предназначен для выделения текста полужирным начертанием в целях привлечения к нему внимания пользователя, упрощения восприятия им текста и т.д.
При этом выделенный текст не считается более важным и не должен читаться в альтернативном голосе или настроении.
Элемент <b> идеально подходит в следующих ситуациях:
ключевые моменты текста;
ключевые объекты и персонажи;
название продуктов в обзоре;
имена и названия организаций;
При этом выделенный текст не считается более важным и не должен читаться в альтернативном голосе или настроении.
Элемент <b> идеально подходит в следующих ситуациях:
ключевые моменты текста;
ключевые объекты и персонажи;
название продуктов в обзоре;
имена и названия организаций;
👍3
Тег <blockquote> используется для обозначения цитаты или выдержки из другого источника на веб-странице. Он отображает текст с дополнительным отступом, что визуально выделяет его из общего контекста.
👍3
Тег <button> используется для создания интерактивной кнопки на веб-странице. Он позволяет добавлять элементы управления, на которые пользователь может нажимать, чтобы выполнить какое-либо действие.
Основные особенности тега <button>:
1. Внешний вид. По умолчанию кнопка, создаваемая с помощью <button>, имеет стандартный оформление, включающее рамку, фон и текст. Но этот вид можно изменять с помощью CSS.
2. Доступность. В отличие от обычных ссылок <a>, кнопки <button> более доступны для пользователей, использующих клавиатуру или специальные устройства.
Основные особенности тега <button>:
1. Внешний вид. По умолчанию кнопка, создаваемая с помощью <button>, имеет стандартный оформление, включающее рамку, фон и текст. Но этот вид можно изменять с помощью CSS.
2. Доступность. В отличие от обычных ссылок <a>, кнопки <button> более доступны для пользователей, использующих клавиатуру или специальные устройства.
👍7
Тег <dfn> используется для обозначения термина, который определяется или вводится на веб-странице. Он указывает, что данный текст является определением или первым упоминанием термина.
Основные особенности тега <dfn>:
1. Семантика. Использование <dfn> подчеркивает, что данный текст является ключевым термином или определением, а не просто обычным текстом.
2. Стилевое оформление. Браузеры по умолчанию выделяют текст внутри <dfn> курсивным начертанием, что визуально отделяет определение от основного текста.
3. Контекст. Термин, обозначенный с помощью <dfn>, обычно сразу после определяется или объясняется на странице.
Основные особенности тега <dfn>:
1. Семантика. Использование <dfn> подчеркивает, что данный текст является ключевым термином или определением, а не просто обычным текстом.
2. Стилевое оформление. Браузеры по умолчанию выделяют текст внутри <dfn> курсивным начертанием, что визуально отделяет определение от основного текста.
3. Контекст. Термин, обозначенный с помощью <dfn>, обычно сразу после определяется или объясняется на странице.
👍4
Тег <dl> используется для создания списка определений, когда необходимо представить пары "термин-определение".
Основные особенности тега <dl>:
1. Структура. Список определений, созданный с помощью <dl>, состоит из двух вложенных элементов:
- <dt> (Definition Term) - термин, который определяется
- <dd> (Definition Denoscription) - определение или описание термина
2. Семантика. Использование <dl>, <dt> и <dd> помогает структурировать и смысловоглубоко обозначать содержание страницы.
3. Стилевое оформление. Браузеры по умолчанию добавляют отступы и другое оформление для списка определений, чтобы выделить его из основного текста.
Основные особенности тега <dl>:
1. Структура. Список определений, созданный с помощью <dl>, состоит из двух вложенных элементов:
- <dt> (Definition Term) - термин, который определяется
- <dd> (Definition Denoscription) - определение или описание термина
2. Семантика. Использование <dl>, <dt> и <dd> помогает структурировать и смысловоглубоко обозначать содержание страницы.
3. Стилевое оформление. Браузеры по умолчанию добавляют отступы и другое оформление для списка определений, чтобы выделить его из основного текста.
👍3