<div></div> vs <div/">

Я пытаюсь понять, почему существует разница в том, как отображается браузер <div> </div> стихи < div/ > ?

Вот пример: ожидаемый вывод фрагмента №1 состоит из трех полей: [черный], [синий], [красный]. Snippet # 2 показывает только [черный] и [красный] - Почему не отображается [синий] в фрагменте # 2?

1

<div style="float:left; width:50px; height:50px; background:black;"></div>

<div style="float:left; width:50px; height:50px; background:blue;"></div>

<div style="float:left; width:50px; height:50px; background:red;"></div>

2

<div style="float:left; width:50px; height:50px; background:black;"></div>

<div style="float:left; width:50px; height:50px; background:blue;" />

<div style="float:left; width:50px; height:50px; background:red;"></div>

Изменить: я использую Chrome 12 и html5: <! doctype html >

Ответы

Ответ 1

В основном потому, что <div /> недействителен HTML.

Если вы просматриваете различные доктрины, вы заметите, что div не может быть закрыт сам.

В соответствии с W3C:

Элемент div должен иметь как начальный тег, так и конечный тег.

Источник: http://www.w3.org/TR/html-markup/div.html

Чтобы включить здесь комментарий Chucks, конечная косая черта в HTML не делает сам закрывающий тег make. Явные теги с закрывающей косой чертой - это функция XHTML, а не HTML.

Ответ 2

Как вы пояснили, что используете HTML5... из спецификацию HTML5:

Затем, если элемент является одним из элементов void или если элемент внешний элемент, то может быть один символ U + 002F SOLIDUS (/). Этот персонаж не влияет на элементы пустоты, но на чужие элементы маркируют начальный тег как самозакрывающийся.

Элементы void:

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

Посторонние элементы являются элементами из пространств имен MathML и SVG. Как вы можете видеть, ни один из этих элементов не является элементом div, поэтому ваш второй пример недействителен HTML5.

Ответ 3

Не отображается, потому что это пустой тег. ""!= null.

Ответ 4

Самозакрывающийся тег div является допустимым XML, но он недействителен XHTML.

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

Ответ 5

Здесь есть два вопроса:

Почему этот рендеринг не корректен?
Является ли это допустимым HTML/XHTML/WhatNotML?

В вопросе 1 ответ прост: <div/> не признается суп-суп, поэтому, если ваш браузер находится в режиме суп-тега, он не будет обрабатывать его правильно. Подавайте свой документ как XML, и все будет хорошо, если вы должны использовать такие конструкции.

На вопрос 2 ответ зависит. В HTML 4.01 это, безусловно, недействительно. Для XHTML в SGML были добавлены новые функции, позволяющие пустым элементам использовать "нулевой конечный тег" (NET), но только тогда, когда он немедленно следует за тегом "null-end-start-tag-close". Начальный тег с нулевым концом равен <div/, а нулевой конечный тег >, и пусть последние следуют за первым, сразу дает <div/>, что отлично. Любой язык, использующий XML-фрагмент XML SGML, может выражать элементы без содержимого как <foo/>, независимо от того, объявил ли он /t foo содержимое ПУСТОЙ или нет.