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> <h2>contentEditable</h2> <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> <h1>thystar</h1> <p>welcome to jike</p> </header> <article> <header> 作者 </header> <p>评论</p> <footer> time </footer> </article> <footer> <p>底部</p> </footer> </article> <article> <h1>嵌套页面</h1> <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> <h1>apple</h1> <p>this is an apple</p> </section> <article> <h1>apple</h1> <p>this is an apple</p> <section> <h2>red</h2> <p>this is a red apple</p> </section> <section> <h2>green</h2> <p>this is a green apple</p> </section> </article> <section> <h1>fruit</h1> <article> <h1>apple</h1> <p>this is an apple</p> </article> <article> <h1>apple</h1> <p>this is an apple</p> </article> <article> <h1>apple</h1> <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> <h1>ssssssssssssss</h1> <nav> <ul> <li><a href="#">主页</a></li> <li><a href="#">文档</li> </ul> </nav> </header> <section> <h1>ssssssssssssss</h1> <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> <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><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> <h1> pingguo </h1> <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> <h1>页面标题</h1> <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><h1>hello</h1></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> <h1>yufa</h1> <p>zhengwen</p> <footer> <h1>jishi</h1> <p>yufa:yigeduiyuyanlaishuohenzhongyaodeneirongti</p> </footer> </article> <section> <h1>ssssssssssssss</h1> <footer> <ul> <li><a href="#">主页</a></li> <li><a href="#">文档</li> </ul> </footer> </section> </body> </html>
hgroup
<hgroup> <h1>ssssssssssssss</h1> <h2>ssssssssssssss</h2> </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
时间： 2024-10-29 19:07:46