HTML5 Innovation: красота структуры

Автор：Eve Cole Время обновления：2025-03-27 16:00:04

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>

<голова>

</head>

Вы можете вспомнить? Вы запомните это по Роте? Конечно, нет! Нам нужна только механическая копия и вставка.

Давайте посмотрим, как является стандартный заголовок HTML 5:

<! Doctype html>

Мне не нужно говорить, какой из них сложнее, а какой прост. Да, заголовок HTML 5 может быть настолько прост, что его можно легко запомнить! Кроме того, корпус, цитаты и обратные сшивки перед последним угловым кронштейном можно игнорировать.

Почему это может быть так свободно? Фактически, если xhtml отправляется как текст/HTML, браузер также может хорошо его проанализировать, а браузер не заботится о синтаксисе кода. Таким образом, HTML 5 является метафизическим, он может нарушить некоторые оригинальные стандарты, но он все еще может хорошо работать в браузере.

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

<! Doctype html>

<html>

<голова>

...

</head>

<тело>

...

</body>

</html>

Кроме того, хотя HTML 5 в настоящее время не поддерживается всеми браузерами, этот заголовок, который может сэкономить более 100 байтов (для сайтов с ежедневными уровнями PV или более одного миллиона, он может сэкономить много трафика). Если вы исследовали в режиме разрешения браузера, вы должны знать, что страницы будут запустить странный режим без определения Doctype, и пока определяется браузер <! Doctype html>, вы можете проанализировать страницы в стандартном режиме без указания определенного типа DTD.

Новая семантическая система маркировки

Семантическое кодирование является необходимым навыком для квалифицированных разработчиков фронта, но, поскольку веб-страницы становятся все более богатыми, очевидно, что они не могут сделать это, просто используя оригинальный тег XHTML для Desemanate. Бог сказал: должен быть свет! Тогда есть свет. Следовательно, HTML 5 предоставляет ряд новых тегов и соответствующих атрибутов, отражающих типичную семантику современных веб -сайтов. Практика, чтобы произвести истину. Давайте напишем пример:

<h1> Название веб -сайта </h1>

<h1> subtitle subtitle </h1>

</div>

<ul>

<li> javascript </li>

</ul>

</div>

<!-// Конец заголовка->

<p> Это статья о новых тегах структуры HTML 5. </p>

</div>

<p> Это также статья о новых тегах структуры HTML 5. </p>

</div>

<!-// левый конец->

<h1> профиль автора </h1>

<p> г-н Титнк, обычный человек, который фокусируется на технологии веб-фронта. </p>

</div>

<!-// боковой конец->

Нижняя часть страницы

</div>

<!-// конец нижней части->

Выше представляет собой простую часть страницы блога HTML, состоящая из заголовка, области отображения статьи, правой боковой столбцы и внизу. Кодирование является аккуратным и соответствует семантике XHTML, которая может быть выполнена хорошо даже в HTML 5. Но для браузера это кусок кода, который не различает веса, а не тег, который позволяет машине понимать семантику, чтобы определить соответствующий блок. Например, стандартные браузеры (такие как Firefox, Chrome и даже новая версия IE) имеют ярлык, который может привести к тому, что клиенты могут прыгать непосредственно на навигацию страницы, но проблема заключается в том, что все блоки определяются DIV, а значение DIV определяется разработчиком, поэтому браузер не знает, какой блок должен быть блоком, где находится ссылка навигации. Появление новых тегов HTML 5 просто компенсирует этот недостаток. Затем, если приведенный выше код заменен HTML 5, вы можете написать его так:

<заголовок>

<h1> Название веб -сайта </h1>

<h1> subtitle subtitle </h1>

</hgroup>

<av>

<ul>

<li> javascript </li>

</ul>

</nav>

</header>

<статья>

<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

Ручное определение: определяет заголовок раздела или документа.

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

<заголовок>

<h1> Название веб -сайта </h1>

<h1> subtitle subtitle </h1>

</hgroup>

</header>

<hgroup> тег

Ручное определение: используется для объединения названий веб -страницы или раздела.

Рекомендации по использованию: используется для комбинаций классов заголовка, таких как заголовок и подзаголовок статьи:

<h1> Это статья, представляющая теги структуры HTML 5 </h1>

<h2> html 5 инновации </h2>

</hgroup>

<av> тег

Ручное определение: Определите часть, которая определяет навигационную ссылку.

Рекомендации по использованию: раздел навигации для определения страниц:

<av>

<ul>

<li> javascript </li>

</ul>

</nav>

<в сторону> тег

Определите контент, кроме статьи. Содержание в стороне должно быть связано с содержанием статьи.

Руководство по использованию: используется для разделения контента, в потоке документов будет запущено новый раздел, который обычно используется в боковых панелях, связанных с содержанием статьи:

<в сторону>

<h1> профиль автора </h1>

<p> г-н Титнк, обычный человек, который фокусируется на технологии веб-фронта. </p>

</кроме>

<section> тег

Ручное определение: определить разделы в документе. Например, главы, заголовки, нижние колонтитулы или другие части документа.

Рекомендации по использованию: Содержание, используемое для разделов, запустит новый раздел в потоке документов:

<раздел>

Что такое раздел <h1>? </h1>

<h2> новая глава </h2>

<статья>

<h2> о разделе </h1>

<p> Введение в раздел </p>

...

</article>

</section>

<нижний колонтитул> тег

Ручное определение: определяет нижний колонтитул раздела или документа. Как правило, он будет содержать имя создателя, дату создания документа и/или контактную информацию.

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

<нижний колонтитул>

[email protected]

</cooler>

<статья> тег

Ручное определение: определить внешний контент. Например, новая статья от поставщика внешних новостей, либо из блога, либо с форума. Или это происходит из других внешних источников.

Рекомендации по использованию: Как следует из названия, оно обычно используется в блоках статьи:

<статья>

<заголовок>

<h1> Это статья, представляющая теги структуры HTML 5 </h1>

<h2> html 5 инновации </h2>

</hgroup>

</header>

<p> Детали содержания статьи </p>

</article>

<Рисунок> тег

Ручное определение: используется для объединения элементов.

Рекомендации по использованию: в основном используется для сочетания изображений и описаний изображений:

<Рисунок>

<FigCaption> Это описание информации изображения </figcaption>

</Рисунок>

<меню> тег

Ручное определение: определить список меню. Используйте этот тег, когда вы хотите перечислить элементы управления формой.

Руководство по использованию: используется в блоках классов меню, используется для определения списков меню или вариантов меню:

<меню>

<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, чтобы описать ваш великий план!