1：文档结构元素

1.1 文章语义 --  article、header和footer元素

article元素在页面中用来表示结构完整且独立的内容部分，如论坛的一个帖子，杂志或者报纸的一篇文章。

article元素是可以嵌套使用的，内层的内容在原则上需要与外层内容相关联。例如，一篇博客文章与针对该文章的评论一起可以使用嵌套article的方式，这时

用来呈现评论的article元素被包含在文章内容的article里面。

header元素是一种具有引导和导航作用的辅助元素，通常，header元素可以包含一个区块的标题，但也可以包含其他的内容。

footer元素可以作为其直接父级内容区块或是一个根区块的尾部内容，通常包括其相关区块的附加信息，如文档的作者、文档的创作日期，相关阅读链接以及

版权信息等。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="gb2312">
  5. <title>Sample</title>
  6. <style>
  7. body {
  8. font-family: 'Microsoft YaHei', '微软雅黑',  'SimSun', '宋体';
  9. }
  10. header {
  11. background: #ADB96E;
  12. }
  13. footer {
  14. padding: 10px 0;
  15. background: #EADCAE;
  16. clear: both;
  17. text-align:right;
  18. }
  19. h1, h2, h3, h4, h5, h6, p {
  20. margin-top: 0;
  21. padding-right: 15px;
  22. padding-left: 15px;
  23. }
  24. header, section, footer, aside, nav, article, figure {
  25. display: block;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <article>
  31. <header>
  32. <h1>HTML5规范学习指南</h1>
  33. <p><time pubdate datetime="2010-11-20T15:28-08:10"></time></p>
  34. </header>
  35. <p>日志正文简介放在这里</p>
  36. <p>日志正文简介放在这里</p>
  37. <a href="?show=detail">阅读全文...</a>
  38. <footer>
  39. <a href="?show=comments">显示评论...</a>
  40. </footer>
  41. </article>
  42. </body>
  43. </html>

效果图：

1.2 内容区块语义---section元素

该元素用来表现普通的文档内容区块或者应用区块，一个区块通常由内容及其标题组成，

<section>

<h1>标题</h1>

..............其他内容....................

</section>

<section>

<h1>第1章</h1>

<p>这里是第1章的内容</p>

</section>

<section>

<h1>第2章</h1>

<p>这里是第2章的内容</p>

</section>

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="gb2312">
  5. <title>Sample</title>
  6. <style>
  7. body {
  8. font-family: 'Microsoft YaHei', '微软雅黑',  'SimSun', '宋体';
  9. }
  10. header {
  11. background: #ADB96E;
  12. }
  13. footer {
  14. padding: 10px 0;
  15. background: #EADCAE;
  16. clear: both;
  17. text-align:right;
  18. }
  19. h1, h2, h3, h4, h5, h6, p {
  20. margin-top: 0;
  21. padding-right: 15px;
  22. padding-left: 15px;
  23. }
  24. header, section, footer, aside, nav, article, figure {
  25. display: block;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <article>
  31. <header>
  32. <h1>HTML5规范学习指南</h1>
  33. <p><time pubdate datetime="2010-11-20T15:28-08:10"></time></p>
  34. </header>
  35. <p>日志正文全文放在这里</p>
  36. <p>日志正文全文放在这里</p>
  37. <section>
  38. <h1>评论</h1>
  39. <article>
  40. <header>
  41. <p>Posted by: 王三</p>
  42. <p><time pubdate datetime="2010-12-10T19:10-08:00">
  43. </time></p>
  44. </header>
  45. <p>HTML5 is good thing.</p>
  46. </article>
  47. <article>
  48. <header>
  49. <p>Posted by: 李老四</p>
  50. <p><time pubdate datetime="2009-10-10T19:15-08:00">
  51. </time></p>
  52. </header>
  53. <p>正在学习HTML5，非常棒！</p>
  54. </article>
  55. </section>
  56. </article>
  57. </body>
  58. </html>

效果图：

1.3 侧栏和导航

<aside>用来表示当前页面或者文章的附属信息部分，它可以包含与当前页面或者主要内容无关的引用、侧边栏、广告、导航元素组，

以及其他类似的有别于主要内容的部分。

导航一般用nav元素来实现，因此，一般使用如下的代码来实现左侧导航栏：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  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>导航</title>
  6. <style type="text/css">
  7. aside#leftside { float: left; width: 180px; background: #EADCAE; padding-bottom: 10px;}
  8. </style>
  9. </head>
  10. <body>
  11. <aside id="leftside">
  12. <nav>
  13. <ul>
  14. <li><a href="#">Link One</a></li>
  15. <li><a href="#">Link two</a></li>
  16. <li><a href="#">Link three</a></li>
  17. <li><a href="#">Link four</a></li>
  18. </ul>
  19. </nav>
  20. </aside>
  21. </body>
  22. </html>

效果图：

1.4  address元素

address元素一般被作者用来提供该文档的联系人信息，一般放在一个网页的开头或者结尾，最常用的是和其他内容包含在footer元素内。

如果address元素位于article元素内部，则它表示<article>元素所包含文章内容的作者的联系信息，如果直接位于body元素内，那么表示该网页的作者的

联系信息。

2：浏览器的兼容性

对于IE浏览器，也可以输入下面的代码，这是一个HTML5爱好者编写的实现，可以便利的让IE9以前的浏览器支持结构元素，并且支持打印功能:

<!--[if lt IE9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif] -->

共支持如下的html 5元素：

abbr  article   aside   audio   canvas   details   figcaption  figure   footer   header   hgroup  mark   meter

nav  output   progress   section     summary   time   video

HTML5之结构元素的更多相关文章

  1. html5新增结构元素

    1.article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.除了内容外,一个article元素还有它自己的标题(一般放在header里),有时还有自己的脚注. 2.sec ...

  2. 【原】HTML5 新增的结构元素——能用并不代表对了

    做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...

  3. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  4. 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  5. HTML5结构元素

    前面的话 几年前,用于网页布局的一般都用div元素,但语义化并不好.HTML5引入了大量新的块级元素来帮助提升网页的语义,使页面具有逻辑性的结构.容易维护,并且对数据挖掘服务更加友好.本文将详细介绍H ...

  6. 【HTML5 3】《html5 开发精要与实例讲解》 step2 -- 结构元素 (待续)

    主要内容:通过 一个博客网站和一个企业网站的制作 展示如何运用HTML5中的各种 结构元素,构建出一个语义清晰,结构分明的Web3.0时代的网站. 案例1:用HTML5中的结构元素构建一个博客网站 疑 ...

  7. HTML5的结构学习(2) --- 新增的非主体结构元素

    除了上一篇学习到的主体结构元素之外,html5还增加了一些表示逻辑结构和附加信息的非主体结构元素: 1.header 解释:一种具有引导和导航作用的结构元素. 用途:通常用来放置整个页面或者页面内某一 ...

  8. HTML5的新的结构元素介绍

    HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被 ...

  9. HTML5学习笔记（三）：语义化和新增结构元素

    在HTML5之前,使用机器来阅读一个网页是非常困难的,我们使用不同样式的div来标记不同的内容,所以实际上机器无法得知页面的哪个部分是正文,哪个部分是标题,那么在HTML5里,针对这个问题就引入了语义 ...

随机推荐

  1. Leetcode: Range Sum Query 2D - Mutable && Summary: Binary Indexed Tree

    Given a 2D matrix matrix, find the sum of the elements inside the rectangle defined by its upper lef ...

  2. VCL Tclientsocket, Tserversocket控件安装方法

    菜单component->Install Packets 按Add按钮,选择delphi目录里的bin目录下的dclsockets70.bpl(delphi2010是dclsockets140. ...

  3. nyist 518 取球游戏

    http://acm.nyist.net/JudgeOnline/problem.php?pid=518 取球游戏 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 今 ...

  4. [原创]java WEB学习笔记86：Hibernate学习之路-- -映射 n-n 关系,单向n-n，双向n-n

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  5. c++中的传参问题

    从概念上讲.指针从本质上讲就是存放变量地址的一个变量,在逻辑上是独立的,它可以被改变,包括其所指向的地址的改变和其指向的地址中所存放的数据的改变. 而引用是一个别名,它在逻辑上不是独立的,它的存在具有 ...

  6. MVC权限管理系统dwpro项目权限按钮无故自动消失问题

    关于那个权限按钮丢失的问题修改方法如下: 把源文件中的XmlConfig文件夹里的Config.xml文件剪切到根目录下,并修改文件名为:app.config(关键是后缀不是xml了是config) ...

  7. SQL2008无法连接到.\SQLEXPRESS，用户'sa'登录失败（错误18456）图文解决方法

      出现问题 :标题: 连接到服务器 ------------------------------ 无法连接到 .\SQLEXPRESS. ------------------------------ ...

  8. PAT乙级 1002. 写出这个数 (20)

    1002. 写出这个数 (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 读入一个自然数n,计算其各位数字 ...

  9. 使用sudo执行命令的时候提示找不到命令

    事出有因, 源自使用源码编译 nginx , 在 /usr/local/sbin/ 目录下创建了nginx 启动的符号链接 , 执行 sudo nginx 的时候提示找不到命令, 但是使用普通用户身份 ...

  10. NOIP200407合唱队形+最长上升子序列O(n^2)详解

    合唱队形解题报告 2016-05-12   4:30——6:45 NOIP200407合唱队形 难度级别:A: 运行时间限制:1000ms: 运行空间限制:256000KB: 代码长度限制:20000 ...