Викиучебник

HTML/HTML5: различия между версиями

Интерактивная навигация по истории
← Предыдущая правкаСледующая правка →
Содержимое удалено Содержимое добавлено
ВизуальныйВики-текст
м Отмена правки 93185 участника Oleg3280 (обс.) после обращения переименования.
Нет описания правки
Строка 7:
* В отличие от HTML 4, у которого 3 валидатора, у HTML 5 валидатор один : <code><!DOCTYPE html></code>
* HTML 5 поддерживает MathML и SVG
* Новые теги: '''section''', '''article''', '''aside''', '''hgroup''', '''header''', '''footer''', '''nav''', '''dialog''', '''figure''', '''video''', '''audio''', '''source''', '''embed''' (для вставки контента с плагином (только)), '''mark''', '''progress''', '''meter''', '''time''', '''ruby''', '''rt''', '''rp''', '''canvas''', '''command''', '''detailes''', '''datalist''', '''keygen''', '''output'''.
* Новые типы '''input''': '''tel''', '''search''', '''url''', '''email''', '''datetime''', '''date''', '''month''', '''week''', '''time''', '''datetime-local''', '''number''', '''range''', '''color'''.
* Новые атрибуты для тегов : атрибуты '''ping''' '''media''' для '''a''' и '''area''' и т. д.
* Исчезновение некоторых тегов, по причине того, что их можно заменить CSS: '''basefont''', '''big''', '''center''', '''font''', '''s''', '''strike''', '''tt''', '''u'''
Строка 26:
 
== Теги ==
 
=== <nowiki><!--...--></nowiki> ===
 
==== Описание ====
Тег для комментариев. При просмотре страницы браузером текст внутри этих тегов игнорируется
 
==== Отличия от HTML4.01 ====
Никаких
 
==== Использование ====
<pre><!--Это комментарий, он не будет виден-->
<p>Это будет отображаться</p></pre>
 
=== !DOCTYPE ===
Строка 44 ⟶ 32 :
Валидатор для документа. В нем описывается какая версия HTML/XHTML используется в файле.
 
==== Отличия от HTML4HTML 4.01 ====
В HTML 4.01 было три валидатора Strict (Строгий, только с рекомендуемыми опциями), Transitional (Переходный с не рекомендуемыми опциями) и Frameset (с поддержкой фреймов).В HTML5:
В HTML4.01 было три валидатора, в HTML5:
 
<pre><!DOCTYPE html></pre>
<source lang="html5">
(грамотнее писать маленькими буквами !doctype)
<!DOCTYPE html>
</source>
 
=== A ===
 
==== Описание ====
Тег для гиперссылок.
 
==== Отличия от HTML4.01 ====
Строка 101 ⟶ 91 :
Этот тег используется для маркировки аббревиатур и акронимов, как ГАЗ или ФГДС.
 
==== Отличия от HTML4HTML 4.01 ====
Никаких.
 
==== Использование ====
<source lang="html5">
<pre>Сейчас мы расскажем про <abbr title="Ультразвуковое исследование">УЗИ</abbr></pre>
<!DOCTYPE html>
<html>
<head>
<title>
Тег abbr
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>
Сейчас мы расскажем про <abbr title="Ультразвуковое исследование">УЗИ</abbr>
</p>
</body>
</html>
 
=== ACRONYM ===
Этот тег не поддерживается в HTML5. Используйте тег '''abbr''' для выделения акронимов.
 
=== ADDRESS ===
 
==== Описание ====
Этот тег используется для выделения информации о контактной информации автора или владельца страницы.
 
==== Отличия от HTML4.01 ====
Никаких
 
==== Использование ====
<pre>Наш адрес: <address>Москва, ул. Васи Пупкина, д. 93, стр. 1. Телефон: (495)725-36-34</address></pre>
 
=== APPLET ===
Строка 130 ⟶ 123 :
 
==== Отличия от HTML4.01 ====
В HTML5 у тега появляются новые атрибуты, а некоторые старые не поддерживаются.
 
==== Атрибуты ====
Строка 216 ⟶ 209 :
 
==== Использование ====
<source lang="html5">
<pre><img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />
<!DOCTYPE html>
 
<html>
<map name="planetmap">
<head>
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<title>
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
Тег area
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</maptitle>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</pre>
</head>
<body>
<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>
</body>
</html>
</source>
 
=== ARTICLE ===
Строка 231 ⟶ 235 :
 
==== Отличия от HTML4.01 ====
Это новый тег.
 
==== Использование ====
<source lang="html5">
<pre>
<!DOCTYPE html>
<article>
<html>
<h3>Первый взгляд на HTML5</h3>
<head>
<!--Текст статьи-->
<title>
</article>
Тег article
</pre>
</title>
 
</head>
<body>
<article>
<h3>
Первый взгляд на HTML5
</h3>
<!-- Текст статьи -->
</article>
</body>
</html>
</source>
=== ASIDE ===
 
Строка 246 ⟶ 261 :
Тег определяет боковую панель
 
==== Отличия от HTML4HTML 4.01 ====
Это новый тег.
 
==== Использование ====
<source lang="html5">
<pre>
<!DOCTYPE html>
<aside>
<html>
<h3>Топ пользователей</h3>
<olhead>
<title>
<li><a href="http://nullbox.ru/user1">TVBEST</a><span class="rating">22.30</span></li>
Тег aside
<li><a href="http://nullbox.ru/user6">Slim</a><span class="rating">19.34</span></li>
</title>
<li><a href="http://nullbox.ru/user40">Goli</a><span class="rating">17.02</span></li>
<meta http-equiv="Content-Type" content="text/html" />
<li><a href="http://nullbox.ru/user2">Bems</a><span class="rating">15.54</span></li>
<link rel="stylesheet" href="Style.css" type="text/css" />
<li><a href="http://nullbox.ru/user16">Ихачеха</a><span class="rating">13.91</span></li>
</olhead>
<body>
</aside>
<aside>
</pre>
<h3>
Топ пользователей
</h3>
<ol type="1">
<li>
<a href="http://nullbox.ru/user1">
TVBEST
</a>
<span class="rating">
22.30
</span>
</li>
<li>
<a href="http://nullbox.ru/user6">
Slim
</a>
<span class="rating">
19.34
</span>
</li>
<li>
<a href="http://nullbox.ru/user40">
Goli
</a>
<span class="rating">
17.02
</span>
</li>
<li>
<a href="http://nullbox.ru/user2">
Bems
</a>
<span class="rating">
15.54
</span>
</li>
<li>
<a href="http://nullbox.ru/user16">
Ихачеха
</a>
<span class="rating">
13.91
</span>
</li>
</ol>
</aside>
</body>
</html>
</source>
 
=== AUDIO ===
Строка 268 ⟶ 332 :
Тег для вывода аудио-плеера
 
==== Отличия от HTML4HTML 4.01 ====
Это новый тег
 
==== Использование ====
<source lang="html5">
<pre>
<!DOCTYPE html>
<audio src="data/sounds/Zebrahead_Whats_going_on.mp3" controls="controls">
<html>
Ваш браузер не поддерживает аудио-тег HTML5.
<head>
</audio>
<title>
</pre>
Тег audio
 
</title>
=== B ===
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
</head>
==== Описание ====
<body>
Тег форматирует текст, находящийся в нем, жирным.
<audio src="data/sounds/Zebrahead_Whats_going_on.mp3" controls="controls" autoplay="autoplay">
 
Ваш браузер не поддерживает аудио-тег HTML5.
==== Отличия от HTML4.01 ====
</audio>
Нет.
</body>
 
</html>
==== Использование ====
<pre/source>
Я <b>хочу</b> сделать это, но я пока этого не сделал.
</pre>
 
=== BASE ===
 
==== Описание ====
Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа.
 
==== Отличия от HTML4.01 ====
Никаких.
 
==== Использование ====
<pre>
<head>
<base href="http://www.w3schools.com/css/" target="_blank" />
</head>
</pre>
 
=== BASEFONT ===
 
==== Описание ====
Этот тег не поддерживается в HTML5. Используйте CSS вместо этого тега.
 
=== BDO ===
 
==== Описание ====
Указывает направление текста.
 
==== Отличия от HTML4.01 ====
Никаких.
 
==== Использование ====
<pre>
<bdo dir="rtl">
Этот текст будет выглядеть, так
</bdo>
кат ,ьтедялгыв тедуб тскет тотЭ
</pre>
 
=== BIG ===
 
==== Описание ====
Это тег не поддерживает в HTML5. Используйте CSS для увеличения шрифта текста.
 
=== BLOCKQUOTE ===
 
==== Описание ====
Тег определяет цитату.
 
==== Отличия от HTML4.01 ====
Никаких.
 
==== Использование ====
<pre>
<blockquote cite="http://www.example.com">
Флеш-технологии все больше завоёвывают просторы всемирной сети, и те, кто их осваивают, имеют возможность получить на нашем сайте
дополнительный опыт, благодаря исходникам и живому общению на форуме.
</blockquote>
</pre>
 
=== BODY ===
Строка 354 ⟶ 369 :
 
==== Отличия от HTML4.01 ====
Устарели некоторые атрибуты.
Никаких.
 
==== Использование ====
<source lang="html5">
<pre>
<!DOCTYPE html>
<html>
<head>
<title>
Заголовок документа
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
</head>
<body>
<body>
Очень длинный и интересный контент сайта...
Очень длинный и интересный контент сайта...
</body>
</body>
</html>
</presource>
 
=== BR ===
 
==== Описание ====
Тег определяет перенос на другую строку.
 
==== Отличия от HTML4.01 ====
Никаких.
 
==== Использование ====
<pre>
Он<br/>
Она<br/>
Оно<br/>
</pre>
 
=== BUTTON ===
 
==== Описание ====
Определяет кнопку.
 
==== Отличия от HTML4HTML 4.01 ====
Новые атрибуты: autofocus, form, formaction, formenctype, formmethod, formnovalidate и formtarget.
 
==== Использование ====
<source lang="html5">
<pre>
<!DOCTYPE html>
<button onclick="alert('Спасибо!');">Нажми на меня!</button>
</prehtml>
<head>
<title>
Тег button
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<button onclick="alert("Спасибо! ")">
Нажми на меня!
</button>
</body>
</html>
</source>
 
=== CANVAS ===
 
==== Описание ====
Холст для рисования анимации, управляется при помощи JavaScript.
Определяет графический элемент canvas, где изображения задаются программно с помощью JavaScript.
 
==== Отличия от HTML4.01 ====
Это новый тег.
 
==== Атрибуты тега ====
'''height''' и '''width''' — высота и ширина соответственно (хотя лучше использовать CSS).
 
==== Использование ====
 
Если Ваш браузер поддерживает HTML5 Canvas, то Вы увидите ниже прямоугольник:
 
<source lang="html5">
<pre>
<!DOCTYPE html>
<canvas id = "myCanvas" width = "200" height = "200"></canvas>
<scripthtml>
<head>
var canvas = document.getElementById('myCanvas');
<script type="text/javascript">
var ctx = canvas.getContext('2d');
var canvas = document.getElementById('myCanvas');
ctx.fillStyle = '#FF0000';
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,80,100);
ctx.fillStyle = "#FF0000";
</script>
ctx.fillRect(0,0,80,100);
</pre>
</script>
<title>
Тег canvas
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
</body>
</html>
</source>
 
== Источник информации ==
Источник — https://ru.wikibooks.org/wiki/HTML/HTML5