Перейти к содержанию

HTML/HTML5

Материал из Викиучебника — открытых книг для открытого мира
< HTML
Версия от 12:59, 25 июля 2013; Oleg4280 (обсуждение | вклад) (Добавил предисловие, обновил ссылки и добавил категории, чтобы статью можно было найти.)

HTML5 является эволюционным развитием HTML4.01 с сохранением обратной совместимости и добавлением новых возможностей.

Конкурирующий стандарт XHTML2.0, который так и не был окончательно принят, предполагал более значительные изменения.

Что нового?

  • В отличие от HTML 4, у которого 3 валидатора, у HTML 5 валидатор один : 
    <!DOCTYPE html>
  • 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
  • Исчезновение фреймов из-за негативного влияния на всю страницу
  • Исчезновение некоторых тегов, замененных в обновленной спецификации на более актуальные: acronym(используется abbr), applet(используется object), isindex, dir.
  • Не поддерживаются некоторые атрибуты у тегов из-за отсутствия необходимости: rev и charset у link и a, shape и coords у a и т. д.
  • Не поддерживаются некоторые атрибуты у тегов по причине того, что при использовании CSS достигается лучший эффект: align у всех тегов, alink, link, text, vlink у body и так далее.
  • Новые API:
    • Рисование 2D-картинок в реальном времени
    • Контроль над проигрыванием медиафайлов
    • Хранение данных в браузере
    • Редактирование
    • Drag-and-drop
    • Работа с сетью
    • MIME
  • Новые элементы в DOM

Теги

<!--...-->

Описание

Тег для комментариев. При просмотре страницы браузером текст внутри этих тегов игнорируется

Отличия от HTML4.01

Никаких

Использование

<!--Это комментарий, он не будет виден-->
<p>Это будет отображаться</p>

!DOCTYPE

Описание

Валидатор для документа. В нем описывается какая версия HTML/XHTML используется в файле.

Отличия от HTML4.01

В HTML4.01 было три валидатора, в HTML5: 

<!DOCTYPE html>

(грамотнее писать маленькими буквами !doctype)

A

Описание

Тег для гиперссылок

Отличия от HTML4.01

Разные атрибуты

Атрибуты

Атрибут Значение Описание
href URL URL для перехода
hreflang код языка Язык страницы в URL
media тип медиа Тип медиа URL. Значение по умолчанию — все типы
ping URL URL, которая получает сообщение о переходе пользователя по ссылке.
rel alternate
archives
author
bookmark
contact
external
feed
first
help
icon
index
last
license
next
nofollow
noreferrer
pingback
prefetch
prev
search
stylesheet
sidebar
tag
up 		Показывает связь между текущим документом и документом с URL, указанным в href
target _blank
_parent
_self
_top 		Указывает браузеру как открыть ссылку:
_blank — в новом окне
_self — в окне где был открыт документ с ссылкой
_parent — в родительском окне
_top — во всем окне
Или в какой фрейм открыть ссылку (имя фрейма).
type mime_type Показывает MIME файла в URL

Использование

<a href="http://example.com" target="_blank">Это ссылка, которая откроется в новом окне</a>

ABBR

Описание

Этот тег используется для маркировки аббревиатур и акронимов, как ГАЗ или ФГДС.

Отличия от HTML4.01

Никаких.

Использование

Сейчас мы раскажем про <abbr title="Ультразвуковое исследование">УЗИ</abbr>

ACRONYM

Этот тег не поддерживается в HTML5. Используйте тег abbr для выделения акронимов.

ADDRESS

Описание

Этот тег используется для выделения информации о контактной информации автора или владельца страницы.

Отличия от HTML4.01

Никаких

Использование

Наш адрес: <address>Москва, ул. Васи Пупкина, д. 93, стр. 1. Телефон: (495)725-36-34</address>

APPLET

Этот тег не поддерживается в HTML5. Используйте тег object для java-апплетов.

AREA

Описание

Определяет фигуру в карте. Должен находиться в теге map

Отличия от HTML4.01

В HTML5 у тега появляются новые атрибуты, а некоторые старые не поддерживаются.

Атрибуты

Атрибут Значения Описание
alt Текст Определяет альтернативный текст
coords если shape="rect" то coords="left, top, right, bottom"

если shape="circ" то coords="centerx, centery, radius"

если shape="poly" то coords="x1,y1,x2,y2,..,xn, yn"

Определяет координаты фигуры
href URL Определяет URL для фигуры
hreflang Двухбуквенный код языка Язык URL для фигуры
media media query Определяет тип медиа в URL. По умолчанию: все.
nohref - Больше не поддерживается
rel alternate

archives author bookmark external first help index last license next nofollow noreferrer prefetch prev search sidebar tag up

Определяет отношение документа из URL к текущему документу
shape rect

rectangle circ circle poly polygon 

Определяет форму фигуры
target _blank

_parent _self _top имя_фрейма 

Указывает браузеру как открыть ссылку: 
 _blank - в новом окне 
 _self - в окне где был открыт документ с ссылкой 
 _parent - в родительском окне 
 _top - в всем окне
Или в какой фрейм открыть ссылку (имя фрейма).
type mime-тип Определяет mime-тип для URL

Использование

<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>

ARTICLE

Описание

Тег определяет статью, пост и т. п.

Отличия от HTML4.01

Это новый тег

Использование

<article>
<h3>Первый взгляд на HTML5</h3>
<!--Текст статьи-->
</article>

ASIDE

Описание

Тег определяет боковую панель

Отличия от HTML4.01

Это новый тег

Использование

<aside>
<h3>Топ пользователей</h3>
<ol>
<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>

AUDIO

Описание

Тег для вывода аудио-плеера

Отличия от HTML4.01

Это новый тег

Использование

<audio src="data/sounds/Zebrahead_Whats_going_on.mp3" controls="controls">
Ваш браузер не поддерживает аудио-тег HTML5.
</audio>

B

Описание

Тег форматирует текст, находящийся в нем, жирным.

Отличия от HTML4.01

Нет.

Использование

Я <b>хочу</b> сделать это, но я пока этого не сделал.

BASE

Описание

Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа.

Отличия от HTML4.01

Никаких.

Использование

<head>
<base href="http://www.w3schools.com/css/" target="_blank" />
</head>

BASEFONT

Описание

Этот тег не поддерживается в HTML5. Используйте CSS вместо этого тега.

BDO

Описание

Указывает направление текста.

Отличия от HTML4.01

Никаких.

Использование

<bdo dir="rtl">
Этот текст будет выглядеть, так
</bdo>
кат ,ьтедялгыв тедуб тскет тотЭ

BIG

Описание

Это тег не поддерживает в HTML5. Используйте CSS для увеличения шрифта текста.

BLOCKQUOTE

Описание

Тег определяет цитату.

Отличия от HTML4.01

Никаких.

Использование

<blockquote cite="http://fundux.ru/">
Флеш-технологии все больше завоёвывают просторы всемирной сети, и те, кто их осваивают, имеют возможность получить на нашем сайте
дополнительный опыт, благодаря исходникам и живому общению на форуме.
</blockquote>

BODY

Описание

Тег определяет "тело" страницы, место, где будет размещаться весь контент.

Отличия от HTML4.01

Никаких.

Использование

<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
Очень длинный и интересный контент сайта...
</body>
</html>

BR

Описание

Тег определяет перенос на другую строку.

Отличия от HTML4.01

Никаких.

Использование

Он<br/>
Она<br/>
Оно<br/>

BUTTON

Описание

Определяет кнопку.

Отличия от HTML4.01

Новые атрибуты: autofocus, form, formaction, formenctype, formmethod, formnovalidate и formtarget.

Использование

<button onclick="alert('Спасибо!');">Нажми на меня!</button>

CANVAS

Описание

Определяет графический элемент canvas, где изображения задаются программно с помощью JavaScript.

Отличия от HTML4.01

Это новый тег

Атрибуты тега

height и width - высота и ширина соответственно.

Использование

Если Ваш браузер поддерживает HTML5 Canvas, то Вы увидите ниже прямоугольник:
<br>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

Источник информации

Источник — https://ru.wikibooks.org/w/index.php?title=HTML/HTML5&oldid=80931