Существенная разница между тегами HTML?

Question

Тег <b> делает текст полужирным, но если он назначен с помощью CSS "font-weight:normal;", то он абсолютно похож на обычный тег.С другой стороны, тег <i> может быть стилизован для отображения текста внутри, как тег <b>:

<i style="font-style:normal; font-weight:bold;">

Да, я говорю о взаимозаменяемостиHTML-теги, поэтому у нас может быть меньше тегов.

И два самых известных тега оказываются «div» и «span», которые обсуждаются в этом вопросе SO: В чем разница междуHTML-теги DIV и SPAN?

Я хочу знать, в чем суть тега <div>, который создает тег span таким образом:

<span style="display:block;"></span>

не может быть заменойдля див?С другой стороны, в чем причина того, что этот код стал «недействительным» (X) HTML:

<span style="display: block"><p>Still wrong</p></span>

Спасибо!

---

Для сценария я создаютак называемый «HTML-CSS-генератор», который требует глубокого знания HTML-тегов.Я хочу отфильтровать наборы всех допустимых тегов HTML, чтобы создать набор «основных тегов».Затем я прошу о взаимозаменяемости тегов.

---

Обновление (конечная цель этого вопроса)

Интересно, было ли отличие в том, чтотег изначально"уровень блока" (например, div, p) или "уровень строки" (например, span)?

Есть ли какой-либо другой тип "нативного свойства" (этот CSSили JS не может измениться) как "block / inline-level" для тегов HTML?

Answer 1

Не проверяйте, как объекты отображаются и как они выглядят (хотя это является частью спецификации HTML).HTML все о значении.

Что означают теги <u>, <i>, <b>?Да, они ничего не значат!Они только определяют, как все выглядит.Именно по этой причине они были удалены из спецификации в HTML5 (или фактически устарели).

Конечно, вы можете стилизовать <div> как <span>, черт возьми, вы можете стилизовать <div> как<input type="text">.Но дело не в этом, а в значении.

Согласно спецификации HTML, <div> является делителем.Он разделяет определенные части веб-сайта, определенные разделы в виде заголовка или поля содержимого внутри <div>.

A <span> используется для указания чего-то встроенного.Как и в следующем

<div class="Location">    
   Currently I'm living in <span class="Country">The Netherlands</span>
</div>

Не сравнивайте теги HTML в зависимости от того, как они отображаются.Также всегда выбирайте тег HTML, который больше всего напоминает отображаемые данные, даже если он отображается совершенно иначе, чем вы хотите.

---

Разница не в том, являются ли они блочными или встроенными (хотя это и является следствием этого).Разница заключается в данных, которые они представляют.

Answer 2

Рассмотрим форму против функции . DOM - это структура. Это объектная модель. <div> s являются элементами уровня блока, и к ним применяются правила. <span> s являются элементами встроенного уровня и к ним применяются различные правила.

Стилистические элементы, такие как <u>, <b>, <small>, <i>, <em> и т. Д., В любом случае постепенно прекращаются в HTML5 в попытке абстрагировать форму от функция , поэтому вы должны полагаться на CSS, чтобы вместо вас стилизовать <span> элементы.

CSS несет ответственность за стиль страницы, отображаемой для пользователя. Он может сказать браузеру обрабатывать элементы уровня блока, такие как элементы уровня строки и наоборот для целей отображения .

Answer 3

на вопрос уже дан ответ, но я просто хотел добавить:

Для людей, которые использовали ранние версии HTML, поначалу это могло бы сбивать с толку, потому что они могли думать и иметь смысл - но это было просто прямое жестко закодированное «in-line» оформление в документе HTML во времена до был CSS.

CSS был изобретен для отделения стиля от структуры документа.

Теперь, когда у нас есть стили, разделенные в CSS, разработчик должен определить, как они оформляют свои HTML-теги - полностью независимые от структуры документа и гораздо более гибкие.

HTML определяет структуру документа, CSS определяет его стиль.

Answer 4

Я использую, когда я хочу изменения встроенного рендеринга, или мне нужно изменить текст из JavaScript. Тег span по умолчанию не будет вводить разрывы строк и тому подобное, в то время как тег div будет. Так что, если, например, мне нужно

<div>Welcome to my site, <span id='name'>Matt</span></div> 

для изменения через Javascript.

$('#name').html('vantrung');

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

<p><img src='some.png' /><span style='position:relative; top:-3px'> Some</span></p>

Answer 5

Если я правильно помню, спецификация CSS содержит таблицу стилей по умолчанию или «пользовательский агент» для HTML.Вы можете подтвердить это, открыв Google Chrome (в котором есть встроенные инструменты разработчика), открыв следующий документ HTML:

<html>
<head></head>
<body>
<div></div>
<span></span>
<b></b>
<i></i>
</body></html>

, затем нажмите гаечный ключ, затем Инструменты, Инструменты разработчика, затем Элементы.

Выберите body, div, span, b и i по очереди.Обратите внимание, что браузер применяет таблицу стилей «пользовательский агент» к каждому элементу.Например, таблица стилей агента пользователя для body:

body {
display: block;
margin: 8px;
}

, а таблица стилей агента пользователя для b:

strong, b {
font-weight: bolder;
}

Обратите внимание, что span не имеет пользователя-агентская таблица стилей;это так, потому что, по крайней мере для Google Chrome, значение по умолчанию для display равно inline или inline-block (я не уверен).

Если span используется как div, это может привести к некорректному HTML, но это практически единственный недостаток.

Answer 6

со страницы википедии для HTML:

HTML-элементы представляют семантику или значение. Например, заголовок элемент представляет заголовок документа.

Различные теги имеют разные значения. Например, li представляет элемент в списке. Вы можете сделать это так, как вам хотелось бы через css, но он по-прежнему предназначен для обозначения элемента в списке.

Для обычного браузера li может выглядеть как div в зависимости от того, какой css вы применяете. Но рассмотрим того, кто не может видеть. Программа, которая читает им страницу, может различать элементы в списке и div s.

Answer 7

(X) HTML - это система, основанная на правилах, поэтому вы должны следовать правилам ... элементы уровня блока, такие как <div> и <p>, не могут входить внутрь встроенных элементов, таких как <span>, это просто правило(действительный) язык.

Кроме того, HTML полностью независим от CSS, поэтому возможность изменять поведение отображения элемента не влияет и не должна влиять на использование этого тега.действительно в самом HTML.

Answer 8

Из HTML 4.01 спецификации

Модель содержимого Обычно элементы уровня блока могут содержать встроенные элементы и другие элементы уровня блока. Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы. Присущий этой структурной Различие заключается в том, что блочные элементы создают «большие» структуры. чем встроенные элементы.

Элемент P является элементом уровня блока, а элемент SPAN - встроенным.

Answer 9

Все это связано с семантикой. По сути, если вы заключаете что-то в теги "<b>", это должно означать "жирный", а не "быть" жирным. Хотя большинство тегов действительно можно стилизовать так, как вам нравится, жизнь всех участников будет проще, если вы будете использовать теги так, как они были предназначены.

На разнице между "spans" и "divs" span - это встроенный уровень, а div - блок. Это означает, что элементы, которые являются «пролетами», не должны вызывать разрыв строки. Обычное использование - стилизовать небольшое количество текста в абзаце.

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

Учитывая все вышесказанное, вам не следует использовать теги "b" или "i", чтобы визуально влиять на то, как отображается контент. Вместо этого используйте пролеты ...