Что такое контейнер в html
Перейти к содержимому

Что такое контейнер в html

  • автор:

1.2. Контейнеры HTML-документа

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

Контейнеры заголовка документа НТМL — HEAD

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

ТIТLЕ

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

ТIТLЕ имеет следующий синтаксис

 <ТIТLЕ>Название документа 

Содержание тага ТIТLЕ отображается в поле названия документа.

ВАSE

Таг ВАSЕ связан с формой представления гипертекстовой ссылки в форме URL. Дело в том, что спецификация URL определяет две формы адресации документов: полную и неполную. НТМL разрешает использовать как полную форму адреса URL, так и неполную. Но для того, чтобы использовать вторую форму спецификации, ее надо на чем-то базировать, т.е. задавать базовый адрес, который можно было бы использовать для формирования полной формы URL из неполной. Таг ВАSЕ позволяет определить эту базу. Так, например, если в заголовке будет задано:

будет расширена до

Это же касается и других импортируемых в документ тагов. Графический образ, монтируемый в документ по команде:

будет найден по адресу:

Содержание тага ВАSЕ интерфейсом пользователя прямо не отображается.

ISINDEX

Возможность поиска НТМL-документа по ключевым словам определяется тагом ISINDEX заголовка документа. В первоначальной версии языка данный таг не имел дополнительных атрибутов. Если сервер мог выполнить запрос по ключевым словам, то он автоматически вставлял в заголовок таг ISINDEX. Список ключевых слов приписывался клиентом к адресу документа после символа «?». Понятно, что выполнить запрос мог сервер, который при наличии символа «?» превращался в поисковую машину. НТМL-документ мог быть сгенерирован «на лету» программой, тогда ключевые слова после «?» приписываются к адресу этой программы. В новой версии языка появилась возможность указать программу обработки запроса и задать фразу вместо стандартной «SЕАRСН ISINDEX»:

В приведенном примере атрибут НREF определяет адрес программы обработки запроса, а атрибут РRОМРТ — содержание приглашения. Справедливости ради стоит отметить, что полностью новые возможности этого тага выполняет только один — Аrеnа. Такие популярные интерфейсы, как Моsaic и Netscape, данный таг интерпретируют по-старому.

МЕТА

Таг МЕТА предназначен для определения в заголовке документа конструкций, отсутствующих в спецификации НТМL. Имеет три атрибута: NAME, CONTENT, HTTP-EQUIV. Применение данного тага затруднено тем, что для интерпретации конструкций, которые вводятся через этот таг, необходимо, чтобы сервер или интерфейс пользователя могли эти конструкции расшифровать и применить. Для такого сорта работы программа должна иметь интерпретировать конструкции SGML, что практически не реализовано ни в одной интерфейсной программе. Единственным способом применения данного тага на практике является включение в заголовок отклика по протоколу НТТР информации, определенной через атрибут НТТР-ЕQUIV:

При таком использовании в заголовок НТТР-пакета будет включена строка: Keywords: Plasma, Nuclear Physics, что удобно при отправке почты, например.

Наиболее эффектное применение контейнера МЕТА для построения демонстрационных роликов. В этом случае изменение отображаемой страницы строится на параметре Rеfresh (т.е. времени обновления документа). В заголовок документа записывается контейнер МЕТА следующего вида:

такое предложение равносильно появлению в заголовке сообщения протокола НТТР предложения вида:

Refresh = 0; URL=next.php

В свою очередь это означает замену документа сразу же после загрузки его браузером. При этом в качестве нового документа используется документ из параметра URL.

Контейнеры (div, span) в HTML

HTML теги div и span на первый взгляд ничего не делают, но без них не обходится ни один современный сайт.

div

Тег >.

является контейнером. Он не имеет особых свойств. Поэтому его часто используются для формирования дизайна сайта. По умолчанию div является блочным элементом. Поэтому на странице будет занимать 100% ширины родительского элемента.

span

Тег >. является таким же контейнерем, что и div. Но span — это строчный элемент. Это означает, что его можно использовать внутри блока текста, чтобы выделить часть текста. Аналогом такого же поведения являются теги для форматирования текста , , .

Внутри блочных элементов (div) может быть сколько угодно строчных элементов (span). Но ставить блочный элемент внутрь строчного — это ошибка. В таком случае разные браузеры будут давать непредсказуемый результат.

Контейнеры. Встроенные контейнеры

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

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

. Может ли CSS нам в этом помочь?

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

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

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

Контейнеры бывают блочные и встроенные. Разговор о блочных контейнерах мы отложим до главы 10, в которой будем рассматривать контейнерный Web-дизайн. Поговорим о встроенных контейнерах.

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

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

Представление создается с помощью стилей CSS.

Здесь мы поместили во встроенный контейнер фрагмент абзаца.

Толку от нашего первого встроенного контейнера никакого. Поэтому давайте привяжем к нему какой-нибудь стиль (листинг 8.1).

Данный текст является ознакомительным фрагментом.

Продолжение на ЛитРес

Читайте также

Блочные контейнеры

Блочные контейнеры Как ясно из названия, блочный контейнер может хранить только блочные элементы: абзацы, заголовки, большие цитаты, теги адреса, текст фиксированного форматирования, таблицы, аудио- и видеоролики. Блочный контейнер может содержать как один блочный

Свободно позиционируемые контейнеры

Свободно позиционируемые контейнеры Давайте вернемся назад, к языкам HTML и CSS, и посмотрим, не предложат ли они нам что-либо, радикально решающее эту проблему. Так и

Контейнеры. Встроенные контейнеры

Контейнеры. Встроенные контейнеры В самом начале данной главы мы узнали, что все рассмотренные нами атрибуты стилей можно указывать для любых элементов Web-страниц: и блочных, и встроенных. Значит, мы можем задать размер шрифта и для абзаца (блочного тега <P>), и для

Блочные контейнеры

Блочные контейнеры Как ясно из названия, блочный контейнер может хранить только блочные элементы: абзацы, заголовки, большие цитаты, теги адреса, текст фиксированного форматирования, таблицы, аудио- и видеоролики. Блочный контейнер может содержать как один блочный

Параметры переполнения. Контейнеры с прокруткой

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

Свободно позиционируемые контейнеры

Свободно позиционируемые контейнеры Давайте вернемся назад, к языкам HTML и CSS, и посмотрим, не предложат ли они нам что-либо, радикально решающее эту проблему. Так и есть! Понятие свободно позиционируемого элемента Web-страницы Откроем любую из созданных нами ранее

Глава 11. Классы—контейнеры

Глава 11. Классы—контейнеры Классы—контейнеры являются обычными шаблонными классами (template classes), которые предназначены для хранения в памяти элементов заданного типа. С++ уже предлагает много контейнеров в составе стандартной библиотеки шаблонов (STL — Standard Template Library),

Ассоциативные контейнеры

Ассоциативные контейнеры Ассоциативный контейнер содержит произвольное количество элементов одинакового типа, индексируемых некоторым ключом. Qt содержит два основных класса ассоциативных контейнеров: QМар<К, T> и QHash<K, T>.QMap<K, T> — это структура данных, которая

STL: контейнеры

STL: контейнеры Если вам нужен контейнер, по умолчанию используйте vector. — Бьярн Страуструп (Bjarne Stroustrup), [Stroustrup00] §17.7 Мы знаем, что вы уже предпочитаете использовать стандартные контейнеры вместо написанных вручную. Но какой именно контейнер следует использовать? Что должно

Контейнеры

Контейнеры В STL входит немало полезных компонентов (в том числе итераторы, алгоритмы и объекты функций), однако большинство программистов С++ ставит на первое место именно контейнеры. По сравнению с массивами контейнеры обладают большей гибкостью и функциональностью. Они

Контейнеры vector и string

Контейнеры vector и string Все контейнеры STL по-своему полезны, однако большинство программистов С++ работает с vector и string чаще, чем с их собратьями, и это вполне понятно. Ведь контейнеры vector и string разрабатывались как замена массивов, а массивы настолько полезны и удобны, что

Ассоциативные контейнеры

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

Контейнеры

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

Ассоциативные контейнеры (Associative containers)

Ассоциативные контейнеры (Associative containers) Ассоциативные контейнеры обеспечивают быстрый поиск данных, основанных на ключах. Библиотека предоставляет четыре основных вида ассоциативных контейнеров: set (множество), multiset (множество с дубликатами), map (словарь) и multimap (словарь с

6.15. Контейнеры multimap и multiset

6.15. Контейнеры multimap и multiset Контейнеры map и set не допускают повторяющихся значений ключей, а multimap (мультиотображение) и multiset (мультимножество) позволяют сохранять ключи с дублирующимися значениями. Например, в телефонном справочнике может понадобиться отдельный

Компонент Контейнер Container

Партнёр

Компонент «Контейнер» позволяет выравнивать и центрировать содержимое страницы. Обычно в контейнер обернут основной контент сайта.

Применение

Основы. Использование

Добавьте класс .uk-container к элементу блока, чтобы придать ему максимальную ширину (по умолчанию max-width: 1200px ). Элемент будет отцентрирован и будет иметь боковые внутренние отступы, которые автоматически адаптируются для больших экранов. Обычно в контейнер оборачивают основной контент сайта.

Модификатор «Размер»

Добавьте один из следующих классов в контейнер, чтобы применить необходимую максимальную ширину.

Класс Описание
.uk-container-xsmall Добавьте этот класс, если вы хотите установить малую ширину для контейнера.
По умолчанию: max-width: 750px
.uk-container-small Добавьте этот класс для небольшого размера контейнера.
По умолчанию: max-width: 900px
.uk-container-large Добавьте этот класс для широкого размера контейнера.
По умолчанию: max-width: 1400px
.uk-container-xlarge Добавьте этот класс для большого размера контейнера.
По умолчанию: max-width: 1600px
.uk-container-expand Добавьте этот класс, если вы не хотите ограничивать ширину контейнера, но хотите динамическое горизонтальное заполнение.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *