1.<section>

　　<section>元素用来定义文档或应用程序中的区域（或节）。例如，可以用它组织你的个人信息，一个<section>用于联系信息，另一个用于新闻动态。需要重点理解的是用它不是为了美化样式。如果你只想将某个元素包裹起来以便设置样式，那应该和以前一样继续使用<div>。

2.<nav>

　　<nav>元素用来定义文档的主导航区域，其中的链接指向其他页面或当前页面的某些区域。因为<nav>用于主导航，所以严格来讲它不是为页脚或其他经常会包含一组链接的区块而设计的（虽然将它用在这些区块里包含链接也没问题）。

3.<article>

　　<article>元素与<section>元素很容易混淆。它是用来包裹独立的内容片段。当搭建一个页面时，想想你准备放入<article>标签的内容能否作为一个整块而被复制粘贴到另外一个完全不同的网站且能保持完整的意义？另一个方法是，想想包裹<article>中的内容能否在RSS订阅源中独立成为一篇文章？应该使用<article>标签包裹的内容，最明显的例子就是博客正文。注意，如果出现嵌套的<article>元素，那内层的<article>元素内容应该和外层文章内容直接有关。

4.<aside>

　　<aside>元素用来表示与页面主内容松散相关的内容。在实践中，我经常将其用作侧边栏（当它包含合适的内容时）。另外，引文、广告以及导航元素（如友情链接等）也可以使用它。

5.<hgroup>

　　如果页面中有一组使用<h1>、<h2>、<h3>等标签的标题、标语和副标题，则可以考虑使用<hgroup>将他们包裹起来。这样在HTML5的大纲结构算法中就会隐藏次级标题元素，从而只让<hgroup>中的第一个标题元素进入文档大纲。

　　注：可以使用下面的HTML大纲生成器来测试生成网页的大纲结构：

　　（1）http://gsnedders.html5.org/outliner/

　　（2）http://hoyois.github.com/html5outliner/

6.<header>　

　　由于<header>元素不计入大钢结构，所以不能用它来划分内容结构，而是应该用它来包含对区域内容的介绍说明。实际使用中，<header>可用作网站头部的“刊头”区域，也可用作对其他内容如<article>元素的简要介绍。

7.<footer>

　　和<header>一样，<footer>元素也不计入大纲结构，所以也不能用于划分内容结构。应该用它来包含其所在区域的辅助信息。例如可以用它包含一组指向其他页面的超链接，或者用它包含版本信息。和<header>一样，它也可以视情况在同一个页面上多次出现。例如博客网站的页脚可以使用它，同时博客正文<article>元素内的文脚也可以使用它。不过规范指出，博文作者的联系信息应该使用<address>元素来包裹。

8.<address>

　　<address>元素用于明确地标注离其最近的<article>或<body>祖先元素的联系信息。为避免产生混淆，请记住<address>中一般不放具体的邮政地址，除非相应内容确实需要联系地址。而邮政地址和其他可能会改变的联系信息应该使用<p>标签来包裹。

HTML5的全新语义化元素的更多相关文章

  1. HTML5语义化元素

    语义化元素:有意义的元素. 对语义化的理解: 正确的标签做正确的事情: HTML5语义化元素让页面内容结构化清晰: 便于开发人员阅读,理解,维护: 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键 ...

  2. HTML5学习之语义化标签（一）

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  3. HTML5学习之语义化标签

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  4. 从零开始学 Web 之 HTML5（一）HTML5概述，语义化标签

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. HTML5的新语义化的标签

    在HTML5之前采用HTML+CSS文档结构写法 [ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航.页眉.页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航.内容区域)] ...

  6. Html5新增的语义化标签（部分）

    2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...

  7. HTML5标签（语义化）

    HTML语义化是什么? HTML语义化是指根据内容的结构化,选择合适的标签.举个例子:之前所有的都用div, span等标签实现页面结构,而这些标签都没有实际的意义, 而新的HTML5标签<he ...

  8. html5新增的语义化标签极其作用

    在html5中,新增了几个语义化标签:<article>.<section>.<aside>.<hgroup>. <header>,< ...

  9. HTML5 部分新增语义化标签元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 如何 实现PHP多版本的 共存 和 切换？

    编译PHP时指定路径 ./configure --prefix=/opt/php/php-5.6 make && make install 这样可以PHP版本就可以安装到一个特别的路径 ...

  2. C和指针 第七章 可变参数

    可变参数列表是通过stdarg.h内的宏来实现的: 类型 va_list 三个宏: va_start va_arg va_end 我们可以声明一个va_list变量,与这三个宏配合使用. 可变参数必须 ...

  3. 使用Notepad++实现批量将ANSI转成为UTF-8编码

    http://blog.sina.com.cn/s/blog_5f4150730101b3ok.html 使用Trados2011翻译英文html后,如果是单个文件,可在另存译文时选择Encoding ...

  4. js求时间差

    var date1=new Date();  //开始时间 alert("aa"); var date2=new Date();    //结束时间 var date3=date2 ...

  5. Python: Win7下使用 pip install lxml 无法安装lxml?

    1.在网址 http://www.lfd.uci.edu/~gohlke/pythonlibs/#lxml 下,搜索lxml,下载Python对应的lxml版本.如下图: 2.打开cmd,进入到lxm ...

  6. sql server 中不同服务器上的数据库中表怎么互导数据

    --创建一个链接 EXEC sp_addlinkedserver 'OtherServerDb','','SQLOLEDB','192.168.12.101' --第一个参数是给远程的服务器起的别名 ...

  7. oracle中根据当前记录查询前一条和后一条记录

    select * from aa01_2014 where aaa001=(select c.p from (select aaa001,lag(aaa001,1,0)  over (order by ...

  8. .Net中使用无闪刷新控件时提示框不显示

    今天做提示框的时候一直不显示,让我郁闷好久,晚上吃饭的时候问了同事一下,他给了一个思路, 他说可能是因为由于页面中的无闪刷新导致的结果:百度了一下真找到了解决方法 在页面中存在无闪刷新控件的时候提示框 ...

  9. 51nod1130(斯特林近似)

    题目链接: https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1130 题意: 中文题诶~ 思路: 直接斯特林公式就好了~ ...

  10. Git TortoiseGit SSH设置

    Git TortoiseGit SSH设置 http://www.cnblogs.com/ChenRihe/p/Git_TortoiseGit_SSH.html TortoiseGit默认的SSH客户 ...