Тег <div>
определяет раздел или раздел в HTML-документе. Поля используются для создания пространства вокруг элементов за пределами любых определенных границ. Отступы используются для создания пространства вокруг содержимого элемента внутри любых определенных границ. Наконец, семантические элементы HTML делают веб-страницу более понятной, организованной, удобочитаемой и доступной во время кодирования.
Див
В HTML тег div используется для создания макета страницы. Оно происходит от слова «Division» и используется для создания различных областей путем разделения страницы.
Тег div используется с открывающим и закрывающим тегами как «‹div›» и «‹/div›». Вы можете добавить в него любой контент, такой как текст, изображения, другие теги HTML или текст.
Тег div также используется для форматирования содержимого, отображаемого на странице, с помощью CSS.
Например, следующий блок кода создает две разные области на странице с помощью тега div:
<!DOCTYPE html> <html> <head> <title>Div Example</title> <style> .left { float: left; width: 48%; background-color: red; padding: 10px; } .right { float: right; width: 48%; background-color: gray; padding: 10px; } </style> </head> <body> <div class="left"> <h2>Left side div element</h2> <p>You can put content here</p> </div> <div class="right"> <h2>Right side div element</h2> <p>You can put content here</p> </div> </body> </html>
В этом примере страница разделена на две части, одну слева и одну справа. Правая сторона имеет серый фон, а правая сторона имеет красный фон. Обе области div могут содержать заголовки и абзацы текста. CSS определяет размер и цвет фона разделов, придавая им более приятный вид.
После написания этого кода сайт выглядит так:
Допуск
Margin — это свойство CSS, выражающее размер пространства вокруг элемента HTML. Margin используется для управления расстоянием между содержимым элемента и другими элементами.
Свойство поля может быть определено главным образом для четырех различных аспектов элемента: сверху, снизу, справа и слева. Для этих направлений могут быть назначены разные значения маржи. Значения поля могут быть указаны в пикселях, процентах или единицах em.
Например, следующий блок кода создает элемент div и устанавливает отступ в 20 пикселей для всех аспектов этого элемента div:
<!DOCTYPE html> <html> <head> <title>Margin Example</title> <style> div { margin: 20px; background-color: gray; padding: 10px; } </style> </head> <body> <div> <h2>This is a div example</h2> <p>This is a paragraph inside the div tag</p> <img src="https://picsum.photos/200/200" alt="Picture Example"> </div> </body> </html>
В этом примере все содержимое внутри элемента div будет иметь отступ в 20 пикселей. Это оставляет зазор в 20 пикселей между содержимым элемента div и другими элементами. Свойство padding управляет размером блока, содержащего содержимое внутри элемента div, а свойство margin управляет пространством вокруг блока.
После написания этого кода сайт выглядит так:
Прокладка
Padding — это свойство CSS, выражающее расстояние между содержимым HTML-элемента и его окружением. Заполнение используется для управления интервалом вокруг содержимого элемента.
Свойство padding, как и свойство margin, может быть определено для четырех различных аспектов элемента: сверху, справа, снизу и слева. Для этих направлений могут быть назначены различные значения заполнения. Значения заполнения могут быть указаны в пикселях, процентах или единицах em.
Например, следующий блок кода создает элемент div и устанавливает отступ в 30 пикселей для всех аспектов этого элемента div:
<!DOCTYPE html> <html> <head> <title>Padding Example</title> <style> div { padding: 20px; background-color: #f2f2f2; margin: 20px; } </style> </head> <body> <div> <h2>This is a div example</h2> <p>Some Content</p> <img src="https://picsum.photos/200/200" alt="Picture Example"> </div> </body> </html>
В этом примере весь контент внутри элемента div будет иметь значение отступа 30 пикселей. Это оставляет зазор в 30 пикселей между элементом div и содержимым. В отличие от свойства margin, свойство padding управляет расстоянием между содержимым и его окружением, а свойство margin управляет расстоянием между самим элементом и другими элементами.
После написания этого кода сайт выглядит так:
Семантические элементы HTML
Семантические элементы HTML — это стандартные элементы HTML, используемые для создания контента на веб-странице. Семантические элементы HTML делают веб-страницу более понятной, организованной, удобочитаемой и доступной во время кодирования.
Основные семантические элементы HTML:
<header>
: указывает заголовок или заголовок страницы.<nav>
: определяет меню навигации страницы.<main>
: определяет основное содержимое страницы.<section>
: определяет части страницы.<article>
: определяет отдельную единицу контента, например, запись в блоге или новостную статью.<aside>
: Определяет содержимое сбоку страницы, например, что-то вроде объявления, окна поиска.<footer>
: определяет нижний колонтитул страницы.