HTML5中的Article和Section元素认识及使用

2016-02-19 11:20 10 1 收藏

下面是个简单易学的HTML5中的Article和Section元素认识及使用教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

【 tulaoshi.com - Web开发 】

 
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
h1This 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
h1This 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
h2This 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
h3This 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创造出来的新元素都是为了是网络结构更加语义化。如何正确的应用这些元素在网络开发者和设计者之间,仍存有争论。
无论如何,不要混淆观点。如我之前提出的,只要是合理的情况,且你看到使用了它使得结构变得意义非凡,那么请用它。

来源:http://www.tulaoshi.com/n/20160219/1597165.html

延伸阅读
标签: Web开发
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择。然而,每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习html5 viewport的使用能帮你做到这一点 viewport 语法介绍: 代码如下: !-- html docu...
标签: Web开发
如果想使用该api,必须保证服务器端配置相应的mime类型。 拿tomcat为例,在打开Tomcat 6.0\conf\web.xml文件,在文件的最后面添加如下内容 代码如下: mime-mapping extensionmanifest/extension mime-typetext/cache-manifest/mime-type /mime-mapping 尤其注意,extension的value是manifest,所以以后配置缓存文件的后缀必须跟他一...
标签: Web开发
HTML 5 也被称为 Web Applications 1.0。为了实现这个目标,增加了几个为 Web 页面提供交互体验的新元素: details datagrid menu command 这些元素都可以根据用户的操作和选择改变显示的内容,而不需要从服务器装载新页面。  details details 元素表示在默认情况下可能不显示的详细信息。可选的 ...
标签: Web开发
在html 5增加了新元素header、footer,测试过发现IE不能解析html 5新增的元素。 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type&q...
标签: Web开发
在HTML5增强的元素中,最值得关注的就是表单元素。在HTML5中,表单已经做了重大的修整,一些以前需要通过JavaScript编码实现的功能现在无需编码就可轻松实现。在开始讨论之前,需要注意一点: 在HTML5中,表单控件是可以处于其所属的一个或多个表单的外部的。所以,表单控件像fieldset,label,input这些都加入了form属性,用于标识表单控件...

经验教程

151

收藏

5
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部