Тег div известен как тег разделения. Тег div используется в HTML для разделения содержимого веб-страницы (текст, изображения, верхний и нижний колонтитулы, панель навигации и т. д.). Тег Div имеет как открытый(<div>), так и закрывающий (<div></div>) тег, и его закрытие обязательно. Div является наиболее удобным тегом в веб-разработке, поскольку он помогает нам отделять данные на веб-странице, и мы можем создать определенный раздел для определенных данных или функций на веб-страницах.
- Тег Div-это тег уровня блока
- Это универсальный тег контейнера
- Он используется для группы различных тегов HTML, чтобы можно было создавать разделы и применять к ним стиль.
Как мы знаем, тег Div-это тег уровня блока, в этом примере тег div содержит всю ширину. Тег div будет отображаться каждый раз в новой строке, а не в одной и той же строке.
Пример 1:
<html>
<head>
<title>gfg</title>
<style type=text/css>
p{
background-color:gray;
margin: 10px;
}
div
{
color: white;
background-color: 009900;
margin: 2px;
font-size: 25px;
}
</style>
</head>
<body>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
</body>
</html>
Выход:
Как мы знаем, тег div используется для группировки HTML-элементов вместе и предназначен для применения CSS и веб-макета к ним.Давайте рассмотрим пример ниже без использования тега div. нам нужно применить CSS для каждого тега (в примере с использованием тегов H1 H2 и двух абзацев p)
Пример 2:
<html>
<head>
<title>gfg</title>
<style type=text/css>
p{
color: white;
background-color: 009900;
width: 400px;
}
h1
{
color: white;
background-color: 009900;
width: 400px;
}
h2
{
color: white;
background-color: 009900;
width: 400px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>How many times were you frustrated while looking out
for a good collection of programming/algorithm/interview
questions? What did you expect and what did you get?
This portal has been created to provide well written,
well thought and well-explained solutions for selected
questions.
</p>
<h2>GeeksforGeeks</h2>
<p>GCET is an entrance test for the extensive classroom
program by GeeksforGeeks to build and enhance Data
Structures and Algorithm concepts, mentored by Sandeep
Jain (Founder & CEO, GeeksforGeeks).He has 7 years of
teaching experience and 6 years of industry experience.
</p>
</body>
</html>
Выход:
Создание веб-страницы, используя тег div
в тег div-это контейнер, внутри тега тег div, мы можем поставить больше, чем один HTML элемент и может сгруппировать и применить CSS для них.
тег div, могут быть использованы для создания макета веб-страниц в приведенных ниже примерах показано создание веб-страницы
можно также создавать веб-страницы, используя тег таблицы, но таблица меток являются очень сложными для изменения макета
в тег div является очень гибким в создании веб-макетов и легко изменить. в приведенном ниже примере будет показана группировка HTML-элемента с помощью тега div и создание блочного веб-макета.
Пример:
<html>
<head>
<title>gfg</title>
<style type=text/css>
.leftdiv
{
float: left;
}
.middlediv
{
float: left;
background-color:gray
}
.rightdiv
{
float: left;
}
div{
padding : 1%;
color: white;
background-color: 009900;
width: 30%;
border: solid black;
}
</style>
</head>
<body>
<div class="leftdiv">
<h1>GeeksforGeeks</h1>
<p>How many times were you frustrated while looking out
for a good collection of programming/algorithm/interview
questions? What did you expect and what did you get?
This portal has been created to provide well written,
well thought and well-explained solutions for selected
questions.
</p>
<h2>GeeksforGeeks</h2>
<p>GCET is an entrance test for the extensive classroom
programme by GeeksforGeeks to build and enhance Data
Structures and Algorithm concepts, mentored by Sandeep
Jain (Founder & CEO, GeeksforGeeks).He has 7 years of
teaching experience and 6 years of industry experience.
</p>
</div>
<div class="middlediv">
<h1>GeeksforGeeks</h1>
<p>How many times were you frustrated while looking out
for a good collection of programming/algorithm/interview
questions? What did you expect and what did you get?
This portal has been created to provide well written,
well thought and well-explained solutions for selected
questions.
</p>
<h2>GeeksforGeeks</h2>
<p>GCET is an entrance test for the extensive classroom
programme by GeeksforGeeks to build and enhance Data
Structures and Algorithm concepts, mentored by Sandeep
Jain (Founder & CEO, GeeksforGeeks).He has 7 years of
teaching experience and 6 years of industry experience.
</p>
</div>
<div class="rightdiv">
<h1>GeeksforGeeks</h1>
<p>How many times were you frustrated while looking out
for a good collection of programming/algorithm/interview
questions? What did you expect and what did you get?
This portal has been created to provide well written,
well thought and well-explained solutions for selected
questions.
</p>
<h2>GeeksforGeeks</h2>
<p>How many times were you frustrated while looking out
for a good collection of programming/algorithm/interview
questions? What did you expect and what did you get?
This portal has been created to provide well written,
well thought and well-explained solutions for selected
questions.
</p>
</div>
</body>
</html>
Используя тег Div, мы можем покрыть пробел между тегом заголовка и тегом абзаца, в этом примере будут отображаться три блока веб-макета.
Выход:
мы можем использовать CSS в любых подразделениях, используя следующие методы:
1. Использование класса:
мы можем использовать класс для этого конкретного div либо во внутреннем CSS, либо во внешнем CSS
- В случае внутреннего CSS: нам нужно определить класс в разделе <head><head> HTML в элементе <style><стиль>.
- В случае внешнего CSS: нам нужно создать отдельный файл .css и включить его в HTML-код в разделе <head><head> с помощью элемента <link><ссылка>.Имя класса должно отличаться от других имен классов в других div, иначе CSS, используемый в одном div, может повлиять на другое подразделение.
<html>
<head>
<link rel="stylesheet" href="color.css">
<title>
gfg
</title>
</head>
<body>
<center>
<div class="color">
<!--open tag of Div!-->
<caption>
<h1>GEEKSFORGEEKS</h1>
</caption>
<h1>Inline CSS is not USED in THIS method.
</h1>
</div>
<!--closing tag of Div!-->
</center>
</body>
</html>
CSS для класса цветов: Имя файла color.css
.color
{
height:400px;
width:600px;
border:1px solid;
background-color: 009900;
}
В этом примере мы использовали класс для этого конкретного Div. с именем color.css, свойства которого соответствуют div. Это отдельный файл, который связан тегом ссылки в этом HTML-коде
Выход:
2. Встроенный CSS:
мы можем напрямую использовать CSS в div, также этот метод не требует КЛАССА. Div в HTML-кодировании используется в качестве тега контейнера также потому, что он может содержать все остальные теги.
<html>
<head>
<title>
gfg
</title>
</head>
<body>
<center>
<div style="height:300px; width:500px; color:white;
border:1px solid; background-color: 009900;">
<!--open tag of Div!-->
<caption>
<h1>GEEKSFORGEEKS</h1>
</caption>
<h1>Inline CSS is USED in THIS method.
In this div no class is used.
</h1>
</div>
<!--closing tag of Div!-->
</center>
</body>
</html>
Выход:
Разница между тегом Div и тегом span
В теге div и span являются двумя распространенными теги при создании страниц с использованием HTML и выполнять разные функции на них,
в то время как тег div является блочным элементом уровня и диапазона встроенный элемент в тег div, создает разрыв строки и по умолчанию создает разделение на текст, который идет после тега как начали и до тех пор, пока метка заканчивается </div>. тег div создает отдельные поля или контейнеры для всех элементов внутри этого тега, таких как текст, изображения, абзацы.
| Свойства | Тег Div | Метка пролета |
|---|---|---|
| Типы элементов | Уровень блока | Встроенный |
| Пространство/Ширина | Содержать всю доступную ширину | Занимает только необходимую ширину |
| Примеры | Заголовки, Абзац, форма | Атрибут, изображение |
| Использует | Веб-макет | Контейнер для текста soome |
| Атрибуты | Не требуется,с общим css, класс | Не требуется,с общим css, класс |
Тег span не создает разрыв строки, подобный тегу div, а скорее позволяет пользователю отделять объекты от других элементов вокруг них на странице в пределах одной строки. избегание разрыва строки приводит к изменению только выделенного текста, сохраняя все остальные элементы вокруг них одинаковыми.
В приведенном ниже примере будет показана разница между тегом span и div, в то время как тег div содержит всю ширину, а тег span содержит только требуемую ширину, а остальные части свободны для другого элемента.
<html>
<head>
<title>gfg</title>
<style type=text/css>
p{
background-color:gray;
margin: 10px;
}
div
{
color: white;
background-color: 009900;
margin: 2px;
font-size: 25px;
}
span
{
color: black;
background-color: gray;
margin: 5px;
font-size: 25px;
}
</style>
</head>
<body>
<!-- below some div tags -->
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
<!-- below some span tags -->
<span>span-tag</span>
<span>span-tag</span>
<span>span-tag</span>
<span>span-tag</span>
</body>
</html>
Выход:
Поддерживаемый браузер: Браузер, поддерживаемый тегом <div>, перечислены ниже:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
