Что такое div в html
Элемент является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Как и при использовании других блочных элементов, содержимое тега всегда начинается с новой строки. После него также добавляется перенос строки.
Синтаксис
Атрибуты
align Задает выравнивание содержимого тега . title Добавляет всплывающую подсказку к содержимому.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Тег DIV .block1 < width: 200px; background: #ccc; padding: 5px; padding-right: 20px; border: solid 1px black; float: left; >.block2
Результат данного примера показан на рис. 1.
Рис. 1. Вид блоков, оформленных с помощью стилей
Статьи по теме
- Блочная вёрстка
- Блочные элементы
- Блочные элементы
- Выравнивание слоя по центру
- Написание корректного кода
- Разрезание и склейка изображений
- Строчно-блочные элементы
- Строчные элементы
- Фиксированный дизайн. Свойство float
- Фоновые рисунки
html теґ
Тег використовується, щоб групувати блоки інформації та форматувати її за допомогою CSS.
Елемент є блоковим елементом і призначений для виділення фрагмента документа з метою зміни виду вмісту. Як правило, вид блоку управляється за допомогою стилів. Щоб не описувати кожен раз стиль всередині тега, можна виділити стиль в зовнішню таблицю стилів, а для тега додати атрибут class або id з ім’ям селектора.
Як і при використанні інших блочних елементів, вміст тега завжди починається з нового рядка. Після нього також додається перенесення рядка.
Без задання браузери завжди ставлять розрив рядка до і після теґа, тому що елемент являється блоковим елементом, але це можна змінити за допомогою CSS.
Тег дуже часто використовується разом з CSS, для створення макета веб-сторінки.
Синтаксис
Атрибут
Опис атрибута
align
Визначає вирівнювання вмісту всередині « елемента.
Вказує додаткову текстову підказку
Повідомляє браузеру переводити вказаний текст в елементі чи ні.
Контекстне меню для елемента
Дозволяє активувати або сфокусуватись на елементі за допомогою заданого сполучення клавіш.
Визначає один або кілька класів, щоб зв’язати елемент з таблицею стилів (CSS).
Визначає чи можна перетягувати елемент.
Дозволяє редагувати текст в середні тегу.
Вказує напрямок тексту.
Приховує вміст елемента від перегляду.
Задає унікальний ідентифікатор для елемента.
Визначає основну мову вмісту елемента
Вказує браузеру перевіряти чи ні правопис і граматику в тексті елемента.
Задає вбудований (inline) CSS стиль для елемента.
Встановлює порядок отримання фокусу при переході між елементами за допомогою клавіші `Tab`.
Вказує, що робити з перетягувати елементи.
Більше інформації про загальні атрибути за посиланням Загальні атрибути в html.
Подія
Опис події
onplay
Скрипт викликається коли медіа дані готові почати відтворення.
onafterprint
Скрипт виконується тільки після як документ надрукований.
onbeforeprint
Скрипт виконується перед тим, як документ надрукований.
onbeforeunload
Скрипт виконується коли документ ось-ось буде вивантажений
onhashchange
Скрипт виконується коли там відбулися зміни до частини якоря в URL
onload
Викликається після того як завантаження елемента завершене.
onmessage
Скрипт виконується коли викликане повідомлення.
onoffline
Спрацьовує коли браузер починає працювати в автономному режимі
ononline
Спрацьовує коли браузер починає працювати в режимі онлай.
onpagehide
Скрипт виконується коли користувач переходить на іншу сторінку сторінку.
onpageshow
Скрипт виконується коли користувач заходить на сторінку.
onpopstate
Скрипт виконується коли змінено історію одного вікна.
onresize
Скрипт виконується, коли розмір вікна браузера змінюється.
onstorage
Скрипт виконується, коли вміст Web Storage оновлюється.
onunload
Викликається, коли сторінка розвантажена, або вікно браузера було зачинено.
onblur
Скрипт виконується, коли елемент втрачає фокус.
onchange
Викликається в той момент, коли значення елемента змінюється.
oncontextmenu
Скрипт виконується коли викликається контекстне меню.
onfocus
Викликається в той момент, коли елемент отримує фокус.
oninput
Скрипт викликається коли користувач вводить дані поле.
oninvalid
Скрипт виконується, коли елемент недійсний.
onreset
Викликається, коли натискається у формі кнопка типу Reset.
onsearch
Викликається, коли користувач щось пише в поле пошуку (для <input type="search">)
onselect
Викликаєтсья після того як будь-який текст був обраний в елементі.
onsubmit
Викликається при відправленні форми.
onkeydown
Подія викликається, коли користувач затис (натиснув та не відпускає) клавішу.
onkeypress
Викликається коли корисрувач натиснув на клавішу.
onkeyup
Викликається коли користувач відпускає клавішу.
ondblclick
Виникає при подвійному клацанні ЛКМ на елементі.
ondrag
Періодично викликається при операції перетягування.
ondragend
Викликається коли користувач відпускає перелягуваний елемент.
ondragenter
Викликається, коли перетягуваний елемент входить в цільову зону.
ondragleave
Викликається, коли перетягуваний елемент виходть з зони призначення.
ondragover
Викликається, коли перетягуваний елемент знаходиться в зоні призначення.
ondragstart
Викликається, коли користувач починає перетягувати елемент, або виділений текст.
ondrop
Викликається, коли перетягуваний елемент падає до зони призначення.
onmousedown
Викликається, коли користувач затискає ЛКМ на елементі.
onmousemove
Викликається, коли курсор миші переміщається над елементом.
onmouseout
Викликається, коли курсор виходить за межі елемента.
onmouseover
Виконується, коли курсор наводиться на елемент.
onmouseup
Викликається, коли користувач відпускає кнопку миші.
onscroll
Викликається при прокручуванні вмісту елемента (чи веб-сторінки).
onwheel
Викликається, коли користувач прокручує коліщатко миші.
oncopy
Викликається, коли користувач копіює вміст елемента.
oncut
Викликається, коли користувач вирізає вміст елемента.
onpaste
Викликається, коли користувач вставляє вміст в елемент.
onabort
Виконується при перериванні якоїсь події.
oncanplay
Скрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення)
oncanplaythrough
Скрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію.
oncuechange
Скрипт виконується коли змінюється кий в <track> елемента
ondurationchange
Викликається коли змінюється довжина медіа файлу.
onemptied
Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
onended
Викликається коли медіа елемент повністю відтворив свій зміст.
onshow
Викликається, коли елемент <menu> буде відображено як контекстне меню.
onloadedmetadata
Скрипт виконується коли метадані (розміри чи тривалість) завантажуються.
onloadeddata
Викликається коли медіа данні завантажено.
onloadstart
Викликається коли браузер тільки починає завантажувати медіа дані з сервера.
onpause
Викликається коли відтворення медіа даних призупинено.
onplaying
Викликається коли розпочато відтворення медіа даних.
onprogress
Подія onprogress відбувається, коли браузер завантажує вказане аудіо / відео.
onratechange
Викликається коли змінюється швидкість відтворення медіа даних.
onseeked
Викликається коли атрибут seeked у тега audio або video змінює значення з true на false.
onseeking
Викликається коли атрибут seeking у тегів audio або video змінює значення з false на true
onstalled
Скрипт виконується коли браузер з будь-якої причини не може отримати медіа дані.
onsuspend
Скрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження.
ontimeupdate
Викликається коли змінилася позиція відтворення елемента <audio> або <video>.
onvolumechange
Викликається коли змінюється гучність звуку.
onwaiting
Викликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться.
ontoggle
Викликається, коли користувач відкриває або закриває елемент <details>.
onerror
Викликається якщо при завантаженні елемента сталася помилка.
onclick
Подія викликається коли користувач клацає ЛКМ по елементу.
Більше інформації про html події за посиланням Атрибути подій в html.
Переглядачі
- Стаціонарні переглядачі
- Мобільні переглядачі
HTML тег
Тег — пустой контейнер, который определяет разделение или раздел. Он не влияет на контент или макет и используется для группировки HTML-элементов, которые должны быть написаны с помощью CSS или с помощью скриптов.
Мы рекомендуем использовать тег только в случае, когда нецелесообразно использовать семантические элементы HTML5, такие как , или .
Тег является блочным элементом, поэтому разрыв строки помещается до и после него.
Вы можете поместить любой элемент HTML в тег , включая другой тег .
Для применения стилей внутри параграфа используется тег .
Синтакс
Тег
— парный, состоит из двух частей, открывающего (
) и закрывающего (
) тегов.
Пример
html> html> head> title>Использование тега <div> title> head> body> h1> Тег <div> h1> div style="background-color:#8ebf42"> p> Мы использовали тег <div>, чтобы сгруппировать два параграфа и добавить фон к тексту, а для того, чтобы изменить цвет span style="color:#1c87c9"> этого слова span> мы использовали тег <span>. p> p> Обратите внимание, что тег <div> является блочным элементом, до и после него добавляется разрыв строки. p> div> body> html>
Результат
Расположение блоков
При верстке HTML страниц с помощью слоев тег является ее базовым фундаментом, так как именно этот тег определяет многочисленные структурные блоки веб-страницы.
Для корректного отображения блоков на странице необходимо их правильно расположить. Различают несколько способов расположения блоков в зависимости от целей и контента страницы. Давайте рассмотрим несколько из них.
Флексбокс¶
Спецификация CSS Flexible Box успешно пришла на замену верстке float-ами. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.
Пример
html> html> head> title>Заголовок документа title> style> .flex-container < display: flex; align-items: center; /* Подставьте другое значение и посмотрите результат */ width: 90%; height: 300px; background-color: #1c87c9; > .flex-container > div < width: 25%; padding: 5px 0; margin: 5px; background-color: lightgrey; text-align: center; font-size: 35px; > style> head> body> div class="flex-container"> div>1 div> div>2 div> div>3 div> div> body> html>
Результат
CSS свойство float ¶
CSS свойство float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. С помощью свойства float можно размещать элементы по горизонтали рядом друг с другом, что позволяет верстать типовые фрагменты веб-страниц, вроде врезок, горизонтальных меню, каталога товаров, колонок и др.
Пример
html> html> head> title>Заголовок страницы title> style> .content < overflow: auto; border: 3px solid #666666; > .content div < padding: 10px; > .content a < color: darkblue; > .blue < float: right; width: 45%; background: #1c87c9; > .green < float: left; width: 35%; background: #8ebf42; > style> head> body> div class="content"> div class="blue"> p>Параграф в блоке div. p> a href="#">Гиперссылка в теге div. a> ul> li>Элемент списка 1 li> li>Элемент списка 2 li> ul> div> div class="green"> p>Параграф в блоке div. p> ol> li>Элемент списка 1 li> li>Элемент списка 1 li> ol> div> div> body> html>
Результат
Отрицательные отступы ¶
Использование отрицательных отступов (negative margins) открывает широкие возможности и позволяет сделать верстку более универсальной.
Пример
html> html> head> title>Заголовок окна веб-страницы title> style> .content div < padding: 2%; > .content a < color: darkblue; > .main-content < width: 30%; margin-left: 32%; > .blue < width: 25%; margin-top: -10%; background: #1c87c9; > .green < width: 20%; margin: -35% auto auto 70%; background: #8ebf42; > style> head> body> div class="content"> div class="main-content"> a href="#">Гиперссылка в теге div. a> div> div class="blue"> p>Параграф в теге div. p> a href="#">Гиперссылка в теге div. a> ul> li>Элемент списка 1 li> li>Элемент списка 2 li> ul> div> div class="green"> p>Параграф в теге div. p> ol> li>Элемент списка 1 li> li>Элемент списка 2 li> ol> div> div> body> html>
Результат
Позиционирование Relative + absolute positioning¶
Комбинация разных типов позиционирования для вложенных элементов — один из удобных и практичных приемов верстки. Если для родительского элемента задать position: relative , а для дочернего position: absolute , то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя.
Пример
html> html> head> title>Заголовок документа title> style> .content < position: relative; height: 400px; border: 1px solid #666666;> .content div < position: absolute; width: 35%; padding: 10px; > .blue < right: 20px; bottom: 0; background: #1c87c9; > .green < top: 10px; left: 15px; background: #8ebf42; > style> head> body> div class="content"> div class="blue"> p>Параграф в теге div. p> div> div class="green"> p>Параграф в теге div. p> div> div> body> html>
Результат
position: relative не влияет на позиционирование элементов в нормальном потоке, если вы не добавляете смещения.
Атрибуты
Атрибут
Значение
Описание
align
left
right
center
justify
Используется для выравнивания содержимого тега .
Не поддерживается в HTML5.
Вместо атрибута align вы можете использовать CSS свойство text-align.
Как добавить стиль к тегу ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега :
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега :
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега :
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
Что такое div в html
Элемент (от англ. division — раздел, секция) является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили. Для этого добавляется атрибут class или id с именем класса или идентификатора.
Как и при использовании других блочных элементов, содержимое всегда начинается с новой строки, после него также добавляется перенос строки.
Синтаксис
Атрибуты
Устаревшие атрибуты
align Задаёт выравнивание содержимого . Устаревшие атрибуты
Устаревшие атрибуты — это атрибуты элементов HTML, которые были частью предыдущих версий HTML, но больше не поддерживаются в последних версиях стандарта. Использование таких атрибутов не рекомендуется, поскольку они противоречат современной идеологии HTML и могут не поддерживаться последними версиями браузеров.
Добавлять к элементам HTML устаревшие атрибуты не надо, взамен применяются стили или другие элементы HTML.
Пример
DIV .block1 < width: 200px; background: #ccc; padding: 5px; padding-right: 20px; border: solid 1px black; float: left; >.block2
Результат данного примера показан на рис. 1.
Рис. 1. Вид блоков, оформленных с помощью стилей
Спецификация
Спецификация
Статус
HTML Living Standard
Живой стандарт
HTML 4.01 Specification
Заменённая рекомендация
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
6
12
1
6
1
1
4.4
4
14
1
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Предыдущая запись