Стандарт HTML5 добавляет много новых семантических элементов.
Здесь мы в основном представляем новые элементы в структуре страницы.
Что такое семантический элементПроще говоря, семантические элементы должны дать некоторое значение элементу (метка).
Такие как <weader> представляющий заголовок, <footh>, чтобы указать нижний колонтитул.
Характеристика① Простой техническое обслуживание: использование семантических элементов будет иметь более четкую информацию о структуре страниц, которая легко поддерживать последующее обслуживание страницы. Не нужно снова просматривать код: найти разделение, прежде чем найти конкретное имя класса.
② Шкаф -Free: он помогает прочитать считыватель экрана и другие вспомогательные инструменты.
③ Оптимизированная поисковая оптимизация: после проверки некоторых семантических элементов HTML5, поисковые роботы могут собирать информацию на своей странице индекса.
Оригинальный макет интерфейсаВ макете страницы <Div> является очень распространенным элементом.
Чтобы облегчить техническое обслуживание, дизайнеры часто дают эти <div> classname (категория стиля) или удостоверение личности с особыми именами.
Например, элемент <div>, который представляет заголовок, его классное имя или идентификатор может быть заголовком страницы, заголовком и т. Д.
Пример:
Семантический элемент структуры страниц иллюстрироватьСемантические элементы структуры страниц в основном используются для общей планировки страницы.
И у него нет особого стиля, его все еще нужно использовать с CSS.
Подробное введение <Header>: Определите область головы веб -страницы или статьи. Он может содержать логотип, навигацию, строку поиска и так далее.Самая низкая версия браузера: т.е. 9, Chrome 5
Инструкции для использования:
① Когда он используется для маркировки веб -страницы, она может включать такую информацию, как логотип, навигация, строка поиска.
② Когда заголовок используется для обозначения контента, только когда заголовок также прикреплен к другой информации, рассматривается <Header>.
<Main>: Определите основной контент веб -страницы.Самая низкая версия браузера: IE не поддерживает, Chrome 35
<нижний колонтитул>: Определите область хвоста веб -страницы или статьи. Это может включать авторские права и подачу.Самая низкая версия браузера: т.е. 9, Chrome 5
Инструкции для использования:
① Как веб -страница, она обычно включает в себя авторские права на веб -сайт, юридические ограничения и ссылки.
② В качестве сноски статьи она обычно содержит соответствующую информацию автора.
<Av>: отметьте ссылку на навигацию страницы. Содержит несколько увлекаемых областей.Самая низкая версия браузера: т.е. 9, Chrome 5
Инструкции для использования:
① Одна страница может содержать несколько элементов <av>, таких как навигация и рекомендация связанных статей.
② Контактная информация и информация о сертификации в области <chooler> не должны быть включены в элемент <av>.
<section>: обычно отмечается как независимая область на веб -странице.Самая низкая версия браузера: т.е. 9, Chrome 5
Инструкции для использования:
① можно использовать в качестве независимой области на веб -странице, например, раздел в статье.
<Artticle>: Полные и независимые блоки контента; Такие как новости, статьи в блоге и другой независимый контент (за исключением комментариев или профилей авторов).Самая низкая версия браузера: т.е. 9, Chrome 5
<в сторону>: Определите блоки контента вне основного содержания окружающей среды. Такие как: аннотация.Самая низкая версия браузера: т.е. 9, Chrome 5
<Igright>: он представляет собой раздел независимого контента и часто используется с <FigCaption> (представляет), который можно использовать для изображений, иллюстраций, форм, сегментов кода и т. Д. В статье.Самая низкая версия браузера: т.е. 9, Chrome 8 <FigCaption>: Определите заголовок элемента <Igra>.
Самая низкая версия браузера: т.е. 9, Chrome 8
Пример диаграммы
Старая версия поддержки браузера IE8 вышеБраузер будет использоваться в качестве внутреннего элемента для элементов, которые не знают. Семантические элементы, связанные с страницей, представляют собой элементы блока, поэтому вам нужно только установить браузеры, которые не поддерживают эти элементы, чтобы отобразить их в виде элементов блока.
Добавьте следующий код в стиль:
Статья, в стороне, детали, фигнирование, фигура, нижний колонтитул, заголовок, hgroup, main, vav, section, spect {display: block;} IE8 и IE8 нижеБраузеры ниже IE8 и IE8 не поддерживают полезный стиль применения элемента, который не может быть распознан.
Так что создайте эти семантические элементы через JS и добавьте основные стили.
Возьмите заголовок в качестве примера <Script> document.createElement ('Header'); Приложение Внешний файлЭти утомительные творения уже написали Lei Feng, только что загруженные на старую версию IE.
<!