Я считаю, что все знают HTML и CSS, знает разделение структуры HTML и производительности CSS и знает семантику HTML. Это популярные ключевые слова в последние годы. Семантический HTML был востребован только год или два назад в Китае. Посмотрите на структуру HTML, о которой сейчас говорят в группе. Вопросы интервью о структуре HTML, семантические HTML -учетные записи для большой части. Так зачем использовать семантический HTML? Каковы преимущества семантического HTML?
HTML предоставляет структуру контекста и значение содержания документа веб -страницы; Сам HTML не выражает его. Мы видим, что, например, <h1> смелый, размер шрифта - 2ем, жирный; <strong> смелый, не думайте, что это проявление HTML. На самом деле это стиль CSS по умолчанию HTML в действии, поэтому сначала мы должны знать, что HTML не имеет ничего общего с производительностью страницы, это вопрос CSS. Роль HTML на странице - это структура и значение. С точки зрения непрофессионала, это разделить контент. Что здесь размещено и то, что мы положили.
Семантическая структура HTML должна сначала подчеркнуть структуру HTMLСтруктура HTML - это скелет страницы. Страница похожа на дом. Структура HTML представляет собой стенку из стального железобетона. Если в доме нет стены стального железобетона, это будет куча кирпичей и не может жить в людях или на работе. CSS - это декоративный материал, бревенчатый пол, мрамор, краска и используется для украшения дома. Нет необходимости говорить больше о силе CSS. Если CSS не имеет структуры HTML, это будет куча деревянных досок, окрашенных вместе, без фактической стоимости. CSS полностью зависит от (x) HTML -документов, которые ссылаются на это. Если вы хотите получить полную мощность CSS в полной мере, очень необходимо предоставить HTML как чистый, так и структурированный контент. HTML является общим термином для публикации гипертекста в Интернете ... HTML использует теги для структуры текста ( http://www.w3.org/markup/ ).
Как написать семантическую структуру HTML?HTML - это метод дополнения структуры и значения содержимого текста (или семантики). Он скажет нам: эта строка является заголовком, и эти строки образуют абзац. Эти тексты являются списками элементов, и эти тексты являются гиперссылками, которые ссылаются на другой файл в Интернете. Стоит отметить, что HTML не должен говорить нам: эти тексты синие, и эти тексты красные. Эта часть контента является самой правой столбцей, и эта строка находится в курсиве. Эта информация, связанная с производительностью, является работой CSS. При разработке фронт-энда, помните: HTML говорит нам, что такое кусок контента (или его значение), а не то, как он выглядит. Когда мы упоминаем семантические теги, то, что мы называем HTML, должно быть полностью отделено от информации о презентации, а теги в нем должны семантически определять структуру документа.
Семантическая структура HTML на самом деле очень проста. Во -первых, освоить семантику каждого тега в HTML. <div> - контейнер; <strong> является акцентом; <ul> <li> - это неупорядоченный список и т. Д. Когда вы видите контент, подумайте о том, что теги могут лучше описать его, и используйте любые теги.
Каковы преимущества семантических HTML -структур?Мы знаем, что недавно добавленные теги HTML5, такие как <Header> и <gooler>, HTML развивается к более надежной семантической структуре HTML. XHTML2 не так продвинут, как HTML5 в этом отношении, что также является причиной смерти XHTML2. Это также показывает, что семантическая структура HTML является тенденцией развития HTML.
1. Когда страница удалена или стиль потерян, она может дать странице четкую структуру:Сам HTML не выражает себя. Мы видим, что, например, <h1> смелый, с размером шрифта 2em, жирным шрифтом; <strong> смелый, не думайте, что это проявление HTML. На самом деле это стили CSS по умолчанию HTML в действии, поэтому удаление или потерю стилей может сделать страницу представлять собой четкую структуру не является преимуществом семантической структуры HTML, но у браузеров есть стили по умолчанию. Цель стиля по умолчанию также состоит в том, чтобы лучше выразить семантику HTML. Можно сказать, что стиль браузера по умолчанию и семантическую структуру HTML неотделимы.
2. Читатели экрана (если посетитель ограничен визуально) полностью прочтет ваши веб -страницы в зависимости от вашей разметки .Например, если вы используете семантические маркеры, читатель экрана будет писать ваши слова один за другим, вместо того, чтобы пытаться произнести их полностью.
3. КПК, мобильный телефон и другие устройства, возможно, не смогут отображать веб -страницы, такие как обычные компьютерные браузеры (обычно потому, что эти устройства имеют слабую поддержку CSS).Использование семантического тега гарантирует, что эти устройства осмыслят веб -страницы. В идеале задача просмотра устройства состоит в том, чтобы отображать веб -страницы в соответствии с условиями самого устройства.
Семантическая маркировка предоставляет устройству необходимую ему информацию, устранение себя для рассмотрения всех возможных ситуаций отображения (включая существующие или новые устройства в будущем). Например, телефон может выбрать абзац текста, помеченный заголовок, жирным шрифтом. Управляющий компьютер может отображать его более крупным шрифтом. В любом случае, как только вы отмечаете текст как заголовок, вы можете быть уверены, что читатель будет отображать страницу соответствующим образом на основе своих собственных условий.
4. Поисковые сканеры также полагаются на теги, чтобы определить контекст и веса отдельных ключевых слов.В прошлом вы, возможно, не рассматривали, что сканеры поисковых систем также являются посетителями веб -сайтов, но теперь они на самом деле чрезвычайно ценные пользователи. Без них поисковые системы не смогут индексировать ваш веб -сайт, и тогда среднего пользователя будет очень трудно прийти к посещению.
5. Независимо от того, легко ли понимать вашу страницу, потому что сканеры в значительной степени игнорируют маркеры, используемые для представления, и сосредоточиться только на семантических маркерах.Следовательно, если заголовок файла страницы помечен вместо, страница может находиться в нижней позиции результатов поиска. В дополнение к улучшению простоты использования, семантическое теги является способным к правильному использованию CSS и JavaScript, поскольку он сам обеспечивает множество крючков для применения стиля и поведения страницы.
SEO в основном зависит от контента и внешних ссылок вашего сайта.
6. Легко в команде разработки и обслуживанияW3C устанавливает хороший стандарт для нас. Каждый в команде следует за этим стандартом, который может уменьшить много дифференцированных вещей, облегчить разработку и техническое обслуживание, повысить эффективность развития и даже реализовать модульное развитие .
Если у вас есть разные мнения, добавьте их. Пожалуйста, оставьте сообщение для обсуждения.
Спасибо Gui Ge, Milk Tea, Xiaozhi, краже риса, Caspar и CSS Forest Group для обсуждения