В чем разница между HTML-тегами <div> и <span>?
https://stackoverflow.com/questions/183532
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я хотел бы попросить привести несколько простых примеров, показывающих использование <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="http://www.bowlsk.com/_ah/logout?...">Sign out</a>
</div>
<h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>
Хорошо, что происходит? Вверху моей страницы у меня есть логический раздел, «заголовок». Поскольку это раздел, я использую div (с соответствующим идентификатором). В этом у меня есть пара разделов: панель пользователя и фактическое название страницы. В заголовке используется соответствующий тег h1 . Панель пользователя, являющаяся разделом, заключена в div . В рамках этого имя пользователя заключено в span , чтобы я мог изменить стиль. Как видите, я также обернул span в заголовок двумя буквами - это позволяет мне менять их цвет в моей таблице стилей.
Также обратите внимание, что HTML5 включает в себя широкий новый набор элементов, которые определяют общие структуры страниц, такие как article, section, nav и т. д. Раздел 4.4 Рабочий проект HTML 5 перечисляет их и дает советы относительно их использования. HTML5 все еще является рабочей спецификацией, поэтому ничто не является «окончательным» все же, но весьма сомнительно, что любой из этих элементов идет куда-либо. Существует взлом javascript, который вам нужно будет использовать, если вы хотите стилизовать эти элементы в какой-то более старой версии IE - вам в основном нужно создать один из каждого элемента, используя document.createElement перед любым из этих элементов указаны в вашем источнике. Есть несколько библиотек, которые позаботятся об этом за вас - появился быстрый поиск в Google html5shiv .
Другие советы
Просто для полноты картины я приглашаю вас подумать об этом следующим образом:
- В HTML определено множество блочных элементов (разрывы строк до и после) и множество встроенных тегов (без разрывов строк).
- Но в современном HTML предполагается, что все элементы должны иметь значения:a
<p>является абзацем,<li>является элементом списка и т.д., и мы должны использовать правильный тег для нужной цели - не так, как в старые времена, когда мы делали отступы с помощью<blockquote>независимо от того, было ли содержание цитатой или нет. - Итак, что вы делаете, когда есть является нет смысла в том, что ты пытаешься сделать?Там нет никакого значение для столбца шириной 400 пикселей, не так ли?Вы просто хотите, чтобы ширина вашего столбца текста была 400 пикселей, потому что это соответствует вашему дизайну.
- По этой причине они добавили в HTML еще два элемента:общие, или бессмысленные элементы
<div>и<span>, потому что в противном случае люди вернулись бы к злоупотреблению элементами, которые действительно имеют значение.
Здесь уже есть хорошие подробные ответы, но нет наглядных примеров, поэтому приведем краткую иллюстрацию:
< div > - это тег блока, а < span > - встроенный тег.
< div > является элементом уровня блока, а < span > является встроенным элементом.
Если вы хотите что-то сделать с некоторым встроенным текстом, < span > - это путь, поскольку он не будет вводить переносы строк, как < div > будет.
Как отмечали другие, есть некоторые семантики, подразумеваемые с каждым из них, наиболее значительным является тот факт, что < div > подразумевает логическое разделение в документе, похожее, возможно, на часть документ или что-то, а-ля:
<div id="Chapter1">
<p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
<p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p>
</div>
Действительно важное различие уже упоминалось в ответе Криса. Тем не менее, последствия не будут очевидны для всех.
В качестве встроенного элемента < span > может содержать только другие встроенные элементы. Поэтому следующий код неверен:
<span><p>This is a paragraph</p></span>
Приведенный выше код недействителен. Чтобы обернуть элементы уровня блока, необходимо использовать другой элемент уровня блока (например, < div > ). С другой стороны, < div > можно использовать только в тех местах, где элементы уровня блока являются допустимыми.
Кроме того, эти правила исправлены в (X) HTML, и они не изменены из-за наличия правил CSS! Поэтому следующие коды также неверны!
<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
Значение "блочного элемента" подразумевается, но никогда не указывается явно.Если мы проигнорируем всю теорию (теория хороша), то ниже приведено прагматичное сравнение.Следующее:
<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>
производит:
This paragraph has a span.
This paragraph
has
a div.
Это показывает, что не только следует a div ( раздел ) нет если его использовать встроенным, это просто не произведет желаемого эффекта.
Как упоминалось в других ответах, по умолчанию div будет отображаться как блочный элемент, в то время как span будет отображаться встроенным в своем контексте.Но ни то, ни другое не имеет никакой семантической ценности;они существуют для того, чтобы позволить вам применить стиль и идентичность к любому заданному фрагменту контента.Используя стили, вы можете создать div веди себя как span и наоборот.
Один из полезных стилей для div является inline-block
Примеры:
Я использовал inline-block за большой успех в игровых веб-проектах.
Div - это блочный элемент, а span - это встроенный элемент, а его ширина зависит от содержимого самого себя, где div не
Я бы сказал, что если вы знаете немного по-испански, посмотрите на это страница , где правильно объяснено.
Однако, быстрое определение будет таким: div для разделения разделов, а span для применения какого-либо стиля к элементу внутри другого блочного элемента, такого как DIV .
Просто хотел добавить немного исторического контекста к тому, как это произошло span против div
История создания span:
3 июля 1995 года Бенджамин К.W.Ситтлер предлагает общий текст контейнер тег для применения стилей к определенным блокам текста.Рендеринг нейтральный, за исключением случаев использования в сочетании с таблицей стилей .Ведутся дебаты вокруг versus о удобочитаемости, значении.Берт Бос упоминает природу расширяемости элемента через атрибут class (с такими значениями, как город, персона, дата и т.д.). Пол Прескод обеспокоен тем, что обоими элементами будут злоупотреблять.Он выступает против текста, в котором упоминается, что "любой новый элемент должен быть на старом" и добавляется "Если мы создадим тег без семантики, его можно будет использовать где угодно, никогда не ошибаясь. Мы должны заставить авторов правильно помечать семантику своего документа.Мы должны заставить поставщиков редакторов четко указывать этот выбор в своих интерфейсах ".
Из проекта RFC, который вводит span:
Во-первых, общий контейнер необходим для переноса атрибутов LANG и BIDI в случаях, когда никакой другой элемент не подходит; продолжительность эле- мент вводят для этой цели.
История создания div:
Элементы DIV могут использоваться для структурирования HTML-документов в виде иерархии разделов.
...
CENTER был представлен Netscape до того, как они добавили поддержку элемента HTML 3.0 DIV.Он сохранен в HTML 3.2 из-за его широкого распространения.
В двух словах, оба элемента возникли из-за необходимости в более семантически универсальном контейнере.Span был предложен в качестве более общей замены <text> элемент для оформления текста.Div был предложен как общий способ разделения страниц и имел дополнительное преимущество в замене <center> тег для выравнивания содержимого по центру.Div всегда был блочным элементом из-за своей истории использования в качестве разделителя страниц.Span всегда был встроенным элементом, потому что его первоначальной целью был стиль текста, и сегодня div и span стали универсальными элементами со свойствами блока по умолчанию и встроенного отображения соответственно.
В HTML есть теги, которые добавляют структуру или семантику к контенту. Например, тег < p > используется для идентификации абзаца. Другим примером является тег < ol > для упорядоченного списка.
Если в HTML нет подходящего тега, как показано выше, к тегам < div > и < span > обычно прибегают.
Тег < div > используется для идентификации раздела / раздела на уровне блоков документа, который имеет разрыв строки как до, так и после него.
Примерами того, где могут использоваться теги div, являются верхние и нижние колонтитулы, навигация и т. д. Однако в HTML 5 эти теги уже были предоставлены.
Тег < span > используется для идентификации встроенного раздела / раздела документа.
Например, тег span может использоваться для добавления встроенных пиктограмм в элемент.
Помните, что, по сути, и они сами тоже не выполняют никакой функции.Они такие нет специфика функциональности просто по их тегам.
Их можно настроить только с помощью CSS.
Теперь, переходя к вашему вопросу:
Тег SPAN вместе с некоторым стилем будет полезен при удержании внутри строки, скажем, в абзаце, в html.Это своего рода уровень строки или оператора в HTML.
Пример:
<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>
Функциональность тега DIV, как уже было сказано, может быть видна только при поддержке стиля, может содержать большие куски HTML-кода.
DIV - это уровень блока
Пример:
<div class="large-time">
<p>Am writing <span class="time"> this answer</span> in my free time of my day.
</p>
</div>
У обоих есть свое время и случай, когда их следует использовать, в зависимости от ваших требований.
Надеюсь, мне ясен ответ.Спасибо.
< div > является элементом блока.
Как и все абзацы или любое содержимое, написанное внутри div, мы можем применить css ко всем элементам в div. Просто придавая стиль только в div.
< span > является встроенным элементом.
Какие изменения CSS сделаны, что отражается только на этом элементе.
<div style="color:green;">
<h1>Example of div and span</h1>
<p>
This is a paragraph within a div
<span style="color: red;"> Paragraph with in span. </span>
</p>
</div>
