1.html5中DOCTYPE的声明
<!DOCTYPE HTML>
2. 指定字符编码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
3. article元素:代表文档、页面或应用程序中独立、完整、可以独自被外部引用的内容,通常有标题,可以是一篇博客,一篇帖子,一段用户评论或者独立插件等,可以嵌套
<article> <header><!--article的标题一般放在header里--> <h1>苹果</h1> </header> <p>水果。。。。。。。</p> </article>
4.section元素:对内容加以分块,通常由内容和标题组成,section元素中的内容可以单独存储到数据库或者输出到word文档中,section元素一定要有标题
<article> <header><!--article的标题一般放在header里--> <h1>苹果</h1> </header> <p>水果。。。。。。。</p> <section><!--评论内容--> <h2>评论</h2> <article> <header> <h3>评论者:AAA</h3> <p>You are the apple of my eye</p> </header> </article> </section> </article>
5. article与section的区别
article作为特殊的section,但比section元素更强调独立性,如果内容相对独立用article,如果想将一块内容分成几段,使用section
6.nav元素:页面中主要的、基本的链接组放进nav元素,一个页面可以拥有多个nav元素,做页面不同部分的导航
应用场景:传统导航条,侧边栏导航,页内导航,翻页操作
<nav> <ul> <li><a href="#">苹果</a></li> <li><a href="#">橘子</a></li> <li><a href="#">香蕉</a></li> <li><a href="#">桃子</a></li> <li><a href="#">菠萝</a></li> </ul> </nav>
7. aside元素:当前页面或者文章的附属信息部分,当前主要内容的引用,侧边栏,广告,导航条等
应用场景:被包含在article元素中作为主要内容的附属信息部分,例如当前文章的有关参考资料、名词解释等;侧边栏,如友情链接、博客中的其他文章列表、广告单元等
<aside> <nav> <ul> <li><a href="#">今日之声(5月9日)</a></li> <li><a href="#">今日之声(5月8日)</a></li> <li><a href="#">今日之声(5月7日)</a></li> <li><a href="#">今日之声(5月6日)</a></li> <li><a href="#">今日之声(5月5日)</a></li> </ul> </nav> </aside>
8. time元素:表示24小时中的某个时刻或者日期
<time datetime="2013-05-10T20:00Z">此时此刻</time> <time datetime="2013-05-10T20:00+09:00">此时此刻</time> <!--日期和时间用T分隔,时间后面加上Z表示使用的是UTC标准时间,加上时差表示另一时区的时间-->
9. time元素的pubdate属性:表示该元素的发布日期,boolean值
<p> 舞会时间:<time datetime="2013-05-10T20:00Z">5月10日</time></p><!--舞会举办时间--> <p>发布日期<time datetime="2013-05-01" pubdate>5月01日</time></p><!--舞会通知的发布时间-->
11. header元素:放置整个页面或者页面中一个内容区块的标题,可以包含表格、搜索表单或者相关的logo图片
至少有一个heading元素(h1到h6)或者hgrounp元素
12. hgrounp元素:将标题进行分组,如果只有一个标题,则不需要使用hgrounp元素
<header> <hgroup> <h1>本文主标题</h1> <h2>本文子标题</h2> </hgroup> </header>
13. footer元素:作为其上层父级内容区块或者是一个根区块的脚注,包含如作者、相关阅读、版权信息等,footer个数不限,article元素和section元素均可以添加footer元素,作为文章的脚注
<footer> <ul> <li><a href="#">版权信息</a></li> <li><a href="#">站点地图</a></li> <li><a href="#">联系方式</a></li> </ul> </footer>
14.address元素:联系信息,包含作者姓名,电子邮箱,电话号码等
<footer> <address><a title="作者信息" href="作者的博客链接">AAAA</a></address> <time datetime="2013-05-01">5月1日</time> </footer>
15. html5中新增的元素不知道客户端是否支持,因此需要使用CSS追加如下声明,使新增元素以块的方式显示
article,aside,footer,header,nav,section{ display:block; }
ie8及其以前的版本不支持用CSS方法来使用尚未支持的元素,需要使用js脚本
document.createElement("header"); document.createElement("nav"); document.createElement("article"); document.createElement("footer");