Встроенные контейнеры. Контейнерный Web-дизайн Использование свойства translateY и top
теги html (8)
В настоящее время я изучаю html / css и заметил, что общая методика заключается в том, чтобы разместить общий контейнер div в корне тега body:
... ...Есть ли веская причина для этого? Почему css не может ссылаться на тег тела?
Это одна из самых больших вредных привычек, совершаемых сторонними кодировщиками.
Все ответы выше меня ошибаются. Тело действительно принимает ширину, поля, границы и т. Д. И должно действовать как ваш первоначальный контейнер. Элемент html должен действовать как ваш фоновый «холст», как он был предназначен. На десятках сайтов, которые я сделал, мне нужно было использовать только контейнер div.
Я был бы готов быть тем, что эти же кодеры, использующие контейнеры divs, также засоряют свою разметку divs внутри divs - везде.
Не делай этого. Используйте divs экономно и нацелитесь на точную разметку.
ОБНОВЛЕНИЕ - Не уверен, что случилось с SO, потому что я могу отредактировать этот ответ с 5 лет назад, но я не могу ответить на комментарии, поскольку он говорит, что мне нужно 50 Rep, прежде чем я смогу это сделать. Соответственно, я добавлю свой ответ на ответы, полученные здесь. - = - = -
Я только что нашел это, спустя годы после моего ответа, и вижу, что есть некоторые последующие ответы. И, конечно же, вы шутите?
Установленный сайт-заполнитель, который вы нашли для моего домена, который я никогда не утверждал, был моей разметкой или стилем или даже упоминался в моем сообщении, был очень четко базовым CMS-установкой с одним словом контента (он так же сказал на главной странице). Это не моя разметка и стиль. Это был шаблон Silverstripe по умолчанию. И я не беру на себя ответственность за это. Это, однако, возможно, один из двух примеров, о которых я могу думать, что это потребует контейнера div.
Пример 1. Общий шаблон, предназначенный для размещения неизвестных. В этом случае вы видите шаблон CMS по умолчанию, в котором есть div внутри div внутри div.
Пример 2: макет из трех столбцов, чтобы получить нижний колонтитул для правильной очистки (я думаю, что это был, вероятно, сценарий, который мне нужен, чтобы контейнер-контейнер был трудно запомнить, потому что это было много лет назад.)
Я только что создал (еще не закончил) тему для своего домена и начал загружать контент. Для этого легко достигнутого примера семантической разметки щелкните ссылку.
Честно говоря, я озадачен тем, что люди думают, что вам действительно нужен контейнер-контейнер, и начинайте с него, прежде чем даже пытаться просто создать тело. Тело, как я слышал, однажды объяснил один из оригинальных авторов спецификации CSS, было предназначено как «исходный контейнер».
Пометка должна быть добавлена по мере необходимости, а не потому, что это так, как вы ее видели.
По умолчанию большинство браузеров берут размер веб-страницы. Таким образом, некоторая страница не будет отображаться одинаково в разных браузерах. Таким образом, использование пользователя может измениться для конкретного элемента HTML. Например, пользователь может добавить маркер, размер, ширину и высоту определенного HTML-тега.
Некоторые браузеры ( Internet Explorer) не поддерживают определенные свойства на теле, в частности width и max-width .
Самые распространенные причины для меня таковы:
Я знаю, что это старый вопрос, но я столкнулся с этой проблемой, переделав веб-сайт. Трой Далмассо заставил меня задуматься. Он делает хороший момент. Итак, я начал видеть, могу ли я заставить его работать без контейнера div.
Я мог бы, когда я установил ширину тела. В моем случае - 960 пикселей.
Это css, который я использую:
html { text - align : center ; } body { margin : 0 auto ; width : 960px ; }Это прекрасно центрирует встроенные блоки, которые также имеют фиксированную ширину.
Надеюсь, это полезно для всех.
Этот метод позволяет вам более гибко настраивать весь контент. Эффективное создание двух контейнеров, которые вы можете использовать. Тег тега HTML, который служит в качестве фона, и div с идентификатором контейнера, который содержит ваш контент.
Это позволяет вам размещать контент на странице, одновременно стирая фон или другие эффекты без проблем. Рассматривайте это как «Кадр» для контента.
У контейнера div очень хорошо, потому что, если вы хотите, чтобы сайт был центрирован, вы просто не можете сделать это только с телом или html ... Но вы можете, с divs. Почему контейнер? Его обычно используют, только потому, что его код должен быть чистым и читаемым. Так что это контейнер... Он содержит весь сайт, на случай, если вы захотите его обмануть:)
Теги div используются для стилизации веб-страницы, чтобы она выглядела визуально привлекательной для пользователей или аудитории веб-сайта. использование контейнера-div в html сделает сайт более профессиональным и привлекательным, и поэтому больше людей захотят изучить вашу страницу.
В основе языка HTML лежит понятие «тэг» (англ.: tag -ярлычок, этикетка). Тэги заключаются в угловые скобки (< >) и образуют пары – контейнеры (открывающий тэг и закрывающий). Например, контейнером HTML документа является пара тэгов и . В web-странице включены контейнеры, отвечающие за заголовок документа (голова) и содержат дополнительную информацию, а также контейнеры, отвечающие за само содержание документа (тело). Они представлены на рисунке.
Итак HTML документ заключается в контейнер , заголовок в контейнер , а содержание документа в контейнере . Контейнер , расположенный в заголовке (контейнере ) содержит текст, отображающийся в верхней строке окна браузера. В контейнер заголовка также могут быть добавлены тэги, содержащие кодировку, ключевые слова web-страницы, а также код для подключения файлов каскадных таблиц стилей CSS, языка программирования jаvascript, VBScript и т.д.
Пример простейшей HTML странички, содержащей только основные тэги:
Название страничкиСодержание простейшей странички
Результат работы указанного кода изображен на рисунке.
Как видно из примера текст «Содержание простейшей странички» отображается обычным текстом. Для того чтобы произвести форматирование этого текста, необходимо использовать специальные тэги. Пример использования тэгов форматирования представлен на рисунке.
Для изменения шрифта, его цвета и размера используется тэг с параметрами “face”, “color” и “size”. Например для того чтобы задать шрифт “arial” красного цвета и 14 размера необходимо написать следующий код:
Форматируемтекст
Для выделения абзаца в тексте используется тэг
В контейнер которого как правило помещается каждый абзац текста. Для создания заголовка используются тэги , , , , , .
Для формирования списков в теле документа используются контейнеры , и . Причем тэг формирует нурмерованный список, тэг
- - маркированный список, а в тэгах
- помещаются элементы списка. Пример кода отображения списков, представленный в виде нумерованного и маркированного списков представлен на рисунке.
Для связи двух и более Web-страниц между собой используются гиперссылки, для создания которых используется тэг . Причем в тэгах гиперссылок используются дополнительные атрибуты, позволяющие либо перейти к другой web-странице, либо переместиться внутри данной страницы. Второй способ желательно использовать в большом документе, имеющем несколько смысловых разделов.
Пример использования гиперссылок представлен на рисунке.
При указании URL адреса другой страницы необходимо указывать либо полный абсолютный путь к странице «полный путь/папка/страница» либо относительный (относительно данной страницы) «папка/страница». Параметр “target” позволяет открыть web-страницу в новом или существующем окне браузера.
Для вставки изображения на web-страницу используется тэг с параметрами src (путь к изображению), width (ширина изображения), height (высота изображения), border (рамка вокруг рисунка). Пример кода вставки изображения:
Часто при создании Web-страниц необходимым является задание фонового цвета или фонового изображения. Для этого используются атрибуты тэга «bgcolor» или «background-image». Пример вставки фонового цвета:
Пример вставки фонового изображения:
Указанные атрибуты могут быть использованы не только для тэга , но и для тэгов таблицы , области и других, которые будут рассмотрены в следующих темах.
Иногда бывает необходимо произвести выравнивание большого блока документа, содержащего не только текст, но и рисунки, таблицы и т.п. Для этих целей используется элемент-контейнер DIV . Спецификация элемента DIV:
ALIGN="выравнивание">
Атрибут ALIGN определяет тип выравнивания содержимого и может иметь те же значения, что и элемент P.
ОтступыИногда требуется отобразить блок текста с отступом. Для этого блок текста помещают в элемент-контейнер BLOCKQUOTE . Тогда содержимое этого элемента будет отображаться с небольшими отступами слева и справа, а также отделяться от остального текста пустыми строками.
ТаблицыОдним из наиболее мощных и широко применяемых в HTML средств являются таблицы. Они используются не только традиционно как метод представления данных, но и как средство форматирования Web-страниц. Документ HTML может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга.
Каждая таблица начинается тегом и заканчивается тегом . Внутри этой пары тегов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в которых задаются данные для отдельных ячеек.
Каждая строка начинается тегом и заканчивается тегом . Отдельная ячейка в строке обрамляется парой тегов и или и . Тег используется для ячеек заголовка таблицы, а
– для ячеек данных. Отличие этих тегов в том, что в заголовке по умолчанию используется полужирный шрифт, а для данных – обычный. Теги
и не могут появляться вне описания строки таблицы . Пример таблицы:
Пример таблицы
Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Этот пример отобразится в броузере так:
Спецификация тега
:
ALIGN="выравнивание"
BORDER="толщина рамки"
CELLPADDING="расстояние"
CELLSPACING="расстояние"
HEIGHT="высота"
WIDTH="ширина"
Атрибут ALIGN определяет выравнивание таблицы в окне просмотра броузера. Он может иметь одно из двух значений: LEFT (по левому краю) и RIGHT (по правому краю). По умолчанию – LEFT.
Атрибут BORDER управляет толщиной рамки. Значением этого атрибута является число. Это число определяет толщину рамки таблицы в пикселях. По умолчанию толщина рамки – 1.
Атрибут CELLPADDING определяет расстояние в пикселях между рамкой и содержимым ячейки. По умолчанию – 1.
Атрибут CELLSPACING определяет расстояние в пикселях между ячейками таблицы. По умолчанию – 2.
Атрибут HEIGHT определяет высоту таблицы в пикселях.
Атрибут VALIGN определяет вертикальное выравнивание содержимого таблицы. Он может иметь следующие значения: TOP (по верхнему краю), MIDDLE (посередине) и BOTTOM (по нижнему краю). По умолчанию – MIDDLE.
Атрибут WIDTH определяет ширину таблицы в пикселях или процентах от ширины окна броузера.
Спецификация тега
ALIGN="выравнивание"
BGCOLOR="цвет фона"
VALIGN="вертикальное выравнивание"
Атрибут ALIGN определяет выравнивание содержимого всех ячеек строки. Он может иметь одно из трех значений: LEFT (по левому краю), RIGHT (по правому краю) и CENTER (по центру). По умолчанию – CENTER.
Атрибут BGCOLOR определяет цвет фона для всех ячеек строки. Его значение можно указывать в символьной нотации или в формате RGB.
Атрибут VALIGN определяет вертикальное выравнивание содержимого всех ячеек строки. Он может иметь следующие значения: TOP (по верхнему краю), MIDDLE (посередине) и BOTTOM (по нижнему краю). По умолчанию – MIDDLE.
Спецификация тега
ALIGN="выравнивание"
BGCOLOR="цвет фона"
COLSPAN="количество ячеек"
HEIGHT="высота ячейки"
ROWSPAN=" количество ячеек "
VALIGN="вертикальное выравнивание"
WIDTH="ширина ячейки"
Атрибут ALIGN определяет выравнивание содержимого ячейки. Он может иметь одно из трех значений: LEFT (по левому краю), RIGHT (по правому краю) и CENTER (по центру). По умолчанию – CENTER.
Атрибут BGCOLOR определяет цвет фона для ячейки. Его значение можно указывать в символьной нотации или в формате RGB.
Атрибут COLSPAN позволяет объединить несколько соседних ячеек по горизонтали. Значение этого атрибута – количество объединяемых ячеек.
Атрибут HEIGHT определяет высоту ячейки в пикселях.
Атрибут ROWSPAN позволяет объединить несколько соседних ячеек по вертикали. Значение этого атрибута – количество объединяемых ячеек.
Атрибут VALIGN определяет вертикальное выравнивание содержимого ячейки. Он может иметь следующие значения: TOP (по верхнему краю), MIDDLE (посередине) и BOTTOM (по нижнему краю). По умолчанию – MIDDLE.
Атрибут WIDTH определяет ширину ячейки в пикселях.
Вопросы для закрепления.
Чем отличаются абзацы от заголовков?
Какие бывают списки?
Какие теги используются для изменения шрифта?Что такое «информация»?
4. Домашние задание:
1. Создайте таблицу, которая в первой строке содержит одну ячейку, во второй – две, в третьей – три ячейки.
2. На практике понаблюдайте эффект использования различных значений атрибута ALIGN тега .
HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.
Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.
Все HTML-элементы делятся на пять типов:
- пустые элементы
— , ,
, , , , , ,Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию. Индикатор измерения в заданном диапазоне. Раздел документа, содержащий навигационные ссылки по сайту. Определяет секцию, не поддерживающую сценарий (скрипт). Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег . Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная. Контейнер с заголовком для группы элементов . Определяет вариант/опцию для выбора в раскрывающемся списке , или . Поле для вывода результата вычисления, рассчитанного с помощью скрипта. Параграфы в тексте. Определяет параметры для плагинов, встраиваемых с помощью элемента . Элемент-контейнер, содержащий один элемент и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение. Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д. Индикатор выполнения задачи любого рода. Определяет краткую цитату. Контейнер для Восточно-Азиатских символов и их расшифровки. Определяет вложенный в него текст как базовый компонент аннотации. Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом. Отмечает вложенный в него текст как дополнительную аннотацию. Выводит альтернативный текст в случае если браузер не поддерживает элемент . Отображает текст, не являющийся актуальным, перечеркнутым. Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом. Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src . Определяет логическую область (раздел) страницы, обычно с заголовком. Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в . Отображает текст шрифтом меньшего размера. Указывает местоположение и тип альтернативных медиаресурсов для элементов , , . Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов. Расставляет акценты в тексте, выделяя полужирным. Подключает встраиваемые таблицы стилей. Задает подстрочное написание символов, например, индекса элемента в химических формулах. Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка. Задает надстрочное написание символов. Тег для создания таблицы. Определяет тело таблицы. Создает ячейку таблицы. Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом. Создает большие поля для ввода текста. Определяет нижний колонтитул таблицы. Создает заголовок ячейки таблицы. Определяет заголовок таблицы. Определяет дату/время. Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия. Создает строку таблицы. Добавляет субтитры для элементов и . Выделяет отрывок текста подчёркиванием, без дополнительного акцента. Создает маркированный список. Выделяет переменные из программ, отображая их курсивом. Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg. Таблица-шпаргалка с тегамиУказывает браузеру возможное место разрыва длинной строки. Для удобства пользования я сгруппировала теги по тематическим разделам, добавив значения свойства display для каждого тега. Чтобы перейти к таблице, кликните по рисунку.
7 ответов
HTML изначально был создан, чтобы помещать содержимое документов в какую-то структуру, понятную для компьютеров. Имея это в виду, тег p должен содержать все, что было бы структурировано как абзац, если содержимое страницы должно было быть превращено в печатный документ. Элементы div и span зарезервированы как контейнеры общего назначения для облегчения формирования и группировки связанных элементов, чтобы обеспечить дополнительные уровни структуры, возможно, коррелируя со страницами в текстовом документе.
В некоторых случаях теги p должны содержать другие элементы, такие как anchor (a), изображение (img) и другие встроенные элементы, потому что они напрямую связаны с содержимым остальной части и имеет смысл группировать их таким образом, или текст остальной части параграфа содержит более подробное описание.
Однако, если нет дополнительного описания этих элементов, нет смысла размещать их в абзаце просто как удобный контейнер; a div было бы более уместным. В общем, абзац должен содержать один абзац текста и любые непосредственно связанные или описанные элементы. В абзаце ничего другого не имеет смысла.
UPDATE : HTML5 также добавляет ряд других семантических "контейнерных" элементов, включая article , nav , header , section и aside .
Разница между этими тремя (и многими другими) тегами - это их смысловое значение. Стандарт HTML включает в себя оба тега со специфическими смысловыми значениями (
Для абзацев, для выделенного текста и т.д.) И теги без смыслового значения.
Последние являются и , которые используются для идентификации содержимого блока или встроенного уровня, которое необходимо идентифицировать (используя атрибут class= или id=), но для которого семантически-специфичный тег не существует. Например, можно написать
Hi, my name is John Doe.
- указывая на то, что это абзац (который браузер уже имеет представление о том, как обращаться), а часть его содержимого - это имя (что означает абсолютно ничего ). браузер, если CSS или JavaScript не использует его).Таким образом, эти теги невероятно полезны как при добавлении дополнительной информации в HTML-документ, который не вписывается в семантические теги, поставляемые стандартом (см. hCard спецификации для отличного примера) и для применения визуальной (CSS) или функциональной (JavaScript) структуры к документу без изменения его семантики.
Это элемент блочного уровня, который должен содержать абзац, состоящий из текста, встроенных элементов, которые изменяют этот текст (
- это элемент уровня блока, используемый для разделения страницы, почти всегда в сочетании со стилями CSS.
Ну, я честно не использую этот тег, который часто. Это встроенный элемент, и я использую его обычно, когда я хотел бы применять стили к части текста, которая не принесет пользы от использования чего-то большего смысла, например тегов и .
Я думаю, что создатели страниц должны использовать семантическую разметку, что означает, что создаваемая ими разметка должна передавать значение (а не презентацию). и
Имеют разные значения. Первый используется для определения раздела (или раздела) HTML-страницы, а второй - для определения абзаца текста.
Мне было трудно смотреть и как "tofu of webdeveloppement", так как он не имеет реального вкуса, но вы можете делать с ним что угодно.
(X) HTML-теги определяют, какой текст они окружают. Это и адрес, это ссылка, это абзац и т.д....
и - это просто способы попасть в куски вашего сайта, к которому вы обычно не можете добраться. Например, когда вы пытаетесь изменить размер | символ. Самый быстрый способ, который я когда-либо находил, - это установить диапазон вокруг него, дать ему класс, а затем реализовать CSS.
Это то, на что они способны, на мой взгляд. Мне было бы интересно услышать больше или даже исправления по тому, что я здесь написал.
Элемент p представляет абзац.
Похожие публикации