Спіс тэгаў і атрыбутаў HTML5

  1. Новыя тэгі HTML5
  2. Непадтрымоўваныя тэгі:
  3. Спіс атрыбутаў HTML5
  4. Структура разметкі старонкі ў HTML5

Прайшло некалькі гадоў з таго часу, як быў анансаваны першы чарнавік стандарту разметкі web-старонак HTML5 . І за гэты час стварылася не так шмат сайтаў на HTML5, хоць усе сучасныя браўзэры ўжо падтрымліваюць дадзены стандарт. Па стане на снежань 2011 года стандарт ўсё яшчэ знаходзіцца ў стане распрацоўкі.

У HTML5 дадае шмат новых сінтаксічных асаблівасцяў - <video>, <audio>, <header> і <canvas>. Гэтыя элементы распрацаваны для таго, каб зрабіць прасцей ўкараненне і кіраванне графічнымі і мультымедыйнымі аб'ектамі ў інтэрнэце без неабходнасці звяртацца да ўласных ўбудовам і API. Іншыя новыя элементы, такія як <section>, <article>, <header> і <nav> распрацаваны для таго, каб узбагачаць семантычнае змесціва дакумента (старонкі).

Новыя тэгі HTML5

  • 1. Тэгі раздзелаў (article, aside, footer, header, hgroup, nav, section)
  • 2. Тэгі групоўкі кантэнту (figure, figcaption)
  • 3. Тэгі для семантычнага вылучэння тэксту (bdo, mark, time, ruby, rt, rp, wbr)
  • 4. Тэгі для ўстаўкі кантэнту (audio, video, canvas, embed, source)
  • 5. Тэгі для элементаў формаў (datalist, keygen, output, progress, meter)
  • 6. Інтэрактыўныя элементы (details, summary, command, menu)

Тэг Кароткае апісанне <article> Вызначае артыкул <aside> Вызначае кантэнт у баку ад асноўнага кантэнту старонкі <audio> Вызначае аўдыё кантэнт <canvas> Вызначае графіку <command> Вызначае камандную кнопку <datagrid> Вызначае дадзеныя ў спарадкаваны спіс <datalist> Вызначае выпадальны спіс <datatemplate> Вызначае шаблон дадзеных <details> Вызначае дэталі элемента <dialog> Вызначае дыялог (гутарка) <eventsource> Вызначае мэта падзеі, які адпраўляецца па серверу <figure> Вызначае групу медыя-кантэнту, і іх подпісы <footer> Вызначае ніжні калантытул для часткі або старонкі <header> Вызначае вобласць загалоўка раздзела або старонкі <mark> Вызначае вылучаны тэкст <meter> Вызначае вымярэння на працягу загадзя вызначанага дыяпазону <nav> Вызначае навігацыйныя спасылкі <nest> Вызначае укладзеную кропку ў шаблоне дадзеных <output> Вызначае некаторыя віды выніку <progress > Вызначае ход выканання задачы любога роду <rule> Вызначае правілы для абнаўлення шаблонаў <section> Вызначае раздзел (секцыю) <source> Вызначае медыя-рэсурсы <time> Вызначае дату / час <video> Вызначае відэа

Непадтрымоўваныя тэгі:

Тэг Кароткае апісанне

Спіс атрыбутаў HTML5

Атрыбут Значэнне Кароткае апісанне contenteditable true
false Вызначае, ці можа карыстач рэдагаваць змесціва (кантэнт) contextmenu menu_id Вызначае кантэкстнае меню элемента draggable true
false
auto Вызначае, ці можа карыстач перацягнуць элемент irrelevant true
false Вызначае, што элемент не мае значэння. Элемент, які мае значэнне не адлюстроўваецца ref URL / id Вызначае спасылку на іншы дакумент / частка дакумента (выкарыстоўваецца толькі тады, калі значэнне атрыбуту ўсталявана) registrationmark reg_mark Вызначае зарэгістраваны знак элемента template URL / id Вызначае спасылку на іншы дакумент / частка дакумента, якія павінны быць ужытыя да элемента

Структура разметкі старонкі ў HTML5

Структура разметкі старонкі ў HTML5

Пры выкарыстанні звычайнай структуры старонкі сайта можна вылучыць некалькі тыповых блокаў, апісваных тэгам div з соответствущим класам (<div class = "header">, <div class = "nav">, <div class = "aside">, <div class = "section">, <div class = "footer"> і інш.).

пры выкарыстанні вёрсткі старонкі з ужываннем HTML5, гэтыя блокі апісваюцца структурнымі тэгамі <header>, <nav>, <aside>, <section>, <footer> і інш., што вельмі спрашчае жыццё распрацоўшчыкам. Дадзеныя тэгі з'яўляюцца структурнымі эквівалентамі і яны робяць разметку больш нагляднай і просты ў разуменні. Таксама, па змаўчанні, яны з'яўляюцца инлайновыми, таму іх трэба cделать блокавымі з дапамогай display: block.

Дадзеныя тэгі важна ўжываць правільна. Каб не заблытацца, калі і які ўжываць, у сетцы існуе выдатны рэсурс http://html5doctor.com/ , А таксама можна скарыстацца наступным алгоритом:

com/   , А таксама можна скарыстацца наступным алгоритом:

Усе сучасныя браўзэры (Опера, Сафары, Хром, Мозила, ИЕ9 +) ўжо маюць падтрымку HTML5. Для браўзэраў IE8 і менш варта падключаць javascript html5shiv , Які "навучыць" іх разумець новыя тэгі. Код для яго падлучэння ніжэй:

<! - [if lt IE 9]> <script type = "text / javascript" src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script> <! [Endif ] ->

У вёрстцы макетаў пры стварэнні сайтаў мы перайшлі на выкарыстанне новага стандарту HTML5. Калі вы хочаце замовіць сайт або асобна вёрстку сайта , Можаце пакінуць заяўку, напісаўшы па любым з адрасоў, указаных на старонцы кантактаў або праз форму зваротнай сувязі. Будзем рады супрацоўніцтву!