XHTML可扩展的超文本标记语言
文档声明：
DTD：
html5与html4的区别
html5新增的元素：
结构元素：section ，article， aside， header，hgroup，footer, nav, figure
其他元素： video，audio, canvas,
input，元素类型：Email，
全局属性：
contentEditable
disignMode
hidden
spellcheck
tabindex
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h3>contentEditable</h3> <ul contenteditable="true"> <li>表1</li> <li>表2</li> <li>表3</li> </ul> <ul hidden="true"> <li>表1</li> <li>表2</li> <li>表3</li> </ul> <input type="text" spellcheck=""> <a href="#" tabindex="1">hello1</a> <a href="#" tabindex="2">hello2</a> <a href="#" tabindex="3">hello3</a> </body> </html>
新增的主体结构元素：
1 ， article
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>article</title> </head> <body> <article> <header> <h2>thystar</h2> <p>welcome to jike</p> </header> <article> <header> 作者 </header> <p>评论</p> <footer> time </footer> </article> <footer> <p>底部</p> </footer> </article> <article> <h2>嵌套页面</h2> <object> <embed src="#" width="600" height="400"></embed> </object> </article> </body> </html>
2. section
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>article</title> </head> <body> <section> <h2>apple</h2> <p>this is an apple</p> </section> <article> <h2>apple</h2> <p>this is an apple</p> <section> <h3>red</h3> <p>this is a red apple</p> </section> <section> <h3>green</h3> <p>this is a green apple</p> </section> </article> <section> <h2>fruit</h2> <article> <h2>apple</h2> <p>this is an apple</p> </article> <article> <h2>apple</h2> <p>this is an apple</p> </article> <article> <h2>apple</h2> <p>this is an apple</p> </article> </section> </body> </html>
3. nav 导航
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>article</title> </head> <body> <nav> <ul> <li><a href="#">主页</a></li> <li><a href="#">文档</li> </ul> </nav> <article> <header> <h2>ssssssssssssss</h2> <nav> <ul> <li><a href="#">主页</a></li> <li><a href="#">文档</li> </ul> </nav> </header> <section> <h2>ssssssssssssss</h2> <nav> <ul> <li><a href="#">主页</a></li> <li><a href="#">文档</li> </ul> </nav> </section> <footer> <nav> <ul> <li><a href="#">删除</a></li> <li><a href="#">修改</li> </ul> </nav> </footer> </article> <footer> <p><small>版权声明</small></p> </footer> </body> </html>
aside元素
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <header> <h2>jike</h2> </header> <article> <h2>yufa</h2> <p>zhengwen</p> <aside> <h2>jishi</h2> <p>yufa:yigeduiyuyanlaishuohenzhongyaodeneirongti</p> </aside> </article> <aside> <nav> <h3>pinglu</h3> <ul> <li><a href="#">20150101</a></li> <li><a href="#">20150102</a></li> </ul> </nav> </aside> </body> </html>
time元素与微格式
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <time datetime="20101010">2010-10-10</time> <time datetime="20101010T20:00">2010-10-10</time> <time datetime="20101010T20:00+09:00">2010-10-10</time> </body> </html>
pubdate
<body> <article> <h2> pingguo </h2> <p><time datetime="2015-10-15" pubdate>2015-10-15</time></p> <p><time datetime="2015-10-15" >2015-10-18</time></p> </article> </body>
html5新增的非主体结构元素
header元素：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <header> <h2>页面标题</h2> <a href="#">jike</a> <nav> <ul> <li><a href="#">学习</a></li> <li><a href="#">技术</a></li> <li><a href="#">问答</a></li> </ul> </nav> </header> <article> <header><h2>hello</h2></header> </article> </body> </html>
footer
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <footer> <ul> <li><a href="#">20150101</a></li> <li><a href="#">20150102</a></li> </ul> </footer> <article> <h2>yufa</h2> <p>zhengwen</p> <footer> <h2>jishi</h2> <p>yufa:yigeduiyuyanlaishuohenzhongyaodeneirongti</p> </footer> </article> <section> <h2>ssssssssssssss</h2> <footer> <ul> <li><a href="#">主页</a></li> <li><a href="#">文档</li> </ul> </footer> </section> </body> </html>
hgroup
<hgroup> <h2>ssssssssssssss</h2> <h3>ssssssssssssss</h3> </hgroup>
address
<body> <address> <a href="#">iven</a> <a href="#">Iven</a> </address> <footer> <div> <address> <a href="#">iven</a> </address> </div> </footer> </body>
极客学院：http://www.jikexueyuan.com/course/147.html
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
