Я считаю, что все знают HTML и CSS, знают разделение структуры HTML и производительности CSS, а также знают семантику HTML. В последние годы это популярные ключевые слова. Семантический HTML стал популярен в Китае только год или два назад. Глядя на структуру HTML, обсуждаемую сейчас в группе, и на вопросы на собеседованиях о структуре HTML, можно увидеть, что семантический HTML составляет большую часть. Так зачем же использовать семантический HTML? Каковы преимущества семантического HTML?
HTML обеспечивает контекстную структуру и значение содержимого веб-документа; сам HTML не имеет представления. Например, мы видим, что <h1> выделен жирным шрифтом с размером шрифта 2em, а <strong> — жирным, поэтому не делайте этого. думайте, что это HTML. Производительность, на самом деле это стили CSS по умолчанию для HTML, поэтому, прежде всего, нам нужно знать, что HTML не имеет ничего общего с производительностью страницы, это вопросы CSS. Роль HTML на странице — это структура и смысл. С точки зрения непрофессионала, он состоит в том, чтобы разделить контент. Что мы здесь помещаем, то и добавляем.
Семантическая структура HTML должна в первую очередь подчеркивать структуру HTML.
Структура HTML — это скелет страницы. Страница похожа на дом. Структура HTML — это стены из стали и бетона. Если в доме нет стен из стали и бетона, это просто груда бесполезных кирпичей. нельзя ни жить, ни использовать для работы. CSS — декоративный материал. Это бревенчатый пол, мрамор и краска. Его используют для украшения дома. Стоит ли говорить, что сила CSS — это просто груда дерева. доски окрашены вместе и не имеют реальной потребительной ценности. 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> и <footer>. HTML развивается в сторону более надежной и семантической структуры HTML в этом отношении. Это также одна из причин. Смерть xhtml2 Это также показывает, что семантическая структура HTML является тенденцией развития HTML.
1. Когда стиль удален или утерян, страница может представлять собой четкую структуру:
HTML сам по себе не имеет производительности. Например, мы видим, что <h1> выделен жирным шрифтом, размер шрифта 2em, полужирный; <strong> — полужирный. Не думайте, что это производительность HTML. На самом деле это стили CSS по умолчанию. . Функция, поэтому удаление или потеря стиля может привести к тому, что страница будет представлять собой четкую структуру, что не является преимуществом семантической структуры HTML. Однако в браузерах есть стили по умолчанию, цель которых также состоит в том, чтобы лучше выразить семантику. html Можно сказать, что стили браузера по умолчанию и семантическая структура HTML неразделимы.
2. Программы чтения с экрана (если посетитель с нарушениями зрения) «прочитают» вашу страницу, полностью основываясь на вашей разметке .
Например, если вы используете семантическую разметку, программы чтения с экрана будут «проговаривать» ваше слово, а не пытаться произнести его полностью.
3. Такие устройства, как КПК и мобильные телефоны, могут не отображать веб-страницы, как обычные компьютерные браузеры (обычно потому, что эти устройства имеют слабую поддержку CSS).
Использование семантической разметки гарантирует, что эти устройства отображают веб-страницы осмысленным образом. В идеале перед устройством просмотра стоит задача отображать веб-страницы в соответствии с условиями самого устройства.
Семантическая маркировка предоставляет устройству необходимую информацию, избавляя вас от необходимости учитывать все возможные сценарии отображения (на существующих или новых устройствах в будущем). Например, телефон может выбрать отображение раздела, помеченного заголовком. . Текст отображается жирным шрифтом. На портативном компьютере он может отображаться более крупным шрифтом. В любом случае, отметив текст как заголовок, вы можете быть уверены, что устройство чтения отобразит страницу соответствующим образом на своих условиях.
4. Сканеры поисковых систем также полагаются на теги для определения контекста и веса отдельных ключевых слов.
Раньше вы, возможно, не считали, что сканеры поисковых систем также являются «посетителями» веб-сайта, но теперь они на самом деле являются чрезвычайно ценными пользователями. Без них поисковые системы не смогут проиндексировать ваш сайт, и тогда он будет. обычным пользователям сложно прийти и посетить.
5. Очень важно, легко ли сканерам понять вашу страницу, поскольку сканеры в основном игнорируют разметку, используемую для повышения производительности, и сосредотачиваются только на семантической разметке.
Поэтому, если заголовок файла подкачки помечен тегом, а не тегом, страница может отображаться ниже в результатах поиска. Помимо повышения удобства использования, семантическая разметка облегчает правильное использование CSS и JavaScript, поскольку она сама предоставляет множество возможностей. Hook», чтобы применить стиль и поведение страницы.
SEO в основном зависит от содержания вашего сайта и внешних ссылок.
6. Содействовать развитию и поддержанию команды.
W3C установил для нас хороший стандарт. Все в команде следуют этому стандарту, что позволяет сократить многие дифференцированные вещи, облегчить разработку и обслуживание, повысить эффективность разработки и даже достичь модульной разработки .
Если у вас есть иное мнение или дополнения, пожалуйста, оставьте сообщение для обсуждения.
Спасибо Brother Gui, Milk Tea, Xiaozhi, Stealing Rice, Caspar и CSS Forest Group за обсуждение.
Исходный текст: http://www.css88.com/archives/1668.