HTML5新增结构标签
2016-05-02 14:50
751 查看
4.1 新增的主体结构元素
H5相对于H4的一个重大修改在于增加了很多新的结构元素，使文档更加清晰、容易阅读。
4.1.1 article元素
此元素一般写文本时才用，值得注意的是，同于h标签，header、footer标签每个页面上有且只有一个。
article元素表示文档、页面、应用程序或站点中的自包含成分所构成的一个页面的一部分，并且这部分专门用于独立的分类或复用，比如聚合。
首先，article元素除了内容部分，通常有自己的标题和脚注，范例如下：
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>编程词典简介</h1>
<p>发表日期：<time>2016/02/12</time></p>
</header>
<p>
<b>编程词典</b>，是本公司数百名程序员的心血制作…………
</p>
<footer>
<p>
<small>
著作权归**公司所有
</small>
</p>
</footer>
</article>
</body>
</html>
其次，article支持嵌套，内层的内容也是相对独立的模块，并且原则上要与外层的内容相关联，实现样例如下：
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>编程词典简介</h1>
<p>发表日期：<time>2016/02/12</time></p>
</header>
<p>
<b>编程词典</b>，是本公司数百名程序员的心血制作…………
</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>发表者：小李</h3>
<p>
<time>1小时前</time>
</p>
</header>
<p>
这本书的内容十分好
</p>
</article>
<article>
<header>
<h3>发表者：小李</h3>
<p>
<time>1小时前</time>
</p>
</header>
<p>
这本书的内容十分好
</p>
</article>
</section>
<footer>
<p>
<small>
著作权归**公司所有
</small>
</p>
</footer>
</article>
</body>
</html>
最后，article元素也可以用来表示其他比较完整的内容，比如说插件。
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>电子商务网站</h1>
</header>
<object>
<embed
src="http://player.youku.com/player.php/sid/XNzM4MzYyNzg0/v.swf"allowFullScreen="true"
quality="high"
width="480"height="400"
align="middle"
allowScriptAccess="always"
type="application/x-shockwave-flash"></embed>
</object>
</article>
</body>
</html>
4.1.2 section元素
Section元素代表文档或应用程序中的一个段落，指的是对文章内容按照主题分组，通常还附带标题，它的应用在上面的实例中已经有展示，现在说一下section使用时的场景：
首先，section不是用来写样式的容器，那是div的工作；
其次，当article、aside或nav更符合页面要求时，尽量不要使用seaction；
最后，不要为没有标题的内容区块使用seaction元素。
4.1.3 nav元素
用来构建页面的导航或一个站点内的链接，nav元素是一个包装器，它不会代替有序列表或无序列表，它与menu的区别在于，menu注重页面的交互。
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
</head>
<body>
<h1>***文档</h1>
<nav>
<ul>
<li><a="javascript:;">主页</a></li>
<li><a="javascript:;">第一章</a></li>
<li><a="javascript:;">第二章</a></li>
</ul>
</nav>
<article>
<header>
<h2>***功能简介</h2>
<nav>
<ul>
<li><a
href="#gl">管理功能</a></li>
<li><a
href="#gf">规范功能</a></li>
</ul>
</nav>
</header>
<section
id="gl">
<h3>管理功能</h3>
<p>********</p>
</section>
<section
id="gf">
<h3>规范功能</h3>
<p>*********</p>
</section>
</article>
</body>
</html>
4.1.4 aside元素
用来表示当前页面或文章的附属部分，常见的有广告、名词解释、友情链接等。
<aside>
<nav>
<h4>友情链接</h4>
<ul>
<li>
<a
href="http://www.baidu.com">百度</a>
</li>
<li>
<a
href="http://www.zuche.com/?WT.srch=1&WT.mc_id=pc201508050147">神州租车</a>
</li>
</ul>
</nav>
</aside>
4.1.5 time元素
用于明确的对机器的日期和时间进行编码，并以易读的方式来展现。如下，机器的可读部分放在元素的datatime属性里，中间的部分时显示在网页上的。日期与时间用“T”分隔。
<time datetime="2016-04-15">新版本上线的日子</time>
4.1.6 pudate属性
是一个布尔属性，用来表示这个特定的<timedatetime="2016-04-15" pubdate> </time>
是某个article或body的发布日期
4.2 新增的非主体结构元素
4.2.1 header元素
具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块，但也可以包含搜索表单或相关内容的logo等。通常至少包含一个heading元素，也可以包括hgroup、table、form、nav等
4.2.2 hgroup元素
将标题分组
4.2.3 footer元素
做为父级内容区块或是一个根区块的脚注。在h5出现之前使用div，
<div
id="footer">
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</div>
在h5中使用更加语义化的footer来代替，
<footer>
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</footer>
4.2.4 address元素
是当前article或文档的作者的联系方式，可以是邮箱地址、邮政地址等。不限形式。
H5相对于H4的一个重大修改在于增加了很多新的结构元素，使文档更加清晰、容易阅读。
4.1.1 article元素
此元素一般写文本时才用，值得注意的是，同于h标签，header、footer标签每个页面上有且只有一个。
article元素表示文档、页面、应用程序或站点中的自包含成分所构成的一个页面的一部分，并且这部分专门用于独立的分类或复用，比如聚合。
首先，article元素除了内容部分，通常有自己的标题和脚注，范例如下：
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>编程词典简介</h1>
<p>发表日期：<time>2016/02/12</time></p>
</header>
<p>
<b>编程词典</b>，是本公司数百名程序员的心血制作…………
</p>
<footer>
<p>
<small>
著作权归**公司所有
</small>
</p>
</footer>
</article>
</body>
</html>
其次，article支持嵌套，内层的内容也是相对独立的模块，并且原则上要与外层的内容相关联，实现样例如下：
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>编程词典简介</h1>
<p>发表日期：<time>2016/02/12</time></p>
</header>
<p>
<b>编程词典</b>，是本公司数百名程序员的心血制作…………
</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>发表者：小李</h3>
<p>
<time>1小时前</time>
</p>
</header>
<p>
这本书的内容十分好
</p>
</article>
<article>
<header>
<h3>发表者：小李</h3>
<p>
<time>1小时前</time>
</p>
</header>
<p>
这本书的内容十分好
</p>
</article>
</section>
<footer>
<p>
<small>
著作权归**公司所有
</small>
</p>
</footer>
</article>
</body>
</html>
最后，article元素也可以用来表示其他比较完整的内容，比如说插件。
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>电子商务网站</h1>
</header>
<object>
<embed
src="http://player.youku.com/player.php/sid/XNzM4MzYyNzg0/v.swf"allowFullScreen="true"
quality="high"
width="480"height="400"
align="middle"
allowScriptAccess="always"
type="application/x-shockwave-flash"></embed>
</object>
</article>
</body>
</html>
4.1.2 section元素
Section元素代表文档或应用程序中的一个段落，指的是对文章内容按照主题分组，通常还附带标题，它的应用在上面的实例中已经有展示，现在说一下section使用时的场景：
首先，section不是用来写样式的容器，那是div的工作；
其次，当article、aside或nav更符合页面要求时，尽量不要使用seaction；
最后，不要为没有标题的内容区块使用seaction元素。
4.1.3 nav元素
用来构建页面的导航或一个站点内的链接，nav元素是一个包装器，它不会代替有序列表或无序列表，它与menu的区别在于，menu注重页面的交互。
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
</head>
<body>
<h1>***文档</h1>
<nav>
<ul>
<li><a="javascript:;">主页</a></li>
<li><a="javascript:;">第一章</a></li>
<li><a="javascript:;">第二章</a></li>
</ul>
</nav>
<article>
<header>
<h2>***功能简介</h2>
<nav>
<ul>
<li><a
href="#gl">管理功能</a></li>
<li><a
href="#gf">规范功能</a></li>
</ul>
</nav>
</header>
<section
id="gl">
<h3>管理功能</h3>
<p>********</p>
</section>
<section
id="gf">
<h3>规范功能</h3>
<p>*********</p>
</section>
</article>
</body>
</html>
4.1.4 aside元素
用来表示当前页面或文章的附属部分，常见的有广告、名词解释、友情链接等。
<aside>
<nav>
<h4>友情链接</h4>
<ul>
<li>
<a
href="http://www.baidu.com">百度</a>
</li>
<li>
<a
href="http://www.zuche.com/?WT.srch=1&WT.mc_id=pc201508050147">神州租车</a>
</li>
</ul>
</nav>
</aside>
4.1.5 time元素
用于明确的对机器的日期和时间进行编码，并以易读的方式来展现。如下，机器的可读部分放在元素的datatime属性里，中间的部分时显示在网页上的。日期与时间用“T”分隔。
<time datetime="2016-04-15">新版本上线的日子</time>
4.1.6 pudate属性
是一个布尔属性，用来表示这个特定的<timedatetime="2016-04-15" pubdate> </time>
是某个article或body的发布日期
4.2 新增的非主体结构元素
4.2.1 header元素
具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块，但也可以包含搜索表单或相关内容的logo等。通常至少包含一个heading元素，也可以包括hgroup、table、form、nav等
4.2.2 hgroup元素
将标题分组
4.2.3 footer元素
做为父级内容区块或是一个根区块的脚注。在h5出现之前使用div，
<div
id="footer">
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</div>
在h5中使用更加语义化的footer来代替，
<footer>
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</footer>
4.2.4 address元素
是当前article或文档的作者的联系方式，可以是邮箱地址、邮政地址等。不限形式。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一种解决h5页面背景音乐不能自动播放的方案
- Hadoop集群安装-CDH5（3台服务器集群）
- Hadoop集群安装-CDH5（5台服务器集群）
- HTML5WebStorage本地储存之Session
- HTML5 Canvas游戏开发（一）基础知识
- 现代浏览器（HTML5）缓存接口文档收集
- H5做市级地图
- HTML5 摇一摇加强版之一次失败的探索
- HTML5——播放器
- Cloudera Manager 5和CDH5离线安装
- 唱吧-利用HTML5漏洞免费导出MV
- 一个html5开发工具
- css reset 重置样式 html5
- 有趣的游乐场---基于WebGL的H5 3D游戏引擎
- HTML5培训第10节课堂笔记（盒子模型、行内与块级、float、定位、html5布局）
- HTML5第9节课堂笔记（初探mui，制作手机归属地查询）
- HTML5 name属性
- H5处理不同支持格式（audio）
- HTML5——行走日记
- HTML5全局属性和事件