HTML5之结构元素
1:文档结构元素
1.1 文章语义 -- article、header和footer元素
article元素在页面中用来表示结构完整且独立的内容部分,如论坛的一个帖子,杂志或者报纸的一篇文章。
article元素是可以嵌套使用的,内层的内容在原则上需要与外层内容相关联。例如,一篇博客文章与针对该文章的评论一起可以使用嵌套article的方式,这时
用来呈现评论的article元素被包含在文章内容的article里面。
header元素是一种具有引导和导航作用的辅助元素,通常,header元素可以包含一个区块的标题,但也可以包含其他的内容。
footer元素可以作为其直接父级内容区块或是一个根区块的尾部内容,通常包括其相关区块的附加信息,如文档的作者、文档的创作日期,相关阅读链接以及
版权信息等。
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="gb2312">
- <title>Sample</title>
- <style>
- body {
- font-family: 'Microsoft YaHei', '微软雅黑', 'SimSun', '宋体';
- }
- header {
- background: #ADB96E;
- }
- footer {
- padding: 10px 0;
- background: #EADCAE;
- clear: both;
- text-align:right;
- }
- h1, h2, h3, h4, h5, h6, p {
- margin-top: 0;
- padding-right: 15px;
- padding-left: 15px;
- }
- header, section, footer, aside, nav, article, figure {
- display: block;
- }
- </style>
- </head>
- <body>
- <article>
- <header>
- <h1>HTML5规范学习指南</h1>
- <p><time pubdate datetime="2010-11-20T15:28-08:10"></time></p>
- </header>
- <p>日志正文简介放在这里</p>
- <p>日志正文简介放在这里</p>
- <a href="?show=detail">阅读全文...</a>
- <footer>
- <a href="?show=comments">显示评论...</a>
- </footer>
- </article>
- </body>
- </html>
效果图:
1.2 内容区块语义---section元素
该元素用来表现普通的文档内容区块或者应用区块,一个区块通常由内容及其标题组成,
<section>
<h1>标题</h1>
..............其他内容....................
</section>
<section>
<h1>第1章</h1>
<p>这里是第1章的内容</p>
</section>
<section>
<h1>第2章</h1>
<p>这里是第2章的内容</p>
</section>
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="gb2312">
- <title>Sample</title>
- <style>
- body {
- font-family: 'Microsoft YaHei', '微软雅黑', 'SimSun', '宋体';
- }
- header {
- background: #ADB96E;
- }
- footer {
- padding: 10px 0;
- background: #EADCAE;
- clear: both;
- text-align:right;
- }
- h1, h2, h3, h4, h5, h6, p {
- margin-top: 0;
- padding-right: 15px;
- padding-left: 15px;
- }
- header, section, footer, aside, nav, article, figure {
- display: block;
- }
- </style>
- </head>
- <body>
- <article>
- <header>
- <h1>HTML5规范学习指南</h1>
- <p><time pubdate datetime="2010-11-20T15:28-08:10"></time></p>
- </header>
- <p>日志正文全文放在这里</p>
- <p>日志正文全文放在这里</p>
- <section>
- <h1>评论</h1>
- <article>
- <header>
- <p>Posted by: 王三</p>
- <p><time pubdate datetime="2010-12-10T19:10-08:00">
- </time></p>
- </header>
- <p>HTML5 is good thing.</p>
- </article>
- <article>
- <header>
- <p>Posted by: 李老四</p>
- <p><time pubdate datetime="2009-10-10T19:15-08:00">
- </time></p>
- </header>
- <p>正在学习HTML5,非常棒!</p>
- </article>
- </section>
- </article>
- </body>
- </html>
效果图:
1.3 侧栏和导航
<aside>用来表示当前页面或者文章的附属信息部分,它可以包含与当前页面或者主要内容无关的引用、侧边栏、广告、导航元素组,
以及其他类似的有别于主要内容的部分。
导航一般用nav元素来实现,因此,一般使用如下的代码来实现左侧导航栏:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>导航</title>
- <style type="text/css">
- aside#leftside { float: left; width: 180px; background: #EADCAE; padding-bottom: 10px;}
- </style>
- </head>
- <body>
- <aside id="leftside">
- <nav>
- <ul>
- <li><a href="#">Link One</a></li>
- <li><a href="#">Link two</a></li>
- <li><a href="#">Link three</a></li>
- <li><a href="#">Link four</a></li>
- </ul>
- </nav>
- </aside>
- </body>
- </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之结构元素的更多相关文章
- html5新增结构元素
1.article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.除了内容外,一个article元素还有它自己的标题(一般放在header里),有时还有自己的脚注. 2.sec ...
- 【原】HTML5 新增的结构元素——能用并不代表对了
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...
- 读书笔记:《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...
- HTML5结构元素
前面的话 几年前,用于网页布局的一般都用div元素,但语义化并不好.HTML5引入了大量新的块级元素来帮助提升网页的语义,使页面具有逻辑性的结构.容易维护,并且对数据挖掘服务更加友好.本文将详细介绍H ...
- 【HTML5 3】《html5 开发精要与实例讲解》 step2 -- 结构元素 (待续)
主要内容:通过 一个博客网站和一个企业网站的制作 展示如何运用HTML5中的各种 结构元素,构建出一个语义清晰,结构分明的Web3.0时代的网站. 案例1:用HTML5中的结构元素构建一个博客网站 疑 ...
- HTML5的结构学习(2) --- 新增的非主体结构元素
除了上一篇学习到的主体结构元素之外,html5还增加了一些表示逻辑结构和附加信息的非主体结构元素: 1.header 解释:一种具有引导和导航作用的结构元素. 用途:通常用来放置整个页面或者页面内某一 ...
- HTML5的新的结构元素介绍
HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被 ...
- HTML5学习笔记(三):语义化和新增结构元素
在HTML5之前,使用机器来阅读一个网页是非常困难的,我们使用不同样式的div来标记不同的内容,所以实际上机器无法得知页面的哪个部分是正文,哪个部分是标题,那么在HTML5里,针对这个问题就引入了语义 ...
随机推荐
- Snapchat面经(师兄的)
给一个LinkedList环,给其中任一个节点的reference,求删去LinkedList中所有value=k的点 我的想法:假设给定的点事ListNode oneNode, 设置ListNode ...
- G面经prepare: X-Straight
Define “X-Straight” as X cards with consecutive numbers (X >= 3). Determine if the deck can be fu ...
- Lintcode: Remove Node in Binary Search Tree
iven a root of Binary Search Tree with unique value for each node. Remove the node with given value. ...
- 一个新人对JavaScript的内容简单介绍
JavaScript 1.基本的数据类型:字符串 小数 整数 时间日期 布尔型等. 2.变量: JS定义变量通通都是用var开头,var里面可以放任何东西(如:小数,整数,字符串,时间日期等等 ...
- zoj The 12th Zhejiang Provincial Collegiate Programming Contest Convert QWERTY to Dvorak
http://acm.zju.edu.cn/onlinejudge/showContestProblem.do?problemId=5502 The 12th Zhejiang Provincial ...
- C++之路进阶——codevs2313(星际竞速)
2313 星际竞速 2010年省队选拔赛山东 时间限制: 3 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 10 年一度的银河系 ...
- java反射机制简介
1.字节码.所谓的字节码就是当java虚拟机加载某个类的对象时,首先需要将硬盘中该类的源代码编译成class文件的二进制代码(字节码),然后将class文件的字节码加载到内存中,之后再创建该类的对象 ...
- const C语言(转)
const在C语言中算是一个比较新的描述符,我们称之为常量修饰符,意即其所修饰的对象为常量(immutable). 我们来分情况看语法上它该如何被使用. 1.函数体内修饰局部变量.例:void fun ...
- SQL Server 索引视图 聚簇索引
创建示例: 朋友的网站速度慢,让我帮忙看下,他用的SQL Server里面 有一个文章表里面有30多万条记录 还有一个用户表里面也差不多17万记录 偏偏当初设计的时候没有冗余字段 很多帖子信息需要JO ...
- 如何在图像处理工具包ImagXpress中对图像进行捕捉、复制和粘贴
如何在在ImagXpress中进行图像的捕捉. 复制和粘贴呢?下面详细来看一下,在多种情况下,图和实现这些操作. 捕捉屏幕图像 捕捉通过ImageXView窗口绑定的屏幕范围,以及保存到一个Image ...