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

HTML/HTML5

Материал из Викиучебника — открытых книг для открытого мира
< HTML
(перенаправлено с «HTML5»)

Краткая история

[править]

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

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

Параллельно с W3C развитием HTML5 занимается и WHATWG. Причём с 2004 года WHATWG, а с 2007 W3C, у которой до этого приоритетом был стандарт XHTML2.0.

В качестве стандарта W3C HTML5 был принят 28 октября 2014 года, а W3C HTML5.1 планируется в конце 2016 года. Стандарт WHATWG HTML является живым (Living Standard), то есть изменения в него вносятся постоянно.

В документе можно посмотреть отличия различных HTML-спецификаций (между WHATWG HTML, W3C HTML5 и W3C HTML5.1).

Что нового?

[править]
  • В отличие от HTML4, у которого 3 валидатора (strict, transitional, frameset), у HTML5 валидатор один: <!DOCTYPE html>.
  • HTML5 поддерживает MathML и SVG.
  • Новые теги:
    • <section>, <article>, <aside>, <header>, <footer>, <nav>, <main>, <hgroup> (уже считается устаревшим в W3C),
    • <figure>, <figcaption>, <video>, <audio>, <source>, <track>, <picture>, <canvas>, <svg>, <math>, <embed> (для вставки контента с плагином (только)),
    • <datalist>, <keygen>, <output>, <progress>, <meter>, <dialog>,
    • <data>, <time>, <mark>, <ruby>, <rt>, <rp>, <bdi>, <wbr>,
    • <details>, <summary>, <menu>, <menuitem> (нужно использовать вместо тега <command>).
  • Новые значения атрибута type для тега <input>:
    • date, datetime, datetime-local, time, month, week,
    • color, email, tel, number, range, search, url.
  • Новые атрибуты для тегов, например:
    • autocomplete, autofocus, placeholder, required, pattern (для регулярных выражений) и другие для тега <input>,
    • autocomplete, autofocus, placeholder, required и другие для <textarea>,
    • async для тега <script>,
    • srcset для тега <img>,
    • download для тегов <a> и <area>.
  • Новые глобальные атрибуты, то есть которые могут использоваться с любым из тегов, например:
    • contenteditable, spellcheck, contextmenu, hidden, draggable/dropzone.
  • Некоторые теги отмечены как устаревшие, вместо них рекомендуется использовать CSS:
    • <basefont>, <big>, <center>, <font>, <strike>, <tt>.
  • Исчезновение фреймов (<frame>, <frameset>, <noframes> (кроме <iframe>)) из-за проблем с поисковыми системами и некоторых неудобств при навигации по странице.
  • Исчезновение некоторых тегов, заменённых в обновлённой спецификации на более актуальные:
    • вместо <acronym> нужно использовать тег <abbr>,
    • вместо <applet> использовать <object>,
    • вместо <dir> использовать <ul>,
    • вместо <bgsound> — тег <audio>,
    • вместо <listing> и <xmp> — теги <pre> или <code>,
    • вместо <strike> — <del> или <s>,
    • вместо <isindex> — комбинацию тега <form> и текстового поля.
  • Не поддерживаются некоторые атрибуты у тегов, например:
    • charset и rev у тегов <link> и <a>,
    • coords, shape и name у тега <a>,
    • align у всех тегов,
    • background, bgcolor, text, topmargin, rightmargin, bottommargin, leftmargin, link, alink, vlink у тега <body>.
  • Новые API:
    • Рисование 2D-картинок в реальном времени (Canvas),
    • Контроль над проигрыванием медиафайлов,
    • Хранение данных в браузере,
    • Редактирование,
    • Drag-and-drop,
    • Работа с сетью,
    • MIME.
  • Новые элементы в DOM.

Теги

[править]

<!--...-->

[править]

Описание

[править]

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

V.S.

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

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

!DOCTYPE

[править]

Описание

[править]

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

Отличия от HTML 4.01

[править]

В HTML 4.01 было три валидатора:

  • Strict (Строгий, только с рекомендуемыми опциями)
  • Transitional (Переходный с не рекомендуемыми опциями)
  • Frameset (с поддержкой фреймов)

В HTML5: 

<!DOCTYPE html>

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
_self
_parent
_top 		Указывает браузеру как открыть ссылку:
_blank — в новом окне
_self — в окне где был открыт документ с ссылкой
_parent — в родительском окне
_top — во всем окне (полный экран)
Или в какой фрейм открыть ссылку (имя фрейма).
type mime_type Показывает MIME файла в URL

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

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

Название сайта http://example.com обычно используется в качестве примера, чтобы не приводить в качестве ссылки адреса реальных сайтов.

ABBR

[править]

Описание

[править]

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

Отличия от HTML 4.01

[править]

Никаких.

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

[править]
<!DOCTYPE html>
<html>
   <head>
      <title>
         Тег abbr
      </title>
      <meta charset="UTF-8" />
   </head>
   <body>
      <p>
         Сейчас мы расскажем про <abbr title="Ультразвуковое исследование">УЗИ</abbr>
      </p>
   </body>
</html>

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

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

[править]
<!DOCTYPE html>
<html>
   <head>
      <title>
         Тег area
      </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </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>

ARTICLE

[править]

Описание

[править]

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

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

[править]

Это новый тег.

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

[править]
<!DOCTYPE html>
<html>
   <head>
      <title>
         Тег article
      </title>
   </head>
   <body>
      <article>
         <h3>
            Первый взгляд на HTML5
         </h3>
         <!-- Текст статьи -->
      </article>
   </body>
</html>

ASIDE

[править]

Описание

[править]

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

Отличия от HTML 4.01

[править]

Это новый тег.

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

[править]
<!DOCTYPE html>
<html>
   <head>
      <title>
         Тег aside
      </title>
      <meta http-equiv="Content-Type" content="text/html" />
      <link rel="stylesheet" href="Style.css" type="text/css" />
   </head>
   <body>
      <aside>
         <h3>
            Топ пользователей
         </h3>
         <ol type="1">
            <li>
               <a href="http://example.com/user1">
                  TVBEST
               </a>
               <span class="rating">
                  22.30
               </span>
            </li>
            <li>
               <a href="http://example.com/user6">
                  Slim
               </a>
               <span class="rating">
                  19.34
               </span>
            </li>
            <li>
               <a href="http://example.com/user40">
                  Goli
               </a>
               <span class="rating">
                  17.02
               </span>
            </li>
            <li>
               <a href="http://example.com/user2">
                  Bems
               </a>
               <span class="rating">
                  15.54
               </span>
            </li>
            <li>
               <a href="http://example.com/user16">
                  Ихачеха
               </a>
               <span class="rating">
                  13.91
               </span>
            </li>
         </ol>
      </aside>
   </body>
</html>

AUDIO

[править]

Описание

[править]

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

Отличия от HTML 4.01

[править]

Это новый тег

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

[править]
<!DOCTYPE html>
<html>
   <head>
      <title>
         Тег audio
      </title>
      <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. 
      </audio>
   </body>
</html>

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://www.example.com">
Флеш-технологии все больше завоёвывают просторы всемирной сети, и те, кто их осваивают, имеют возможность получить на нашем сайте
дополнительный опыт, благодаря исходникам и живому общению на форуме.
</blockquote>

BODY

[править]

Описание

[править]

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

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

[править]

Устарели некоторые атрибуты.

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

[править]
<!DOCTYPE html>
<html>
   <head>
      <title>
         Заголовок документа
      </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
       Очень длинный и интересный контент сайта...
    </body>
</html>

BR

[править]

Описание

[править]

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

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

[править]

Никаких.

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

[править]
Он<br>
Она<br>
Оно<br>

BUTTON

[править]

Описание

[править]

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

Отличия от HTML 4.01

[править]

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

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

[править]
<!DOCTYPE html>
<html>
   <head>
      <title>
         Тег button
      </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      <button onclick="alert('Спасибо!')">
         Нажми на меня! 
      </button>
   </body>
</html>

CANVAS

[править]

Описание

[править]

Холст для рисования анимации, управляется при помощи JavaScript.

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

[править]

Это новый тег.

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

[править]

height и width — высота и ширина соответственно (хотя лучше использовать CSS).

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

[править]

Если Ваш браузер поддерживает HTML5 Canvas, то Вы увидите ниже прямоугольник: 

<!DOCTYPE html>
<html>
   <head>
      <title>
         Тег canvas
      </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      <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>
   </body>
</html>

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

[править]

Ссылки

[править]
Источник — https://ru.wikibooks.org/w/index.php?title=HTML/HTML5&oldid=235098