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>

</section>

</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]>

<![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里,针对这个问题就引入了语义 ...

随机推荐

汉字转【pinyin】
引言 github地址:aizuyan/pinyin 无意中看到了overtrue/pinyin这个项目,感觉很有意思,这个项目做了这么一件事情: 将汉字转化为拼音刚看到这里是不是觉得没什么难度,没 ...
轉發和重定向-JSP
最近在復習JSP,寫案例時遇到轉發和重定向的問題,忽然忘記了好多東西.趕緊搜索了下,感覺還是比較常用的. 轉:http://blog.csdn.net/CYHJRX/article/details/3 ...
ACM之Java速成(3)
ACM中Java.大数处理先上个代码: import java.math.*; import java.util.*; class Main{ public static void main(Str ...
Java基础(10):java基础第一部分综合测试题，成绩合法性校验与排序
题目: 编写一个 JAVA 程序,实现输出考试成绩的前三名要求: 1. 考试成绩已保存在数组 scores 中,数组元素依次为 89 , -23 , 64 , 91 , 119 , 52 , 73 ...
poj: 1005
简单题 #include <iostream> #include <stdio.h> #include <string.h> #include <stack& ...
Myeclipse10编写jsp时出现 Multiple annotations found at this line:
今天,老师讲完课做了一个小练习,就是编写一个jsp页面.写完后,我发现少些了点东西,我准备使用<% %>添加是发现,报错了 Multiple annotations found at th ...
jquery中的事件进阶
1.事件冒泡 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
关闭微软对win10的推送
找到windows中安装的更新,卸载 KB3035583 这个更新即可
web工程常见部署方式总结
作为一个web测试工程师,对测试所属的平台架构,项目部署情况应该是有所了解的,下面在此基础上总结下web项目在各种场景下常用的部署方式: 第一种方法: 开发常用部署方法,直接在myeclipse里部署 ...
IE和FF区别关于css和js
css 1.ul标签FF中有padding值,没有margin,IE中相反解决办法:将ul的padding和margin都设为0, js 1.IE中innerText在火狐中没有,使用textCon ...

HTML5之结构元素

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

随机推荐

热门专题