Adobe саботирует процесс утверждения спецификаций HTML5?

HTML5(Hyper Text Markup Language)

Расширение

..html, .htm

MIME-тип

text/html

Разработчик

Консорциум Всемирной паутины и WHATWG

Опубликован

28 октября 2014

Тип формата

Язык разметки

Расширен из

SGML

Развит в

XHTML5

Стандарт(ы)

W3C HTML 5.2WHATWG HTML Living Standard

Открытый формат?

Да

Сайт

w3.org/TR/html5/
 Медиафайлы на Викискладе

HTML

HTML и HTML5 Динамический HTML XHTML XHTML Mobile Profile[en] и CHTML Document Object Model Семейство шрифтов Кодировки символов Мнемоники в HTML Редактор HTML Элементы HTML Семантическая вёрстка Карта изображений Цвета HTML Формы HTML Фреймы HTML HTML5 audio и HTML5 video Canvas Скрипты в HTML Unicode и HTML[en] Браузерный движок Quirks mode Каскадные таблицы стилей W3C и WHATWG Web Storage WebGL Сравнение языков разметки документов браузерных движков

п • о • р

HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. Хотя стандарт был завершён (рекомендованная версия к использованию) только в 2014 году[1][2] (предыдущая, четвёртая, версия опубликована в 1999 году[3]), уже с 2013 года[4] браузерами оперативно осуществлялась поддержка, а разработчиками — использование рабочего стандарта (англ. HTML Living Standard). Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для парсеров.

Во всемирной паутине долгое время использовались стандарты HTML 4.01, XHTML 1.0 и XHTML 1.1.

Веб-страницы[5] на практике оказывались свёрстаны с использованием смеси особенностей, представленных различными спецификациями, включая спецификации программных продуктов, например веб-браузеров, а также сложившихся общеупотребительных приёмов.

HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый API для сложных веб-приложений[6].

В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы , и , а также возможность использования SVG и математических формул.

Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети без необходимости использования сторонних API и плагинов.

Другие новые элементы, такие как , , и , разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удалён.

Некоторые элементы, например , и , были изменены, переопределены или стандартизированы. API и DOM стали основными частями спецификации HTML5[6]. HTML5 также определяет некоторые особенности обработки ошибок вёрстки, поэтому синтаксические ошибки должны рассматриваться одинаково всеми совместимыми браузерами[7].

Предпосылки

W3C, к 2004 году захвативший множество компаний, не связанных напрямую с браузерами, вроде Adobe, настаивал на XHTML — машиночитаемом, но малопригодном для человеческого редактирования формате[8], да и просто медленно внедрял новшества. Потому была создана новая рабочая группа, WHATWG.

В 2005 году появился YouTube — основной видеохостинг Интернета вплоть до настоящего времени (2021). Его плеер был написан на Adobe Flash — распространённой системе интернет-приложений. На момент появления YouTube это было нормально, ведь в интернет в основном ходили с компьютеров и ноутбуков, а порты Flash были под все крупные ОС.

В 2007 году появился iPhone. Телефоны до него либо использовали чисто мобильные технологии вроде WAP, либо полагались на серверный рендеринг (Opera Mini). iPhone же располагал полноценным браузером — а YouTube, полагавшийся на Flash, был реализован отдельной программой. Одной из задач HTML5 стало снизить потребность в Flash — с помощью HTML5 video, SVG и холстов.

iPhone поставил новый стандарт смартфона — прибор с сенсорным экраном на всю переднюю панель. Экранная клавиатура обычно миниатюрная, и потому для разных типов ввода — чисел, дат, адресов электронной почты — нужны разные клавиатуры.

HTML5 добавил и другие новшества для мобильных устройств — геолокацию, управление кэшем для офлайн-работы и т.д.

Как в HTML5, так и в CSS3 добавлены механизмы перевёрстки сайтов под мобильные устройства и страничные медиа (электронная книга, печатный документ).

Всё больше распространяются AJAX и одностраничные сайты, и добавился API для управления историей в них.

Выяснилось, что вебмастера ставят DOCTYPE какой попало — потому эта строка упрощена до . Поддержка ошибочных документов унифицирована и в других местах.

История

WHATWG начал работу над новым стандартом в 2004 году[9], когда World Wide Web Consortium (W3C) сосредоточился на будущих разработках XHTML 2.0, а HTML 4.01 не изменялся с 2000 года[10]. В 2009 году W3C признал, что срок работы у рабочей группы XHTML 2.0 истёк, и решил не возобновлять его. Впоследствии W3C и WHATWG совместно разрабатывали HTML5[11].

Даже несмотря на то, что HTML5 был хорошо известен среди веб-разработчиков в течение нескольких лет, он стал основной темой СМИ только в апреле 2010 года. После этого глава компании Apple Inc.

Стив Джобс[12][13][14][15] написал публичное письмо, заголовок которого гласил: «мысли по поводу Flash», где он заключил, что с разработкой HTML5 нет больше необходимости смотреть видеоролики или использовать другие виды приложений с помощью Adobe Flash[16].

По этому поводу вспыхивали дебаты в кругу веб-разработчиков, причём некоторые намекали, что, хотя HTML5 и обеспечивает расширенную функциональность, разработчики должны принимать во внимание различия браузеров и необходимость поддержки различных частей стандартов, равно как и функциональные различия между HTML5 и Flash[17].

Процесс стандартизации

Новые возможности гипертекстовой разметки в HTML 5.0

Аннотация: Цель лекции: представить новые возможности разметки веб-страниц, предоставляемые в рамках спецификации HTML5 для веб-разработчиков.

HTML5 — пятая версия HTML-стандарта и находится в стадии разработки. Основной её целью является улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется лёгкость чтения кода для человека и ясность исполнения для компьютеров и приложений (веб-браузеры, синтаксические анализаторы и т.д.).

HTML5 включает в себя не только HTML 4, но и XHTML 1, а также DOM2HTML (особенно JavaScript).

HTML5 — также попытка определить единый язык разметки, который мог бы быть написан как в HTML, так и в XHTML и был бы синтаксически корректен. Он включает в себя детальные модели обработки, чтобы поддерживать больше взаимодействующих процессов; он расширяет, улучшает и рационализирует разметку, пригодную для документов, и вводит разметку и API для сложных веб-приложений.

В HTML5 добавлено много новых синтаксических особенностей. Например, элементы , , и такие же как и в SVG. Эти особенности разработаны для того, чтобы сделать проще внедрение и управление графическими и мультимедийными объектами в сети Веб без обращения к плагинам и API.

Другие новые элементы, такие как , , и разработаны для того, чтобы представлять более структурировано семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя при этом некоторые из ранее существоваших элементов и атрибутов были удалены.

Некоторые элементы, например, , и были изменены, переопределены или стандартизированы.

API и DOM являются фундаментальными частями спецификации HTML5.

Для того чтобы спецификация получила статус «W3C рекомендована», необходимы две полностью законченные и полностью взаимодействующие реализации. При этом многие части спецификации уже стабильны и могут быть реализованы в программных продуктах.

В дополнение к определению разметки HTML5 устанавливается сценарный интерфейс прикладного программирования (API). Существующий интерфейс DOM расширен.

Также добавлены новые API, например:

1. элемент Canvas для непосредственного метода рисования в 2D.
2. контроль над проигрыванием медиафайлов, который может использоваться, например, для синхронизации субтитров с видео;
   
3. хранение баз данных off-line;
   
4. редактирование документа;
   
5. перетаскивание объектов на веб-странице (drag-and-drop);
   
6. управление историей браузера;
   
7. тип MIME и регистрация обработчика протокола;
   
8. поддержка микроданных.
   
   1. Хотя, что HTML5 может обеспечивать анимацию внутри веб-страницы, это утверждение требует уточнения. Для поддержки такой возможности необходимо привлечение JavaScript или CSS 3. Новый элемент управления Canvas служит для отображения графики на виртуальном «полотне». Описание элемента дается в следующем виде:

      Собственно построение графики реализуется средствами JavaScript через специальный API, разработанный для элемента Canvas.

   2. Отдельные элементы веб-страницы и текста можно перемещать в окне веб-браузера с помощью мыши. Эта возможность реализована с помощью функции перетаскивания (drag-and-drop) через атрибуты элементов HTML5. По умолчанию можно перетаскивать ссылки, выделенные текстовые фрагменты и изображения.
   3. К существовавшим ранее элементам управления веб-форм добавились новые элементы: селектор даты и времени, элементы задания числового диапазона, цвета, адреса электронной почты, URL, номера телефона. Появились также новые атрибуты у элементов управления.
   4. Пользователь может править содержимое элементов HTML5. Для этого достаточно атрибуту contenteditable присвоить логическое значение true.
   5. Объект history позволяет перемещаться вперед и назад по состояниям веб-страниц, которые просматривались в веб-браузере. Пользователь также может помещать текстовые данные в предысторию текущей страницы для последующего их восстановления.
   6. Используя простой код JavaScript и HTML5, можно сохранять данные с текущей веб-страницы для последующего их восстановления даже после полной ее перезагрузки. Эти данные могут сохраняться глобально в текущем сеансе (в течение 15 минут, при отсутствии активности пользователя), либо локально в самом веб-браузере.

В HTML5 для описания содержимого элементов определена новая, семантическая разметка. Использование семантической разметки не предоставляет никаких непосредственных преимуществ, но значительно облегчает разработку HTML-страниц, и, безусловно, поисковые системы смогут использовать такие элементы разметки при организации поиска и индексирования страниц.

В HTML5 появились новые элементы для сруктурирования веб-страницы:

• header — содержимое верхней (начальной) части страницы или ее секции
• footer — содержимое нижней (завершающей) части страницы или ее секции
• section — секция веб-страницы
• article — содержимое внешней статьи
• aside — связанное содержимое или фрагмент
• nav — навигационные ссылки

Ко всем из перечисленных элементов могут применяться стили CSS. Фактически, как уже отмечалось, когда мы рассматривали применение принципа полезности при проектировании веб-страниц, HTML5 поощряет разделение представления и содержимого, поэтому для стилевого оформления страниц HTML5 рекомендуется использовать CSS.

HTML5 вводит не только новые семантические элементы, но и новые упрощенные способы поиска элементов в DOM-модели страниц.

Ранее использовались следующие методы JavaScript, предназначенные для поиска элементов:

• getElementById — возвращение элемента с указанным значением атрибута id
• getElementsByName — возвращение всех элементов с атрибутами name, имеющиюми указанное значение
• getElementsByTagName — возвращение всех элементов, имя дескриптора которых соответствует указанному имени тега.

Новые селекторные функции предлагают более точные способы указания искомых элементов, не требующие применения циклов и итеративного просмотра документа с помощью стандартной DOM-модели.

К сожалению, не все (или не в полной мере) из новшеств спецификации HTML5 на сегодняшний день поддерживаются веб-браузерами.

XHTML5 — это, по-сути, XML-сериализация языка HTML5. Документы XML должны быть снабжены нотацией XML Internet media type, например, application/xhtml+xml или application/xml.

XHTML5 требует соблюдения строгого и правильно оформленного синтаксиса XML. Выбор между HTML5 и XHTML5 сводится к выбору типа MIME содержимого. В HTML5 и XHTML5 doctype html необязателен и может быть просто пропущен.

• Спецификация HTML5 предъявляет определенные требования как к клиентским приложениям (браузерам), так и к документам.
• Документы могут не всегда содержать корректный синтаксис, но HTML5-совместимые браузеры, так же, как и их предшественники, применяют алгоритмы разбора ошибок разметки в документах для построения правильной объектной модели (DOM).
• В старых версиях браузеров новые теги HTML5 будут игнорироваться.

Отличия HTML5 от HTML 4.01 и XHTML 1.x:

• Новые правила синтаксического анализа.
• Возможность использовать встроенные SVG и MathML в text/html.
• Новые элементы: article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section
  , source, summary, time, video, wbr.
• Новые типы средств управления за формой: datesandtimes, email, url, search, number, range, tel, color.
• Новые атрибуты: charset (в meta), async (в script).
• Глобальные атрибуты, которые могут быть применены ко всем элементам: id, tabindex, hidden, data—* (пользовательские атрибуты данных).
• Элементы, которые будут исключены: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt.

Обзор HTML5 спецификации

Перевод статьи: A Preview of HTML5. Lachlan Hunt.

Данный пост содержит перевод статьи, которая в принципе не несет в себе ничего нового, но по-прежнему привлекает интерес влиятельных людей в сфере веб-разработки и поэтому все еще актуальна. В частности, на этот материал ссылается Люк Стивенс в своей книге «The Truth About HTML5», отредактированный фрагмент третьей главы которой уже переведен мной здесь. И для того, чтобы читатели смогли представить себе полную картину рассматриваемой Люком Стивенсом проблемы, я всё-таки решил сделать полный перевод статьи.

Введение

Не секрет, что на данный момент Web находится в стадии интенсивного развития. Ежедневно создаётся множество новых инновационных веб-сайтов, которым уже довольно тесно в рамках текущего HTML стандарта.

Так как HTML 4 является основной спецификацией уже на протяжении порядка десяти лет (), то разработчики, сдерживаемые ограничениями стандартов и кроссбраузерными барьерами, перешли к активному поиску новых технологий, позволяющих обеспечить повышенную функциональность их проектам.

Для того чтобы разработчики смогли дать волю своей фантазии и использовать максимум возможностей связанных с взаимодействием при создании привлекательных, интерактивных сайтов и веб-приложений, HTML5 стандарт предоставляет новые и расширяет уже существующие возможности, касающиеся элементов управления пользовательских форм, API, мультимедиа, а также вопросов структуры документа и его семантики.

Начавшиеся в 2004 году работы по созданию HTML5 спецификации на данный момент выполняются совместными усилиями двух рабочих групп — W3C по HTML и WHATWG.

Консорциум W3C выносил свое решение, принимая во внимание мнение многих заинтересованных сторон, таких как представители четырех влиятельных разработчиков браузеров — Apple, Mozilla, Opera и Microsoft, а также ряда других организаций и личностей с различными интересами и опытом.

Имейте в виду, что спецификация находится в стадии разработки и до ее окончательной версии все еще далеко. Поэтому вполне возможно, что любая обсуждаемая в данной статье новая возможность может подвергнуться изменениям в будущем. Цель изложенного здесь материала – краткое ознакомление с основными нововведениями, находящимися в текущей редакции стандарта.

Структура

Спецификация HTML5 вводит целый набор новых элементов, облегчающих процесс структуризации документов.

Большинство веб-страниц, разрабатываемых в соответствии с HTML 4 стандартом, содержат множество общепринятых структурных компонентов, таких как шапка, подвал, колонки и т.п.

, которые на сегодняшний день принято реализовывать с помощью элементов, назначая им при этом содержательные значения атрибутов идентификаторов id и/или имен классов class.

Такое широкое применение элементов объясняется тем, что текущие версии HTML 4 стандарта не предусматривают необходимых семантических элементов, способных представить каждый из упомянутых в примере разделов.

И в этом случае разметка приведенной в примере страницы будет выглядеть следующим образом:

Example

This is an example HTML document.

Как видно из примера, здесь также как и в предыдущих версиях HTML некоторые теги могут опускаться, при этом их наличие подразумевается браузером автоматически.

XML

То что касается XML серилизации, то в этом случае имеет место синтаксис схожий с XML 1.0 с использованием именных пространств, в точности также, как это предусмотрено в стандарте XHTML 1.0:

Example

This is an example HTML document.

Если не учитывать пробелы, используемые в последнем случае и наличие в нем атрибута xmlns, то представленные выше два примера ничем не отличаются друг от друга.

Поэтому для их отличия браузеры используют MIME типы. Любой документ представленный как text/html тип, должен отвечать требованиям HTML серилизации, а тот документ, MIME тип которого заявлен как XML с помощью application/xhtml+xml значения, должен удовлетворять требованиям XML серилизации.

Разработчики должны четко понимать разницу и выбирать необходимый способ серилизации в зависимости от ряда различных факторов. При этом они не обязаны принудительно использовать один из способов серилизации, так как каждый из них оптимизирован для различных стиуаций.

Преимущества HTML метода

• Обратная совместимость с текущими версиями браузеров.
• Синтаксис хорошо знаком разработчикам.
• Менее строгий и более снисходительный синтаксис гарантирует, что в любом случае пользователь не увидит враждебное уведомление браузера об ошибке вместо содержимого документа.
• Более удобный и облегченный синтаксис, позволяющий разработчикам опускать определенные теги и атрибуты.

Преимущества использования XHTML подхода

• Строгий XML синтаксис способствует созданию более грамотной и последовательной разметки, что облегчает процесс отладки кода.
• Предусматривает непосредственную интеграцию с другими XML словарями, такими как SVG и MathML.
• Позволяет использовать XML процессинг, который некоторые разработчики применяют для решения собственных редакционных и/или публицистических задач.

Что нужно знать при создании приложений с применением HTML5

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

Несомненно, вы уже слышали об этом. Догадываюсь, что, когда вы это услышали, вы заволновались, закатили глаза или пробормотали «с какой стати?» и слегка нахмурились. А может, вы испытали все эти эмоции.

Я не стал бы винить вас за это. HTML5 — интересная штука, и потенциально он действительно способен несколько изменить ту Web, которую мы знаем сейчас, но не более того.

Я сам испытывал подобные эмоции, когда создавал приложения с использованием HTML5.

Тематика по HTML5 весьма широкая, поэтому разобраться в ней трудно, особенно если не знаешь, с чего начать изучение этого интересного нового набора технологий.

Это первая статья из целой серии для журнала «MSDN Magazine», цель которой — дать полную картину того, почему первая фраза в этой статье является правильной (и важной).

На протяжении нескольких месяцев я попытаюсь помочь вам понять, что HTML5 означает для вас — как для веб-разработчика, так и для разработчика, использующего инструментарий и технологии Microsoft.

Я надеюсь упростить некоторые сложности, окружающие HTML5, и развеять многие мифы, возникшие на волне общей шумихи вокруг HTML5.

Я также познакомлю вас с некоторыми средствами HTML5, доступными в настоящее время, и рядом интересных технологий, которые, хоть и не достигли должного уровня зрелости, заслуживают пристального внимания. Наконец, я дам кое-какие рекомендации, которые помогут вам задействовать технологии HTML5 уже сейчас, несмотря на то, что вы все еще ведете разработки с учетом пользователей более старых браузеров.

Если вас интересует HTML5, я помогу превратить этот интерес в идеи, которые вы сможете немедленно реализовать на практике. Если же вы настроены скептически, я помогу понять, в чем заключается важность HTML5. А если вы даже не понимаете, что означает HTML5, не бойтесь: об этом мы поговорим в первой же статье из этой серии.

Что такое HTML5?

К этому моменту вы, вероятно, поняли, что под HTML5 разные люди подразумевают разные вещи. Для некоторых это просто новые теги вроде

Если вам мало этого нового инструментария HTML5, то для ASP.NET MVC недавно вышел пакет ASP.NET MVC 3 Tools Update, объявленный на конференции MIX11 в апреле.

Наряду с различными новыми средствами ASP.NET MVC 3 Tools Update предоставляет возможность использовать HTML5 doctype в новых проектах и помещает Modernizr 1.7 в папку Scripts новых приложений.

Modernizr — это библиотека JavaScript, которая значительно упрощает разработку с применением HTML5; о ней мы поговорим в будущей статье.

Сухой остаток заключается в том, что, хотя HTML5 только появляется в наших браузерах, его официальная поддержка быстро добавляется в инструментарий, и Microsoft даже добавляет поддержку библиотек (вроде Modernizr), разработанных сообществом. Таким образом, вы уже сейчас можете ориентироваться на HTML5 с некоторой помощью со стороны инструментария Microsoft и ожидать, что поддержка HTML5 и в дальнейшем будет расширяться и улучшаться.

«Внедрение» HTML5 в ваши приложения

К этому моменту вы уже поняли, что HTML5 не является единой сущностью, которую можно внедрить или на которую можно перейти одним махом.

Внедрение HTML5 заключается в оценке каждой технологии и принятии решений о том, какие из них подходят для вашего приложения.

Оценивая каждую технологию HTML5 и решая, готова ли она для принятия вами, принимайте во внимание (как минимум) следующие факторы:

• насколько широко реализована данная технология во всех основных браузерах?
• как вы будете внедрять ее и что будете делать с поддержкой для браузеров, не поддерживающих эту технологию?

Первый фактор наиболее важен, и при понимании того, какие браузеры чаще всего используются посетителями вашего сайта, он должен дать четкую картину о подмножестве из ста с лишним спецификаций, которое имеет смысл рассматривать дальше. Это подмножество должно состоять из набора устоявшихся спецификаций, которые можно надежно внедрять для ваших пользователей уже сегодня.

Однако даже с этим набором не следует игнорировать пользователей, не переходящих на более новые браузеры. Если вы ежедневно активно занимаетесь разработкой для своего сайта, то, несомненно, хотя бы примерно представляете доли браузеров, используемых посетителями сайта.

Большинству из нас будет легко увидеть процент пользователей с устаревшими браузерами и прийти к выводу, что внедрение любых технологий HTML5 негативно скажется на этих пользователях.

К счастью, есть такая методика, как «поли-заполнение» («polyfilling»), избавляющая нас от ожидания некоей расплывчатой даты в будущем, когда мы сможем уверенно внедрять HTML5.

Пол Айриш (Paul Irish) (разработчик проектов jQuery и Modernizr) определяет поли-заполнение как «…тонкая прослойка, которая имитирует будущий API и предоставляет выпадающую функциональность для устаревших браузеров».

Эта прослойка подобна шпаклевке для веб-сайтов; она позволяет определить, доступна ли конкретная функция HTML5 пользователю, который в данный момент просматривает ваш сайт, и предоставить ему либо имитацию ее поддержки, либо корректно сократить функциональность сайта.

Наиболее популярная библиотека, использующая поли-заполнение, — Modernizr, библиотека JavaScript, о которой я уже упоминал.

Modernizr предоставляет некоторые базовые средства поли-заполнения для семантической разметки, распознавание поддержки функций браузером для большинства технологий HTML5 и поддержку условного CSS в зависимости от поддерживаемых функций.

Как отмечалось, Modernizr будет предметом обсуждения в следующей статье; кроме того, ее средства (наряду со средствами многих других библиотек поли-заполнения) будут использоваться в примерах на протяжении всей серии статей. Чтобы узнать больше, скачайте Modernizr с сайта modernizr.com.

Когда дело доходит до выбора внедряемых технологий, ваш финальный список может оказаться комбинацией широко поддерживаемых спецификаций и спецификаций, которые потребуют поддержки поли-заполнения для определенных браузеров.

В предстоящих статьях мы обсудим несколько значимых спецификаций — от Geolocation и Forms and Canvas до Web Workers, Web Sockets и IndexedDB. Некоторые из них широко поддерживаются и готовы к использованию уже сегодня, а некоторые (вроде Web Sockets) являются настолько прорывными, что их нельзя игнорировать даже несмотря на то, что на сегодняшний день они еще не устоялись.

Если вы хотите побольше узнать о HTML5 прямо сейчас, могу посоветовать несколько книг по этой тематике. В частности, рекомендую прочитать книги Брюса Лоусона (Bruce Lawson) и Реми Шарп (Remy Sharp) «Introducing HTML5» (New Riders, 2010) и Марка Пилгрима (Mark Pilgrim) «HTML5 Up and Running» (O’Reilly Media, 2010).

Кроме того, обязательно посетите сайт W3C.org, где вы найдете актуальную информацию по всем спецификациям, а также сайты BeautyoftheWeb.com и IETestDrive.

com, чтобы скачать соответственно Internet Explorer 9 и Internet Explorer 10 Platform Preview и узнать больше о поддерживаемых Microsoft технологиях HTML5 в этих браузерах.

Помимо всего прочего, начинайте внедрять HTML5. Web уже никогда не будет прежней, это правда, и вы сможете стать частичкой движущей силы этих перемен, создавая веб-приложения нового поколения с использованием HTML5.

Загрузка HTML-кода Спецификация кода и спецификация CSS — Русские Блоги

• Используйте два пробела вместо Tab (Tab) — это единственный способ обеспечить единогласный дисплей во всех средах.
• Вложенные элементы должны быть отступлены один раз (то есть два пробела).
• Для определения атрибутов убедитесь, что вы используете двойные кавычки, никогда не используете отдельные цитаты.
• Не добавляйте слезу в хвосте самозакрывающего элемента -Спецификация HTML5Понятно, что это необязательно.
• Не опускайте дополнительные конечные теги (например,

Или же）。

Пример:

Hello, world!

HTML5 doctype

Чтобы добавить стандартный режим для каждой HTML-страницы, гарантируется, что он имеет постоянный дисплей в каждом браузере.

Пример:

Атрибут языка

Согласно спецификации HTML5:

Настоятельно рекомендуется указать атрибут LANG для корневого элемента HTML, чтобы установить правильный язык для документа. Это поможет инструмент синтеза речи, определяющий произношение, которое он должен принять, что помогает инструменту перевода определять правила, которые следует наблюдать, когда перевод.

Больше оlangИмущественные знания могут быть отЭто спецификацияКитайцы понимают.

Здесь указан здесьТаблица кода языка。

Т.е. режим совместимости

То есть поддержка через конкретныеТеги, чтобы определить версию IE, которая рисует текущую страницу. Лучше всего установить это, если не существует сильных особых потребностей.edge modeТаким образом, уведомить IE, чтобы принять новейший режим поддерживаемый.

Кодировка символов

Явно объявляя кодировку характера, можно убедиться, что браузер быстро и легко определяет способ рендеринга содержимого страницы. Преимущество этого заключается в том, что вы можете избежать использования символьной сущности в HTML, чтобы все они соответствуют кодированию документов (обычно кодировка UTF-8).

Введенные файлы CSS и JavaScript

Согласно спецификации HTML5, он обычно не требуется при введении файлов CSS и JavaScript.typeАтрибут, потому чтоtext/css с участием text/javascriptОни являются их значениями по умолчанию соответственно.

HTML5 spec links

Практично

Попробуйте следовать стандартам HTML и семантике, не затрагивайте практичность. Попробуйте использовать наименее ярлык и сохранить минимальную сложность.

Заказ недвижимости

Атрибут HTML должен быть расположен в последовательности в соответствии с приведенным ниже порядком для обеспечения читаемости кода.

• class
• id, name
• data-*
• src, for, type, href
• title, alt
• aria-*, role

Класс используется для определения компонентов повторного использования высоты, поэтому он должен быть первым ранжером. Идентификаторы используются для определения определенных компонентов, должны использоваться с осторожностью (например, закладки на странице), поэтому рейтинг второго.

Example link

Логическая собственность

Логические свойства не могут назначить значение при объявлении. Спецификация XHTML требует его назначения, но спецификация HTML5 не нуждается.

• Для получения дополнительной информации, пожалуйста, обратитесь кWhatWG section on boolean attributes：
• Логический атрибут элемента верно, то есть, правда, если нет значения, это ложно.
• в случаенавернякаЧтобы назначить значение для него, см. Спецификацию WhatWG:

Если свойство существует, его значение должно быть пустой строкой или названием спецификации […] свойства […] и не добавляют пустой символ на первом хвосте.

Проще говоря, не назначать значение.

1

Уменьшите количество ярлыков

При записи HTML-кода старайтесь избегать избыточных родительских элементов. Много раз это требует итерации и реконструкции. Пожалуйста, смотрите следующий случай:

JavaScript сгенерировал метку

Этикетка, генерируемая JavaScript, позволяет вам трудно найти, редактировать и уменьшить производительность. Можно избежать избежать его при избежании.

грамматика

• Используйте два пробела вместо Tab (Tab) — это единственный способ обеспечить единогласный дисплей во всех средах.
• Когда пакет для селектора поместите отдельный селектор подряд.
• Для простого в читаемости кода добавьте пространство перед левыми кронштейнами цветов каждого декларативного блока.
• Правильные скобки блока декларации должны использоваться в одиночку.
• Каждое утверждение:Пространство должно быть вставлено.
• Чтобы получить более точные отчеты об ошибках, каждое утверждение должно быть эксклюзивно.
• Все заявления должны закончиться в конце точки с запятой. Замета с запятой за последним утверждением является необязательным, но если этот тосик пропускается, ваш код может быть более вибрацией.
• Для значения атрибута разделенного запятыми каждый запятую должен быть вставлен в пространство (например,box-shadow）。
• а.rgb()、rgba()、hsl()、hsla()Или жеrect() стоило тоговнутреннийПространство за запятой. Это способствует множеству цветовых значений (только количество номеров, без пробелов) из нескольких значений атрибута.
• Для значений атрибутов или цветовых параметров, опущенных менее 1 из десятичного количества десятичных элементов для десятиленников (например,.5Вместо0.5；-.5pxВместо-0.5px）。
• Шестнадцатеричное значение должно быть написано, например,#fffОтказ При сканировании документов, строчные буквы легко различать, потому что их форма легче отличить.
• Попробуйте использовать шестнадцатеричное значение в форме сокращения, например,#fffВместо#ffffff。
• Добавьте двойные цитаты в свойства в селекторе, например,input[type=»text»]。Только в некоторых случаях необязательноОднако для согласованности кода рекомендуется добавлять двойные кавычки.
• Избегайте 0 значений указанных единиц, например,margin: 0;Вместоmargin: 0px;。

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type=»text»] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

Заказ декларации

Соответствующее утверждение атрибута должно быть классифицировано как группа и расположена в порядке ниже:

1. Positioning
2. Box model
3. Typographic
4. Visual

Поскольку позиционирование может удалить элементы из обычного потока документов, можно накрыть стиль модели Box (Box Model), так что рейтинг первым. Модель коробки оценивается вторым, потому что она определяет размер и расположение компонента.

Другие свойства влияют только на компонентыВнутриИли не влияет на первые две группы, поэтому оно позади.

Полный список атрибутов и его расположение, пожалуйста, обратитесь кRecess。

.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;

/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;

/* Typography */
font: normal 13px «Helvetica Neue», sans-serif;
line-height: 1.5;
color: #333;
text-align: center;

/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;

/* Misc */
opacity: 1;
}

Не использовать @import

против По сравнению с этикеткой,@importИнструкции намного медленнее, и увеличено дополнительное количество дополнительных запросов, что также приведет к непредсказуемым вопросам. Альтернативный подход имеет следующее:

• НесколькоЭлемент
• Компилируйте несколько файлов CSS в файл SASS или менее.
• Предоставить функцию слияния файлов CSS через Rails, Jekyll или другую систему

Пожалуйста, обратитесь кСтив Саудерс СтатьиУзнать больше знаний.

Media Query

Поместите средства массовой информации вблизи регулярной основы. Не упаковывайте их в один файл рисунка или помещайте в нижнюю часть документа. Если вы разделите их, вы будете только забыты только в будущем. Типичный пример приведен ниже.

.element { … }
.element-avatar { … }
.element-selected { … }

@media (min-width: 480px) {
.element { …}
.element-avatar { … }
.element-selected { … }
}

Атрибут префикса

При использовании префикса конкретного поставщика, через отступ, значение каждого атрибута выровнена в вертикальном направлении, поэтому его легко редактировать.

В тексте, используйтеText → Edit Each Line in Selection(^ ⌘a). В Sublime Text 2, используйтеSelection → Add Previous Line(^ ⇧ ↑) иSelection → Add Next Line (⌃⇧↓)。

/* Prefixed properties */
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

Однострочное правило

дляТолько одно утверждениеУзор, для удобного чтения и просты в редактировании, рекомендуется поставить оператор в той же строке. Для стилей с несколькими декларациями утверждение должно быть разделено на больше строк.

Ключевым фактором этого является для обнаружения ошибок — например, CSS Checker указывает на ошибку синтаксиса в 183 году. Если это однострочное заявление, вы не будете игнорировать эту ошибку; если вы одна строка декларации, вы должны тщательно проанализировать, чтобы избежать вреда.

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
display: inline-block;
width: 16px;
height: 15px;
background-image: url(../img/sprite.png);
}
.icon { background-position: 0 0; }
.icon-home { background-position: 0 -20px; }
.icon-account { background-position: 0 -40px; }

Краткосрочное состояние декларации недвижимости

В случае, когда все значения должны быть отображены, вы должны попытаться ограничить объявление свойства в использовании формы короткой записи. Общее злоупотребление злоупотреблением заявленным утверждением атрибута заключается в следующем:

• padding
• margin
• font
• background
• border
• border-radius

В большинстве случаев нам не нужно указывать все значения для объявления о недвижимости истории.

Например, элемент заголовка HTML должен быть установлен только, и, следовательно, необходимо только перезаписать эти два значения при необходимости.

Чрезмерное использование декларации недвижимости, которая вызывает путаницу кода и принести ненужное покрытие для атрибуты значений, чтобы вызвать неожиданные побочные эффекты.

MDN (сеть разработчика Mozilla) предыдущая очень хорошаяshorthand propertiesСтатья полезна для пользователей, которые менее знакомы с декларацией атрибута дисциплины и их поведением.

/* Bad example */
.element {
margin: 0 0 10px;
background: red;
background: url(«image.jpg»);
border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url(«image.jpg»);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}

Вложен в меньшее и сад

Избегайте ненужных вложенных. Это потому, что хотя вы можете использовать вложенные, это не значит, что вложенность следует использовать. Вложенные вложенные только тогда, когда стиль должен быть ограничен в родительском элементе (то есть селектор потомков), и существует множество элементов, которые требуют вложенных элементов.

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
> th { … }
> td { … }
}

Комментарий

Код написан и поддерживается людьми. Убедитесь, что ваш код может быть саморазделением, заметки хорошим и легко понять. Хорошие комментарии кода могут сообщать контекстные отношения и кодовые цели. Не просто успокоить компоненты или имена классов.

Для более длительных аннотаций обязательно напишите полное предложение; для общих аннотаций вы можете написать краткую фразу.

/* Bad example */
/* Modal header */
.modal-header {
…
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
…
}

Класс имени

• Там могут быть только строчные буквы и тире (не подчеркивание, ни номенклатура Hump) могут происходить только в имени класса. DARM следует использовать для именования соответствующего класса (аналогично пространству имен) (например,.btn с участием .btn-danger）。
• Избегайте чрезмерного прекращения..btnПредставительbuttonНо.sНе могу выразить какое-либо значение.
• Имя класса должно быть максимально коротким, и смысл понятен.
• Используйте значимые имена. Используйте организованные или целенаправленные имена, не используйте имя презентации (презентационные).
• На основе ближайшего класса родительского или базового класса в качестве префикса нового класса.
• Использовать.js-*Класс для выявления поведения (относительно стилей) и не включает эти классы в файл CSS.

Название для SASS и менее переменные также могут обратиться к различным спецификациям, перечисленным выше.

/* Bad example */
.t { … }
.red { … }
.header { … }

/* Good example */
.tweet { … }
.important { … }
.tweet-header { … }

Селектор

• Для универсальных элементов используйте класс, который способствует рендеризации оптимизации производительности.
• Для компонентов, которые часто появляются, избегайте использования селектора свойств (например,[class^=»…»]). Производительность браузера зависит от этих факторов.
• Селектор должен быть максимально коротким и ограничить количество элементов, которые составляют селектор. Рекомендуется не превышать 3.
• ТолькоКласс ограничен ближайшим родительским элементом (например, префикс аналогичен пространству имен).

Расширенное чтение:

• Scope CSS classes with prefixes
• Stop the cascade

/* Bad example */
span { … }
.page-container #stream .stream-item .tweet .tweet-header .username { … }
.avatar { … }

/* Good example */
.avatar { … }
.tweet-header .username { … }
.tweet .avatar { … }

Организация кода

• Принимая компоненты в качестве сегмента организации.
• Разработать последовательные спецификации аннотации.
• Разделяя код в блок с использованием последовательного пустого символа, который способствует увеличению документа.
• Если используются несколько файлов CSS, он разделен в соответствии со компонентами вместо страницы, поскольку страница будет реорганизована, и компоненты будут перемещены только.

/*
* Component section heading
*/

.element { … }

/*
* Component section heading
*
* Sometimes you need to include optional context for the entire component.

Do that up here if it's important enough.
*/

.element { … }

/* Contextual sub-component or modifer */
.element-heading { … }

Конфигурация редактора

Установите редактор в соответствии с конфигурацией ниже, чтобы избежать распространенных несоответствий и различий:

• Используйте два пробела вместо вкладок (для использования пробелов используются мягкие вкладки).
• При сохранении файлов удалите пустой символ в хвосте.
• Установка кодировки файлов — UTF-8.
• Добавьте пустую строку в конце файла.

Обратитесь к документации и добавьте эту информацию о конфигурации в проект.editorconfigДокумент. Например:Экземпл .EditorConfig в BootstrapОтказ Для получения дополнительной информации, пожалуйста, обратитесь кabout EditorConfig。