Я хотел бы попросить несколько простых примеров, показывающих использование <div>
и <span>
. Я видел, как они оба отмечали раздел страницы знаком id
или class
, но мне интересно знать, есть ли моменты, когда один из них предпочтительнее другого.
div
является блочным элементомspan
это встроенный элемент .Это означает, что для их семантического использования div-ы должны использоваться для переноса разделов документа, а span-ы - для переноса небольших фрагментов текста, изображений и т. Д.
<div>This a large main division, with <span>a small bit</span> of spanned text!</div>
<div>Some <span>text that <div>I want</div> to mark</span> up</div>
... незаконно
РЕДАКТИРОВАТЬ: Начиная с HTML5, некоторые элементы блока могут быть размещены внутри некоторых встроенных элементов. Смотрите ссылку на MDN здесь для довольно четкого списка. Вышеупомянутое все еще незаконно, так как <span>
принимает только контент фраз и <div>
является потоком контента.
Вы попросили несколько конкретных примеров, так что это взято с моего сайта по боулингу, BowlSK :
<div id="header">
<div id="userbar">
Hi there, <span class="username">Chris Marasti-Georg</span> |
<a href="/edit-profile.html">Profile</a> |
<a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
</div>
<h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>
h1
. Пользовательская панель, будучи разделом, обернута в div
. В этом имя пользователя обернуто в span
, так что я могу изменить стиль. Как вы можете видеть, я также обернул span
около 2 букв в названии - это позволяет мне менять их цвет в моей таблице стилей.
Также обратите внимание, что HTML5 включает в себя широкий новый набор элементов, которые определяют общие структуры страниц, такие как article, section, nav и т. Д.
Раздел 4.4 рабочего проекта HTML 5 перечисляет их и дает советы относительно их использования. HTML5 все еще является рабочей спецификацией, поэтому пока что нет ничего «окончательного», но весьма сомнительно, что какой-либо из этих элементов куда-то движется. Существует взлом javascript, который вам нужно будет использовать, если вы хотите стилизовать эти элементы в какой-то более старой версии IE - вам нужно создать один из каждого элемента, используя, document.createElement
прежде чем какой-либо из этих элементов будет указан в вашем источнике. Есть множество библиотек, которые позаботятся об этом за вас - быстрый поиск в Google включил html5shiv .
div
иspan
семантически, так как они не имеют никакого значения для них.div
является бессмысленным универсальным блочным элементом, аspan
бессмысленным универсальным встроенным элементом.Просто для полноты, я предлагаю вам подумать об этом так:
<p>
- это абзац, a<li>
- это элемент списка и т. Д., И мы должны использовать правильный тег для правильной цели - не так, как в старые времена, когда мы с отступом, используя<blockquote>
ли контент цитату или нет.<div>
и<span>
, в противном случае, люди вернутся к злоупотреблению элементами, которые имеют значения.источник
Здесь уже есть хорошие, подробные ответы, но нет наглядных примеров, так что вот небольшая иллюстрация:
<div>
является тегом блока, а<span>
является встроенным тегом.источник
<div>
является элементом уровня блока и<span>
является встроенным элементом.Если вы хотите что-то сделать с некоторым встроенным текстом,
<span>
это путь, так как он не будет вводить разрывы строк, как это<div>
было бы.Как отмечали другие, есть некоторая семантика, подразумеваемая каждым из них, наиболее значительным является тот факт, что
<div>
подразумевается логическое разделение в документе, похожее на раздел документа или что-то в этом роде, например:источник
Действительно важное различие уже упоминалось в ответе Криса. Тем не менее, последствия не будут очевидны для всех.
Как встроенный элемент,
<span>
может содержать только другие встроенные элементы. Поэтому следующий код неверен:Код выше недействителен. Чтобы обернуть элементы уровня блока, необходимо использовать другой элемент уровня блока (например,
<div>
). С другой стороны,<div>
может использоваться только в местах, где элементы уровня блока являются законными.Кроме того, эти правила зафиксированы в (X) HTML, и они не изменяются при наличии правил CSS! Так что следующие коды тоже неверны!
источник
Значение «блочного элемента» подразумевается, но никогда не указывается явно. Если мы игнорируем всю теорию (теория хороша), то следующее сравнение является прагматическим. Последующий:
производит:
Это показывает, что не только если div не используется inline, он просто не даст желаемого эффекта.
источник
Как уже упоминалось в других ответах, по умолчанию
div
будет отображаться как элемент блока, в то время какspan
будет отображаться встроенным в его контексте. Но ни то, ни другое не имеет семантической ценности; они существуют, чтобы позволить вам применять стилизацию и идентификацию к любому конкретному фрагменту контента. Используя стили, вы можете сделать что-тоdiv
вродеspan
и наоборот.Одним из полезных стилей для
div
ISinline-block
Примеры:
http://dustwell.com/div-span-inline-block.html
CSS дисплей: встроенный против встроенного блока
Я привык
inline-block
к большому успеху в игровых веб-проектах.источник
Div является блочным элементом, а span является встроенным элементом, и его ширина зависит от содержимого самого себя, где div не
источник
Я бы сказал, что если вы знаете немного по-испански, чтобы посмотреть на этой странице , где правильно объяснено.
Однако, быстрое определение было бы
div
для разделения разделов иspan
для применения некоторого стиля к элементу в другом элементе блока, какdiv
.источник
Просто хотел добавить некоторый исторический контекст к тому, как произошло
span
противdiv
История
span
:- Источник (w3 wiki)
Из проекта RFC, который представляет
span
:- Источник (IETF Draft)
История
div
:HTML 3.2 Spec
Короче говоря, оба элемента возникли из-за необходимости в более семантически обобщенном контейнере. Span был предложен в качестве более общей замены
<text>
элемента стиля текста. Div был предложен в качестве общего способа разделения страниц и имел дополнительное преимущество замены<center>
тега для выравнивания по центру контента. Div всегда был блочным элементом из-за его истории как разделителя страниц. Span всегда был встроенным элементом, поскольку его первоначальная цель заключалась в стилизации текста, и сегодня div и span стали общими элементами со свойствами по умолчанию для блоков и встроенного отображения соответственно.источник
В HTML есть теги, которые добавляют структуру или семантику к контенту. Например,
<p>
тег используется для идентификации абзаца. Другим примером является<ol>
тег для упорядоченного списка.Когда в HTML нет подходящего тега, как показано выше,
<div>
и<span>
теги, как правило , прибегают к.<div>
Тег используется для идентификации blocklevel раздела / разделения документа , который имеет разрыв строки до и после него.Примерами того, где могут использоваться теги div, являются верхние и нижние колонтитулы, навигация и т. Д. Однако в HTML 5 эти теги уже были предоставлены.
<span>
Тег используется для идентификации встроенного раздела / разделения документа.Например, тег span может использоваться для добавления встроенных пиктограмм в элемент.
источник
Помните, в основном и они сами не выполняют никакой функции. Они не конкретизируют функциональность только по своим тегам .
Их можно настроить только с помощью CSS.
Теперь перейдем к вашему вопросу:
Тег SPAN вместе с некоторыми стилями будет полезен при удерживании внутри строки, скажем, в абзаце, в html. Это своего рода уровень строки или уровень оператора в HTML.
Пример:
Как уже говорилось, функциональность тега DIV может быть видна только с помощью стилей, может содержать большие фрагменты HTML-кода.
DIV - уровень блока
Пример:
У обоих есть свое время и случай, когда их следует использовать, исходя из ваших требований.
Надеюсь ясно с ответом. Спасибо.
источник