Семантика – это изучение значения слов и фраз в языке. Семантический элемент = элемент, имеющий значение. Семантический элемент четко описывает, что он означает для браузеров и разработчиков. Примеры несемантических элементов ：<div>和<span>- об их содержимом ничего не известно. Примеры семантических элементов: <форма>, <таблица> и <статья> — четко определяют их содержание. Все современные браузеры поддерживают семантические элементы HTML5.
Многие веб-сайты содержат HTML-код, такой как ：<div id =nav> <div class =header> <div id =footer> для обозначения навигации, верхних и нижних колонтитулов. HTML5 предоставляет новые семантические элементы для определения различных частей веб-страницы:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>HTML5-элемент <section>
Элемент <section> определяет раздел документа. Согласно документации W3C по HTML5: Раздел — это тематическая группа контента, обычно с заголовком. Домашние страницы обычно можно разделить на несколько разделов, содержащих введение, содержание и контактную информацию.
<!DOCTYPE html> <html> <body> <section> <h1>Java</h1> <p>Java — это широко используемый язык программирования с кроссплатформенными, объектно-ориентированными и универсальными функциями программирования, применяемый на предприятии. Разработка веб-приложений на уровне и разработка мобильных приложений. </p> </section> <section> <h1>PHP</h1> <p>PHP (полное имя: PHP: Препроцессор гипертекста, а именно PHP: Препроцессор гипертекста) — это язык компьютерных сценариев общего назначения с открытым исходным кодом. подходит для веб-разработки и может быть встроен в HTML. </p> </section> </body> </html>HTML5-элемент <article>
Элемент <article> определяет независимый включенный контент. Статья должна иметь смысл сама по себе и должна читаться независимо от остальной части сайта. Примеры использования элемента <article>:
<!DOCTYPE html> <html> <body> <article> <h1>Java</h1> <p>Java — это широко используемый язык компьютерного программирования с кроссплатформенными, объектно-ориентированными и универсальными функциями программирования, применяемый на предприятии. Разработка веб-приложений на уровне и разработка мобильных приложений. </p> </article> </body> </html>HTML5-элемент <header>
Элемент <header> указывает заголовок файла или раздела. Элемент <header> следует использовать в качестве контейнера для вводного контента. Вы можете включить несколько элементов в <header>. Следующий пример определяет заголовок статьи:
<!DOCTYPE html> <html> <body> <article> <header> <h1>Java</h1> <p>Что такое Java:</p> </header> <p>Java — широко используемый компьютер язык программирования с кроссплатформенными, объектно-ориентированными и универсальными функциями программирования, широко используемый при разработке веб-приложений корпоративного уровня и разработке мобильных приложений. </p> </article> </body> </html>HTML5 элемент <footer>
Элемент <footer> указывает файл или часть нижнего колонтитула. Элемент <footer> должен содержать информацию о содержащей его единице. В нижнем колонтитуле обычно указывается автор документа, информация об авторских правах, ссылка на условия использования, контактная информация и т. д. Внутри <footer> может быть несколько элементов.
<!DOCTYPE html> <html> <body> <footer> <p>Авторские права</p> <p>Контактная информация: <a href=mailto:[email protected]> [email protected]</a> . </p> </footer> </body> </html>HTML5-элемент <nav>
Элемент <nav> определяет набор навигационных ссылок.
<!DOCTYPE html> <html> <body> <nav> <a href=#>Java</a> | <a href=#>CSS</a> | <a href=#>HTML</a> | <a href=#>jQuery</a> </nav> </body> </html>HTML5-элемент <aside>
Элемент <aside> определяет некоторый контент из содержимого, на котором он размещен (например, боковую панель). Содержимое <aside> должно быть окружающим содержимым.
<!DOCTYPE html> <html> <body> <p>Java — это широко используемый язык компьютерного программирования с кроссплатформенными, объектно-ориентированными и универсальными функциями программирования. Он широко используется при разработке веб-приложений и мобильных приложений корпоративного уровня. разработка. . </p> <aside> <h4>PHP</h4> <p>PHP — лучший язык в мире. </p> </в сторону> </body> </html>Подвести итог
Выше приведены семантические элементы HTML5, введенные редактором. Действительно ли вы правильно их использовали? Надеюсь, это будет вам полезно. Если у вас возникнут вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!
Если вы считаете, что эта статья вам полезна, вы можете ее перепечатать, укажите источник, спасибо!