html5 — вопросы с ответами

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

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

Теперь вы можете вставлять изображения, аудио и видео прямо в документ. Что еще более важно, поскольку эти объекты теперь имеют элементы первого порядка, вы можете легко манипулировать аудио и видео из JavaScript. Короче говоря, элемент первого порядка всегда будет стимулировать более прямой программный доступ.

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

HTML5-соединения

Все вышесказанное перетекает в следующие установки:

Веб-страницы больше не должны выглядеть (и вести себя) как веб-страницы

Рост Flash за последние годы был в значительной степени попыткой преодолеть «ограничения» того, что позволяет HTML. Первоначально Flash был ориентирован на анимацию и интересные визуальные эффекты. Но затем во Flash были внедрены целые сайты, что позволило использовать различные типы навигации и организации страниц, более богатый программный доступ к отдельным частям веб-страницы и возможность избежать необычных особенностей JavaScript.

Веб-страницы больше не должны представлять контент одного человека/организации

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

Веб-страницы могут легко функционировать на мобильных платформах

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

HTML5 вводит парадигму, которая отходит от обоих этих ограничений. Во-первых, HTML5 и CSS3 предоставляют для JavaScript довольно солидный рабочий набор инструментов и эффектов, сравнимый с большинством Flash-сайтов. Обычно мы можем взять Flash-сайт среднего размера и воссоздать его на WordPress, HTML5, JavaScript (через jQuery) и CSS3 за неделю, если не меньше. И преимущества такой перестройки огромны: текст снова выбирается, закладки работают без заморочек, и, конечно, владельцы сайтов могут обновлять свои собственные сайты, вместо того чтобы полагаться на чрезмерно занятого Flash-программиста, к которому они обычно обращаются за помощью.

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

Отличия от HTML4 и новые теги

HTML4 зарекомендовал себя очень хорошо, но у него явно есть ряд недостатков. Именно их и постаралась устранить команда, работавшая над HTML5. Основополагающими принципами новой версии языка стали:

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

В частности, HTML5 добавляет целую кучу новых тегов разметки:

  • Теги <header> и <footer> помогают изолировать верх и низ блоков контента. Могут использоваться более одного раза на одной странице;
  • Тег <article>, который служит для идентификации конкретной единичной части содержимого, например, сообщение в блоге или комментарий пользователя;
  • Тег <nav> для указания того, какие разделы следует считать навигационными блоками;
  • Тег <section>, позволяющий определить общий раздел содержимого; похож на ранее существовавший тег <div>;
  • Теги <audio> и <video> для обозначения включения аудио или видео контента;
  • Тег <canvas>, который позволяет рисовать графику с использованием отдельного языка сценариев;
  • Тег <embed> для встраивания внешнего контента или приложений на страницу.
  • HTML5 также не поддерживает некоторые старые теги: <acronym>, <applet>, <font>, <frame>, <frameset>, <noframes> и несколько других.

Новые возможности

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

  • Перетаскивание. Позволяет перетаскивать любой элемент на странице, чтобы вы могли определить, что перетаскивать, куда перетаскивать и к чему это приведет;
  • Локальное хранилище. Новейший и самый эффективный в кэшировании, HTML5 Local Storage API является отличной заменой куки, делая его незаменимым, когда дело доходит до кэшируемой информации. Гибридный метод хранения файлов cookie в облаке означает, что информация сохраняется даже при закрытом браузере. Содержимое сохраняется для последующего просмотра, в следствии чего страницы загружаются быстрее;
  • Кэш приложения. API, который позволяет пользователю получить доступ к веб-приложению без подключения, создав его автономную версию. Это снижает нагрузку на сервер, ускоряет его работу и позволяет просматривать информацию без подключения;
  • Web workers. Скрипты Java, которые работают в фоновом режиме, отделены от любых других сценариев, которые позволяют пользователю иметь доступ к сайту и переходить в нужные разделы, не дожидаясь загрузки сценариев;
  • SSE. Отправленные сервером события теперь исключают необходимость запроса сайтом обновлений с сервера. Эти автоматические обновления отправляются посредством одностороннего обмена сообщениями, чтобы сайт мог загружать свежий контент, например, обновления Twitter, цены на акции или новостные ленты;
  • Новые мультимедийные элементы. Новые теги для аудио и видео означают, что ваши медиафайлы воспроизводятся так, как вы хотите;
  • Новые семантические элементы. HTML является языком разметки описания или «семантики», что означает, что он маркирует логические, структурные части сайта в своем коде. В HTML4 отсутствие хорошо структурированных семантических элементов, таких как <section> или <footer>, означало, что поисковым системам было очень трудно узнать, что есть на веб-странице. Новые семантические элементы HTML5, такие как <header>, <nav> и <article>, делают разделы страницы кристально чистыми;
  • HTML5 Canvas, CSS3 и новые графические элементы. Появившись с HTML5 и наряду с ним, CSS3 добавляет новые стандарты дизайна и новые функции. HTML5 также добавил новые графические элементы, такие как <canvas>, который позволяет рисовать через JavaScript в браузере, и <svg> или «масштабируемая векторная графика» (2D-графика на основе XML);
  • Функции определения местоположения. HTML5 может задействовать информацию о местоположении, позволяя браузерам получать доступ к местоположению пользователя через телефон GPS, IP-адрес и т. д.

Взаимодействие с JavaScript

Идея о том, что HTML-страница представляет собой нечто большее, чем просто организацию гибких элементов, не является чем-то новым, но HTML5, похоже, является очевидной отправной точкой для программистов на JavaScript и веб-разработчиков, которые еще не сделали этот концептуальный скачок. Примечательно, что с появлением CMS, таких как WordPress, для небольших компаний и личных веб-сайтов, почти все теперь знакомы с разделением проблем, когда даже текст HTML-страницы не обязательно кодируется и хранится в статическом HTML-файле. Будучи программистом на JavaScript, вы бы наверняка предпочли иметь больший программный контроль и создать страницу, которая построена на основе пользовательских решений, логики на основе базы данных и программирования для одного человека с помощью HTML или текстового редактора.

И на самом деле, наиболее очевидным примером такого подхода является сайт Twitter. Но если вы присмотритесь поближе, просмотрев его исходный код, вы обнаружите сотни строк JavaScript в начале файла, еще больше JavaScript в конце файла. А небольшие фрагменты HTML втиснуты в середину. Вот примерно 1/3 этого HTML:

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

Это еще одна область, которую HTML5 стремится улучшить. Введение нескольких новых элементов (например, nav, header и footer) в значительной степени игнорировалось многими. Почему бы просто не продолжать использовать <div id=”nav”>? Что ж, теперь ответ должен быть очевиден: эти новые элементы обеспечивают дополнительное семантическое значение. Если вы ссылаетесь на чужую страницу или даже добавляете часть чужой страницы на свою, то можете получить чужой нижний колонтитул, навигацию, цифры и подписи к ним.

2 ответа
Я хочу 1 увеличенное изображение с 4-мя меньшими изображениями в формате 2x2 следующим образом: [IMG_OUR_ID=121.png] Моя первоначальная мысль заключалась в том, чтобы разместить все в одном ряду. Затем создайте два столбца, а во втором столбце создайте два ряда и два столбца для создания эффекта 1x...
grid
grid-system
09 июль 2014, в 17:32
6 ответов
Я использую новый Twitter Bootstrap 3 и пытаюсь разместить окно поиска, подобное этому (ниже) в верхней панели навигации: [IMG_OUR_ID=122.png] В Bootstrap 2 это могло бы быть сделано следующим образом: <form class="form-search" method="get" id="s" action="/"> <div class="input-append"...
twitter-bootstrap-3
04 сен. 2013, в 16:38
10 ответов
Что делают атрибуты data-toggle в Twitter Bootstrap? Я не смог найти ответ в API Bootstrap. Я тоже видел аналогичный вопрос, ссылка. Но это не очень помогло мне.
27 фев. 2013, в 13:03
27 ответов
Итак, я пытаюсь прототипировать маркетинговую страницу, и я использую Bootstrap и новый файл Font Awesome. Проблема в том, что когда я пытаюсь использовать значок, все, что отображается на странице, является большой площадью. Вот как я включаю файлы в голову: <head> <title>Page T...
font-awesome
16 янв. 2013, в 17:45
16 ответов
My Case: localStorage с ключом + значение, которое должно быть удалено при закрытии браузера, а не одной вкладке. Пожалуйста, посмотрите мой код, если он правильный и что можно улучшить: //create localStorage key + value if not exist if(localStorage){ localStorage.myPageDataArr={"name"=>"Dan",...
local-storage
30 март 2012, в 13:29
4 ответа
В чем разница между использованием $.data и $.attr при использовании data-someAttribute? Я понимаю, что $.data хранится в jQuery $.cache, а не в DOM. Поэтому, если я хочу использовать $.cache для хранения данных, я должен использовать $.data. Если я хочу добавить атрибуты данных HTML5, я должен испо...
custom-data-attribute
31 авг. 2011, в 18:50
10 ответов
Стандарт XMLHttpRequest Level 2 (все еще рабочий проект) определяет интерфейс FormData. Этот интерфейс позволяет добавлять объекты File к XHR-запросам (Ajax-запросы). Btw, это новая функция - в прошлом использовался "скрытый-iframe-трюк" (читал об этом в мой другой вопрос). Вот как это работает (при...
multipartform-data
07 авг. 2011, в 17:46
3 ответа
Google "Сообщить об ошибке" или "Инструмент обратной связи" позволяет вам выбрать область вашего окна браузера, чтобы создать скриншот, который отправляется с отзывами об ошибке. [IMG_OUR_ID=94.png] Снимок экрана Джейсона Малого, размещенный в повторяющемся вопросе.Суб > Как они это делают? API...
canvas
screenshot
06 фев. 2011, в 05:08
16 ответов
Есть ли постоянный способ в браузерах скрыть новые спиновые окна, которые некоторые браузеры (например, Chrome) отображают для ввода HTML номера типа? Я ищу метод CSS или JavaScript, чтобы предотвратить появление стрелок вверх/вниз. <input id="test" type="number"> ...
input
numbers
24 сен. 2010, в 21:58
11 ответов
Есть ли простой и прямой метод для выбора элементов на основе их атрибута data? Например, выберите все привязки, у которых есть атрибут данных с именем customerID, который имеет значение 22. Я не решаюсь использовать rel или другие атрибуты для хранения такой информации, но мне гораздо труднее выбра...
custom-data-attribute
21 март 2010, в 14:44
15 ответов
Я могу установить переключатель правильно, но я хочу настроить своего рода "прослушиватель", который активируется при проверке определенного переключателя. Возьмите, например, следующий код: $("#element").click(function() { $('#radio_button').attr("checked", "checked"); }); он добавляет пров...
16 фев. 2010, в 12:29
21 ответ
После экспериментов с композитными операциями и рисования изображений на холсте я теперь пытаюсь удалить изображения и компоновку. Как это сделать? Мне нужно очистить холст для перерисовки других изображений; это может продолжаться некоторое время, поэтому я не думаю, что каждый раз лучший выбор буд...
canvas
composite
html5-canvas
26 янв. 2010, в 21:46
27 ответов
Я хотел бы сохранить объект JavaScript в HTML5 localStorage, но мой объект, по-видимому, преобразуется в строку. Я могу хранить и извлекать примитивные типы JavaScript и массивы с помощью localStorage, но объекты, похоже, не работают. Должны ли они? Здесь мой код: var testObject = { 'one': 1, 'two':...
local-storage
06 янв. 2010, в 04:58
17 ответов
Я хочу запустить функцию, когда пользователь редактирует содержимое атрибута div с атрибутом contenteditable. Что эквивалентно событию onchange? Я использую jQuery, поэтому любые решения, использующие jQuery, являются предпочтительными. Спасибо!
contenteditable
07 сен. 2009, в 22:40
59 ответов
Есть ли быстрый способ установить ввод текста в формате HTML (<input type=text />), чтобы разрешить только числовые нажатия клавиш (плюс "." )?
22 янв. 2009, в 15:22
Наверх
Меню