Div span чем отличаются
span представляет собой встроенную часть документа, например слова в предложении. div представляет часть документа на уровне блока, такую как несколько абзацев или изображение с его подписью. Ни один из элементов сам по себе не имеет никакого значения, но они позволяют применять семантические атрибуты (например lang=»en-US» ), стили CSS (например, цвет и типографику) или сценарии на стороне клиента (например, анимацию, скрытие и увеличение).
Например, если вы хотите сделать определенную часть текста внутри абзаца красной, вы должны использовать span
Это вернет какой-то красный текст. По сути, похоже, я красный!
СОДЕРЖАНИЕ
История
Этот span элемент был представлен в HTML во втором проекте html-i18n рабочей группы по интернационализации в 1995 году. Однако только в HTML 4.01 он стал частью языка HTML, появившись в рабочем проекте HTML 4 W3C в 1997 году.
В 1995 году span была введена разметка любого встроенного фрагмента текста, поскольку «нужен общий контейнер для переноса атрибутов LANG и BIDI в случаях, когда другой элемент не подходит». Он по-прежнему служит этой общей цели, хотя с тех пор был определен гораздо более широкий диапазон семантических элементов, а также есть еще много других атрибутов, которые, возможно, потребуется применить.
div определяет «раздел» документа, элемент уровня блока, который более отличается от элементов выше и ниже него, чем от диапазона встроенного материала.
Различия и поведение по умолчанию
Практическое использование
span и div элементы используются исключительно для обозначения логической группировки вложенных элементов.
Есть три основные причины для использования span и div метки с class или id атрибутами :
Стилизация с помощью CSS
Она является общей для и
Семантическая ясность
Такой вид группировки и маркировки частей содержимого страницы может быть введен исключительно для того, чтобы сделать страницу более семантически значимой в общих чертах. Невозможно сказать, как будет развиваться всемирная паутина в ближайшие годы и десятилетия. Веб-страницы, разработанные сегодня, могут все еще использоваться, когда информационные системы, которые мы еще не можем себе представить, просматривают, обрабатывают и классифицируют сеть. Даже современные поисковые системы, такие как Google и другие, используют проприетарные алгоритмы обработки информации значительной сложности.
В течение нескольких лет Консорциум Всемирной паутины (W3C) руководил крупным проектом семантической паутины, призванным сделать всю сеть более полезной и значимой для сегодняшних и будущих информационных систем.
Доступ из кода
Чрезмерное использование
Разумное использование div и span является важной частью разметки HTML и XHTML. Однако иногда ими злоупотребляют.
. обычно предпочтительнее этого:
Чем отличается div от span!
Тем что span можно использоваться внутри других тегов? спасибо!
Таблица (DIV+SPAN)
Создать таблицу без использования тегов TABLE, TR, TD, TH (т.е. только с помощью стилизированых.
почему div, а не span
Здравствуйте, уважаемые форумчане! Делаю первые шаги в HTML, поэтому вопрос может наивный, не.
div поверх span
что надо прописать, что бы одно окно было поверх другого, а точнее div поверх span?
Span и div в одной строке
Добрый вечер. Как можно реализовать верстку, показанную на первой картинке? Пробовал так: 14
нет)))
в html в отличие от xml названия тегов придумываются не из головы, а из готового набора.
А еще тэги могут отображатся на одной линии с другими, или на разных (block, inline).
Например
Но согласно w3c в линейном тэге не может быть блочных тегов (точно так же как в лист бумаги нельзя вложить кубик-рубик).
Поэтому валидатор и ругается на конструкцию:
Показалось, что ты говорил про то, что внутри span нельзя использовать блочные элементы, а не про то, что внутри тэгов нельзя использовать див. Поэтому вот дополнительный трёп:
ЗЫ.
Твоя аналогия со страницей и строкой режет глаза не меньше. В доказательство, ты сам следующей же строкой решил уточнить, что именно разумеешь под «запихать страницу». Блоком это называется, а не страницей (display:block, not display:page);
ЗЗЫ
А мой ответ можно назвать дрянным только потому, что он слишком длинен (размазан). Хотел урезать, но не уложился в 10 минут
ЗЫ.
Твоя аналогия со страницей и строкой режет глаза не меньше. В доказательство, ты сам следующей же строкой решил уточнить, что именно разумеешь под «запихать страницу». Блоком это называется, а не страницей (display:block, not display:page);
ЗЗЫ
А мой ответ можно назвать дрянным только потому, что он слишком длинен (размазан). Хотел урезать, но не уложился в 10 минут
Добавлено через 2 минуты
Но кто то может и не знать, так вот, для него проще будет через страницу, чем через блок.
SPAN vs DIV (inline-block)
Is there any reason to use a
Can I put content nested inside the span? What is valid and what isn’t?
It’s ok to use this to make a 3×2 table like layout?
6 Answers 6
is not strictly valid even if you change the
, for instance), while
is a block element that «cannot contain block-level elements» (link), so whilst the example is invalid it is not because
If you want to have a valid xhtml document then you cannot put a div inside of a paragraph.
Also, a div with the property display: inline-block works differently than a span. A span is by default an inline element, you cannot set the width, height, and other properties associated with blocks. On the other hand, an element with the property inline-block will still «flow» with any surrounding text but you may set properties such as width, height, etc. A span with the property display:block will not flow in the same way as an inline-block element but will create a carriage return and have default margin.
Note that inline-block is not supported in all browsers. For instance in Firefox 2 and less you must use:
which displays slightly different than an inline block element in FF3.
There is a great article here on creating cross browser inline-block elements.
Inline-block is a halfway point between setting an element’s display to inline or to block. It keeps the element in the inline flow of the document like display:inline does, but you can manipulate the element’s box attributes (width, height and vertical margins) like you can with display:block.
We must not use block elements within inline elements. This is invalid and there is no reason to do such practices.
I know this Q is old, but why not use all DIVs instead of the SPANs? Then everything plays all happy together.
As others have answered… div is a “block element” (now redefined as Flow Content) and span is an “inline element” (Phrasing Content). Yes, you may change the default presentation of these elements, but there is a difference between “flow” versus “block”, and “phrasing” versus “inline”.
An element classified as flow content can only be used where flow content is expected, and an element classified as phrasing content can be used where phrasing content is expected. Since all phrasing content is flow content, a phrasing element can also be used anywhere flow content is expected. The specs provide more detailed info.
В чем разница между
В чем разница между
Можно ли их использовать взаимозаменяемо?
Потому что я столкнулся с проблемой, что для поля не работает, но для
p и div являются элементами уровня блока, где span является встроенным элементом и, следовательно, маржа на пробел не работает. В качестве альтернативы вы можете сделать span элемент уровня блока с помощью CSS display: block; или для span Я бы предпочел display: inline-block;
должен содержать параграфы текста, a
Вот как они должны использоваться семантически, их стиль, однако использование CSS зависит от вас.
Как и другие ответили. div и p являются «блочными элементами» (теперь переопределены как Flow Content) и span являются «встроенным элементом» (Разъяснение содержимого). Да, вы можете изменить представление этих элементов по умолчанию, но есть разница между «потоком» и «блоком» и «фразировкой» по сравнению с «встроенным».
Элемент, классифицированный как поток, может использоваться только там, где ожидается текущее содержимое потока, и элемент, классифицированный как фразинг-контент, может использоваться там, где ожидается выражение фразирования. Так как все словосочетание представляет собой содержимое потока, фрикционный элемент также может использоваться в любом поточном содержимом. Спецификации предоставляют более подробную информацию.
Как веб-разработчик, я не могу не чувствовать, что все эти рекомендации невероятно вводят в заблуждение в 2015 году.
Строчные элементы
Разница между блочными и строчными элементами следующая.
В примере 1 показано использование тега для выделения отдельных слов.
Пример 1. Применение строчных элементов
Результат примера показан ниже (рис. 1).
Рис. 1. Текст, оформленный с помощью стилей
В данном примере тег и стили используются для выделения различными способами фрагментов текста. В частности, выделение происходит за счет фонового цвета, рамки вокруг текста и сменой его цвета.
Пример 2. Свойство display
Результат примера приведен на рис. 2.
Рис. 2. Замена блочного элемента на строчный
В данном примере блочный тег
отображается на веб-странице как строчный элемент. Это требуется для того, чтобы ширина фона и рамки равнялась ширине самого текста с учетом полей. А, как известно, ширина блочных элементов не зависит от ширины содержимого, поэтому и приходится представлять тег
в виде строчного элемента. В принципе, аналогичным решением будет использовать вместо
Строчные элементы применяются не только для управления видом текста, но также и при верстке веб-страниц, например, для изменения положения слоев. В примере 3 показано, как рисунок накладывать поверх блока с текстом.
Пример 3. Наложение слоев
Результат примера представлен на рис. 3.
Рис. 3. Положение рисунка относительно текста
В примере 3 можно вообще отказаться от добавления тега
Пример 4. Использование тега SPAN
Результат примера показан ниже (рис. 4).
Рис. 4. Положение рисунка относительно текста
За счет того, что тег не начинается с новой строки, рисунок и текст в данном примере находятся на одной линии. Поэтому вертикального отступа под текстом, как в случае предыдущего примера, здесь нет. Зато появился отступ сверху.
Резюме
Для верстки строчные элементы применяются реже, чем элементы блочные. Это связано в основном с тем, что внутрь строчных элементов не допускается вкладывать контейнеры
и подобные широко распространенные теги. Тем не менее, блочные и строчные элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять вид составляющих веб-страниц.