Html5新标签之article标签详解

今天开始为大家介绍HTML5新标签,介绍完新标签,再去详解html标签在HTML5中的差别。预计给大家介绍新标签:27个。
这节,我为大家介绍下:html5新标签之<article>标签

如何定义<article>及如何使用article呢?

w3c这样解释:
<article> 标签定义外部的内容。
外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。

先让大家看个例子:

<!DOCTYPE HTML> 
<meta charset="utf-8"> 
<html> 
<!--/尊重他人劳动果实,转载请注明出处:我爱html5开发小组 www.52html5.com 作者:金牌狙击手--> 
<style type="text/css"> 
body{ font-size:12px; padding:10px 0; background:#00CCCC}
*{ margin:0; padding:0;}
.classa{width:800px; height:auto; text-align:center; padding:20px 0; margin:0 auto;  background:#efefef; border:#CCCCCC 1px solid; border-radius:3px;-moz-border-radius:3px; -khtml-border-radius:3px; margin-bottom:50px;}
</style> 
<body> 
<article draggable="true" class="classa"> 
看看是否可以拖动?
</article> 
<article contenteditable="true" class="classa"> 
点击编辑我也可以哦。
</article> 
</body> 
</html> 


<article> 标签支持哪些属性呢?

常用的属性:class、id、style,这三个就不用给大家介绍了。
在这里着重的给大家说article标签的新属性及属性值:

contenteditable(规定是否允许用户编辑内容。值:true、false)
contextmenu(规定元素的上下文菜单。值:menu_id)
data-yourvalue(创作者定义的属性。HTML 文档的创作者可以定义他们自己的属性。必须以 “data-” 开头。值:value)
draggable(规定是否允许用户拖动元素。值:true、false)
hidden(规定该元素是无关的。被隐藏的元素不会显示。值:hidden)
item(用于组合元素。值:empty、url)
itemprop(用于组合项目。值:url、group value)
spellcheck(规定是否必须对元素进行拼写或语法检查。值:true、false)
subject(规定元素对应的项目。值:id)

属性值详情参考:http://www.w3school.com.cn/html5/html5_ref_standardattributes.asp

金牌狙击手

52html5是一个web前端|html5资源平台,为广大html5开发者及爱好者提供html5相关的教程、资讯、html5游戏、html5教程等,并涉及css3、javascript前端知识。