html5学习笔记(4)_H5之家 - 中国HTML5教程资源分享第一站

XHTML可扩展的超文本标记语言

文档声明：

DTD：

html5与html4的区别

html5新增的元素：

结构元素：section ，article， aside， header，hgroup，footer, nav, figure

其他元素： video，audio, canvas,

input，元素类型：Email，

全局属性：

contentEditable

disignMode

hidden

spellcheck

tabindex

<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> </head> <body> <h2>contentEditable</h2> <ulcontenteditable="true"> <li>表1</li> <li>表2</li> <li>表3</li> </ul> <ulhidden="true"> <li>表1</li> <li>表2</li> <li>表3</li> </ul> <inputtype="text"spellcheck=""> <ahref="#"tabindex="1">hello1</a> <ahref="#"tabindex="2">hello2</a> <ahref="#"tabindex="3">hello3</a> </body> </html>

新增的主体结构元素：

1 ， article

<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title>article</title> </head> <body> <article> <header> <h1>thystar</h1> <p>welcometojike</p> </header> <article> <header> 作者 </header> <p>评论</p> <footer> time </footer> </article> <footer> <p>底部</p> </footer> </article> <article> <h1>嵌套页面</h1> <object> <embedsrc="#"width="600"height="400"></embed> </object> </article> </body> </html>

2. section

<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title>article</title> </head> <body> <section> <h1>apple</h1> <p>thisisanapple</p> </section> <article> <h1>apple</h1> <p>thisisanapple</p> <section> <h2>red</h2> <p>thisisaredapple</p> </section> <section> <h2>green</h2> <p>thisisagreenapple</p> </section> </article> <section> <h1>fruit</h1> <article> <h1>apple</h1> <p>thisisanapple</p> </article> <article> <h1>apple</h1> <p>thisisanapple</p> </article> <article> <h1>apple</h1> <p>thisisanapple</p> </article> </section> </body> </html>

3. nav 导航

<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title>article</title> </head> <body> <nav> <ul> <li><ahref="#">主页</a></li> <li><ahref="#">文档</li> </ul> </nav> <article> <header> <h1>ssssssssssssss</h1> <nav> <ul> <li><ahref="#">主页</a></li> <li><ahref="#">文档</li> </ul> </nav> </header> <section> <h1>ssssssssssssss</h1> <nav> <ul> <li><ahref="#">主页</a></li> <li><ahref="#">文档</li> </ul> </nav> </section> <footer> <nav> <ul> <li><ahref="#">删除</a></li> <li><ahref="#">修改</li> </ul> </nav> </footer> </article> <footer> <p><small>版权声明</small></p> </footer> </body> </html>

aside元素

<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> </head> <body> <header> <h1>jike</h1> </header> <article> <h1>yufa</h1> <p>zhengwen</p> <aside> <h1>jishi</h1> <p>yufa:yigeduiyuyanlaishuohenzhongyaodeneirongti</p> </aside> </article> <aside> <nav> <h2>pinglu</h2> <ul> <li><ahref="#">20150101</a></li> <li><ahref="#">20150102</a></li> </ul> </nav> </aside> </body> </html>

time元素与微格式

<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> </head> <body> <timedatetime="20101010">2010-10-10</time> <timedatetime="20101010T20:00">2010-10-10</time> <timedatetime="20101010T20:00+09:00">2010-10-10</time> </body> </html>

pubdate

<body> <article> <h1> pingguo </h1> <p><timedatetime="2015-10-15"pubdate>2015-10-15</time></p> <p><timedatetime="2015-10-15">2015-10-18</time></p> </article> </body>

html5新增的非主体结构元素