HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>。
最常被问起的问题是:在什么情况下我们应该使用这些元素?以及我们应该如何正确的使用这些元素?
Article元素
从名字上,它已经很好的诠释了自己,但是我们仍要看看官方文档上是如何描述它的:
“在文档,页面,应用或是站点上的一个独立部分,并且大体上,是可独立分配,或是重复使用的,例如在发布时。这个可以是论坛帖子,杂志或是新闻,博客条目,用户提交的评论,互动的小工具或小工具,或任何其他独立项目的内容。”
从上描述中,我们可以总结出<article>元素专用于结构化文章,特别是我们要发布的,例如博客,页面内容或是论坛帖子。
以下例子给出了如何使用<article>构建一个博客文章。精心开发5年的UI前端框架!
- <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>元素将文章分为几个段落,如下例所示。 精心开发5年的UI前端框架!
- <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>
Section元素
这 是一个最容易产生歧义的元素。它与<div>元素有什么区别?我们一直在用<div>来划分段落,所以除 了<div>,我们什么时候使用这个元素。我们引用官方文档来阐述它。根据WHATWG文档,对<section>元素做了以下 描述:
“<section>元素表示了一篇文档或应用中,通用段落 – WHATWG”精心开发5年的UI前端框架!
从描述中我们可以看出<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>元素也可以用作其他用途。
总结
如万维网的创始人和W3C的董事所预测的那般,所有HTML5创造出来的新元素都是为了是网络结构更加语义化。如何正确的应用这些元素在网络开发者和设计者之间,仍存有争论。精心开发5年的UI前端框架!
无论如何,不要混淆观点。如我之前提出的,只要是合理的情况,且你看到使用了它使得结构变得意义非凡,那么请用它。
相关推荐
Section元素 这 是一个最容易产生歧义的元素。它与元素有什么区别?我们一直在用来划分段落,所以除 了,我们什么时候使用这个元素。我们引用官方文档来阐述它。根据WHATWG文档,对<section>元素做了以下 描述: “...
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容。除了内容部分,一个article...
本书共分为10章,系统全面地介绍了HTML 5规范的核心内容,以及这些内容在当前浏览器中的支持情况,并告知开发者如何在当前的环境下应用这些功能,开发出漂亮的Web应用。本书短小精悍,但是信息量巨大;本书注重实践...
•新的特殊内容元素,比如 article、footer、header、nav、section •新的表单控件,比如 calendar、date、time、email、url、search 浏览器支持 最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 ...
在HTML5中,一个语义元素能够清楚的描述其意义给浏览器和开发者。本篇文章即“飞雀教育HTML5培训学习资料语义元素”,主要讲解了 <section> 元素、 <article> 元素和<nav> 元素元素等内容。
72、<section> 定义文档中的节(section)。 73、<select> 定义可选列表。 74、<source> 定义媒介源。 75、<span> 定义文档中的节元素。 76、<style> 定义样式定义。 77、<sub> 定义下标文本。 声明:本电子书内容源于...
* 新的特殊内容元素,比如 article、footer、header、nav、section * 新的表单控件,比如 calendar、date、time、email、url、search 浏览器支持 最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5...
• 不需要闭合标签 在 HTML5 中,空标签(如:br、img 和 input )并不需要闭合标签。 • 废弃的标签 下面这些标签并不被 HTML5 支持: <acronym>、<applet>、<basefont>、<big>、<...
除了在网页中调用包含以上代码的js文件来让IE浏览器支持HTML5元素以外,你也可以以下面这种方式把代码直接添加到网页中。 <!–[if IE]> (function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,...
HTML5 中的一些有趣的新特性: • 用于绘画的 canvas 元素 • 用于媒介回放的 video 和 audio 元素 • 对本地离线存储的更好的支持 • 新的特殊内容元素,比如 article、footer、header、nav、section • 新的表单...
13.1.2 section元素 245 13.1.3 nav元素 247 13.1.4 aside元素 248 13.1.5 time元素 250 13.1.6 pubdate属性 250 13.2 新增的非主体结构元素 251 13.2.1 header元素 251 13.2.2 hgroup元素 252 ...
考虑我们开发一个页面的过程:1.设计页面的结构 – HTML:这个过程是使用各种HTML元素构建网页的...结构型元素HTML5中加入了全新的结构型元素,例如页眉header,页脚footer,导航nav,内容article,章节section等。含
5.section元素11:16 6.aside元素06:06 7.nav元素07:46 8.time元素01:51 9.pubdate属性04:31 10.header元素合成13:11 11.hgroup元素合成05:43 12.footer元素07:04 13.address元素合成04:20 14.figure元素与figcaption...
HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article、footer、header、nav、section 新的表单控件,比如 ...
笨文档主要介绍HTML基本结构,HTML基本标签,HTML5新特性标签有趣的新特性:用于绘画的canvas 元素;用于媒介回放的video 和audio 元素; 对本地离线存储的更好的支持;新的特殊内容元素,比如article、footer、...
例:HTML5中<section>……</section>;HTML4中<div> ……。 article元素 表示页面中一块与上下文不相关的独立内容。比如一篇文章。 aside元素 表示article元素内容之外的、与article元素内容相关的辅助信息。 header...
一、新的文档类型声明(DTD) ...结构标签:(块状元素) 有意义的div <article> 标记定义一篇文章 标记定义一个页面或一个区域的头部 <nav> 标记定义导航链接 <section> 标记定义一个区域 <aside> 标
我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子。 在HTML5标准添加的新元素中,用于常见页面结 构的包括header footer footer nav ...