溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
