Эта статья участвовала в "Проект «Звезда раскопок»”, чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.
Почему бы не использовать вслепую<div>?
Давайте посмотрим на пример:
<div>
<div>这是一个xx</div>
<div>
xxxx
</div>
<div>
xxxx
</div>
<div>xxxx</div>
</div>
Если вы видите такую структуру HTML-страницы, можете ли вы представить, что это такое?
Если вы возьмете на себя управление этой страницей, техническое обслуживание может показаться вам распутыванием запутавшегося кабеля наушников...
А как насчет следующей структуры страницы?
<body>
<header>这是一个页面</header>
<aside>
广告位或者导航
</aside>
<main>
页面内容
</main>
<footer>这个页面是xxx写的</footer>
</body>
Естественно ли думать о такой структуре веб-страницы? (Не говори невообразимое 😋)
Благодаря такой структуре веб-страницы, какую часть необходимо изменить, пока прописано правильное лекарство, моей маме больше не нужно беспокоиться о моем облысении.
Это наиболее интуитивно понятная роль семантических тегов в разработке на сегодняшний день. Он показывает структуру веб-страницы более интуитивно. Это может не проявляться, когда разрабатывается один человек, но когда несколько человек сотрудничают или просматривают написанные ими страницы, отразить эту особенность легко.
Кроме того, роль семантических тегов обычно имеет следующие основные моменты:
- Структура кода оптимизирована, а хорошая структура контента может быть представлена без обращения к CSS.
- Сканеры используют теги для определения веса ключевых слов. Дополнительные семантические теги помогают сканерам сканировать более эффективную информацию и увеличивать вес страницы.
- Увеличивает опыт доступного чтения и придает каждой части свое значение
Общие семантические теги
<header>Заголовок веб-страницы
<header>这是一个页面</header>
<main>основная часть страницы
<main>
页面内容
</main>
<footer>Нижний колонтитул веб-страницы
<footer>页眉，这个页面是xxx写的</footer>
<aside>Объявления, которые можно использовать в боковых панелях, ссылках или контенте, связанном с ближайшим контентом
<aside>
<h2>I社新作现已发售！</h2>
<p>
拉娜的奇妙洞窟冒险,内容来源:I社游戏-https://isheweiyi.com (滑稽)
</p>
</aside>
<nav>Метки определяют разделы навигационных ссылок.
<nav>
<a>Home</a>
<a>Other</a>
<a>About</a>
</nav>
<article>Определить независимый от страницы контент, который может быть вложенным<header>,<footer>,<sections>Ждать
<article>
<header>小页面标题</header>
<main>内容</main>
</article>
<section>Части веб-документов, длинные формы или статьи
<section>
<p>xxxx</p>
</section>
<figure>используется для изображений в документах
<figure>
<p>黄浦江上的的卢浦大桥</p>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
Эти семантические теги могут быть заменены во время использования<div>чтобы более осмысленно описать структуру веб-страницы
специальный ярлык
В дополнение к вышеперечисленным семантическим тегам, эти специальные теги также могут в определенной степени заменять вслепую.<div>использование. Они, как правило, играют уникальную роль и могут оказывать определенное влияние на веб-страницу.
<b></b>сделать шрифт жирным
If you can understand these words, you <b>understand</b> them
<big></big>Сделать шрифт на один размер больше (но не толще)
If you can understand these words, you <big>understand</big> them
<wbr>Определите положение линии переключения для длинной строки:
<!--当页面宽度变化时会在wbr标签处换行-->
<p>abcde<wbr>fghigkl<wbr>mnpqrs<wbr>tuvwxyz</p>
<code>和<pre>Одна из функций тега кода состоит в том, чтобы подразумевать, что текст, заключенный в теге кода в браузере, является исходным кодом компьютера, и браузер может выполнять свою собственную обработку стилей.Тег pre не имеет этой функции, но тег pre может сохранять пробелы и разрывы строк в тексте. , сохраняя текст впространствоа такженовая линияЭто необходимый стиль для отображения исходного кода компьютера. в общемcodeа такжеpreВложенное использование<pre><code>hrllo world</code></pre>
<!--尝试空格带来的影响（发现只有pre会保留空格）-->
<script type="text/javascript" src="loadxmldoc.js">
<br>
<code> <script type="text/javascript" src="loadxmldoc.js"></code>
<pre> <script type="text/javascript" src="loadxmldoc.js"></pre>
<meta>Предоставить мета-информацию о странице (мета-информация)
<!--以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--页面宽等于屏宽，缩放比等于1.0，防止出现横向滚动条-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--定义网页编码为gb2312-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="HTML,ASP,PHP,SQL">
<picture>Создайте несколько изображений, чтобы лучше заполнить области просмотра браузера
<!--在650px及以上，采用iamge1.jpg，650px-465px，采用image2.jpg...-->
<picture>
<source media="(min-width:650px)" srcset="/image1.jpg">
<source media="(min-width:465px)" srcset="/image2.jpg">
<img src="/image3.jpg" alt="Flowers" style="width:auto;">
</picture>
<progress>Отображать ход загрузки программы
<progress value="45" max="100">
</progress>
<strong>Подчеркните содержание
<p>To compare with other all you life is the <strong>source</strong> of life tragedy</p>
<em>То же самое является ключевой точкой знака, обычно курсивом.
<p>To compare with other all you life is the <em>source</em> of life tragedy</p>
В дополнение к более четкому выражению структуры веб-страниц, эти специальные теги также имеют некоторые специальные функции для более удобного представления веб-страниц.
Если вы не можете сразу запомнить эти теги, вы можете добавить их в закладки. Каждый раз, когда вам нужно оптимизировать структуру страницы, читайте ее, возможно, она вам поможет 😋