Комментарий: HTML5 приносит ряд новых элементов, следующие два новых элемента: статья и раздел довольно запутанны. Мы часто упоминаем, какие обстоятельства мы должны использовать эти элементы. Далее мы представим приложения двух. Те, кто заинтересован, могут ссылаться на это.
HTML5 приносит ряд новых элементов и будет широко использоваться в будущем. Тем не менее, некоторые элементы легко запутываются при использовании, включая следующие два новых элемента: <статья> и <section>.
Наиболее распространенный вопрос: при каких обстоятельствах мы должны использовать эти элементы? А как мы должны правильно использовать эти элементы?
Элемент раздела
Это самый неоднозначный элемент. В чем разница между ним и элементом <div>? Мы использовали <viv> для разделения параграфов, поэтому, кроме <Div>, когда мы используем этот элемент? Мы цитируем официальную документацию, чтобы проиллюстрировать это. Согласно документации WhatWG, представлено следующее описание для элемента <section>:
<section> Элемент представляет общий абзац в документе или приложении - что
Из описания мы видим, что функция элемента <section> является сегментацией, более или менее похожая на <viv>. Но у него все еще есть особый случай. В документе добавлено специальное заявление:
Когда элемент используется только для стиля или для удобства сценариев, мы призываем авторов использовать <div>. <section> Элемент подходит для того, когда содержимое элемента должно быть явно перечислено. - Что -то
Основываясь на этом моменте, мы можем подвести итог следующих двух пунктов:
Во -первых, хотя элементы раздела являются технически стилькой, мы по -прежнему рекомендуем использовать элементы DIV, когда есть сложные стили или сценарии.
Во -вторых, аналогично элементу <li>, элемент раздела используется для перечисления контента.
Таким образом, в реалистичном примере причина использования элемента <section> заключается в структуре содержания блога, код заключается в следующем:
<div>
<раздел>
<h2> Название сообщения в блоге </h2>
<p> Мороженое пирожное порошковое желе.
Печал шоколадный торт мороженое печенье Halvah Tiramisu Jelly-O. </P>
</section>
<раздел>
<h2> Название сообщения в блоге </h2>
<p> Мороженое пирожное порошковое желе.
Печал шоколадный торт мороженое печенье Halvah Tiramisu Jelly-O. </P>
</section>
<раздел>
<h2> Название сообщения в блоге </h2>
<p> Мороженое пирожное порошковое желе.
Печал шоколадный торт мороженое печенье Halvah Tiramisu Jelly-O. </P>
</section>
</div>
Это всего лишь пример, и элемент <section> также может использоваться для других целей.
Элементы статьи
Из названия он уже хорошо интерпретировался, но мы все еще должны увидеть, как это описано в официальной документации:
Отдельный раздел на документе, странице, приложении или сайте и, как правило, может быть независимо выделен или повторно используется, например, на публикации. Это может быть сообщение на форуме, журнал или новости, записи в блоге, пользовательские комментарии, интерактивные виджеты или виджеты или контент для любого другого автономного проекта.
Из приведенного выше описания мы можем обобщить, что элемент <pretice> посвящен структурированным статьям, особенно теми, которые мы хотим публиковать, такие как блоги, содержание страницы или сообщения на форуме.
В следующем примере показано, как построить сообщение в блоге, используя <статью>.
<статья>
<заголовок>
<h1> это название сообщения в блоге </h1>
<div>
<ul>
<li> Имя автора </li>
<li> Сохранить в категориях </li>
</ul>
</div>
</header>
<div>
Сладкий ролл Halvah Biscuit Toffee Liquorice Tart Puding Sesame снимки.
Бисквитный порошок желе-варки фруктов Faworki шоколадный батончик. Пудинг овсян
Торт Тутси Ролл кунжут снимки леденцом. Gingerbread. Печать
Halvah Gumpies Датское печенье примените пряничное желе-тесто.
</div>
</article>
Кроме того, элемент <coment> также может быть объединен с элементом раздела. При необходимости вы можете использовать элемент <section> для разделения статьи на несколько абзацев, как показано в следующем примере.
<статья>
<заголовок>
<h1> это название сообщения в блоге </h1>
<div>
<ul>
<li> Имя автора </li>
<li> Сохранить в категориях </li>
</ul>
</div>
</header>
<div>
<раздел>
<h2> это подзаголовка </h2>
Сладкий ролл Halvah Biscuit Toffee Liquorice Tart Puding Sesame снимки.
Бисквитный порошок желе-варки фруктов Faworki шоколадный батончик. Пудинг овсяный пирог
Tootsie Roll кунжут снимки Lollipop Gingerbread Bonbon. Печать Халва
Печание датское печенье Применить пряничное желе-тесто.
</section>
<раздел>
<h3> Это еще один подзаголовка </h3>
Toping Cheesecake Sweet Pie Cake Cake Sweet Roll. Gummi Bears лимонные капли
Toffee Seesame снимает пирог, топпинг Chupa Chups Apple Pie Gummies. Шоколад пластин
торт. Sugar Plum шоколадный батончик залития мороженое морковно торт датский бонбон.
Cheesecake Gummi Bears Dragée Jujubes Dragée Dragée Brownie Jelly Biscuit. Порошковая пеассанная желе -бобы.
</section>
</div>
</article>
Суммировать
Как предсказано основателем Всемирной паутины и директоров W3C, все новые элементы, созданные HTML5, с целью сделать структуру сети более семантической. Между веб -разработчиками и дизайнерами все еще существуют дебаты, как правильно применять эти элементы.
Независимо от того, не путайте точку зрения. Как я упоминал ранее, до тех пор, пока это разумная ситуация, и вы видите, что использование ее делает структуру значимой, пожалуйста, используйте ее.