• 售前

  • 售后

热门帖子
入门百科

HTML5中的Article和Section元素熟悉及使用

[复制链接]
玉米人 显示全部楼层 发表于 2021-10-25 19:30:07 |阅读模式 打印 上一主题 下一主题

HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在利用时易被混淆,包罗以下两个新元素:<article>和<section>。
最常被问起的问题是:在什么环境下我们应该利用这些元素?以及我们应该如何精确的利用这些元素?

Section元素
这 是一个最容易产生歧义的元素。它与<div>元素有什么区别?我们不停在用<div>来划分段落,以是除 了<div>,我们什么时间利用这个元素。我们引用官方文档来阐述它。根据WHATWG文档,对<section>元素做了以下 形貌:
“<section>元素表示了一篇文档或应用中,通用段落 - WHATWG”

从形貌中我们可以看出<section>元素的作用就是分段,或多或少雷同于<div>。但是它仍有一个特例。在文档中,参加了一段特别声明:
“当一个元素仅用于风格样式或是为了脚本的方便,我们鼓励作者利用<div>。<section>元素实用于,当元素的内容必要明白的列出时。- WHATWG”

基于这一点,我们可以总结以下两点
第一,尽管section元素在技能上是可以计划样式的,但是当有复杂的样式或脚本时,我们仍发起利用div元素。
第二,雷同于<li>元素,section元素是用来列举内容的。

因此在实际例子中,利用<section>元素的缘故原由是结构化的列出博客的内容,代码如下:

复制代码代码如下:
<div class="blog">
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
</div>

这只是个例子,<section>元素也可以用作其他用途。

Article元素
从名字上,它已经很好的解释了本身,但是我们仍要看看官方文档上是如何形貌它的:
“在文档,页面,应用或是站点上的一个独立部分,并且大体上,是可独立分配,或是重复利用的,例如在发布时。这个可以是论坛帖子,杂志或是消息,博客条目,用户提交的评论,互动的小工具或小工具,或任何其他独立项目的内容。”

从上形貌中,我们可以总结出<article>元素专用于结构化文章,特别是我们要发布的,例如博客,页面内容或是论坛帖子。
以下例子给出了如何利用<article>构建一个博客文章。

复制代码代码如下:
<article class="post">
<header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul>
<li class="author">Author Name</li>
<li class="categories">Save in Categories</li>
</ul>
</div>
</header>
<div class="post-content">
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat
cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies
halvah gummies danish biscuit applicake gingerbread jelly-o pastry.
</div>
</article>

此外,<article>元素还可与section元素结合,必要的时间,可以利用<section>元素将文章分为几个段落,如下例所示。

复制代码代码如下:
<article class="post">
<header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul>
<li class="author">Author Name</li>
<li class="categories">Save in Categories</li>
</ul>
</div>
</header>
<div class="post-content">
<section>
<h2>This is the Sub-Heading</h2>
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake
tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah
gummies danish biscuit applicake gingerbread jelly-o pastry.
</section>
<section>
<h3>This is another Sub-Heading</h3>
Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops
toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate
cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.
Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry.
</section>
</div>
</article>

总结
如万维网的创始人和W3C的董事所猜测的那般,所有HTML5创造出来的新元素都是为了是网络结构更加语义化。如何精确的应用这些元素在网络开发者和计划者之间,仍存有争论。
无论如何,不要混淆观点。如我之前提出的,只要是公道的环境,且你看到利用了它使得结构变得意义非凡,那么请用它。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作