ЭЛЕМЕНТ HTML. Элемент HTML определяется начальным тегом, конечным тегом и некоторым содержимым между тегами.
ПРИМЕР <tagname> content goes here <tagname>
Элемент html — это все, от начального тега до конечного тега:
Начальный тег Содержимое элемента Конечный тег
h1 Мое первое утверждение h1
Элемент HTML без содержимого называется пустым элементом. Пустые элементы не имеют закрывающего тега, например <br>
(это разрыв строки).
Вложенный элемент HTML
Элемент HTML может содержать элемент внутри себя или может быть вложен в элемент. Все документы HTML содержат вложенный элемент
HTML-код:
<!DOCTYPE html> <html> <body> <h1>my first web heading</h1> </body> </html>
ПОЯСНЕНИЕ КОДА
Элемент <html>
определяет весь документ и представляет корневой элемент. Он имеет начальный тег <html>
и конечный тег </html>
. Затем внутри элемента <html>
есть элемент <body>
, вложенный в элемент <html>
. Тег <body>
определяет тело сети. Внутри тега <body>
находится вложенный в него элемент <h1>
. Никогда не забывайте про конечный тег Некоторые редакторы помогут вам поставить конечный тег при написании кода. Однако иногда это может быть не так, и когда вы забываете поставить тег, возникает непредвиденная ошибка. Пустые HTML-ЭЛЕМЕНТЫ Как мы говорили ранее, HTML-элементы без содержимого называются пустыми элементами. Тег<br>
является примером пустого элемента и определяет разрыв строки.
HTML-код
<p> This is a <br /> paragraph with a line break. </p>
Вот как выглядит код:
Это абзац
с разрывом строки.
HTML не чувствителен к регистру Теги HTML не чувствительны к регистру. Например, <p>
означает то же, что и <p>
. всегда лучше использовать строчные буквы при написании тегов HTML.
HTML-АТРИБУТЫ
Атрибуты HTML всегда указываются в начале тега и обычно предоставляют дополнительную информацию об элементе. Обычно это пары имя/значение: имя=”значение”
Атрибут href. HTML-ссылки обычно определяются с помощью тега <a>
, а адрес ссылки указывается в атрибуте href:
HTML-код:
<a href=”https://google.com"></a>
Атрибут src. Тег<img>
используется для встраивания изображения в HTML-страницу. Атрибуты src предоставляют дополнительную информацию, такую как путь к отображаемому изображению.
HTML-код
<img src=”img-home.jpg” />
Есть два способа указать URL в атрибуте src: Абсолютный URL — ссылка на внешние изображения, размещенные на другом сайте. например src="http://www.google.com/images/img-girl.jpg"
. Относительный URL-ссылка на изображение, размещенное на веб-сайте. например src="img-girl.jpg"
. Обычно лучше всего использовать относительные URL-адреса. Они не сломаются, если вы смените домен.
Атрибуты ширины и высоты. Известно, что изображения имеют набор атрибутов размера, которые определяют ширину и высоту изображения.
HTML-код:
<img src=”img-gril.jpg” width=”250" height=”500" />
Атрибут alt. Атрибуты alt определяют альтернативное сообщение, которое будет отображаться, если сообщение не отображается там. Значение атрибута может быть прочитано программами чтения с экрана. Таким образом, человек с ослабленным зрением услышит значение элемента.
HTML-код:
<img src=”https://gooogle.com/img/logo/gooogle.jpg" alt=”google image with white background” />
Атрибут стиля. Он используется для определения стиля элемента, такого как цвет, шрифт, размер и т. д.
HTML-код:
<h1 style="color : blue">Attributes in html</h1>
Атрибут lang. Язык html-документа может быть объявлен с помощью атрибута lang. Это важно для специальных возможностей приложения и поисковых систем.
HTML-код:
<!DOCTYPE html> <html lang="en-US"> <body> <p>home all</p> </body> </html>
Первые две буквы показывают язык (en). А если есть диалект, то можно добавить и его (США).
Атрибут title. Атрибут title можно добавить к элементу a<p>
. Атрибуты title добавляют дополнительную информацию об этом элементе.
HTML-код:
<p title=”Im unstoppable”>This is a track record.</p>
Ресурсы
Вам могут пригодиться следующие ресурсы:
- Основной пример HTML 5
- Введение в CSS
- CSS-текст и макет
- Контрастный дизайн Bootstrap
- Аккордеон
- "Тревога"
- "Анимация"
- Автозаполнение
- Значки
- "Коробка"
- Хлебные крошки
- Баттон Групп
- "Кнопка"
- Панель кнопок
- "Карта"
- "Карусель"
- Флажок
- "Крах"
- "Таблица данных"
- Выбор даты
- "Падать"
- Нижний колонтитул
- Формы
- "Икона"
- Ифрейм
- "Вход"
- Входная группа
- Список групп
- Маска
- Модал
- "Выбор из нескольких вариантов"
- "Уведомление"
- Панель
- Панель
- "Трещать"
- "Прогресс"
- "Радио"
- "Рейтинг"
- "Выбирать"
- Выбрать 2
- Слайдер
- Спиннер
- Степпер
- "Выключатель"
- "Стол"
- Формы
- Навбар
- Разбивка на страницы
- Вкладка
- Боковая панель
- Выбор времени
- "Таблица данных"
- Фиксированная таблица данных
- "Стол"
- Виджеты
Первоначально опубликовано на https://www.devwares.com.