HTML-элементы
Добавить в избранное
HTML-файл состоит из элементов.
Эти элементы отвечают за создание веб-страниц и определяют содержимое этой веб-страницы.
Элемент в HTML обычно состоит из открывающего тега <имя тега>, закрывающего тега </имя тега> и содержимого, вставленного между ними.
Технически элемент представляет собой набор открывающего тега, атрибутов, закрывающего тега и содержимого между ними.
Примечание.
Некоторые элементы не имеют закрывающего тега и содержимого. Эти элементы называются пустыми элементами, самозакрывающимися элементами или пустыми элементами.
Пример:
<html>
<head>
<title>веб- страница</title>
</head>
<body>
<h1>Это моя первая веб-страница</h1>
<h2>Как это выглядит?</h2>
<p>Выглядит Красиво!!!!!</p>
</body>
</html>
Пустой элемент:
все элементы в HTML не требуют наличия открывающего и закрывающего тегов, некоторые элементы не имеют содержимого и закрывающего тега, такие элементы известны как пустые элементы.
Эти элементы также называются непарными тегами.
Некоторые элементы: <br> (представляет разрыв строки), <hr> (представляет собой горизонтальную линию) и т. д.
Вложенные элементы HTML: HTML может быть вложенным, что означает, что элемент может содержать другой элемент.
Блочные и строчные HTML-элементы
Для отображения и стилизации по умолчанию в HTML все элементы разделены на две категории:
◦ Элемент уровня блока
◦ строчный элемент
блочный Элемент:
◦ Это элементы, которые структурируют основную часть веб-страницы, разделяя страницу на согласованные блоки.
◦ Элемент блочного уровня всегда начинается с новой строки и занимает всю ширину веб-страницы слева направо.
◦ Эти элементы могут содержать как блочные, так и строчные элементы.
Ниже приведены элементы блочного уровня в HTML.
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> и <video>.
Пример:
<html>
<head>
<title>веб- страница</title>
</head>
<body>
<div style="background-color: lightblue">Это первый div</div>
<div style="background-color: lightgreen">Это второй div</div>
<p style="background-color: pink">Это блочный элемент</p>
</body>
</html>
В приведенном выше примере мы использовали
тег, который определяет раздел на веб-странице и занимает всю ширину страницы.
Мы использовали атрибут style, который используется для стилизации содержимого HTML, а цвет фона показывает, что это элемент уровня блока.
Строчные элементы:
◦ Строчные элементы — это те элементы, которые выделяют часть данного текста и придают ему определенную функцию.
◦ Эти элементы не начинаются с новой строки и имеют ширину в соответствии с содержимым.
◦ строчные элементы в основном используются с другими элементами.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.
Пример:
<html>
<head>
<title>веб- страница</title>
</head>
<body>
<a href="https://bbcat.ru">Щелкните ссылку</a>
<span style="background-color: lightblue">это строчный элемент</span>
</body>
</html>