HTML 5 похож на революцию, и в эпоху после Web2.0 находится в полном разгаре.
Что такое HTML 5, мне не нужно вдаваться в подробности здесь. Согласно моему пониманию, инновации HTML 5 можно обобщить как систему семантической этикетки, упрощенную и богатую поддержку в СМИ, волшебную локальную технологию хранения данных, богатая анимация (холст), которая не требует подключаемых и мощных поддержки API. Короче говоря, HTML 5 делает взаимодействие с компьютером и взаимодействие с человеком с сети-сеткой более удобным и подходит для пользователей. Предыдущее отсутствие поддержки для богатых медиа -приложений, и это хранилище больше не является болью для браузеров. Первоначальное намерение революции HTML 5 состоит в том, чтобы продвигать Интернет с платформы контента до стандартизированной платформы приложений и объединить стандарты каждого лагеря платформы.
В этой статье объясняется одно из инноваций HTML 5: более четкая и краткая структура.
Начать с самого началаСтандартный код заголовка XHTML должен выглядеть следующим образом:
<! Doctype html public -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml>
<голова>
<meta http-equiv = content-type content = text/html; charset = gb2312 />
</head>
Вы можете вспомнить? Вы запомните это по Роте? Конечно, нет! Нам нужна только механическая копия и вставка.
Давайте посмотрим, как является стандартный заголовок HTML 5:
<! Doctype html>
<meta charset = gb2312>
Мне не нужно говорить, какой из них сложнее, а какой прост. Да, заголовок HTML 5 может быть настолько прост, что его можно легко запомнить! Кроме того, корпус, цитаты и обратные сшивки перед последним угловым кронштейном можно игнорировать.
Почему это может быть так свободно? Фактически, если xhtml отправляется как текст/HTML, браузер также может хорошо его проанализировать, а браузер не заботится о синтаксисе кода. Таким образом, HTML 5 является метафизическим, он может нарушить некоторые оригинальные стандарты, но он все еще может хорошо работать в браузере.
Конечно, для удобства командной помощи и последующего обслуживания мы все равно должны объединить стиль письма, который вам нравится, например:
<! Doctype html>
<html>
<голова>
<meta charset = gb2312 />
...
</head>
<тело>
...
</body>
</html>
Кроме того, хотя HTML 5 в настоящее время не поддерживается всеми браузерами, этот заголовок, который может сэкономить более 100 байтов (для сайтов с ежедневными уровнями PV или более одного миллиона, он может сэкономить много трафика). Если вы исследовали в режиме разрешения браузера, вы должны знать, что страницы будут запустить странный режим без определения Doctype, и пока определяется браузер <! Doctype html>, вы можете проанализировать страницы в стандартном режиме без указания определенного типа DTD.
Новая семантическая система маркировкиСемантическое кодирование является необходимым навыком для квалифицированных разработчиков фронта, но, поскольку веб-страницы становятся все более богатыми, очевидно, что они не могут сделать это, просто используя оригинальный тег XHTML для Desemanate. Бог сказал: должен быть свет! Тогда есть свет. Следовательно, HTML 5 предоставляет ряд новых тегов и соответствующих атрибутов, отражающих типичную семантику современных веб -сайтов. Практика, чтобы произвести истину. Давайте напишем пример:
<div id = заголовок>
<div class = hgroup>
<h1> Название веб -сайта </h1>
<h1> subtitle subtitle </h1>
</div>
<div id = Nav>
<ul>
<li> html 5 </li>
<li> css </li>
<li> javascript </li>
</ul>
</div>
</div>
<!-// Конец заголовка->
<div id = Left>
<div class = article>
<p> Это статья о новых тегах структуры HTML 5. </p>
</div>
<div class = article>
<p> Это также статья о новых тегах структуры HTML 5. </p>
</div>
</div>
<!-// левый конец->
<div id = в сторону>
<h1> профиль автора </h1>
<p> г-н Титнк, обычный человек, который фокусируется на технологии веб-фронта. </p>
</div>
<!-// боковой конец->
<div id = нижний колонтитул>
Нижняя часть страницы
</div>
<!-// конец нижней части->
Выше представляет собой простую часть страницы блога HTML, состоящая из заголовка, области отображения статьи, правой боковой столбцы и внизу. Кодирование является аккуратным и соответствует семантике XHTML, которая может быть выполнена хорошо даже в HTML 5. Но для браузера это кусок кода, который не различает веса, а не тег, который позволяет машине понимать семантику, чтобы определить соответствующий блок. Например, стандартные браузеры (такие как Firefox, Chrome и даже новая версия IE) имеют ярлык, который может привести к тому, что клиенты могут прыгать непосредственно на навигацию страницы, но проблема заключается в том, что все блоки определяются DIV, а значение DIV определяется разработчиком, поэтому браузер не знает, какой блок должен быть блоком, где находится ссылка навигации. Появление новых тегов HTML 5 просто компенсирует этот недостаток. Затем, если приведенный выше код заменен HTML 5, вы можете написать его так:
<заголовок>
<hgroup>
<h1> Название веб -сайта </h1>
<h1> subtitle subtitle </h1>
</hgroup>
<av>
<ul>
<li> html 5 </li>
<li> css </li>
<li> javascript </li>
</ul>
</nav>
</header>
<div id = Left>
<статья>
<p> Это статья о новых тегах структуры HTML 5. </p>
</article>
<статья>
<p> Это также статья о новых тегах структуры HTML 5. </p>
</article>
</div>
<в сторону>
<h1> профиль автора </h1>
<p> г-н Титнк, обычный человек, который фокусируется на технологии веб-фронта. </p>
</кроме>
<нижний колонтитул>
Нижняя часть страницы
</cooler>
Оказывается, что структура страниц HTML может быть настолько красивой, что ее можно увидеть с первого взгляда без комментариев. Для браузеров вы больше не будете убывать, когда найдете соответствующий блок.
Как структурировать элементы с помощью HTML 5 новых тегов:Через приведенный выше пример мы понимаем инновации новых тегов HTML 5 для структуры, но при переходе на фактическое использование, как мы можем их использовать соответствующим образом? Я думаю, что это также вопрос, который многие ученики HTML 5 хотят задать. Так же, как и семантика XHTML, также следует соблюдать использование HTML 5 семантических тегов: каждый тег имеет свое конкретное значение, а семантика означает, что мы используем соответствующие теги в правильном месте, чтобы лучше сделать людей и машины (машины могут быть поняты, поскольку браузеры могут пониматься как поисковые системы). Например, тег заголовка, как правило, является первым элементом блока страницы (тег заголовка также можно использовать в элементе заголовка типа, например, заголовок блока статьи), которая содержит информацию о теме страницы; Тег NAV обычно используется для обертывания информации о навигации; Нижний нижний колонтитул обычно используется для обертывания нижней информации о странице; и так далее.
Ниже приведены руководящие принципы по объяснению и использованию для общих новых тегов для структурных классов, перечисленных в руководстве HTML 5:
<Header> TagРучное определение: определяет заголовок раздела или документа.
Рекомендации по использованию: обычно используется для включения заголовков страниц, а также может использоваться для других заголовков области, таких как заголовки статьи:
<заголовок>
<hgroup>
<h1> Название веб -сайта </h1>
<h1> subtitle subtitle </h1>
</hgroup>
</header>
<hgroup> тегРучное определение: используется для объединения названий веб -страницы или раздела.
Рекомендации по использованию: используется для комбинаций классов заголовка, таких как заголовок и подзаголовок статьи:
<hgroup>
<h1> Это статья, представляющая теги структуры HTML 5 </h1>
<h2> html 5 инновации </h2>
</hgroup>
<av> тегРучное определение: Определите часть, которая определяет навигационную ссылку.
Рекомендации по использованию: раздел навигации для определения страниц:
<av>
<ul>
<li> html 5 </li>
<li> css </li>
<li> javascript </li>
</ul>
</nav>
<в сторону> тегОпределите контент, кроме статьи. Содержание в стороне должно быть связано с содержанием статьи.
Руководство по использованию: используется для разделения контента, в потоке документов будет запущено новый раздел, который обычно используется в боковых панелях, связанных с содержанием статьи:
<в сторону>
<h1> профиль автора </h1>
<p> г-н Титнк, обычный человек, который фокусируется на технологии веб-фронта. </p>
</кроме>
<section> тегРучное определение: определить разделы в документе. Например, главы, заголовки, нижние колонтитулы или другие части документа.
Рекомендации по использованию: Содержание, используемое для разделов, запустит новый раздел в потоке документов:
<раздел>
Что такое раздел <h1>? </h1>
<h2> новая глава </h2>
<статья>
<h2> о разделе </h1>
<p> Введение в раздел </p>
...
</article>
</section>
<нижний колонтитул> тегРучное определение: определяет нижний колонтитул раздела или документа. Как правило, он будет содержать имя создателя, дату создания документа и/или контактную информацию.
Рекомендации по использованию: обычно используется для обертывания всей страницы общим дном, а также может использоваться в нижней части других областей, таких как нижняя часть статьи:
<нижний колонтитул>
</cooler>
<статья> тегРучное определение: определить внешний контент. Например, новая статья от поставщика внешних новостей, либо из блога, либо с форума. Или это происходит из других внешних источников.
Рекомендации по использованию: Как следует из названия, оно обычно используется в блоках статьи:
<статья>
<заголовок>
<hgroup>
<h1> Это статья, представляющая теги структуры HTML 5 </h1>
<h2> html 5 инновации </h2>
</hgroup>
<Time DateTime = 2011-03-20> 2011.03.20 </time>
</header>
<p> Детали содержания статьи </p>
</article>
<Рисунок> тегРучное определение: используется для объединения элементов.
Рекомендации по использованию: в основном используется для сочетания изображений и описаний изображений:
<Рисунок>
<img src = img.gif alt = фигура тега = рисунок тег/>
<FigCaption> Это описание информации изображения </figcaption>
</Рисунок>
<меню> тегРучное определение: определить список меню. Используйте этот тег, когда вы хотите перечислить элементы управления формой.
Руководство по использованию: используется в блоках классов меню, используется для определения списков меню или вариантов меню:
<меню>
<li> html 5 </li>
<li> css </li>
<li> javascript </li>
</menu>
Другие новые теги в HTML 5 не будут объяснены один за другим. Пожалуйста, проверьте руководство самостоятельно.
На самом деле, эти вещи похожи на Div, H1, Inpu и другие теги в XHTML. Пока вы больше практикуете в повседневной жизни, их легко использовать свободно.
О совместимостиЕсли вы человек, который любит учиться и обращать внимание на фронт-конце, вы должны знать, что новые теги HTML 5 были использованы в структуре страниц Taobao. Итак, я хочу сказать, что, пока вы смеете попробовать, совместимость не является проблемой. В Интернете есть много методов совместимости (эта статья о структуре, ха ~).
Более поздние историиЛюбая новая технология требует процесса адаптации. Если вы готовы стать отличным разработчиком веб-фронта, вы должны продолжать пытаться и принимать новейшие технологии фронта.
Сунь Вэнь однажды сказал, что если вы хотите сделать счастье цивилизации, вы должны избавиться от боли цивилизации. Это верно для революции человечества, как и революция HTML 5. Постепенное снижение IE позволило крупным производителям браузеров войти в период воюющих государств и конкурировать друг с другом. Что касается разработчиков, мы только надеемся, что крупные производители браузеров должны следовать тому же стандарту как можно больше, а не разделять игроков после конкуренции. Потому что эффективная и идеальная презентация одного и того же приложения для всех видов пользователей является нашей конечной целью.
Таким образом, эта статья начинается с Doctype страницы до использования новых тегов HTML 5 для создания более семантической структуры страницы, а затем объясняет новые теги, связанные со структурой страницы. Я полагаю, что у всех есть новое понимание структурных новых тегов HTML 5. Если вы заинтересованы, откройте свою IDE, напишите кусок кода, созданный новым тегом HTML 5, а затем используйте CSS, чтобы описать ваш великий план!