Что такое семантика HTML
Говоря о семантике HTML, мы должны сначала поговорить о том, за что отвечает HTML? Ниже выдержка из Википедии:
Язык разметки гипертекста (английский язык: язык разметки гипертекста, называемый: HTML) — это стандартный язык разметки, используемый для создания веб-страниц. Элементы HTML являются строительными блоками веб-сайта. HTML позволяет встраивать изображения и объекты и может использоваться для создания интерактивных форм, для структурирования информации, такой как заголовки, абзацы и списки, и в некоторой степени для описания внешнего вида и семантики документов. О понимании семантикиГу Илин: Как понять веб-семантику?Здесь очень ясно, я кратко изложу свое понимание: С точки зрения непрофессионала, это отображение структуры страницы из кода, а не из окончательного визуального отображения. Чистый HTML-кодбез какого-либо стиляПросто используйте для обозначения этого раздела заголовок.Этот фрагмент является кодом.То есть, чтобы подчеркнуть содержание,но почему мы только пишем HTML разными метками в браузере?Разные стили? Это связано с тем, что каждый браузер поставляется со стилем соответствующей метки по умолчанию, чтобы упростить отображение страницы без установки стиля. Хороший семантический код можно увидеть непосредственно из кода, какое содержание нужно выразить.
Зачем использовать семантические теги HTML
Зачем использовать семантические теги? Я также могу использовать DIV + CSS для достижения того же эффекта.Это правда, что между ними нет никакой разницы, просто глядя на эффект, но страница предназначена не только для людей, но и для машины, чтобы увидеть сканер . Структура веб-страницы стала более понятной и простой в разработке и обслуживании:
Кроме того, когда файл стиля страницы потерян из-за сети или по другим причинам, какой из них более удобен для пользователя со страницей, полной div, и страницей с хорошей семантической структурой?
преимущество
- Семантические теги вносят свой вклад в хорошо структурированную структуру HTML, что способствует индексации и сканированию поисковыми системами. Проще говоря, представьте, что ключевое слово, совпавшее в теге H1, и ключевое слово, совпадающее с div, поместит этот результат на первое место.
- Облегчение синтаксического анализа для различных устройств (программ чтения с экрана, слепых программ чтения и т. д.) Страницы, полные элементов div Как эти устройства различают, какие из них являются основным контентом для чтения в первую очередь?
- Это способствует созданию четкой организации и способствует развитию и поддержанию команды.
Как это делают крупные заводы?
Взгляните на работу большой фабрики, откройте страницу Taobao, чтобы просмотреть исходный код ее домашней страницы,Глобально есть только один h1Этикетка является его логотипом.
Глядя ниже, заголовок столбца темы - h2.
<em></em>Особое внимание уделяется управляемости.Хотя это можно сделать с помощью div+css, он по-прежнему использует соответствующие семантические теги, чтобы подчеркнуть роль.
На что следует обратить внимание при написании семантического кода
- Используйте как можно меньше несемантических тегов div и span; когда семантика не очевидна, когда вы можете использовать div или p, попробуйте использовать p, потому что p по умолчанию имеет верхний и нижний интервалы, что полезно для совместимости со специальными тегами. терминалы;
- Не используйте теги чистого стиля, такие как: b, font, u и т. д., вместо этого используйте настройки css. Текст, который необходимо выделить, можно включить в теги strong или em (предустановленные стили в браузерах, их можно указать с помощью CSS без них), стиль strong по умолчанию — полужирный (не используйте b), а em — курсив (не используйте не использовать я);
- При использовании таблицы используйте заголовок для заголовка, thead для заголовка, tbody для основной части и tfoot для хвоста. Заголовок и общие ячейки следует различать, заголовок — th, а ячейка — td;
- Поле формы должно быть обернуто тегом fieldset, а тег легенды должен использоваться для описания цели формы; текст описания, соответствующий каждому тегу ввода, должен использовать тег метки, и, установив атрибут id для ввода , установите for=someld в теге label, чтобы описание Текст был связан с соответствующим вводом.
Некоторые часто используемые семантические теги
-
<h1>~<h6>, используемые в качестве заголовков, и в порядке убывания важности,<h1>является высшим уровнем. -
<p>Знак абзаца, понял<p>в качестве абзаца вы не будете использовать<br />заворачивать и не надо<br />отличать абзацы от абзацев.<p>Текст будет автоматически переноситься, и эффект переноса лучше, чем<br />. Расстояние между абзацами также можно контролировать с помощью CSS, что позволяет легко и четко отличать абзацы от абзацев. -
<ul>,<ol>,<li>,<ul>Неупорядоченный список, это широко используется всеми,<ol>Упорядоченные списки обычно не используются. В процессе веб-стандартизации<ul>Он также больше используется для навигационных панелей, которые на самом деле представляют собой просто список, что совершенно правильно, и когда ваш браузер не поддерживает CSS, навигационные ссылки по-прежнему работают хорошо, просто немного менее эстетично. -
<dl>,<dt>,<dd>,<dl>Это просто "список определений". Например, пояснения и определения слов в словаре могут использовать этот список.dl не используется отдельно, обычно он используется вместе с dt и dd. dl открывает список определений, dt указывает имя определяемого проекта, а dd указывает описание проекта dt. -
<em>,<strong>,<em>используется для акцента,<strong>используется для акцента. -
<table>,<thead>,<tbody>,<td>,<th>,<caption>, используется для создания таблиц, а не для макета
Что нового в HTML5
Стандарт HTML5 более семантический, и для иллюстрации этих новых тегов используется картинка в Интернете.
-
header元素Элемент :header представляет заголовок «страницы» или «раздела». -
footer元素Элемент :footer представляет нижний колонтитул «веб-страницы» или «раздела» и обычно содержит некоторую основную информацию о разделе, такую как: автор, ссылки на связанные документы, информация об авторских правах. -
hgroup元素: -
nav元素Элемент :nav представляет область навигационных ссылок на странице. Используется для определения основной навигационной части страницы. -
aside元素: элемент aside включается в элемент article как вспомогательная информационная часть основного контента, а контент может представлять собой связанную информацию, теги, пояснения ранжирования и т. д., относящиеся к текущей статье. (специальный раздел) -
section元素Элемент: раздел представляет собой «раздел» или «раздел» в документе. «Раздел» может ссылаться на подраздел по теме в статье; «раздел» может ссылаться на группировку на странице. Разделы обычно также имеют заголовки. Хотя разделы в HTML5 будут автоматически понизить заголовки H1-H6, лучше всего понизить их вручную. -
article元素Элемент: article, скорее всего, будет спутан с section и div.На самом деле, article представляет собой самодостаточный контент в документе, странице или веб-сайте, и его цель — позволить разработчикам разрабатывать или повторно использовать независимо. Например, сообщение на форуме, статья в блоге, комментарий пользователя, интерактивный виджет. (специальный раздел) В дополнение к своему содержанию статья будет иметь заголовок (обычно в заголовке) и нижний колонтитул.
Рекомендуется прочитать блог оригинального блогера:портал