Перевод: Влад Мержевич
1. Это не одна большая вещьВы можете спросить: «Как я могу использовать HTML5, если старые браузеры его не поддерживают?». На самом деле этот вопрос ошибочен. HTML5 не одна большая вещь, это набор разных возможностей. Вы не можете написать «поддерживается HTML5», потому что это противоречит здравому смыслу, но можете определить поддержку некоторых технологий HTML 5, таких как рисование, видео и геолокация.
Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML5 не просто определяет тег , он также сообщает DOM обо всех видео-объектах. Вы можете использовать интерфейс прикладного программирования (API) для поддержки разных видеоформатов, проигрывания ролика, его остановки, отключения звука, отслеживания загрузки файла и многого другого построенного на взаимодействии пользователя и тега .
2. Вам не надо откидывать имеющееся
Нравится вам это или нет, но вы не сможете отрицать, что HTML4 это наиболее удачный формат разметки. HTML5 основывается на этой удаче, поэтому вам не придется выкидывать имеющуюся разметку и переучиваться. Если ваше веб-приложение сегодня работает в HTML4, оно также будет работать в HTML5 и точка.
Вот конкретный пример: HTML5 поддерживает все элементы форм, что и HTML4, а также включает новые элементы. Некоторые из них, вроде ползунков и выбора даты, напрашивались давно, другие не столь очевидны. К примеру, поле для ввода адреса электронной почты это рядовое текстовое поле, но современные браузеры для этого поля позволяют упростить набор адреса. Старые браузеры не поддерживают input type="email" , поэтому покажут обычное текстовое поле, и формы будут работать с ним без всяких дополнительных ухищрений. Это позволяет вам уже сегодня улучшить свои формы, даже если некоторые пользователи до сих пор привязаны к IE6.
3. Легко начать
«Обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент
должен всегда располагаться в первой строке кода любой веб-страницы. Предыдущая версия HTML определяла несколько вариантов доктайпа и выбор правильного был делом нелегким. В HTML5 есть только один доктайп:
Смена доктайпа не разрушает существующую верстку, потому что все теги, определенные в HTML4 также поддерживаются и в HTML5. Ко всему прочему, вы можете использовать, и корректно, новые семантические элементы вроде , , и .
4. Это уже работает
Если вы желаете сделать рисунок, проигрывать видео, улучшить функциональность форм или построить оффлайновое веб-приложение, то обнаружите, что HTML5 прекрасно поддерживается браузерами. Firefox, Safari, Chrome и мобильные браузеры работают с тегом
, видео, геолокацией, локальным хранилищем и др. Google понимает аннотацию микроданных. Даже Майкрософт, который обычно тащится в хвосте стандартов, поддерживает основные возможности HTML5 в своем браузере Internet Explorer 9.
Все разделы этой книги содержат таблицу совместимости популярных браузеров. Гораздо важнее, что включено обсуждение вариантов для поддержки старых браузеров. Такие технологии HTML5 как геолокация и видео были реализованы с помощью плагинов вроде Gears или Flash. Другие возможности, вроде рисования, могут быть эмулированы через JavaScript. Эта книга рассказывает, как использовать встроенные функции современных браузеров без отбрасывания старых версий.
5. Он уже здесь
Тим Бернерс-Ли изобрел всемирную паутину в начале девяностых. Позже он основал W3C для поддержки веб-стандартов, организацию с более чем пятнадцатилетней историей. Вот что объявил W3C о будущем веб-стандартов в июле 2009:
Сегодня руководство заявило, что когда устав Рабочей Группы XHTML 2 завершится в конце 2009 года, он не будет продлен. Это сделано для повышения ресурсов рабочей группы по HTML. W3C надеется, что это ускорит продвижение HTML5 и разъясняет позицию W3C относительно будущего HTML.
HTML5 уже здесь. Давайте погрузимся в него.
27.01.14 15.5K ВведениеЯ, разработчик ASP.NET MVC , недавно искал работу, и на собеседовании много вопросов из тех, что мне задавали, касались HTML5 и его особенностей.
Поэтому ниже приводятся 40 важных вопросов, которые помогут вам блеснуть знаниями по HTML5 .
Эти вопросы не являются ключом к успеху при поиске работы, но они, несомненно, помогут вам ориентироваться в теме.
Удачной охоты.
Какая связь между SGML, HTML, XML и XHTML?SGML (Standard generalized markup language — стандартный обобщённый язык разметки) – это стандарт, который определяет разметку документа.
HTML – это язык разметки, который описывается с помощью SGML.
Итак, с помощью SGML было создано DTD (определение типа документа), на которое ссылается и которого должен придерживаться HTML. Поэтому вы всегда можете найти декларацию «DOCTYPE » в начале страницы HTML, которая определяет, какое DTD будет использовать браузер при разборе кода страницы.
Разбор кода по стандарту SGML был связан с определёнными трудностями, поэтому был создан XML, чтобы облегчить эту процедуру. XML использует SGML.
Например, в SGML вы должны использовать открывающие и закрывающие теги, тогда как в XML вы можете использовать самозакрывающиеся теги, которые закрываются автоматически (например, “” ).
XHML был создан из XML и использовался в HTML 4.0
. Поэтому, например, в HTML, основанном на SGML, тег
недопустим, а в XHTML он допускается. Вы можете использовать XML определение документа, как показано в следующем примере:
Вкратце, SGML стоит в основе всего. Старые версии HTML основаны на SGML, а HTML 4.0 использует XHTML, построенный на основе XML. Что такое HTML 5?
HTML 5 – это новый стандарт HTML, главной целью которого является предоставление любого контента без использования дополнительных плагинов, таких как Flash, Silverlight и т.д. Он содержит всё необходимое для отображения анимации, видео, богатого графического интерфейса и прочего.
HTML5 – это результат совместной работы World Wide Web Consortium (W3C) и Web Hypertext Application Technology Working Group (WHATWG).
В HTML 5 нам не нужно DTD. Почему?HTML 5 не использует SGML или XHTML. Это полностью новая разработка, поэтому вам не нужно ссылаться на DTD. В HTML 5 вам нужно использовать следующую декларацию doctype, которая позволяет браузеру идентифицировать документ как HTML 5.
Если я не вставлю в документ , будет ли работать HTML 5?
Нет, браузер не сможет идентифицировать документ как HTML 5, и теги HTML 5 не будут работать корректно.
Практически все браузеры, как Safari, Google Chrome, Firefox, Opera, Internet Explorer поддерживают HTML 5.
Как изменилась структура страницы при переходе с HTML 4 или предыдущих версий на HTML 5?
Обычно веб-страница содержит заголовки, подвал, навигацию, основной контент и боковой блок. Поэтому когда мы хотим представить эти блоки в HTML 4 с подходящим наименованием, мы, скорее всего, будем использовать теги DIV . Но в HTML 5 введены более понятные элементы для этих блоков, что позволило сделать код HTML более читаемым.
Ниже приведено описание этих элементов HTML 5 из разметки на рисунке:
- : Представляет блок заголовка страницы;
- : Подвал страницы;
- : Навигационные элементы страницы;
- : Основной контент страницы (статья);
- : Используется внутри статьи, чтобы разделить статью на секции;
- : Представляет боковой блок страницы.
Элемент datalist в HTML 5 помогает реализовать функцию автозаполнения в поле для ввода, как показано на рисунке ниже:
Ниже приведён код HTML для элемента DataList:
Какие новые элементы форм введены в HTML 5?
В HTML 5 введены десять новых важных элементов форм:
- Color;
- Date;
- Datetime-local;
- Email;
- Time;
- Range;
- Telephone;
- Number;
- Search.
Давайте разберём эти элементы по порядку.
Если вы хотите отобразить диалоговое окно выбора цвета:
Если вы хотите отобразить диалоговое окно календаря:
Если вы хотите отобразить календарь с локальным временем:
Если вы хотите создать HTML поле для ввода с проверкой адреса электронной почты, можно задать тип поля «email »:
Для проверки URL-адреса используйте тип «url », как показано ниже:
Если вы хотите отобразить поле для ввода чисел в заданном диапазоне, используйте тип «number »:
Если вы хотите отобразить ползунок, используйте тип «range »:
Хотите сделать поле для поиска:
Хотите принимать только время:
Если вы хотите сделать поле для ввода номеров телефона:
Что такое элемент output в HTML 5?Элемент output требуется, когда вы хотите отобразить сумму двух введённых чисел в виде текста.
Например, у вас есть два поля для ввода и вы хотите сложить числа из этих двух полей и отобразить их сумму в виде текста.
Ниже приведён пример использования элемента output в HTML 5:
+ =
Вы можете заменить «parseInt » на «valueAsNumber » для простоты. Также вы можете использовать атрибут «for» элемента output для повышения читаемости.
Что такое SVG?SVG означает scalable vector graphics (масштабируемая векторная графика). Это текстовой язык графики, с помощью которого можно рисовать изображения в виде текста, линий, точек и т.п., что позволяет создавать лёгкие и быстро обрабатываемые браузером изображения.
Можно ли сделать простое SVG изображение, используя HTML 5?Допустим, мы хотим отобразить простую линию, как показано на рисунке ниже, используя HTML 5 и SVG:
Ниже приведён код HTML 5. Вы можете видеть тэг SVG, который заключает в себя тэг line , отображающий линию:
Что такое канва в HTML 5?
Канва – это область HTML документа, в которой вы можете рисовать.
Итак, как же нарисовать простую линию при помощи канвы?
- Определите область канвы;
- Получите доступ к контексту канвы;
- Нарисуйте изображение.
Чтобы определить область канвы, вам потребуется следующий HTML код. Он определяет область, в которой вы можете рисовать:
Получение доступа к области канвыПрежде чем приступить к рисованию в области канвы, нужно получить ссылку на контекст канвы. Ниже приведён код, позволяющий это сделать:
var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");
Рисование изображенияТеперь, когда у вас есть доступ к контексту объекта, можно начинать рисовать по канве. Поэтому сначала вызываем метод «move » и начинаем с точки 10, 10, используем метод «line », чтобы нарисовать линию, и, наконец, применяем к ней штриховку:
ctx.moveTo(10,10); ctx.lineTo(200,100); ctx.stroke();
Ниже приведён полный код:
function DrawMe() { var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d"); ctx.moveTo(10,10); ctx.lineTo(200,100); ctx.stroke(); }
Вы должны получить результат, как на следующем рисунке:
Замечание : Если вы посмотрите на предыдущие два вопроса, то поймёте, что и канва, и SVG применяются для отображения графики в браузере. Поэтому задавая этот вопрос, интервьюер хочет узнать, когда вы будете использовать то или другое .
| SVG | Канва |
| SVG действует по принципу «нарисовал и запомнил ». Другими словами любая фигура, нарисованная с помощью SVG, запоминается, допускает манипуляции над собой, и браузер может нарисовать её снова. | Канва действует по принципу «нарисовал и забыл ». После того, как что-то нарисовано, вы не можете получить доступ к этому изображению и манипулировать им. |
| SVG подходит для создания графики такой, как в программах CAD, где пользователь может манипулировать однажды нарисованным изображением. | Канва хороша для сценариев «нарисовал и забыл », таких как анимация и игры. |
| Медленный формат, т.к. ему требуется запоминать координаты для будущих манипуляций. | Более быстрый формат, т.к. нет надобности запоминать что-либо. |
| Мы можем создать обработчик событий, связанный с нарисованным объектом. | В этом случае мы не можем привязать обработчик событий к объектам рисунка, т.к. у нас нет ссылки на них. |
| Не зависит от разрешения. | Зависит от разрешения. |
HTML 5 код прямоугольника с помощью SVG
HTML 5 код прямоугольника с помощью канвы:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.rect(20,20,150,100); ctx.stroke();
HTML 5 код круга с помощью SV:
HTML 5 код круга с помощью канвы:
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = "green"; context.fill(); context.lineWidth = 5; context.strokeStyle = "#003300"; context.stroke();
Манипуляции с нарисованным изображением в SVG:
var timerFunction = setInterval(DrawMe, 20); alert("ddd"); function DrawMe() { var circle = document.getElementById("circle1"); var x = circle.getAttribute("cx"); var newX = 2 + parseInt(x); if(newX > 500) { newX = 20; } circle.setAttribute("cx", newX); }
Что такое селекторы в CSS?Селекторы помогают выбрать элемент, к которому вы хотите применить стиль. В качестве примера ниже приведён простой стиль «intro», который применяет красный цвет фона к HTML элементу:
.intro { background-color: red; }
Чтобы применить стиль «intro » к элементу div, мы можем использовать атрибут «class », как показано в следующем блоке кода:
My name is Shivprasad koirala.
I write interview questions.
Как можно применить стиль CSS, используя значение ID?Допустим, у вас есть HTML тэг параграфа с id «mytext », как показано в следующем примере:
Это вопросы по HTML, которые могут задать на собеседовании.
Вы можете создать стиль, используя селектор «# » и значением свойства «id », чтобы применить стили CSS к соответствующему тэгу параграфа. Поэтому, чтобы применить стиль к элементу «mytext » мы можем использовать селектор «#mytext », как показано ниже:
#mytext { background-color: yellow; }
Коротко рассмотрим некоторые важные селекторыУстановка жёлтого фона для всех параграфов и заголовков h1 :
p,h1 { background-color:yellow; }
Установка жёлтого фона для всех параграфов внутри элемента div :
div p { background-color: yellow; }
Установка жёлтого фона для всех параграфов, следующих за элементом div :
div+p { background-color: yellow; }
Установка жёлтого фона для всех элементов с атрибутом «target »:
a { background-color: yellow; } ASP.NET interview questions c# interview questions .NET interview questions with answers
Установка жёлтого фона полей для ввода при получении ими фокуса:
input:focus { background-color: yellow; }
Установка стиля гиперссылок, в зависимости от их статуса:
a:link {color: green;} a:visited {color: green;} a:hover {color: red;} a:active {color: yellow;}
Как использовать разбивку контента по колонкам в CSS?Разбивка по колонкам в CSS помогает вам разделить ваш текст на вертикальные колонки.
Например, посмотрите на статью из журнала на рисунке ниже, представляющую собой большой текст, который нужно разбить на три колонки с границей между ними.
Здесь нам на помощь придёт разбивка по колонкам HTML 5.
Чтобы реализовать разбивку по колонкам, вам потребуется определить следующее:
На сколько колонок требуется разбить текст?
Для определения количества колонок используется свойство column-count . Префиксы «webkit » и «moz » необходимы для браузеров Chrome и Firefox соответственно.
Moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari и Chrome */ column-count:3;
Какой промежуток сделать между колонками?
Moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari и Chrome */ column-gap:20px;
Хотите ли вы нарисовать линию между колонками, и если да, какой толщины?
Moz-column-rule:4px outset #ff00ff; /* Firefox */ -webkit-column-rule:4px outset #ff00ff; /* Safari и Chrome */ column-rule:6px outset #ff00ff;
Ниже приведён полный код примера:
.magazine { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:20px; -moz-column-rule:4px outset #ff00ff; /* Firefox */ -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */ column-rule:6px outset #ff00ff; }
Затем вы можете применить этот стиль к тексту, используя атрибут «class »:
Здесь следует ваш текст, который вы хотите разбить на 3 колонки:
Расскажите о блочной модели CSSБлочная модель CSS – это прямоугольное пространство вокруг элемента HTML, в котором определяются границы, поля и отступы.
Границы – определяют максимальную область, в которой будет содержаться элемент. Мы можем сделать границу видимой, невидимой, определить высоту и ширину элемента и т.п. Поля – определяют расстояния между границами и элементом.
Отступы – определяют расстояния между границами и соседними элементами.
В качестве примера, ниже приведён простой CSS код, который определяет блок и значения границ, полей и отступов:
Поэтому, если мы применим этот код CSS к элементу div, приведённому в следующем блоке кода, результат будет такой, как показано на рисунке ниже. Я добавил элементы «Some text » и «Some other text », чтобы продемонстрировать свойство «margin » (отступ).
Some text Some other text
Здесь интервьюер ожидает от вас рассказа об одном из двух эффектов, появившихся в CSS 3.
Ниже приведены оба эффекта:
Эффект тени текста
Specialtext { text-shadow: 5px 5px 5px #FF0000; }
Эффект разрыва слов:
.breakword { word-wrap: break-word; }
Рассмотрим следующий «тяжёлый » цикл for , который выполняется миллиард раз:
function SomeHeavyFunction() { for (i = 0; i < 1000000000; i++) { x = i + x; } }
Допустим, этот код исполняется при нажатии на кнопку HTML формы. Исполнение этой функции синхронное. Другими словами браузер будет ждать окончания цикла.
В итоге это может привести к зависанию браузера и сообщению об ошибке, как показано на рисунке ниже:
Поэтому если бы мы могли поместить этот тяжёлый цикл в файл JavaScript и запустить его асинхронно, тогда браузеру не пришлось бы ждать его завершения, и мы бы получили более отзывчивое приложение.
Для этого и предназначена технология web workers , позволяющая исполнять файлы JavaScript асинхронно.
Какие ограничения накладываются на поток Web Worker?Потоки web worker не могут изменять HTML элементы, глобальные переменные и некоторые свойства окон, такие как window.location . Вы можете использовать типы данных javascript, вызовы XMLHttpRequest и прочее.
Так как же создать поток web worker в JavaScript?Чтобы создать поток web worker, мы должны передать имя файла JavaScript в конструктор Worker.
var worker = new Worker("MyHeavyProcess.js");
Чтобы отправить сообщение объекту web worker , можно использовать метод «postMessage », как в приведённом ниже коде:
worker.postMessage();
Когда web worker посылает сообщение, мы можем получить его на вызывающей стороне с помощью события «onmessage».
worker.onmessage = function (e) { document.getElementById("txt1").value = e.data; };
Тяжёлый цикл помещён в javascript файл «MyHeavyProcess.js », ниже приведён его код.
Когда этот код пожелает отправить сообщение, он использует метод «postMessage », а любое сообщение, полученное от вызывающей стороны, получается при помощи события «onmessage »:
var x =0 self.onmessage = function (e) { for (i = 0; i < 1000000000; i++) { x = i + x; } self.postMessage(x); };
Как уничтожить объект web worker? Зачем в HTML 5 введены события server-sent?Одной из наиболее частых потребностей в сетевом мире является получение обновлений с сервера. Например, в приложении, отображающем биржевые сводки, браузер должен регулярно получать последние котировки с сервера.
Поэтому, чтобы реализовать этот тип запросов, разработчики обычно пишут некоторый pull-код, который отправляет запросы на сервер и получает оттуда данные через определённые интервалы времени. Это хорошее решение, но оно забивает сеть множеством запросов, а также добавляет нагрузку на сервер.
Поэтому вместо pull-запросов было бы здорово иметь какое-нибудь push-решение. Проще говоря, когда сервер получает обновление, он рассылает его браузерам клиентов. Это может быть достигнуто с помощью «SERVER-SENT СОБЫТИЙ ».
Сначала браузер должен связаться с источником на сервере, который будет посылать обновления. Допустим, у нас есть страница «stock.aspx », которая рассылает обновления котировок.
Чтобы связаться со страницей, мы должны использовать привязку к объекту источника события, как показано в коде ниже:
var source = new EventSource("stock.aspx");
Нам также потребуется привязать функцию, которая будет получать сообщения, когда сервер будет рассылать обновления. Для этого нам нужно привязать функцию к событию «onmessage », как показано в следующем коде:
source.onmessage = function (event) {
document.getElementById("result").innerHTML += event.data + "
";
};
Наконец, со стороны сервера нам нужно рассылать события. Ниже приведён список важных событий, с командами, которые должны рассылаться со стороны сервера.
Например, если мы хотим отправить данные, ниже приведён код ASP.NET , чтобы сделать это. Пожалуйста, обратите внимание, что заголовок «ContentType » установлен в «text/event-stream »:
Response.ContentType="text/event-stream"; Response.Expires=-1; Response.Write("data: " + DateTime.Now.ToString()); Response.Flush();
Чтобы попросить клиент повторить запрос через 10 секунд.
Response.Write("retry: 10000");
Если вы хотите привязать обработчик события на стороне клиента, используйте метод «addEventListener », как показано ниже.
source.addEventListener("message", function(e) { console.log(e.data); }, false);
Следующее сообщение сервера вызовет javascript функцию «message »:
event: message data: hello
Расскажите о концепции локального хранилища в HTML 5Часто нам нужно хранить информацию о пользователе на его локальном компьютере. Допустим, пользователь наполовину заполнил большую форму, и неожиданно пропадает интернет соединение.
Поэтому хорошо было бы хранить эту информацию локально у пользователя, а когда интернет соединение восстановится, пользователь использовал бы её и отправил на сервер.
Современные браузеры имеют хранилище, называемое «Локальным хранилищем » («Local storage »), где вы можете хранить эту информацию.
Как мы можем добавлять и удалять данные из локального хранилища?Данные добавляются и удаляются из локального хранилища с помощью пары «ключ-значение ». Ниже приведён пример кода добавления страны «India » с ключом «Key001 »:
localStorage.setItem(“Key001”,”India”);
Получить данные из локального хранилища можно с помощью метода «getItem », передав ему значение ключа:
var country = localStorage.getItem(“Key001”);
Также вы можете хранить объекты JavaScript, как показано ниже:
var country = {}; country.name = “India”; country.code = “I001”; localStorage.setItem(“I001”, country); var country1 = localStorage.getItem(“I001”);
Если вы хотите хранить данные в формате JSON, вы можете использовать функцию «JSON.stringify »:
localStorage.setItem(“I001”,JSON.stringify(country));
Какой срок жизни у локального хранилища?Локальное хранилище не имеет срока жизни. Данные будут храниться до тех пор, пока пользователь не удалит их из своего браузера, либо вы не удалите их, используя код JavaScript.
В чём разница между локальным хранилищем и cookies?| Cookies | Локальное хранилище | |
| Сторона клиента / Сторона сервера | Данные доступны как на стороне клиента, так и на стороне сервера. Cookies пересылаются на сервер при каждом запросе | Данные доступны только на стороне браузера клиента. Сервер не может получить доступ к данным локального хранилища до тех пор, пока они не отправлены на сервер методом POST или GET |
| Размер | 4095 байт для каждой cookie | 5 Мб для каждого домена |
| Срок хранения | Cookies имеют срок хранения. После истечения этого срока, cookie удаляются | Срока хранения не существует. Данные будут храниться до тех пор, пока пользователь не удалит их из своего браузера, либо вы не удалите их, используя код JavaScript |
Хранилище сессии похоже на локальное хранилище, но данные действительны на протяжении сессии. Проще говоря, данные удаляются, как только вы закрываете браузер.
Чтобы создать хранилище сессии, вам нужно использовать конструкцию «sessionStorage.имяпеременной». В следующем коде мы создаём переменную «clickcount ».
Если вы обновите страницу в браузере, счётчик увеличится. Но если вы закроете браузер и откроете его снова, переменная «clickcount » снова установится в ноль:
if(sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount = 0; }
В чём разница между хранилищем сессии и локальным хранилищем?Данные в локальном хранилище сохраняются навсегда, а в хранилище сессии только на период работы браузера. Как только браузер закрывается, данные из хранилища сессии теряются.
Что такое WebSQL?WebSQL – это реляционная база данных, работающая на стороне браузера клиента. Внутри браузера есть реляционная СУБД, в которой вы можете выполнять SQL запросы.
Является ли WebSQL частью спецификации HTML 5?Нет. Многие относят его к HTML 5, но WebSQL не является частью спецификации HTML 5. Спецификация основана на SQLite.
Так как же можно использовать WebSQL?Для начала нам нужно открыть базу данных, с помощью функции «openDatabase », как показано ниже. Первый аргумент – это имя базы данных, далее версия, простое текстовое название и размер базы данных.
var db=openDatabase("dbCustomer","1.0","Customer app’, 2 * 1024 * 1024);
Выполнять запросы можно с помощью функции «transaction », вызывая внутри неё метод «executeSql »:
db.transaction(function (tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS tblCust(id unique, customername)"); tx.executeSql("INSERT INTO tblcust (id, customername) VALUES(1, "shiv")"); tx.executeSql("INSERT INTO tblcust (id, customername) VALUES (2, "raju")"); }
В случае если вы выполняете запрос «select », вы получаете данные в коллекцию «results », которую можно обходить и отображать результаты на странице:
db.transaction(function (tx) { tx.executeSql("SELECT * FROM tblcust", , function (tx, results) { for (i = 0; i < len; i++) { msg = "
" + results.rows.item(i).log + "
"; document.querySelector("#customer).innerHTML += msg; } }, null); }); Что такое кэш приложения в HTML5?Одной из наиболее востребованных функций для конечного пользователя является работа в автономном режиме. Другими словами, если соединение с интернетом недоступно, страница должна возвращаться из кэша браузера, и кэш приложения поможет вам в этом.
Кэш приложения помогает вам определить, какие файлы должны быть кэшированы, а какие нет.
Так как же нам реализовать кэш приложения в HTML 5?Нам необходимо создать файл «манифеста ». Файл «манифеста » помогает вам определить, как должно работать кэширование. Ниже приведена структура файла «манифеста »:
CACHE MANIFEST # version 1.0 CACHE: Login.aspx
- Все файлы «манифеста» начинаются со строки CACHE MANIFEST;
- # (хэш тэг) помогает указать версию файла кэша;
- Команда CACHE определяет, какие файлы должны быть кэшированы;
- Заголовок «ContentType» файла должен быть «text/cache-manifest».
Ниже приведён манифест кэша, выведенный с помощью ASP.NET C#:
Response.ContentType = "text/cache-manifest"; Response.Write("CACHE MANIFEST n"); Response.Write("# 2012-02-21 v1.0.0 n"); Response.Write("CACHE: n"); Response.Write("Login.aspx n"); Response.Flush(); Response.End();
После того, как манифест кэша создан, следующий этап – указать ссылку на файл манифеста на странице HTML, как показано ниже:
Когда эта страница открывается впервые, она добавляется в кэш приложения браузера и в случае потери связи с сервером, страница возвращается из кэша приложения.
Как обновить кэш приложения браузера?Кэш приложения обновляется при смене номера версии, указанного после тэга «# », как показано в следующем коде:
CACHE MANIFEST # version 2.0(new) CACHE: Login.aspx Aboutus.aspx NETWORK: Pages.aspx
Что такое fallback в кэше приложения?Команда fallback в кэше приложения помогает вам указать файл, который должен быть отображён, когда сервер недоступен.
Например, в манифесте, приведённом ниже, мы говорим, что если кто-то заходит в «/home», когда сервер недоступен, то должна быть возвращена страница «homeoffline.html »:
FALLBACK: /home/ /homeoffline.html
Что такое network в кэше приложения?Команда network определяет файлы, которые не должны быть кэшированы. Например, приведённый ниже код говорит, что страница «home.aspx» никогда не должна кэшироваться, и не должна быть доступна в автономном режиме:
NETWORK: home.aspx
Данная публикация представляет собой перевод статьи «40 important HTML 5 Interview questions with answers » , подготовленной дружной командой проекта
Хорошо Плохо
Это — не статья для супер-гуру-вебмастеров. И даже не для начинающих веб-разработчиков. Эта статья задумывалась как памятка об HTML5 для журналистов и аналитиков.
Здесь найдут ответы на свои насущные вопросы журналисты, копирайтеры и другие неспециалисты в области веб-дизайна, которым для работы просто необходимо знать принципы HTML5, но нет возможности вникать в технические подробности использования этого замечательного языка.
Также важно не забывать, что так называемые "демо-HTML» с самим HTML5 не имеют ровным счетом ничего общего. Например, во многом из Google Doodles используется DHTML — технология HTML 4 начала 2000х.
Зачем придумали HTML5?HTML4 трещал по швам под напором новых видов приложений. Многие вещи были просто недоступны и требовали плагинов типа Adobe Flash или Microsoft Silverlight. Приходилось идти на всяческие уловки и ухищрения, использовать нестандартные, недокументированные приемы, что было не очень-то надежной основой для сайтов, созданных для заработка.
Как много браузеров поддерживают HTML5?Смотря как посмотреть. Если исходить из того, что HTML5 произошел от HTML4, то все барузеры поддерживают какие-то свойства HTML5.
А с другой стороны, если вы хотите знать, какие браузеры содержат все свойства ядра HTML5 — то ни один. Они все обеспечивают выполнение некоторых частей спецификации (которая насчитывает более 700 страниц), но ни один не поддерживает все одновременно.
Если отбросить все несущественное, то все современные барузеры примерно в равной степени поддерживают HTML5, хоть они и добавляют поддержку тех или иных свойств в разное время.
Кто является движущей силой HTML5?Началось все в 2004 году, в Opera, под руководством Яна Хиксона. Постепенно присоединились и другие браузеры. Хиксон ушел из Оперы в Google, где продолжает работать над спецификацией.
Будет справедливо сказать, что производители браузеров совместно координируют работу над спецификацией, равно как и W3C и многие другие организации и частные лица. Говоря обобщенно, процессом руководят потребности веб-разработчиков.
Кто пользуется HTML5?Множество людей и компаний: Boston Globe Newspaper ; Nationwide Building Society , Yell.com и сотни других. На HTML5gallery.com собрано множество сайтов, применяющих HTML5-технологии.
Когда будет завершена работа над HTML5?Возможно, в 2012 году. А может и в 2022. Это не так важно, важно другое: он сегодня уже поддерживается браузерами, а, следовательно, мы можем использовать его уже сегодня.
Сказать, что мы не можем пользоваться HTML5, потому что его развитие не завершено — это все равно, что сказать, что мы не можем говорить на русском языке, потому что он все еще развивается.
Правда ли, что HTML5 несовместим с Internet Explorer?Абсолютная ерунда. IE9 хорошо поддерживает HTML5. В более старые браузеры можно добавить поддержку некоторых API с помощью JavaScript -технологии polyfilling, а также плагинов Flash и Silverlight. Элемент canvas может работать некорректно в версиях IE ниже 9. В основном, причиной проблем в старых браузерах является медленный движок JavaScript. Для отображения видео в старых браузерах можно использовать резервный Flash-вариант.
Стоит отметить, что многие возможности HTML5, такие, как атрибут contenteditable, позволяющий пользователю редактировать содержимое объекта, были придуманы Microsoft и включены уже в IE5.
Правда ли, что HTML5 предназначен для мобильных устройств?Совершенно нет. В основе HTML5 лежат определенные принципы разработки , один из которых гласит о повсеместном его применении:
«Элементы должны разрабатываться для повсеместного использования... Элементы, по возможности, должны работать независимо от платформы, устройства и носителя.»
С другой стороны, есть особенности HTML5, которые особенно полезны в свете использования мобильных устройств. Если рассматривать «настоящий» HTML5, очень полезной окажется, к примеру, возможность продолжать работать с сайтом в оффлайне с помощью технологии Application Cache (“Appcache”).
Также преимуществом является возможность использовать элемент canvas для отображения анимации устройствами, которые по той или иной причине не могут использовать Flash.
Если рассматривать HTML5 в значении «новые супер-веб-технологии», то огромным плюсом является геолокация.
Вытеснит ли HTML5 Adobe Flash?Нет — по крайней мере, я на это надеюсь. Многие годы Flash оставался единственной возможностью внедрить видео на страницу. Теперь, с появлением HTML5, появилось соперничество, в котором будут развиваться обе технологии, что просто замечательно для разработчиков.
Apple приняли решение не включать поддержку Flash своими iOS устройствами, что дает огромный толчок видео HTML5. Однако, стоит заметить, что iOS — не самая лучшая платформа и для HTML5.
Flash в любом случае остается полезным кросс-браузерным инструментом. к тому же, следует понимать, что Flash — это больше, чем просто видео. Некоторые простые его функции, используемые в играх, перехвачены HTML5 canvas, а часть примитивных анимаций, для которых он ранее использовался, перекочевала в CSS3. Однако, из соображений удобства создателей тонкой анимации, используемой в играх и мультфильмах, конечно, лучше пользоваться Flash , в котором куда более удобный интерфейс, упрощающий разработчикам многие рабочие моменты. Со временем, когда будут разработаны удобные оболочки для работы с canvas это изменится, но еще не сегодня и не завтра.
Комментарии4 октября 2011 в 22:29
html1 *THUMBS UP*
Olga
Ответ:
октября 5, 2011 at 11:26 дп
Wdtime.ru
Ответ:
февраля 20, 2016 at 10:32 пп
Полный список структурных тегов HTML 5 — wdtime.ru/blog/strukturnye-tegi-html-5
5 октября 2011 в 14:01
емеля — дурачок, вы что, сказки не читали? :-D
25 ноября 2011 в 14:47
жаль что некоторые пользователи немогут понять что есть браузеры лучше internet explorera:(
Olga
Ответ:
ноября 25, 2011 at 4:03 пп
между прочим, ie очень неплохо в последнее время продвинулся в вопросах поддержки новых спецификаций. Видать, схватились за голову после того, как у пользователей винды появился выбор браузера:-D
Бублик
Ответ:
ноября 25, 2011 at 4:11 пп
Все вы наверняка хоть что-то слышали о HTML5 – новой версии языка разметки страниц в интернете. Она до сих пор считается находящейся в разработке, хотя со времени официального утверждения действующей версии HTML4 прошло более пятнадцати лет – фактически всё время активного развития Всемирной сети. В чём же заключаются преимущества HTML5 и принципиальные его отличия от HTML4?
1. HTML5 – новый подход к разметке: мультимедиа внутриВ отличие от разработанного ещё в девяностых языка разметки HTML4, когда даже относительно несложный мультимедийный контент был слишком «тяжёлым» для подавляющего большинства пользователей интернета, в 2004 году, в котором фактически началась работа над новой версией стандарта, в Сети уже вовсю шло распространение аудио- и видеозаписей, как официальное, так и неофициальное. Хорошим тоном для веб-сайтов стало размещение на своих страницах анимационных фильмов и видеороликов, вошли в моду аудиоблоги-подкасты.
Однако действующий стандарт не предусматривал описания мультимедийного контента средствами самого языка: для этого использовалась функция вставки некоего объекта («object»), возможность воспроизведения которого зависела от того, установлены ли в браузере клиента совместимые с таким контентом дополнительные плагины третьих разработчиков.
Говоря о подобных плагинах, мы прежде всего имеем в виду Adobe Flash, QuickTime или менее распространённые Real Player и Silverlight. Всё это – «надстройки», дополнения к браузерам, не являющиеся их составной частью и выполняющие роль неких посредников, которые преобразуют загружаемый цифровой контент в видео и звук.
Эта система до сих пор вполне работоспособна, однако отсутствие общепринятых стандартов приводит к тому, что на разных сайтах используются разные технологии, для просмотра их медиаконтента требуются разные плагины и, самое главное, поскольку такие плагины не входят непосредственно в составе браузера, необходима их отдельная установка.
В стандарте HTML5, представляющем собой сочетание собственно HTML, а также CSS и JavaScript, изначально реализуется принципиально иной подход, в котором медиаконтент представляет собой неотъемлемую часть кода страницы. HTML5 обеспечивает единый стандартный способ описания (синтаксис) встраиваемого в страницы аудиовизуального контента.
Для интеграции аудио или видео в HTML5 достаточно использовать простой набор тэгов, описывающих, какой тип контента вы намерены поместить («video» или «audio»), и обычные ссылки на соответствующие медиафайлы.
Разумеется, у HTML5 есть и множество других нововведений, но это самое главное из них – изменение идеологического подхода.
2. Проблема обратной совместимости: сначала HTML, потом плагиныК сожалению, в мире остаётся значительная часть пользователей, у которых установлены устаревшие браузеры, вполне их устраивающие, но не поддерживающие все возможности HTML5. Прежде всего, речь идёт об Internet Explorer версии 8, до сих пор самой популярной для этого браузера. Последующие версии – IE 9 и 10 – уже практически полностью поддерживают HTML5. Что касается Chrome, Opera и Safari, то они уже в течение нескольких лет способны обрабатывать теги «video» и «audio».
Тем не менее для обеспечения обратной совместимость в HTML5 сохраняется поддержка использования плагинов (тега «object»), но по схеме «сначала HTML, а потом уже плагины». Это означает, что браузер должен сначала осуществлять рендеринг страницы с использованием тегов «video» и «audio» – и лишь при невозможности сделать это применять код плагинов.
Для обеспечения правильного функционирования такого подхода можно использовать одну из множества доступных библиотек JavaScript, часть из которых предоставляет полностью интегрированный программный интерфейс (API) для управления как HTML-контентом, так и встроенными объектами. Среди них, в частности, можно назвать Projekktor или программный видеоплеер Video.js , обеспечивающие полную совместимость как с HTML5, так и со старыми браузерами, в которых применяются плагины.
3. Единый подход к десктопным и мобильным платформамПоддержка нового стандарта HTML5 обеспечивается и практически на всех современных мобильных устройствах, включая iOS, Android и Windows Phone, в чём заключается ещё одно его важное достоинство. Веб-мастеру уже не нужно размещать несколько версий медиаконтента для «полноценных» компьютеров и мобильных устройств. Известно, что iOS полностью несовместима с Flash, а ОС Android совместима лишь частично. В случае с HTML5 эта проблема полностью снимается.
Кроме того, многие современные мобильные устройства поддерживают аппаратное декодирование видео в широко распространённом формате H.264, что вновь избавляет веб-мастеров от лишней работы и необходимости выкладывания видео в нескольких разных кодеках. Владельцы же таких устройств получают низкую нагрузку на систему и длительное время автономной работы.
4. Поддержка разных форматов видео и звукаНесмотря на то что HTML5 позволяет размещать на веб-страницах медиафайлы простыми стандартными тэгами, такие файлы могут быть закодированы в самые разные форматы и самыми разными кодеками. Между тем пока не существует какого-то стандартного сочетания формата (контейнера) и кодека, которое с равным успехом работало бы во всех браузерах и мобильных системах.
Самые популярные контейнеры для интернет-видео – это AVI, MP4, FLV и WebM, а основных «сетевых» видеокодеков всего три: H.264, Ogg Theora и VP8. При этом каждому кодеку обычно (но далеко не всегда) лучше всего соответствует свой формат контейнера: H.264 – MP4, Theora – OGG, VP8 – WebV.
Кодек H.264 сжимает видео с потерями, чтобы получить файл высокого качества, но небольшого размера. При этом спецификация предусматривает несколько профилей с разным качеством и степенью сжатия, чтобы на маломощные мобильные устройства можно было транслировать «лёгкие» файлы, а на десктопы с широкополосными доступом – более качественное видео.
Хотя H.264 – коммерческий кодек, то есть предполагает лицензионные отчисления, он наиболее универсален: его встроенная поддержка есть в Internet Explorer, Chrome, Firefox, Safari, iOS и Android, а отсутствует лишь в Opera, где такое видео декодируется только через внешний плагин.
Кодек Ogg Theora, изначально рассчитанный на системы под Linux, вначале тоже был коммерческим, но теперь лицензируется бесплатно. Встроенная поддержка имеется в браузерах Chrome, Firefox и Opera, в Internet Explorer и Safari доступен только через плагины.
Кодек VP8, ориентированный на мобильные устройства, распространяется Google на условиях Open Source и обеспечивает качество, сходное с H.264, при меньшей сложности декодирования. Встроенная поддержка есть в Chrome, Firefox и Opera, а также в мобильных устройствах под управлением Android.
Таким образом, чтобы обеспечить воспроизведение видеоконтента практически на всех существующих системах, достаточно выкладывать файлы в контейнерах MP4 в стандарте кодирования H.264 и в формате WebM с кодеком VP8. Поскольку изо всех современных десктопных браузеров встроенная поддержка H.264 отсутствует только в Opera, такие сочетания будут самыми универсальными.
5. Существует обширная общедоступная документацияНесмотря на то что HTML5 пока ещё не имеет статуса окончательного стандарта, его поддерживает подавляющее большинство современных браузеров и мобильных устройств. Потому не удивительно, что для веб-разработчиков уже существует обширная общедоступная документация – бо льшая часть которой, естественно, опубликована на английском языке.
Кроме того, на русский язык переведено уже довольно много книг по HTML5, среди которых, например,
Последнее обновление: 08.04.2016
HTML (HyperText Markup Language) представляет язык разметки гипертекста, используемый преимущественно для создания документов в сети интернет. HTML начал свой путь в начале 90-х годов как примитивный язык для создания веб-страниц, и в настоящий момент уже трудно представить себе интернет без HTML. Подавляющее большинство сайтов так или иначе используют HTML.
В 2014 году официально была завершена работа над новым стандартом - HTML5, который фактически произвел революцию, привнеся в HTML много нового.
Что именно привнес HTML5?
HTML5 определяет новый алгоритм парсинга для создания структуры DOM
добавление новых элементов и тегов, как например, элементы video , audio и ряд других
переопределение правил и семантики уже существовавших элементов HTML
Фактически с добавлением новых функций HTML5 стал не просто новой версией языка разметки для создания веб-страниц, но и фактически платформой для создания приложений, а область его использования вышла далеко за пределы веб-среды интернет: HTML5 применяется также для создания мобильных приложений под Android, iOS, Windows Mobile и даже для создания десктопных приложений для обычных компьютеров (в частности, в ОС Windows 8/8.1/10).
В итоге, как правило, HTML 5 применяется преимущественно в двух значениях:
HTML 5 как обновленный язык разметки гипертекста, некоторое развитие предыдущей версии HTML 4
HTML 5 как мощная платформа для создания веб-приложений, которая включает не только непосредственно язык разметки гипертекста, обновленный HTML, но и язык программирования JavaScript и каскадные таблицы стилей CSS 3.
Кто отвечает за развитие HTML5? Этим занимается World Wide Web Consortium (сокращенно W3C - Консорциум Всемирной Паутины) - независимая международная организация, которая определяет стандарт HTML5 в виде спецификаций. Текущую полную спецификацию на английском языке можно посмотреть по адресу https://www.w3.org/TR/html5/ . И надо отметить, что организация продолжает работать над HTML5, выпуская обновления к спецификации.
Поддержка браузерамиНадо отметить, что между спецификацией HTML5 и использованием этой технологии в веб-браузерах всегда был разрыв. Большинство браузеров стало внедрять стандарты HTML5 еще до их официальной публикации. И к текущему моменту большинство последних версий браузеров поддерживают большинство функциональностей HTML5 (Google Chrome, Firefox, Opera, Internet Explorer 11, Microsoft Edge). В то же время многие старые браузеры, как например, Internet Explorer 8 и более младшие версии, не поддерживают стандарты, а IE 9, 10 поддерживает лишь частично.
При этом даже те браузеры, которые в целом поддерживают стандарты, могут не поддерживать какие-то отдельные функции. И это тоже надо учитывать в работе. Но в целом с поддержкой данной технологии довольно хорошая ситуация.
Для проверки поддержки HTML5 конкретным браузером можно использовать специальный сервис http://html5test.com .
Необходимые инструментыЧто потребуется для работы с HTML5? В первую очередь, текстовый редактор, чтобы набирать текст веб-страниц на html. На данный момент наиболее популярным и продвинутым текстовым редактором является Notepad++ , который можно найти по адресу http://notepad-plus-plus.org/ . К его преимуществам можно отнести бесплатность, подсветка тегов html. В дальнейшем я буду ориентироваться именно на этот текстовый редактор.
Также стоит упомянуть кроссплатформенный текстовый редактор Visual Studio Code . Данный редактор обладает несколько большими возможностями, чем Notepad++, и кроме того, может работать не только в ОС Windows, но и в MacOS и в операционных системах на основе Linux.
И также потребуется веб-браузер для запуска и проверки написанных веб-страничек. В качестве веб-браузера можно взять последнюю версию любого из распространенных браузеров - Google Chrome, Mozilla Firefox, Microsoft Edge, Opera.
