HTML5 新增构造元素分为主体结构元素和非主体结构元素
发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
HTML5 新增结构元素分为主体结构元素和非主体结构元素
HTML5 新增结构元素分为主体结构元素和非主体结构元素
主体结构元素包括 article、section、nav、aside、time
非主体结构元素包括 header、hgroup、footer、address
一、主体结构元素
article
article 标签,从语义化上看为文档、页面,其用法如下:
通常是一篇文章、一个页面、一个独立完整的内容模块
一般会带个标题,并放在 header 标签中
article 元素可以互相嵌套
使用频率极高,强调独立性,多注意下与 header 标签的使用。
<article>
<header>
<h1>标签</h1>
</header>
<p>段落</p>
<article>
<div>内容</div>
</article>
</article>
section
section 标签,从语义化上看为部分,其用法如下:
用于页面内容的独立分块,往往是文章的一段
通常由内容和标题组成,没有标题的内容不推荐使用 section
使用频率低,强调分段分块。
<section>
<h1>水果</h1>
<article>
<h2>苹果</h2>
<div>苹果...</div>
</article>
<article>
<h2>桔子</h2>
<div>桔子...</div>
</article>
</section>
<!-- article可以看成是一种特殊种类的section元素,它比section更强调独立性 -->
<article>
<h1>苹果</h1>
<p>苹果...</p>
<section>
<h2>红富士</h3>
<p>红富士...</p>
</section>
<section>
<h2>国光</h3>
<p>国光...</p>
</section>
</article>
nav
nav 标签,从语义化上看为导航,其用法如下:
通常作为页面导航的链接组
侧边栏导航
使用频率高。
<nav>
<ul>
<li><a href="">菜单1</a></li>
<li><a href="">菜单2</a></li>
<li><a href="">菜单3</a></li>
</ul>
</nav>
aside
aside 标签,从语义化上看为在旁边、侧边,其用法如下:
在 article 标签中使用时,作为主要内容的附属信息部分,如有关的参考资料、名词解释等。
在 article 标签外使用时,作为页面或者站点全局的附属信息部分,如侧边栏、博客的友情链接部分、广告区域等。
使用频率低。
<!-- 在article标签外使用时 -->
<article>
<h1>F#</h1>
<p>F#...</p>
<aside>
<h1>名词解析</h1>
<p>F#为...</p>
</aside>
</article>
<!-- 在article标签内使用时 -->
<aside>
<nav>
<ul>
<li><a href="">老赵的博客</a></li>
<li><a href="">鬼哥的博客</a></li>
<li><a href="">彪叔的博客</a></li>
</ul>
</nav>
</aside>
time
time 标签,从语义化上看为时间,其用法如下:
代表 24 小时中的某个时刻或某个日期
表示时刻时允许带时间差
可定义很多格式的日期和时间
使用频率低。
<time datetime="2013-3-6">2014年3月6日</time>
<!-- datetime属性中日期与时间之间要用“T” 文字分隔,“T”表示时间 -->
<time datetime="2013-3-6T20:00">2014年3月6日20:00</time>
<!-- 时间加上“Z”表示给机器编码时使用UTC标准时间 -->
<time datetime="2013-3-6T20:00Z">2014年3月6日20:00</time>
二、非主体结构元素
header
header 标签,从语义化上看为文档的页眉,其用法如下:
一种具有引导和导航作用的结构元素
通常放置在整个页面或者页面内的一个内容区块的标题
一个网页内并没有限制 header 标签的个数
使用频率极高,比较容易理解。
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文</p>
</article>
hgroup
hgroup 标签,从语义化上看为标题组,其用法如下:
作为 header 标签的子元素
一个内容模块中包括了主标题和至少一个子标题才使用 hgroup
通常会将 h1~h6 元素进行分组
使用频率高。
<article>
<header>
<hgrounp>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgrounp>
</header>
<p>文章正文</p>
</article>
footer
footer 标签,从语义化上看为文档的脚注,其用法如下:
一个内容块区的脚注
通常内容为联系信息、相关阅读、版权信息等
使用频率高,比较容易理解。
<article>
<p>内容</p>
<footer>
<ul>
<li>版权信息</li>
<li>相关阅读</li>
<li>联系方式</li>
</ul>
</footer>
</article>
address
address 标签,从语义化上看为地址,其用法如下:
用于文档中呈现的联系信息
通常内容为作者、网站链接、电子邮箱、地址、电话号码等
使用频率低。
<address>
<a href="">作者</a>
<a href="">地址</a>
<a href="">联系方式</a>
</address>
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
其他相似内容:
-
使用HBuilder编辑器将html5页面打包成APP
使用HBuilder编辑器将html5页面打包成APP (ios+安卓)
1.首先先安装HBuilder编...
-
基于phonegap,html5,ratchet,handlebars等技术的微表情APP
该app是由很多有意思的微表情构成的,支持40种表情,并且每种表情都有不同的...
-
HTML5 Web 客户端五种离线存储方式汇总
最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于H...
-
SPICE-HTML5 鼠标指针BUG修复
研究SPICE,找到了他们官方指定的HTML5客户端。
下载下来用一下,发现跟网页VNC的水平差不多了。
http:...
-
HTML5+JS 《五子飞》游戏实现(五)移动棋子
上一章 我们知道了怎么处理两个重要的吃棋动作,想要吃对方的棋子,首先得移动自己的棋子。...
-
HTML5中如何上传Resize后的图片
参考资料:
不依赖form标签,而是自己定义FormData上传数据,文件被编码为一个Blob或File对象:
https...
-
(一)HTML5
可以解决什么问题:
可以实现网页的ajax加载,同时又能完成URL的改变而没有网页跳转刷新的迹象,就像是改变了网页的hash(#)一样。...
-
一款纯html5实现的时钟
今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。一起看下效果图:
在线预览...
-
使用 WebSockets 进行 HTML5 视频直播
实验环境:Ubuntu。
参考以下两个链接进行实践:
http://segmentfault.com/blog/xingrz/119...
-
查询浏览器是否支持html5
js判断
插入js代码======================================================
<script>
wind...