"Истина где-то рядом."

Уроки HTML

Скрипты PHP

Шаблоны HTML

Меню сайта
Уроки HTML
Уроки CSS
HTML5
Скрипты JAVA
Вёрстка
Графика
Оптимизация сайта
Дополнительно


Реклама на сайте:




Блочные и встроенные элементы


папка html

Урок №14

Как и большинство остальных тегов, <div> и <span> могут иметь класс, идентификатор и стилевые атрибуты. Благодаря этим атрибутам стили можно применять к элементам. Теги применяются таким же способом, как и другие HTML-теги. Допускается вложенность одних тегов в другие в несколько уровней.

Теги div и span — являются элементами блочной верстки сайта

<div> и <span> применяются вместе с каскадными таблицами стилей. По отдельности они не вызывают больших изменений. Факт в том, что тег <span> вообще не влияет визуально на контент. Использование тега <div> приведет к «блокировке» его содержимого, как если бы вы поставили тег <br> до и после секции на странице.

Образец кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div and Span</title>
</head>
<body>
<div style="position:absolute; left:0px; top:0px;
 font-family:Verdana; font-size:10pt;
 border-style:groove; border-width:30px; border-color:blue; padding:4px">
This text appears in the
 <span style="font-style:italic; color:red">upper-left hand corner</span>
 of the page.<br />
 It also has a big blue groovy border around it.
</div>
</body>
</html>

Элемент <div>

Тег div является блочным элементом, который предназначен для выделения фрагмента документа и затем изменением его содержимого.

Он указывает, что сгруппированные вместе элементы образуют некую смысловую единицу и должны рассматриваться, например таблицей стилей CSS, как одна единица. Используя элемент <div> вместе с таблицами стилей CSS, вы сможете придать одинаковое стилевое оформление для всех элементов, помещенных в контейнер <div>.


Итак, тег <div> служит для того, чтобы: – применять какие-либо настройки к отдельному информационному блоку на сайте; – быть контейнером для текста, изображений и других элементов HTML-документа.



Элемент <span>

Элемент <span> — это общий встроенный элемент, который используется для встроенных элементов, которые не вводят переводов строк. Элемент <span> может содержать только текст и другие встроенные элементы (вы не можете поместить туда блочные элементы: заголовки, списки, элементы группировки контента и т. д.).

Так как элемент <span> — строчный, то есть не требует для себя всей ширины окна браузера, то ему достаточно лишь той ширины, которую физически занимают все элементы, находящиеся в нем. Поэтому элемент <span> часто используется для форматирования отдельных слов внутри абзаца.



Элементы <div > и особенно <span> не должны использоваться слишком часто. Если есть разумная альтернатива, то всегда следует использовать именно ее.


На этом уроке мы познакомились с блочными и строчными элементами.

 



Создано|Обновлено: 25.04.2020.