Блочные и строчные html теги
Блочные элементы представляют собой большие строительные блоки вашей веб-страницы. При отображении браузер автоматически добавляет разрыв строки до и после блочного элемента, при этом он занимает всю доступную ширину (по умолчанию отображается на веб-странице в виде прямоугольника), а высота блочного элемента вычисляется браузером автоматически, исходя из объема его содержимого. Текст в блочных элементах по умолчанию выравнивается по левому краю.
Обычно блочные элементы используются, чтобы разделить содержимое веб-страницы на логические блоки (например: верхний колонтитул (шапка сайта), меню, блок с контентом, нижний колонтитул (footer) и др.). Блочные элементы нельзя вкладывать в строчные, исключением являются только ссылки и ячейки таблиц, внутри которых по стандарту HTML5 могут быть расположены блочные элементы.
Строчные элементы используются для разметки частей содержимого элементов. Ширина строчного элемента равна объему содержимого. В отличии от блочных элементов браузер не добавляет разрыв строки до и после строчного элемента, поэтому, если несколько строчных элементов идут подряд друг за другом, они располагаются на одной строке и переносятся на другую строку при необходимости. В большинстве случаев внутрь строчных элементов допустимо помещать другие строчные элементы, вставлять блочные элементы внутрь строчных запрещено.
Строчные теги
| Тег | Краткое описание |
|---|---|
| Создает гиперссылку. | |
| Определяет текст как аббревиатуру. | |
| Определяет звуковое содержимое. | |
| Выделяет текст жирным шрифтом. | |
| Определяет направление отображения текста. | |
| Создает кнопку. | |
| Определяет область для рисования графики. | |
| Определяет заголовок для работы — преобразует текст в курсивный. | |
| Определяет кусок программного кода — преобразует текст в моноширинный. | |
| Определяет текст, который был удален из документа — отображается перечеркнутым текстом. | |
| Выделяет определения термина — преобразует шрифт в наклонный. | |
| Определяет выделенный текст — преобразует текст в курсивный. | |
| Преобразует текст в курсивный. | |
| Определяет встроенный frame. | |
| Определяет изображение. | |
| Создаeт поле для ввода данных. | |
| Определяет текст, который был добавлен в документ — отображает текст подчеркнутым. | |
| Определяет текст вводимый с клавиатуры — преобразует текст в моноширинный. | |
| Определяет важную часть текста. | |
| Определяет скалярное измерение в пределах известного диапазона. | |
| Определяет короткую цитату. | |
| Определяет, что показывать браузеру, который не поддерживает тег . | |
| Добавляет аннотацию сверху или снизу от символов, заключенных в элементе . | |
| Определяет текст, который больше не является правильным — отображает текст перечеркнутым. | |
| Определяет текст, который является результатом вывода компьютерной программы. | |
| Определяет текст маленького размера. | |
| Создает выпадающий список. | |
| Определяет строчный элемент документа. | |
| Определяет важный текст — преобразует шрифт в полужирный. | |
| Определяет текст в нижнем индексе. | |
| Определяет текст в верхнем индексе. | |
| Создает ячейку таблицы. | |
| Создает многострочное текстовое поле. | |
| Создает заголовочную ячейку в таблице. | |
| Определяет переменную — выделяет текст курсивом. | |
| Добавляет на страницу видео файл. |
Блочные теги
| Тег | Краткое описание |
|---|---|
| Определяет контактную информацию автора документа/статьи. | |
| Определяет текст как статью, новость и др. | |
| Определяет контент в стороне от содержимого страницы. | |
| Выделяет текст с другого источника, как блочную цитату. | |
| Cоздает описание элемента в списке определений. | |
| Определяет раздел документа. | |
| Создает список определений. | |
| Oпределяет термин в списке определений. | |
| Группирует элементы страницы. | |
| Нижняя часть документа. | |
| Определяет HTML форму. | |
| — | Определяют HTML заголовки. |
| Задает «шапку» сайта или раздела. | |
| Создает горизонтальную линию. | |
| Определяет элемент списка. | |
| Определяет группу ссылок для навигации. | |
| Создает нумерованный(упорядоченный) список. | |
| Определяет абзац. | |
| Оставляет содержимое в первоначальном виде. | |
| Определяет небольшую аннотацию (для типографии Восточной Азии). | |
| Определяет разделы документа. | |
| Создает таблицу. | |
| Создает строку в таблице. | |
| Определяет маркированный(неупорядоченный) список. |
Примечание: для переопределения типа элемента с блочного на строчный или со строчного на блочный используется CSS свойство display.
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru
Строчные элементы
Продолжаем рассматривать элементы, которые используются при построении веб-страниц. В прошлой заметке мы рассмотрели блочные элементы, сейчас давайте остановимся на следующей группе элементов, которые называются строчными.
Строчные элементы — это элементы веб-страницы, которые формируют строчные блоки с характерным для них поведением.
К строчным элементам относятся элементы со значением свойства display: ‘inline’, ‘inline-table’ и ‘inline-block’.
button, textarea, input, select, img, span, a, q, code, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, kbd, label, q, s, samp, select, small, strike, strong, sub, sup, tt, u, var
Основная задача строчных элементов это изменение представления текста. Они позволяют изменить внешний вид как отдельного слова в тексте, так и отдельной буквы.
Давайте прямо сейчас рассмотрим, что это за поведение и чем оно отличается от блоков, которые формируют блочные элементы.
1) Самой главной особенностью строчных блоков является то, что при размещении их на веб-странице, они становятся частью строки, в которую они вставляются.
Строчный элемент 1 Строчный элемент 2 Строчный элемент 3
Они располагаются друг за другом, в пределах одной строки как буквы в слове. Когда ширина блока, в котором размещаются строчные элементы не позволяет разместить еще один элемент в пределах одной строки, он будет размещен на следующей строке.
2) В строчные элементы запрещена вставка блочных элементов. Внутри строчных элементов могут содержаться только строчные элементы и анонимные блоки.
Следующая запись не пройдет валидацию.
Необходимо написать так:
3) Схлопование margin для строчных элементов не действует.
4) Свойства width и height для строчных элементов не работают.
margin-top и margin-bottom не работают.
Блочный элемент
Строчный элементБлочный элемент
Исключение элемент img, который относится к строчным элементам с замещаемым контентом. Для него все эти свойства работают.
5) Ширина строчных элементов состоит из следующих составляющих:
width = margin-left+margin-right+padding-left+padding-right + border-left + border-right + width(ширина, необходимая для того, чтобы вместить содержимое)
6) Высоту строчных элементов можно регулировать следующими свойствами:
line-height + padding-top + padding-bottom + border-top + border-bottom + height (высота необходимая, чтобы вместить содержимое)
7) Для строчных элементов можно использовать свойство vertical-align
Подводя итог, можно сказать, что строчные элементы это еще один способ, наряду с блочными элементами, который позволяет гибко регулировать отображение элементов на веб-странице.
Понимание принципа работы строчных элементов и их свойств может значительно сэкономить ваше время при верстке веб-страниц.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Строчные элементы
Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения.
Тег
Устанавливает курсивное начертание шрифта.
Тег
Создает поле для многострочного текста.
Тег
Создает раскрывающийся список.
Тег
Устанавливает связь между определенной меткой и элементом формы.
Тег
Позволяет создавать разные элементы интерфейса.
Тег
Предназначен для изменения характеристик шрифта, таких как размер, цвет и гарнитура.
Тег
Тег
Устанавливает направление вывода текста: слева направо или справа налево.
Тег
Предназначен для задания шрифта, размера и цвета текста по умолчанию.
Тег
Сообщает, что текст является акронимом. В отличие от аббревиатуры, акроним — это устоявшееся сокращение, которое применяется как самостоятельное слово.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Блочные и строчные элементы
В HTML вам, в основном, будут попадаться два типа элементов HTML.
Блочные элементы, вроде:
- абзацы ;
- списки: неупорядоченные (с маркером)
-
или упорядоченные списки (с числами)
; - заголовки: от первого уровня до шестого уровня ;
- статьи ;
- разделы ;
- длинные цитаты .
Строчные элементы, вроде:
Блочные элементы предназначены для структурирования основных частей вашей страницы, путём разделения содержимого на логически связанные блоки.
Строчные элементы предназначены, чтобы разграничить часть текста и придать ему определённую функцию или смысл. Строчные элементы, как правило, содержат одно или несколько слов.
Вы уже видели это замечательное видео на YouTube?
Открывающие и закрывающие теги
Все блочные элементы содержат открывающие и закрывающие теги.
Как результат, самозакрывающие элементы являются строчными, просто потому, что их синтаксис не позволяет им содержать любой другой элемент HTML.
| Содержит открывающие и закрывающие теги | Самозакрывающие | |
| Блочные элементы | Невозможно | |
| Строчные элементы |
Другие типы элементов HTML
Есть несколько исключений у блочных/строчных элементов. Вот те, с которыми вы чаще всего столкнётесь: