body в HTML

Тег BODY

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да
HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Элемент предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера BODY . К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Тег также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY . Тем не менее, большинство параметров до сих пор поддерживается разными браузерами.

Часто тег используется для размещения обработчика событий, например, onLoad , которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

Открывающий и закрывающий теги на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа.

HTML vs Body в CSS

Разница между и очевидна. Это, пожалуй, одна из тех вещей, которые попадают в категорию тривиальных. Тем не менее, у меня есть плохая привычка применять глобальные стили к , а если что-то не работает, переносить в , не задумываясь.

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

Как связаны html и body

Рассмотрим стандартную структуру для базового HTML документа:

Спецификация определяет как корневой элемент документа, и мы ясно видим, что в приведенном примере является элементом самого верхнего уровня. Здесь нет уровней, откуда могли бы быть унаследованы стили.

Непосредственно в находятся только два элемента: и . На самом деле, спецификация определяет прямо противоположно , поскольку это два элемента, которые необходимо различать.

Итак, суть в том, что является корневым элементом документа, а является потомком, содержащимся в нем. Cелектор :root в CSS и html определяют одно и то же:

Единственное отличие в том, что :root имеет большую специфичность: (0, 0, 1, 0) против (0, 0, 0, 1).

Таким образом, мы всегда должны применять глобальные стили к , не так ли?

Это наталкивает на мысль, что все стили, которые должны быть унаследованы всеми элементами, необходимо применять к , поскольку это корневой элемент в документе. Элемент идет выше в иерархии, поэтому должен содержать все глобальные стили.

Но это не совсем так. На самом деле, ряд атрибутов в спецификации изначально был связан с элементом :

  • background
  • bgcolor
  • marginbottom
  • marginleft
  • marginright
  • margintop
  • text

Поскольку эти атрибуты в настоящее время считаются устаревшими, рекомендуется вместо них использовать соответствующие CSS свойства:

Атрибут CSS свойство
background background
bgcolor background
background-color
marginbottom margin-bottom
marginleft margin-left
marginright margin-right
margintop margin-top
text font

Учитывая, что эти свойства CSS возникли из встроенных атрибутов, которые были связаны с , представляется целесообразным применять их непосредственно к в CSS, а не к элементу .

Таким образом, мы всегда должны применять глобальные стили к , не так ли?

Ну, не совсем. Все-таки есть ситуации, где имеет смысл применить стили к . Давайте рассмотрим пару таких сценариев.

Работа с единицами измерения rem

Единица измерения rem связана с корнем документа. Например, если написать что-то вроде этого:

Единица измерения rem рассчитывается относительно font-size элемента , который является корнем документа. Таким образом, класс .module будет масштабироваться относительно корневого уровня.

Классический пост Джонатана Снука прекрасно иллюстрирует, как задать font-size элемента в процентах для работы с rem.

Хитрый background-color

Существует одна странная вещь в CSS, если задать background-color элементу , он заливает весь вьюпорт, даже если элемент не занимает все пространство. Если при этом задать background-color для , этого не происходит.

Подводя итог

Надеюсь, эта статья проливает некоторый свет на ключевые различия между использованием и в CSS. Есть также различия в JavaScript. Например, получить элемент можно с помощью document.rootElement, а с помощью document.body.

Мы могли бы, конечно, более детально рассмотреть технические различия между ними, но цель в данном случае, углубить понимание, чтобы принимать более обоснованные решения при написании CSS.

Есть ли у вас другие примеры, где это имеет смысл задавать стили именно для или для ?

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

в HTML

Тег определяет видимую часть документа для посетителей сайта. В этот контейнер помещается весь контент для страницы (тексты, изображения, формы).

Считается, что у данного элемента закрывающий тег необязателен, и все-таки правильнее указывать закрывающий тег, обозначающий начало и конец html-документа.

Тег имеет ряд необязательных атрибутов, с помощью которых можно задавать цвета текста, ссылок и.тд.

Синтаксис

  1. body > . body >

Атрибуты

  • text — цвет текста
  • background — фоновое изображение для страницы
  • bgcolor — задает фоновый цвет html-документе
  • bgproperties — прокрутка/фиксация фона относительно содержимого страницы
  • scroll — показывать/скрыть отображение полосы прокрутки браузера
  • topmargin — верхний внешний отступ от верхней границы окна браузера до контента
  • bottommargin — внешний отступ начиная с нижнего края окна страница до контента
  • leftmargin — внешний отступ слева по горизонтали от края окна браузера до контента
  • rightmargin — внешний отступ справа по горизонтали от края окна браузера до контента
  • link — цвет ссылок в html-документе
  • alink — задает цвет активной ссылки
  • vlink — цвет посещенных ссылок

Некоторая дополнительная информация

Указанные выше атрибуты можно использовать при разработке html-документов, хотя постепенно теряют свою популярность. Более гибкие настройки внешнего вида элемента можно получить с помощью свойств css.

HTML против Body в CSS

Дата публикации: 2015-06-02

От автора: разницу между тегами html и body очень легко не заметить. Кажется, что этот момент относится к тривиальным вещам. Должен признаться, что у меня была очень плохая привычка применять все глобальные стили к тегу body, а когда этого было недостаточно, то я, не задумываясь, переключался на тег html.

Однако, различия между этими тегами все-таки есть. И хорошая идея заключается в том, что неплохо было бы о них знать, независимо от того, как долго вы пишите CSS. В этой статье мы рассмотрим данные различия и практические примеры, в которых применение стилей к одному элементу вместо другого может оказаться более правильным решением.

Как элементы HTML и body связаны друг с другом

Давайте рассмотрим стандартную структуру базового HTML документа:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

В спецификации html определяется как корневой элемент документа, и мы можем это четко видеть из вышеприведенного примера: элемент html находится на самом верхнем уровне по сравнению с другими элементами. Выше подниматься уже некуда, т.е. это самый первый элемент, от которого могут наследоваться стили.

Далее, прямо после тега html, идут только два элемента: head и body. Фактически, в спецификации body прямо противопоставлен элементу head, поскольку имеются всего лишь два элемента, которые требуется различать на данном уровне.
Итак, получается, что html – это корневой элемент документа, в котором содержится элемент body, являющийся его потомком. В CSS даже есть селектор :root. Следующие два селектора являются равнозначными:

За исключением того, что селектор :root обладает более высокой специфичностью: (0, 0, 1, 0) против (0, 0, 0, 1).

Поэтому нам следует всегда задавать глобальные стили для html, правильно?

Очень заманчиво предполагать, что любые стили, которые должны быть унаследованы на протяжении всего документа, следует задавать прямо для html, потому что это корневой элемент документа. Элемент html превосходит элемент body по иерархии, поэтому было бы логично, чтобы именно для него задавались все глобальные стили.

Но на деле выходит не совсем так. На самом деле, следующие инлайн атрибуты были изначально присвоены в спецификации элементу body:

В настоящее время данные атрибуты считаются устаревшими, и рекомендуется использовать аналогичные им CSS свойства (слева — Инлайн Атрибут, справа — его аналог CSS Свойство):

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

bgcolor — background, background-color

Учитывая то, что данные CSS свойства произошли из инлайн атрибутов, которые были созданы для элемента body, было бы логично применять их в CSS прямо для body, а не для html.

Поэтому нам следует всегда задавать глобальные стили для body, правильно?

Что ж, не совсем так. Есть ситуации, в которых было бы правильнее применять данные стилевые свойства к элементу html. Давайте рассмотрим пару таких ситуаций.

Работа с единицами измерения rem

Единица измерения rem является относительной по отношению к корню документа. Например, когда мы пишем что-то наподобие этого:

Единица измерения rem, в данном случае, будет относительной по отношению к значению свойства font-size у элемента html, который и является корнем документа. Таким образом, элемент с классом .module будет масштабироваться в зависимости от того, какое значение задано у пользователя по умолчанию для корня документа.

У Джонатана Снука (Jonathan Snook) есть классическая статья, которая замечательно демонстрируется, как установка значения свойства font-size для html в процентах может быть использована в качестве сброса стилей при работе с единицей измерения rem.

Причудливое свойство background-color

Есть одна странная вещь в CSS, когда заданный фоновый цвет (с помощью свойства background-color) для элемента body заполняет всю область просмотра, даже если размеры самого элемента при этом меньше. Так происходит до тех пор, пока свойство background-color не будет задано для элемента html.

Если нужно, чтобы фоновый цвет заливал всю область просмотра, то лучше всего сразу задать его для элемента html.

Заключение

Я надеюсь, что это пролило немного света на ключевые различия между тегами html и body в CSS. Существуют также различия и в JavaScript. Например, вам не нужен селектор для данных элементов, чтобы найти их, т.к. в JavaScript html – это document.rootElement, а body – document.body.

Мы, конечно, можем описать более технические различия между этими двумя элементами, но цель этой статьи была в том, чтобы повысить наш уровень понимания сути этих элементов для принятия более осознанных решений при написании CSS.
Есть ли у вас примеры того, где стоит вместо одного элемента использовать другой? Или, возможно, у вас есть другие критерии выбора элемента для стилизации. Напишите об этом в комментариях!

Автор: Geoff Graham

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

в HTML

Тег — элемент языка html, заключающий в себе гипертекст, который определяет собственно Web-страницу. Это та произвольная часть документа, которую разрабатывает автор страницы и которая отображается браузером. Соответственно, конечный тег этого элемента надо искать в конце HTML- файла.

Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутрь начального тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком.

в HTML

Все о создании сайтов, блогов, раскрутке и продвижении в поисковых системах и заработке на своем проекте

  • Вы здесь :
  • MonetaVInternete.ru
  • / Создаем сайт с нуля / Основы HTML и CSS /
  • HTML-теги html, head, body. Теги, которые есть в любой страничке интернета

HTML-теги html, head, body. Теги, которые есть в любой страничке интернета

Здравствуйте, уважаемые читатели блога MonetaVInternete.ru! Продолжаем рубрику «Создаем сайт с нуля», а в частности тему тегов. И сегодня мы рассмотрим теги, которые присутствуют в любой интернет-страничке — , и . Есть еще один тег, который должен находиться в каждом HTML-документе и про который я уже писал в одной из предыдущих статей — тег-декларация , поэтому затрагивать его мы не будем.

В прошлых статьях рубрики я писал про создание пустого файла в формате html. Фактически, он был использован в статье про теги форматирования документа (именно в нем были применены теги заголовков). Теперь мы напрямую будем редактировать этот файл с полными описаниями.

И начнем статью именно с редактирования созданного файла. Лично я назвал его index.html, но имя может быть любым. Открываем его с помощью любого текстового редактора (лучше использовать Notepad++, так как в нем есть подсветка кода и другие полезные примочки). И сразу добавим в него теги , и ровно в таком порядке, в каком они написаны. Не забудьте их закрыть, как показано на скриншоте. Документ примет следующий вид:

А теперь рассмотрим значение каждого тега в отдельности. Не зря же они есть в каждом HTML-документе.

Функции тега

Теоретически, он и сам может понять что и как. Ведь что такое браузер? Это переводчик языка HTML и вряд ли он начнет обработку с середины документа и закончит ее, не дойдя до конца. Вопрос, конечно, спорный, но я всегда думал (и сейчас не отказываюсь от своего мнения) о том, что написание данного тега обязательно.

Даже учитывая то, что функция данного тега лишь в обозначении границ содержимого, он имеет свои атрибуты (которые сейчас либо не используются вообще, либо используются крайне редко). В разных источниках указываются отличные друг от друга атрибуты, поэтому не осмелюсь выдвигать правильную версию.

Единственное, что точно могу сказать — большинство атрибутов не поддерживаются HTML 4.01 или нежелательны. Хотя один пример все же приведу. Атрибут title — всплывающая подсказка в любом месте документа. Например, при наведении мыши на изображение вы можете увидеть всплывающий текст. Также и в случае с этим тегом:

А вот что вы увидите, наведя курсор на документ с данным содержимым:

Предпочтительнее использовать атрибут title не в теге , а в любых других конкретных участках страницы. Во-первых — удобно, во-вторых — поисковые системы лучше отнесутся к вашему сайту. Непосредственно на оптимизацию ресурса этот тег не оказывает. Идем далее.

Функция тега

Какую же информацию можно увидеть в ? А никакую. Все, что находится в пределах этого тега доступно для глаза человека только с помощью просмотра исходного кода страницы. Все содержимое этого тега предназначено для поисковых систем и браузеров. Единственное, что вы хоть как-то можете увидеть это тег , который отвечает за заголовок окна веб-страницы. Вот пример:

Текст после иконки и есть содержание тега . А теперь рассмотрим содержание , которое мы увидеть не можем, но которое является очень важной частью создания и продвижения сайта. В первую очередь это строка

Это мета-тег отвечающий за тип содержимого страницы (Content-Type). В данном случае, это html код в кодировке UTF-8 (content=»text/html; charset=UTF-8″). Далее идет тег title, описанный выше. Затем идут строки, начинающиеся с тега
. Он указывает на связь с внешним документом. Например, строка

указывает на то, что подключен (rel=»stylesheet») файл с каскадными таблицами стилей (type=»text/css»), который находится по такому-то адресу (для уменьшения длины строки, я заменил половин адреса на точки). После обработки данной строки браузером он определит, откуда брать каскадные таблицы стилей.

Вообще, в теге head много информации,о которой можно рассказывать бесконечно долго. Последнее, что стоит отметить (конкретно в случае с блогом на WordPress) — наличие тегов описания, ключевых слов и canonical. Я использую плагин All in One SEO Pack, поэтому они и присутствуют в пределах .

Все три являются частью внутренней оптимизации сайта. Тег описания может выступать в роли сниппета в поисковой выдаче (вопрос довольно спорный, но все-таки следует заполнить данный тег). С ключевыми словами, думаю, итак все понятно. А вот тег canonical указывает поисковой системе дублированные страницы (страницы, на которых имеется схожий контент) для того, чтобы не попасть под фильтр за неуникальность контента.

Функции тега

  1. Background — устанавливает определенный фон на всю веб-страницу. Источник вы указываете сами
  2. text — устанавливает цвет текста. Цвет, обычно, указывают в html-коде. Например, #8958FC
  3. bgcolor — устанавливает цвет фона, если не задано фоновое изображение с помощью первого атрибута
  4. bgproperties — параметр динамичности фона — прокручивать его вместе со всей страницей, или же оставить на месте.

Атрибутов много, плюс подходят почти все универсальные, поэтому расписывать все нет смысла.

Один интересный факт. Все вы знаете, что браузеры появлялись версия за версией и каждый мог разбирать определенное количество тегов. Возьмем один из первых браузеров — Интернет Эксплорер. Факт заключается в том, что в 1-ой версии поддерживался лишь , во 2-ой — , и, наконец, в 3-ей — . Версии реализовывались довольно быстро, откуда можно сделать вывод о значимости тегов и скорости развития технологий.

HTML — Урок 4: «Тело» сайта, тег «body»

Давно я не писал уроков HTML, но сегодня решил это исправить — нужно продолжать изучать HTML язык. Итак, сегодня я расскажу про то, что такое «тело» сайта и немного про атрибуты данного тега.

«Тело» сайта — разговорный термин среди программистов и HTML верстальщиков. Под выражением «тело» сайта подразумевают теги и / Между данными тегами располагается основное содержимое сайта, все блоки, изображения, теги, текст и так далее, что будет отображаться в тот момент, когда посетитель зашел на Ваш сайт.

Тегу «body» можно задать атрибуты, например фон страницы или цвет текста. Фон HTML страницы задает атрибут bgcolor:

Цвет страницы можно задать как шестнадцатизначным номером цвета, так и его названием из стандартной палитры цветов:

Чтобы задать цвет текста, используется атрибут text. Оформляется он почти так же, как и атрибут bgcolor:

Атрибуты «bgcolor» и «text» можно использовать и одновременно:

Вместо bgcolor можно использовать другой атрибут — background. Этот атрибут позволяет назначить в качестве фона HTML страницы — картинку.

Оформляется этот атрибут следующим способом:

где site.site — адрес вашего сайта, а kartinka.jpg — изображение, которое будет фоном вашей HTML страницы.

Пример элементарного шаблона сайта с использованием атрибутов тега «body»:

Пример получился, конечно, не ахти, поэтому впереди Вас ждет ещё много уроков HTML!

Бюро Погодаева — продвижение сайта цены
Почта: hello@pgdv.ru
Телефон: +7(495)966-28-77

При верстке шаблонов и дизайнов верстальщики редко используют атрибуты тега «body», обычно эти параметры задаются в CSS. Как подключить css-стили к шаблону можно прочитать в Уроке №3: Как подключить CSS стили оформления в шаблоне?. О том, как правильно оформить «тело» сайта, я расскажу в следующем уроке №5. И помните, что создание HTML сайта не так сложно, как это кажется в начале!

Элемент BODY

Внутри элемента BODY располагается сам документ: весь текст, находящийся между открывающим тегом и закрывающим тегом , будет отображаться браузером. Все элементы, отвечающие за форматирование документа, помещают внутрь элемента BODY.

Атрибуты элемента BODY применяются для того, чтобы установить общие для всего документа свойства, и в этом отношении возможности данного элемента достаточно большие: можно задать цвет ссылок, параметры фона и т. п.

Сначала рассмотрим атрибуты элемента BODY, управляющие отображением ссылок. Для удобства посетителей страницы надо задавать разные цвета для посещенных, непосещенных и активных ссылок, при этом нужно следить, чтобы они не сливались с цветом фона страницы, потому что это будет неудобно посетителям.

За цвет ссылок отвечают следующие атрибуты элемента BODY:

• alink – задает цвет активной ссылки;

• vlink – определяет цвет посещенной ссылки;

• link – устанавливает цвет непосещенной ссылки.

Цвета ссылок можно задать в HEX-формате или ключевыми словами. Ключевые слова имеет смысл использовать, если вы хотите применить стандартный цвет. Ну а если вы собираетесь устанавливать нестандартные цвета, придется воспользоваться HEX-форматом.

В примере из листинга 1.12 представлены оба варианта записи.

в HTML

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

Хотя тег и не обязателен (браузер сам определит, где находится тело HTML-документа), все же принято его указывать всегда.

Атрибуты

  • alink — Цвет активных ссылок.
  • background — Задает путь к фоновому изображению.
  • bgcolor — Цвет фона страницы.
  • bgproperties — Запрещает скроллинг фонового изображения вместе с содержимым страницы.
  • bottommargin — Поле снизу от окна браузера до содержимого страницы.
  • leftmargin — Поле слева от окна браузера до содержимого страницы.
  • link — Цвет непосещенных ссылок.
  • rightmargin — Поле справа от окна браузера до содержимого страницы.
  • scroll — Скрывает или отображает полосу прокрутки окна.
  • text — Устанавливает цвет текста по умолчанию.
  • topmargin — Поле сверху от окна браузера до содержимого страницы.
  • vlink — Цвет посещенных ссылок.
  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab ).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Всегда указывайте все атрибуты, отвечающие за цвет, вместе. По умолчанию их значения берутся из текущей цветовой схемы операционной системы или из настроек браузера. Поэтому может случиться так, что если указать не все цвета — некоторые могут совпасть или быть негармоничными. Кроме этого, если вы используете background , то всегда указывайте и bgcolor , на тот случай, если в браузере отключен показ изображений.

Тип тега

Модель тега: может располагаться сразу после закрывающегося тега или, если он не указан, после тегов, относящихся к заголовку документа.

в HTML

Хотя существует некоторое количество команд состоящих только из tag начало команды. В этих командах tag конец команды игнорируется просмотрщиком. Стандарт языка HTML требует обязательного присутствия tag конец команды.

Замечание: Язык HTML не чувствителен к регистру. Команды языка могут набираться как прописными так и строчными буквами, т.е. команда эквивалентна команде или .

Не все команды (tag) поддерживаются всеми World Wide Web просмоторщиками. Если просмоторщик не поддерживает команду, он ее просто игнорирует.

Атрибуты

Атрибуты ставятся сразу после команды и имеют следующий формат:

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

В качестве примера, использования атрибутов рассмотрим команду BODY, определяющую содержательную часть документа.

Илон Маск рекомендует:  Простейший способ создания адаптивной шапки
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL