Что такое селектор. Селектор акпп — что это такое? и, И, и Теперь вернёмся к селекторам. Дочерние селекторы

От автора: привет друзья! В данной статье я хочу немного рассказать вам про html5. Рассказать, что такое html5, что в нем нового. Какие новые возможности он предоставляет разработчикам. HTML5 очень широкое понятие. И некоторые технологии, которые называют в HTML5, вообще говоря, не являются html5, но обо всем по порядку…

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

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

Рассмотрим некоторые ключевые особенности html5:

Он более простой, более простая структура элементов на странице, что упрощает создание и отладку кода.

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

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

Что дает HTML5?

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

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

Цели HTML5

Кратко цели html5 можно назвать так:

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

Снижение потребности в JavaScript и дополнительном коде, благодаря использованию новых html5 элементов.

Обеспечение согласованности между браузерами и устройствами.

Сделать все это настолько прозрачным, насколько это возможно.

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

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

Новые элементы html5

Новые элементы html5 позволяют быстрее создавать разметку для страницы, она становиться проще, более понятна и упрощается процесс отладки. Вот некоторые новые теги:

и

для любых видов меню

для сайдбаров или связного контента

для статей

практически то же, что и div

и теги позволяют проигрывать видео без плагинов

для рисование на странице использую javascript

для вставки внешнего контента на страницу

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

Другая часть нововведений касается непосредственно вопросов доступности: здесь, прежде всего, речь идет об aria- и role-атрибутах, позволяющих разметить предназначение и роли контента. Эта информация впоследствии, к примеру, может использоваться программами для чтения с экрана (screen reader).

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

Еще одним преимуществом html5 является наличие в нем продвинутых функций, включая интеграцию API. Это упрощает написание кроссбраузерного кода на javascript для сложных приложений. Вот некоторые из них:

Audio and video позволяет проигрывать видео в браузере без плагинов.

Geolocation: определяет положение посетителя.

Drag and drop: например, для загрузки файла перетаскиванием его в браузер.

Application cache: обеспечивает поддержку открытия сайтов offline.

Web workers: запускает JavaScript в фоновом режиме

Server sent events: позволяет серверам обновлять веб-страницы в браузере после того, как они уже были загружены, проще и эффективнее, чем AJAX и JavaScript.

Offline data storage: позволяет хранить данные локально в браузере, независимо от cookies

Примеры использования html5

Давайте посмотрим на html5 в действии! HTML5 позволяет создавать новую, более простую и чистую разметку для страниц. Код становится более контентоориентированным и его проще читать и понимать. Вот пример простой веб-страницы на html5:

Page Title

Nav Link 1

Nav Link 2

Nav Link 3

Article Header

Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.

Article Subhead

Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.

Sidebar Content

Copyright Your Name Here 2014. All Rights Reserved.

< ! doctype html > < html lang = "en" > < head > < meta charset = "utf-8" > < title > < / title > < meta name = "author" content = "" / > < meta name = "description" content = "" / > < link rel = "stylesheet" href = "assets/css/style.css" / > < ! -- [ if lt IE 9 ] > < ! [ endif ] -- > < / head > < body > < header > < h1 > < a href = "/" > Page Title < / a > < / h1 > < nav > < ol > < li > < a href = "" > Nav Link 1 < / a > < / li > < li > < a href = "" > Nav Link 2 < / a > < / li > < li > < a href = "" > Nav Link 3 < / a > < / li > < / ol > < / nav > < / header > < article > < h1 > Article Header < / h1 > < p > Etiam pretium odio eu mi convallis vitae varius neque pharetra . Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas . < / p > < h2 > Article Subhead < / h2 > < p > Vestibulum lacus erat , volutpat vel dignissim at , fringilla ut felis . < / p >

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

Как известно, HTML (HyperText Markup Language ) - это язык разметки веб-страниц. Его главная задача - интерпретация передаваемой по сети информации в виде читабельного контента. Посредством HTML мы видим интернет именно таким, какой он есть на сегодняшний день, т.е. красивым, цветастым и многогранным. Ну а появление новой версии HTML - это бесспорно великое событие, которое еще долгое время будет будоражить умы интернет сообщества.

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

Первым делом следует отметить тот факт, что HTML4 был полностью закончен в конце 90-х годов, а работа над HTML5 началась относительно недавно - где-то в 2005-м. Разработчики новой версии HTML основное внимание сконцентрировали на вопросе совместимости новинки со всеми популярными на сегодняшний день типами браузеров - как следствие, никаких сверх революционных перемен в плане демонстрации веб-страниц не произошло, но, зато, потенциальные способности отображения контента были расширенны.

К примеру, в HTML5 можно наблюдать определенное количество новых элементов - появились section, nav, header, article и footer . Напомним, что ранее существовал только один элемент - div . Стандартный img , теперь дополнен тэгами audio и video . Один из самых важных атрибутов id дополнен tabindex и repeat . Помимо этого полностью упраздняются давно вышедшие из моды элементы типа font, center и т.п.

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

Теперь давайте немного остановимся на структуре и разметке языка HTML5.

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

• header (не путаем с head) - можно задавать не только заголовок страницы, но и подзаголовки;
• nav - элемент предназначен исключительно для ссылок навигации, что в высшей степени удобно при создании внутристраничной навигации по сайту, а так же и для межстраничных переходов.
• section - данный элемент интерпретируется как секция общего пользования. Допустим, его можно использовать тогда, когда требуется в заранее определенном блоке текста задать специальный заголовок или параграф.
• article - посредством этого элемента можно задать независимые зоны текстового наполнения страницы. К примеру, выделение важных публикаций из архива, трансляция текущих новостей, последние сообщения на форуме и т.д. и т.п. Помимо этого, элемент article можно использовать и в обычном режиме - т.е. определять им весь контент страницы.
• footer - самый нижний элемент страницы или же "завершающий блок секции". Представляется в виде колонтитула. Там могут размещаться информационные сообщения касательно вышеопубликованного контета (например, копирайты) и т.п. вещи.

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

• aside - этот контейнер можно использовать для материалов, которые считаются вспомогательными. К примеру, цитаты, сноски отделенные от основного повествования, колонки с пояснительным текстом и т.п.
• dialog - контейнер, позволяющий красиво оформить диалог.
• figure - контейнер, позволяющий описать любое графическое изображение с текстовой подписью.

А как насчет нескольких слов касательно мультимедийных элементов?

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

Другой момент - посредством этих элементов отпадает потребность в использовании сторонних продуктов (плагинов) для просмотра и прослушивания мультимедийного контента.

Касательно интерактива, HTML5 тоже не остался в долгу - тут тоже появились новые элементы. Вот некоторые из них:

• details - посредством этого элемента можно паковать необязательную информацию.
• datagrid - используется для демонстрации данных таблицы. От стандартных таблиц отличается тем, что посетитель страницы может самостоятельно управлять отображением информации, т.е. убирать таблицу, перемещать колонки и т.п.
• menu, command - элементы, которые непосредственно относятся к визуальному представлению всех менюшек имеющихся на сайте.

Еще одно новшество - это элементы отвечающие за уровень текста. К примеру, в новой версии можно задавать такие параметры, как, скажем, прогресс какого-либо процесса (progress ), динамическое отображение времени (time ), дат и т.п.

Ну и в заключение парочка слов про новшества связанные с API!

Первым делом бросается в глаза расширение существующих DOM интерфейсов и добавление новых API - данные можно хранить в браузере, реализована технология Drag-and-drop, стало доступным рисование в онлайне и т.д.

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

что такое seo - введение в seo seo термины - обзор терминов и понятий, непосредственно касающихся c seo полезные термины - обзор терминов и понятиев, связаных с seo