В чем разница между тегами HTML < div > и < span & gt ;?
Существует еще одна новая библиотека для отражения в C ++, называемая RTTR (Reflection of Run Time Reflection, см. также github ).
Интерфейс аналогично отражению в C #, и он работает без RTTI.
6 ответов
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>
хорошо, что продолжается? Наверху моей страницы у меня есть логический раздел, "заголовок". Так как это - раздел, я использую отделение (с соответствующим идентификатором). В этом у меня есть несколько разделов: пользовательская панель и фактическое название страницы. Заголовок использует соответствующий тег, h1. userbar, будучи разделом, обертывается в div. В этом имя пользователя обертывается в span, так, чтобы я мог изменить стиль. Как Вы видите, я также перенесся span приблизительно 2 буквы в заголовке - это позволяет мне изменять их цвет в моей таблице стилей.
Также примечание, что HTML5 включает широкий новый набор элементов, которые определяют общие структуры страницы, такие как статья, раздел, военно-морской, и т.д. Разделите 4.4 из HTML 5, рабочий проект перечисляет их и дает подсказки относительно их использования. HTML5 является все еще рабочей спецификацией, таким образом, ничто еще не является "окончательным", но очень сомнительно, что любой из этих элементов идет куда угодно. Существует взлом JavaScript, который необходимо будет использовать, если Вы захотите разработать эти элементы в некоторой более старой версии IE - в основном необходимо создать один из каждого элемента с помощью [1 111], прежде чем любой из тех элементов будет определен в источнике. Существует набор библиотек, которые будут заботиться об этом для Вас - быстрый поиск Google поднялся html5shiv.
Только ради полноты, я приглашаю Вас думать об этом как это:
- существует много элементов блока (разрывы строки прежде и после) определено в HTML и большом количестве встроенных тегов (никакие разрывы строки).
- , Но в современном HTML все элементы, как предполагается, имеют значения :
<p>абзац,<li>элемент списка, и т.д., и мы, как предполагается, используем правильный тег для правильной цели - не как в былые времена, когда мы расположили использование с отступом<blockquote>, было ли содержание кавычкой или нет. - Так, что Вы делаете, когда там никакое значение к вещи, что Вы пытаетесь сделать? Нет никакого значение к 400px-широкому-столбцу, есть ли? Вы просто хотите, чтобы Ваш столбец текста был 400 пкс шириной, потому что это удовлетворяет Вашему дизайну.
- поэтому они добавили еще два элемента к HTML: универсальные, или бессмысленные элементы
<div>и<span>, потому что иначе, люди вернулись бы к злоупотреблению элементов, которые действительно имеют значения.
Реальное важное различие уже упоминается в ответе Chris. Однако последствия не будут очевидны для всех.
, Поскольку встроенный элемент, <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>
<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>
Как упомянуто в других ответах, значением по умолчанию div будет представлен как элемент блока, в то время как span будет представлен встроенным в его контексте. Но ни у одного нет семантического значения; они существуют, чтобы позволить Вам применять моделирование и идентификационные данные к любому данному биту содержания. Используя стили, можно сделать div действие как span и наоборот.
Один из полезных стилей для div inline-block
Примеры:
я привык inline-block для большого успеха в игровых веб-проектах.
Я сказал бы что, если Вы знаете, что немного испанского языка смотрит эта страница , где правильно объяснен.
Однако быстрое определение было бы то, что div для деления разделов, и span для применения некоторого стиля к элементу в другом элементе блока как div.