В чем разница между <p> <div> и <span> в HTML и XHTML?

Ответ 1

p и div являются элементами уровня блока, где span является встроенным элементом и, следовательно, маржа на пробел не работает. В качестве альтернативы вы можете сделать span элемент уровня блока с помощью CSS display: block; или для span Я бы предпочел display: inline-block;

Кроме того, эти элементы имеют специфический смысловой смысл, div лучше всего ссылается на блок контента, имеющий разные вложенные элементы, p, который используется для абзацев, а span - не что иное, как пустой элемент, поэтому, сохраняя SEO в виду, вам нужно использовать правильный тег для правильной вещи, так что, например, обтекание текста внутри элемента div будет менее семантическим, чем обертывание его внутри p

Ответ 2

A <p> должен содержать параграфы текста, a <div> - это размещение вашей страницы с помощью разделов, а <span> позволяет разметку разметки немного отличаться, например, в пределах <p>

Вот как они должны использоваться семантически, их стиль, однако использование CSS зависит от вас.

Ответ 3

Как и другие ответили... div и p являются "блочными элементами" (теперь переопределены как Flow Content) и span являются "встроенным элементом" (Разъяснение содержимого). Да, вы можете изменить представление этих элементов по умолчанию, но есть разница между "потоком" и "блоком" и "фразировкой" по сравнению с "встроенным".

Элемент, классифицированный как поток, может использоваться только там, где ожидается текущее содержимое потока, и элемент, классифицированный как фразинг-контент, может использоваться там, где ожидается выражение фразирования. Так как все словосочетание представляет собой содержимое потока, фрикционный элемент также может использоваться в любом поточном содержимом. Спецификации предоставляют более подробную информацию.

Все фразировочные элементы, такие как strong и em, могут содержать только другие элементы фразирования: например, вы можете поставить table внутри cite. Большинство потоков данных, таких как div и li, могут содержать все типы содержимого потока (а также содержание фраз), но есть несколько исключений: p, pre и th являются примерами не- -фазное содержимое потока ( "элементы блока" ), которое может содержать только фраз-контент ( "встроенные элементы" ). И, конечно же, существуют нормальные ограничения элементов, такие как dl и table, только позволяющие содержать определенные элементы.

Хотя div и p являются нефрагментированным содержимым потока, div может содержать другие дочерние потоки потока (в том числе больше div и p s). С другой стороны, p может содержать только содержание содержимого содержимого. Это означает, что вы не можете поставить div внутри p, хотя оба являются нефрагментированными элементами потока.

Теперь вот кикер. Эти семантические спецификации не связаны с тем, как элемент отображается. Таким образом, если у вас есть div внутри span, вы получите ошибку проверки, даже если в вашем CSS есть span {display: block;} и div {display: inline;}.

Ответ 4

Как веб-разработчик, я не могу не чувствовать, что все эти рекомендации невероятно вводят в заблуждение в 2015 году.

Конечно, тег "p" был в какой-то момент предназначен для использования абзаца... но в 100% моих приложений, дизайнов и просто повседневной общей разработки мы ничего не видели, кроме ограничений, налагаемых тег "p" ... он не предлагает никакой пользы в сегодняшнем Интернете.

Я бы сказал "да", "p" - описательный элемент, и по этой причине, если все это произошло; "описать что-нибудь", я буду всем для этого... но он НЕ просто описывает контент, он прямо подставляет ALTERS контент, который, будучи уже ограниченным само по себе, не все, что он делает, он также ОГРАНИЧИВАЕТ контент. Почему кто-то в здравом уме целенаправленно охватывает предельный строительный блок, когда дело доходит до веб-разработки, находится вне меня. С точки зрения дизайна это не имеет смысла. С структурной точки зрения это не имеет смысла. Из любого из DOM-манипуляций PERIOD это не имеет смысла.

Мы все вместе перестали использовать тег "p" , за исключением тех случаев, когда мы абсолютно вынуждены (например, клиентские словарные пресса, такие глупые вещи). Нет никакого оправдания, почему мы не можем описать почти все с хорошо названными классами и идентификаторами, поэтому мы видим нулевую причину, чтобы склониться перед "стандартами", которые не приносят никакой пользы, и на самом деле СЧИТАЮТ каждый кусочек головоломки, Тег "p" не помогает разработчику, конечному пользователю или современным поисковым системам. В двух словах... "p" тег почти не рекомендуется в даже отдаленно сложных реализациях (и с очень веской причиной), не позволяйте комментариям этих стандартных нацистских элементов управления отображать ваш контент!

Даже на этом самом сайте, ориентированном на разработчиков на нем, у ОЧЕНЬ ТОП его собственной страницы есть небольшая поп-часть, которая могла бы использовать тег "p" , поскольку он содержит достаточно текста для запуска ко второй строке, но полностью захвачен в DIV (и только div, а не div → p) для почти бесконечного числа причин... прежде всего, что сегодня "p" SUCKS по сравнению с любым хорошо описанным блоком созданный из DIV, который так же хорошо описывается (moreso... я говорю) как абзац "p" с очень описательным id = "blurb".

Из Stackoverflow:

<div id="blurb">Qaru is a question and answer site for professional and enthusiast programmers. It&#39;s 100% free, no registration required.</div>

Я говорю с

<p>I suck</p>

и долго жить

<div class="p">I rock</div>

И да, я ценю наши нынешние веб-стандарты, и такие вещи, как все еще, имеют место, даже предлагая возможности делать что-то с некоторыми современными браузерами, которых вы не можете выполнить с помощью контейнера, но это только то, что это, в частности, сломанный элемент "p" , как часть реструктурированного и модернизированного HTML... должен был быть оставлен в могиле, где он принадлежит... это поколение веб-сайтов, где абзацы уже не абзацы навсегда. блоки буквально меняются... он просто устарел и непрактичен.

Ответ 5

<p> и <div> являются блочными элементами по умолчанию. <span> является встроенным элементом.

Элементы блока начинаются и заканчиваются новой строкой в ​​браузере, а встроенные элементы - нет. "Inline" означает, что они являются частью текущей строки.

С сегодняшними сложными веб-дизайнами цель этих различий менее очевидна, но если вспомнить ранние дни HTML (откуда берутся эти теги), где документы были в основном украшены текстом с изображениями, различие становится яснее.

В любом случае, с помощью CSS вы можете переопределить в основном любое свойство тега. Поэтому, если вы хотите, чтобы <span> вел себя как <div> или <p>, тогда все, что вам нужно сделать, это добавить:

span
{
     display: block;
}

С помощью этого кода вы сможете установить вертикальные поля, а также горизонтальные.

Ответ 6

Я подумал, что элементы p и div являются элементом уровня блока на другой стороне, span является встроенным элементом. но когда вы пишете p в своем коде, это займет пространство сверху и снизу, но поведение div не похоже на это. Проверьте этот эксперимент на скрипте JS:

https://jsfiddle.net/arifkarim/9wcef1c3/

Ответ 7

1) элемент div предназначен для описания контейнера данных. div может содержать другие элементы - div - Уровень блока

2) p-элемент предназначен для описания абзаца содержания --- para - Уровень блока

3) элемент span Обычно используется для небольшого фрагмента HTML. - span - Inline

4) элементы уровня блока начинаются на новых строках, встроенных элементов нет.

5) Большинство браузеров вставляют пустую строку между любыми двумя элементами уровня блока. Пример: между парами и параграфами и заголовком и парами будет пустая строка и между двумя заголовками, между абзацем и списком, между списком и таблицей, и т.д.