XHTML 介绍
XHTML元素
XHTML属性
HTML新增的全局属性
全局属性:对任何元素都可以使用的属性
designMode属性只能在JavaScript中使用
<!DOCTYPE html><!--HTML5版本声明--> <html lang="en"> <head> <meta charset="UTF-8"> <!--编码格式--> <title></title> </head> <body> <h2> 可编辑列表</h2> <ul contenteditable="true"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> <br/><br/><br/><br/> <h2>不可见状态</h2> <ul hidden=""> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> <br/><br/><br/><br/> <input type="text" spellcheck=""> <br/><br/><br/><br/> <a href="#" tabindex="1">hello</a> <a href="#" tabindex="4">hello</a> <a href="#" tabindex="3">hello</a> <a href="#" tabindex="2">hello</a> <ul tabindex="-1"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> </body> </html>
HTML5新增主体结构元素
1. article元素
<!DOCTYPE html><!--HTML5版本声明--> <html lang="en"> <head> <meta charset="UTF-8"> <!--编码格式--> <title>article</title> </head> <body> <article> <header> <h1> 极客学院</h1> <p> Hello ,欢迎来到极客学院</p> </header> <!-- article元素可以嵌套使用--> <!-- <article> <header> <p> 设计属于自己风格的页面</p> </header> <footer> <p> 设计者:myself</p> </footer> </article>--> <footer> <p>这是底部</p> </footer> </article> <!-- article元素可以用来表示插件--> <!-- <article> <h1> 这是一个内嵌页面</h1> <object> <embed src="#" width="600" height="400" /> </object> </article>--> </body> </html>
2.section元素
1.不要将section设置样式的页面容器,这是div的工作
2.如果article元素,等更符合使用条件,不要使用section
3.不要为没有标题的内容的区域块使用section元素
<!DOCTYPE html><!--HTML5版本声明--> <html lang="en"> <head> <meta charset="UTF-8"> <!--编码格式--> <title>section元素</title> </head> <body> <!--不推荐没有标题的内容使用section,而article元素可以独立内容--> <section> <h1> 苹果</h1> <p> 这是一个水果,很好吃</p> </section> <article> <h1> 苹果 </h1> <p>这是一个水果,好吃</p> <!-- 每一个section都要自己的标题--> <section> <h1>红富士 </h1> <p>这是一个外表很红的水果,好吃</p> </section> <section> <h1> 国光 </h1> <p>这是一个外表很红的水果,好吃</p> </section> </article> </body> </html>