Новый проект HTML 5 (рабочий проект) был выпущен 10 июня. Редактор кратко прочитал предоставленную им документацию по новой версии и сделал некоторые примечания: 
Черновик HTML 5 не стал официальным стандартом
Публикация в качестве рабочего проекта не подразумевает одобрения со стороны членов W3C.
Публикация в качестве «Черновика» не подразумевает одобрения (поддержки) со стороны членов W3C.
Спецификация HTML 5 не будет считаться законченной, пока не будет хотя бы двух полных реализаций спецификации.
Спецификация HTML 5 не будет окончательно доработана до тех пор, пока ее не реализуют как минимум две части программного обеспечения.
XHTML 1 был выпущен в 1999 году. Прошло два или три года, прежде чем он получил полную поддержку, и только недавно, почти десять лет спустя, он получил полное распространение. Таким образом, пройдет некоторое время, прежде чем HTML 5 будет поддерживаться (особенно «неосновными» браузерами). Согласно графику рабочей группы W3C по HTML, официальной доработки не будет до 2010 года.
XHTML 1 был выпущен в 1999 году. Прошло два или три года, прежде чем он получил полную поддержку, и только недавно, почти десять лет спустя, он получил полное распространение. Таким образом, пройдет некоторое время, прежде чем HTML 5 будет поддерживаться (особенно «неосновными» браузерами). Согласно графику рабочей группы W3C по HTML, официальной доработки не будет до 2010 года.
Удивительно простой оператор DOCTYPE
Это так просто, ха. Кроме того, нет различия между верхним и нижним регистром. Стоит отметить, что спецификация требует, чтобы при объявлении этого DOCTYPE можно было использовать так называемый «пользовательский синтаксис HTML (настраиваемый синтаксис HTML, я не знаю, почему он так называется)», который является предыдущим тип, который не требует тегов. Синтаксис закрытого HTML. В то же время он по-прежнему допускает синтаксис формата XML, такой как XHTML, поэтому вместо приведенного выше необходимо объявить DOCTYPE документа xml.
Прямая совместимость
В спецификации HTML 5 нет «устаревших» элементов. Причина в том, что с одной стороны она требует от дизайнеров не использовать определенные элементы, а с другой стороны требует, чтобы браузеры поддерживали эти элементы. В данном случае, по моей интуиции, он предназначен для поддержки всех предыдущих веб-страниц, написанных на HTML или XHTML. Это благословение для дизайнеров. Наконец, им больше не нужно ограничивать себя строгим синтаксисом XHTML.
удаленный элемент
Конечно, эти элементы относятся к HTML 4, но также можно увидеть, что HTML 5 не является простой регрессией к HTML 4. Он по-прежнему придерживается некоторых важных принципов XHTML, например, от элементов представления чистого интерфейса следует отказаться, в то время как использование CSS и т. д.
Следующие элементы отбрасываются, «поскольку их эффект является чисто презентационным и, следовательно, лучше обрабатывается CSS», поскольку они являются чисто презентационными элементами и должны быть заменены CSS:
базовый шрифт/большой/центр/шрифт/s/strike/tt/u
|
Следующие элементы были исключены, «поскольку их использование негативно повлияло на удобство использования и доступность для конечного пользователя»:
| фрейм/набор фреймов/noframes |
Следующие элементы были исключены, «поскольку они использовались нечасто, создавали путаницу или могли обрабатываться другими элементами»:
| акроним/апплет/isindex/каталог |
Тестовый HTML-документ:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тестовый HTML-документ</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</голова>
<тело>
<h1>Тестовый HTML-документ</h1>
<ул>
<li>Версия: 1.1 </li>
<li>DTD: переходный вариант XHTML 1.0</li>
<li>Кодировка: UTF-8</li>
<li>Обновлено: 12 июня 2008 г.</li>
</ul>
<час />
<h1><h1> представляет заголовок номер один</h1>
<h2><h2> представляет заголовок номер два</h2>
<h3><h3> представляет третий заголовок</h3>
<h4><h4> представляет заголовок номер четыре</h4>
<h5><h5> представляет заголовок №5</h5>
<h6><h6> представляет заголовок №6</h6>
<p>Этот абзац заключен в <p>. <p> представляет собой абзац и является наиболее часто используемым форматом текстового потока. Мы можем использовать различные встроенные текстовые теги в текстовых потоках. Наиболее часто используемые из них:
<strong> <strong>При отягчающих обстоятельствах</strong>,
<em><em> Акцент</em>,
<ins><ins> вставить</ins>,
<del><del> Удалить</del>,
<sub><sub> индекс</sub>,
<sup><sup> верхний индекс</sup>,
<cite><cite> cite</cite>, <big><big>увеличить</big>, <small><small>уменьшить</small>. </p>
<pre> Это текстовый поток, содержащийся в <pre>.
Пробелы, табуляции, возвраты каретки и т. д. в нем могут отображаться непосредственно на веб-странице и не будут автоматически переноситься браузером. Вы можете использовать его для отображения программного кода.
По умолчанию в предварительно отформатированном виде используется шрифт фиксированной ширины. </pre>
<p>Мы также можем использовать эти встроенные теги для отображения фрагментов кода в текстовом потоке:
<code><code>code</code>,
<kbd><kbd>Ввод с клавиатуры</kbd>,
<var><var>Переменная</var>,
<samp><samp>пример</samp>.
</p>
<p>Кроме того, важны еще два тега:</p>
<ул>
<li><abbr> Например, <abbr title="Mister">Mr.</abbr> — это сокращение от Mister. Но этот тег кажется недействительным в IE. </li>
<li><acronym><acronym title=""></acronym>: например, <acronym title="Язык гипертекстовой разметки">HTML</acronym> — это аббревиатура языка гипертекстовой разметки (на китайском языке также можно Используйте этот тег, например: «<acronym title="Китайская Народная Республика">Китай</acronym>» — это аббревиатура от «Китайская Народная Республика»). </li>
</ul>
<blockquote cite="#">
Этот абзац называется <blockquote>. Не забудьте использовать атрибут cite в <blockquote>.
</blockquote>
<адрес>
Этот раздел содержится в теге <address>, который можно использовать для отображения адреса электронной почты или реального адреса. Обратите внимание, что это элемент уровня блока, но по умолчанию он не имеет полей и отступов.
</адрес>
Раздел <div> содержится в элементе <div>. <div> является элементом уровня блока и по умолчанию не имеет никакого стиля. Еще одним элементом с аналогичным статусом является <span><span>inline field</span>, который по умолчанию также не имеет стиля. <br />
Перед этим предложением стоит знак <br>, который используется для разрыва строки внутри абзаца. </div> <час />
<p>Горизонтальная линия выше — это тег <hr> </p>
<p><a id="a"></a>Этому предложению предшествует тег привязки, реализованный тегом <a> </p>
<p><a href="http:///"><a>Также означает ссылку</a>. Обратите внимание, что у него есть четыре псевдокласса: :link – <a href="http:///">непосещенная ссылка</a>, :visited – <a href="#">посещенная ссылка</a>, : hover — это <a href="http:///">ссылка при наведении курсора мыши</a>, :active<a href="http:///">ссылка при активации щелчка мыши</a> . </p>
<p><img width="100" height="100" alt="<img> tag" /> По умолчанию изображение является встроенным, но мы также можем определить его как блок. И определите класс .inline специально для img <img width="100" height="30" alt="img.inline" class="inline" />. Кроме того, стиль <img> в ссылке отличается от <a href="#"><img width="60" height="60" alt="<img>" в <a> / > </а>. </p>
<p><object width="200" height="150"><param name="movie" value=""></param></object>
Также имеется тег <object> для вставки мультимедиа и тег <param> внутри него. </p>
<час />
<ул>
<li>Внешний слой неупорядоченного списка —<ul></li>
<li>Каждый элемент в списке состоит из <li></li>
<li>Обратите внимание, что тег <ul> может напрямую содержать только тег <li>
<ул>
<li>Это вложенный список второго уровня, который необходимо поместить в <li></li>
<li>Обратите внимание, что стили вложенных элементов списка второго уровня могут отличаться от стилей списка первого уровня.
<ул>
<li>Это третий уровень, и его стиль отличается от стиля второго уровня.</li>
</ul>
</li>
</ul>
</li>
</ul>
<ол>
<li>Внешний уровень упорядоченного списка – <ol></li>
<li>Каждый элемент в списке состоит из <li></li>
<li>Обратите внимание, что тег <ol> может напрямую содержать только тег <li>
<ол>
<li>Это вложенный список второго уровня, который необходимо поместить в <li></li>
<li>Обратите внимание, что стили вложенных элементов списка второго уровня могут отличаться от стилей списка первого уровня.
<ол>
<li>Это третий уровень, и его стиль отличается от стиля второго уровня.</li>
</ол>
</li>
</ол>
</li>
</ол>
<дл>
<dt>Эта строка<dt></dt>
Строка <dd> — это <dd>. Внешний список определений — <dl>. </дд>
<dt>Примечание<dt>может содержать только элементы строчного уровня</dt>
<dd>И <dd> может содержать строчные или блочные элементы</dd>
</дл> <час />
<p>Стандартная модель стола. Ширина столбца контролируется с помощью <colgroup> и <col>. </p>
<таблица>
<подпись>
Это <caption>
</подпись>
<группа кол-в>
<col width="30%" />
<col width="50%" />
<col width="20%" />
</colgroup>
<голова>
<тр>
<th>Эта строка<thead></th>
<th><thead> можно использовать с <th> или <td></th>
<th>Здесь мы используем <th></th>
</tr>
</тхед>
<тфут>
<тр>
<td>Последняя строка — <tfoot></td>
<td><tfoot>Независимо от того, где он расположен, он всегда будет отображаться в конце</td>
<тд></тд>
</tr>
</tfoot>
<тело>
<тр>
<td>Следующие три строки: <tbody>
<td>Вы можете разместить любое количество <tr></td>
<td>Здесь используется<td></td>
</tr>
<тр>
<td>Используйте <col> для представления столбцов</td>
<td>Самая правая ячейка этой строки представляет собой пустую ячейку таблицы без содержимого</td>
<тд></тд>
</tr>
<тр>
<td>Используйте <tr> для представления строк</td>
<td>В самой правой ячейке строки есть &nbsp;</td>
<td> </td>
</tr>
</tbody>
</таблица>
<час />
<форма действие="">
<p>Метки <form> не могут напрямую содержать различные метки элементов управления. Вы можете использовать <label><label></label> для хранения компонентов формы.</p>
<набор полей>
<legend>Вы также можете использовать теги <fieldset> и <legend> для группировки форм. </легенда>
<p>Для метода определения CSS тега ввода: используйте значение атрибута type в качестве имени класса, чтобы можно было различать различные элементы управления вводом. </p>
<р>
<input type="text" class="text" size="20" id="text" value="текстовое поле, однострочное текстовое поле" />
<input type="text" class="text" size="20" id="text_d" value="Отключено однострочное текстовое поле" Disabled="disabled" />
<label for="text"> input.text </label>
</p>
<р>
<input type="password" class="text" size="20" id="password" value="пароль, пароль" />
<input type="password" class="text" size="20" id="password_d" value="Отключено поле пароля" Disabled="disabled" />
<label for="password"> input.text </label>
</p>
<р>
<input type="submit" class="submit" id="submit" value="отправить кнопку отправки" />
<input type="submit" class="submit" id="submit_d" value="Отключена кнопка отправки" Disabled="disabled" />
<label for="submit"> input.submit </label>
</p>
<р>
<input type="reset" class="button" id="reset" value="кнопка сброса сброса" />
<input type="reset" class="button" id="reset_d" value="Отключена кнопка сброса сброса" Disabled="disabled" />
<label for="reset"> input.button </label>
</p>
<р>
<input type="button" class="button" id="button" value="кнопка обычная кнопка" />
<input type="button" class="button" id="button_d" value="Отключенная кнопка, обычная кнопка" Disabled="disabled" />
<label for="button"> input.button </label>
</p>
<р>
<input type="image" class="image" size="20" id="image" />
<label for="image"> input.image </label>
</p>
<р>
<input type="image" class="image" size="20" id="image_d" Disabled="disabled" />
<label for="image_d"> отключен input.image</label>
</p>
<р>
<input name="радио" тип="радио" класс="радио" id="радио1" проверено="проверено" />
<input name="radio" type="radio" class="radio" id="radio2" />
<label>input.radio </label>
</p>
<р>
<input name="радио" тип="радио" класс="радио" id="радио1_d" проверено="проверено" отключено="отключено" />
<input name="radio" type="radio" class="radio" id="radio2_d" Disabled="disabled" />
<label> отключил input.radio </label>
</p>
<р>
<input type="checkbox" class="checkbox" id="checkbox1" проверено="проверено" />
<input type="checkbox" class="checkbox" id="checkbox2" />
<label for="checkbox"> input.checkbox </label>
</p>
<р>
<input type="checkbox" class="checkbox" id="checkbox1_d" проверено="проверено" отключено="отключено" />
<input type="checkbox" class="checkbox" id="checkbox2_d" Disabled="disabled" />
<label for="checkbox_d"> отключен input.checkbox </label>
</p>
<р>
<input type="file" class="file" id="file" size="20" value="селектор файла селектор файла" />
<label for="file"> input.file </label>
</p>
<р>
<input type="file" class="file" id="file_d" size="20" value="селектор файлов селектор файлов" отключено="отключено" />
<label for="file_d"> отключен входной файл </label>
</p>
<р>
<button><img />Тег <button></button>
<button Disabled="disabled"><img />Тег отключен<button></button>
</p>
<р>
<label for="textarea"><textarea>По умолчанию выравнивание по нижнему краю</label>
<textarea name="textarea" cols="60" rows="5" id="textarea">многострочное текстовое поле textarea.
Внутри он также похож на преформат и может отображать все возвраты каретки и символы табуляции.</textarea>
<textarea name="textarea" cols="20" rows="5" id="textarea_b" Disabled="disabled">Отключено многострочное текстовое поле textarea</textarea>
</p>
<р>
<select name="textarea">
<option>Выпадающий список выбора</option>
<optgroup label="Это первая группа">
<option>Параметры можно сгруппировать с помощью <optgroup></option>
<option>И укажите имя группы по атрибуту метки</option>
</optgroup>
<optgroup label="Это вторая группа">
<option>Имя группы — это просто текст подсказки, а не опция</option>
</optgroup>
</выбрать>
<select Multiple="multiple" name="textarea">
<option>Когда атрибут размера <select> больше 1 или указан атрибут Multiple</option>
<option>Это станет многострочным полем выбора, вот таким</option>
</выбрать>
<select name="textarea" отключено="отключено">
<option>Выпадающий список отключен</option>
<option>Это станет многострочным полем выбора, вот таким</option>
</выбрать>
</p>
</fieldset>
</форма> </тело>
</html>
|
