20:47 Изучение HTML 5 | |
В этой статье я надеюсь рассказать вам о некоторых приемах и строении HTML5, чтобы помочь вам преодолеть эту боль, пока вы будете переходить на другой синтаксис. База Когда несколько месяцев назад я начал изучать HTML5, первая вещь, которую я пытался найти, это DOCTYPE. Вроде бы простая вещь, которая должна быть везде, нигде не проявляла себя, и после полного краха своих попыток я наконец откопал ее в недрах W3C. Вот она:
Мне было также любопытно, почему они выбрали DOCTYPE html а не DOCTYPE html5, что было бы более логично и сразу сообщало браузерам, с документом какого формата они работают. Но оказалось, что DOCTYPE HTML5 не принимается Internet Explorer 6, тогда как сам документ, составленный в HTML5 и с правильным DOCTYPE отображается правильно. Мне нравится новый DOCTYPE, он краток и всеобъемлющ, так что, думаю, мы все запомним его и не будем копировать и переносить со страницу на страницу. Новые элементы, которые вы должны знать Эти элементы привлекают наше внимание с первого взгляда. W3C на самом деле прислушалось к мнению общественности и ввело большое количество новых элементов в рассчете на будущее. Теперь у нас есть все, начиная с простых структурных элементов вроде и и заканчивая и , которые обещают стать мощными API и обеспечить нас достаточной свободой для создания новых приложений и при этом уйти от необходимости использовать флэш при отображении видео и мультипликации. <header> Элемент header предназначен для отображения всей вводной информации, типа лготипа, названия сайта и тому подобное. <nav> Элемент nav содержит ссылки на другие разделы сайта или страницы. Не нужно все ссылки заключать в эти тэги, только основную навигацию. <section> Этот тэг заключает в себе динамический контент или программное приложение. То же самое делает div, но section отделяет целый кусок документа. <article> Отделяет кусок страницы, текст, который может стоять отдельно, например, блоговский пост, форумное сообщение, комментарий пользователя или любая независимая от остального контента статья. <aside> Элемент aside содержит контент, относящийся к основному содержимому страницы. Как правило, это боковые колонки, где размещаются ссылки на похожие материалы, облака тэгов и т.п. Могут также содержать выносы – цитаты из текста. <footer> Используется для отделения «подвала», не только всей страницы, но и любого ее раздела. Так что этот элемент вы, скорее всего, будете использовать на странице несколько раз. На первый взгляд кажется, что эти новые элементы делают то же самое, что обычные <div id>, но если div id с уникальным именем может использоваться на странице только один раз, эти элементы ведут себя также, как привычные нам тэги <p>, <h1> и прочие, и их можно использовать на странице столько раз, сколько необходимо. Элементы header и footer не просто отделяют шапку и подвал страницы, но определяют шапку и подвал каждого элемента на ней, как делают в таблицах thead и tfoot. Преимущество новой разметки в том, что она семантически определяет элементы страницы (легче ориентироваться в коде). Однако, использовать ее нужно с умом, иначе легко переборщить. Облегчение перехода с XHTML5 Хотя HTML 4.01, XHTML 1.0, & HTML5 очень похожи, существуют небольшие синтаксические различия, которые могут привести к коллапсу страницы. Чтобы этого не происходило, в HTML5 заложено некоторое «послабление» для заядлых XHTML-кодеров. Например, при построении формы в HTML5 правильный синтаксис для input text будет таким: <input type=”text” id=”name”> Но не будет ошибкой написать и так: <input type=”text” id=”name”/> То есть, с закрывающим слэшем. То же самое относится к <meta> и другим самозакрывающимся тэгам. Такие элементы как <i> и <b> перешли из HTML4. В чем преимущество? У любой новой технологии должно быть преимущество, иначе зачем вы будете ею пользоваться. HTML5 «упакован» целым рядом преимуществ. Большинство из них касается API и DOM. Расширяем API Самое очевидное преимущество HTML5 – несколько новых API (программных интерфейсов приложений) и возможности, которые появятся в будущем у веб-приложений благодаря кэшу и оффлайн-работе. Google Gears позволил нам хранить информацию оффлайн, флэш продемонстрировал мощность кэша, Pandora с его помощью сохраняет информацию о логине и пароле. С HTML5 все эти вещи можно реализовать средствами самого языка, и легко расширить с помощью Ява-скриптов. HTML5 использует «легкую» кодировку, чтобы сосредоточить свое внимание на Вебе; впервые, кроме jQuery, одна передовая технология полностью поглощает другую. Конечно, мы связываем HTML5 и Ява-скрипты с помощью классов и ID, но до этого момента они воспринимались как отдельные блоки, приставляемые один к другому. Теперь же, с ростом Веба, нам необходимо такого рода объединение двух технологий. | |
|
| |
| Всего комментариев: 0 | |