Подтвердить что ты не робот

В чем разница между тегами HTML <div> и <span>?

Я хотел бы попросить несколько простых примеров, показывающих использование <div> и <span>. Я видел, как они оба использовали для обозначения раздела страницы с id или class, но мне интересно узнать, есть ли времена, когда вы предпочитаете друг друга.

4b9b3361

ОТВЕТЫ

Ответ 1

div является блочным элементом, span является встроенным.

Это означает, что для использования семантически, divs следует использовать для обертывания разделов документа, в то время как промежутки должны использоваться для обертывания небольших частей текста, изображений и т.д.

Например:

<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>

... является незаконным.

EDIT: с 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 (с соответствующим id). В этом случае у меня есть пара разделов: панель пользователя и фактическое название страницы. Заголовок использует соответствующий тег, h1. Панель пользователя, являющаяся секцией, завернута в div. В этом случае имя пользователя завершается в span, так что я могу изменить стиль. Как вы можете видеть, я также завернутый span около 2 букв в названии - это позволяет мне изменить свой цвет в моей таблице стилей.

Также обратите внимание, что HTML5 включает в себя широкий набор новых элементов, которые определяют общие структуры страниц, такие как статья, раздел, nav и т.д. Раздел 4.4 рабочего проекта HTML 5 перечисляет их и дает подсказки относительно их использования. HTML5 по-прежнему является рабочим спецификацией, поэтому пока ничего не "окончательно", но очень сомнительно, что любой из этих элементов идет куда угодно. Существует javascript-хак, который вам нужно будет использовать, если вы хотите стилизовать эти элементы в старой версии IE - вам в основном нужно создать один из каждого элемента, используя document.createElement прежде чем какой-либо из этих элементов будет указан в вашем источнике. Есть куча библиотек, которые позаботятся об этом для вас - быстрый поиск в Google появился html5shiv.

Ответ 2

Только ради полноты, я приглашаю вас подумать об этом так:

  • В блоке есть много блочных элементов (строк до и после), определенных в HTML, и множество встроенных тегов (без строк).
  • Но в современном HTML все элементы должны иметь значения: a <p> - это абзац, <li> - элемент списка и т.д., и мы должны использовать правильный тег для правильной цели - - не так, как в старые времена, когда мы отступали, используя <blockquote>, было ли содержание цитатой или нет.
  • Итак, что вы делаете, когда нет смысла в том, что вы пытаетесь сделать? Нет смысла в столбце шириной 400 пикселей, есть ли? Вы просто хотите, чтобы ваш столбец был шириной в 400 пикселей, потому что это соответствует вашему дизайну.
  • По этой причине они добавили еще два элемента в HTML: общие или бессмысленные элементы <div> и <span>, потому что в противном случае люди вернутся к злоупотреблению элементами, которые имеют значения.

Ответ 3

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

difference between div and span

<div> является тегом блока, а <span> является встроенным тегом.

Ответ 4

<div> является элементом уровня блока, а <span> является встроенным элементом.

Если вы хотите что-то сделать с помощью встроенного текста, <span> - это путь, так как он не будет вводить разрывы строк, которые <div> будет.

Как уже отмечалось другими, существует семантика, подразумеваемая с каждым из них, что в значительной степени связано с тем, что a <div> подразумевает логическое разделение в документе, похожее на часть документа или что-то еще: aa:

<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>

Ответ 5

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

Как встроенный элемент <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>

Ответ 6

Значение "элемента блока" подразумевается, но не указано явно. Если мы игнорируем всю теорию (теория хороша), то прагматическое сравнение. Следующее:

<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.

Это показывает, что не только должен использовать div не, он просто не даст желаемого эффекта.

Ответ 7

Как уже упоминалось в других ответах, по умолчанию div будет отображаться как элемент блока, а span будет отображаться inline в его контексте. Но ни одна из них не имеет смысловой ценности; они существуют, чтобы позволить вам применять стиль и личность к любому данному фрагменту контента. Используя стили, вы можете сделать действие div как span и наоборот.

Одним из полезных стилей для div является inline-block

Примеры:

Я использовал inline-block с большим успехом в веб-проектах игры.

Ответ 8

DIV TAG:

Ниже приведены характеристики:

  • Как указывает имя, тег div определяет "разделение на веб-странице".
  • div является блочным элементом; его значение по умолчанию - "блок".
  • тег div обычно используется при создании раскладок на основе Css в html.
  • по умолчанию прерывание строки помещается до и после этого элемента.

SPAN TAG:

Ниже приведены характеристики:

  • span тег не делает визуальной разницы на странице, если не настроен с атрибутом стиля.
  • span - это встроенный элемент.
  • span обычно используется для стилизации текстов. Встроенная функция упрощает использование пользовательских стилей без изменения макета.
  • По умолчанию нет разрывов строк, но это может быть достигнуто, если мы изменим его линейный характер, указав в атрибуте style значение 'display: block;

Ответ 9

Я бы сказал, что если вы знаете немного испанского, посмотрите эту страницу, где правильно объяснено.

Однако быстрое определение будет заключаться в том, что div предназначен для разделения разделов, а span - для применения какого-либо стиля к элементу внутри другого элемента блока, такого как div.

Ответ 10

Div - это элемент блока, а span - встроенный элемент, а его ширина зависит от его содержимого, где div не

Ответ 11

В HTML есть теги, которые добавляют структуру или семантику в контент. Например, тег <p> используется для идентификации абзаца. Другим примером является тег <ol> для упорядоченного списка.

Если в HTML нет подходящего тега, как показано выше, обычно используются теги <div> и <span>.

Тег <div> используется для идентификации раздела/разделения блока уровня документа, который имеет разрыв строки как до, так и после него.

Примеры использования тегов div могут быть заголовками, нижними колонтитулами, навигациями и т.д. Однако в HTML 5 эти теги уже предоставлены.

Тег <span> используется для идентификации встроенного раздела/разделения документа.

Например, тег span может использоваться для добавления встроенных пиктограмм в элемент.

Ответ 12

Просто хотел добавить некоторый исторический контекст к тому, как наступил span против div

История span:

3 июля 1995 года Бенджамин CW Sittler предлагает общий тег текстового контейнера для применения стилей к определенным блокам текста. Отрисовка нейтральна, за исключением случаев, когда она используется в сочетании с таблицей стилей. Существует дискуссия вокруг относительно читаемости, смысл. Берт Бос упоминает прирожденность природы элемента через атрибут класса (со значениями, такими как город, человек, дата и т.д.). Пол Прескод обеспокоен тем, что оба элемента будут подвергаться насилию. Он не согласен с текстом, в котором говорится, что "любой новый элемент должен находиться на старом" и добавляет: "Если мы создадим тег без семантики, его можно использовать в любом случае, не будучи ошибочным. Мы должны заставить авторов правильно пометить семантику их документ. Мы должны заставить разработчиков редакторов сделать этот выбор явным в своих интерфейсах ".

- Источник (w3 wiki)

Из проекта RFC, который вводит span:

Во-первых, общий носитель con- необходим для переноса атрибутов LANG и BIDI в случаях, когда нет другого элемента; для этой цели вводится SPAN ele-.

- Источник (проект IETF)

История div:

Элементы DIV могут использоваться для структурирования HTML-документов как иерархии разделов.

...

CENTER был представлен Netscape, прежде чем они добавили поддержку элемента HTML 3.0 DIV. Он сохраняется в HTML 3.2 из-за его широкого развертывания.

HTML 3.2 Spec

В двух словах оба элемента возникли из-за необходимости создания более семантически общего контейнера. Span был предложен как более общая замена элемента <text> для стилизации текста. Div был предложен как общий способ разделить страницы и имел дополнительное преимущество замены <center> для выравнивания по центру контента. Div всегда был элементом блока из-за его истории как разделителя страниц. Span всегда был встроенным элементом, потому что его первоначальная цель заключалась в укладке текста, и сегодня div и span оба достигли общего элемента со стандартными блочными и встроенными свойствами отображения соответственно.

Ответ 13

Помните, в основном, и они сами не выполняют никакой функции. Они не специфичны для функциональности только по их тегам.

Их можно настраивать только с помощью 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>

Оба имеют свое время и время, когда их следует использовать, исходя из вашего требования.

Надежда ясна с ответом. Спасибо.

Ответ 14

<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>