HTML5 对HTML4所做的各种修改中,一个比较重大的修改就是为了使文档结构更加清晰、明确,容易阅读,增加了很多新的结构元素。学习一些新增的结构元素。
1.article
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
1 <article> 2 <header> 3 <h1>article</h1> 4 <p>发表日期:<time pubdate="pubdate">2013/04/23</time></p> 5 </header> 6 <p>article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。</p> 7 8 <footer> 9 <p><small>著作权归****所有</small></p> 10 </footer> 11 </article>
2.section元素
section元素用于对网站或应用程序中页面上的内容进行分块。
<section> <h1>section</h1> <p>section元素用于对网站或应用程序中页面上的内容进行分块。 </p> </section>
section使用禁忌:
1)不要将section元素用作设置样式的页面容器,那是div的工作;
2)如果article 元素、aside或者nav元素更符合使用条件,不要使用section;
3)不要为没有标题的内容区块使用section
3.nav元素
nav元素是一个可以用作页面导航的连接组,其中的导航元素连接到其他页面或者当前页面的其他部分。
1 <nav> 2 <ul> 3 <li><a href="#">asp.net</a></li> 4 <li><a href="#">wcf</a></li> 5 <li><a href="#">wp</a></li> 6 </ul> 7 </nav>
nav适用场合:
1)传统导航条
2)侧边栏导航
3)页内导航
4)翻页操作
4.aside元素
aside用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>aside元素示例</title> 6 </head> 7 <body> 8 <header><h1>HTML5入门</h1></header> 9 <article> 10 <h1>1.1 aside</h1> 11 <p>aside用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。</p> 12 <aside> 13 <h1>名词解释</h1> 14 <dl> 15 <dt>HTML5</dt> 16 <dd>HTML5 是…………………………</dd> 17 </dl> 18 <dl> 19 <dt>aside</dt> 20 <dd>aside 是…………………………</dd> 21 </dl> 22 </aside> 23 </article> 24 </body> 25 </html>
5.time元素与微格式
1)微格式:利用HTML的class属性来对网页添加附加信息的方法,附加信息例如时间日期、电话号码、邮箱……
2)time元素代表24小时中的某个时刻或某个日期。
1 <time datetime="2013-04-23">2013年04月23日</time>
6.header元素
header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或者页面内的一个内容区块的标题,也可以包含其他内容,例如表格、搜索表单、或logo图片。
1 <header><h1>HTML5入门</h1></header>
7.hgroup
hgroup元素是将标题及其子标题进行分组的元素。
1 <article> 2 <header> 3 <hgroup> 4 <h1>文章主标题</h1> 5 <h2>文章子标题</h2> 6 </hgroup> 7 8 </header> 9 <p>文章正文</p> 10 </article>
8.footer元素
footer元素可以作为其上层父级内容区块的一个根区块的脚注。
1 <footer> 2 <ul> 3 <li>版权信息</li> 4 <li>站点地图</li> 5 <li>联系方式</li> 6 </ul> 7 </footer>
9.address元素
address元素用来在文档中呈现联系信息。
<address> <a href="#">百度</a> <a href="#">新浪</a> <a href="#">搜狐</a> </address>