标签：
html5 标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> header{background:#abcdef; height:150px;} nav{height:30px; background: #ff9900; margin-top: 100px;} nav li{float:left; width:100px; list-style: none; height:30px; line-height: 30px;} div{margin-top:10px;} section{width:70%;background:#abcdef;float:left;} article{background:#f90; width:500px; margin:0 auto; text-align:center;} aside{width:28%;float:right; background: #abcdef;} footer{background: #abcdef; height:100px; margin-top:20px; clear:both;} </style> </head> <body> <header> <p>this is header</p> <nav> <ul> <li>首页</li><li>文章</li><li>帮助中心</li> </ul> </nav> </header> <div> <!--主要部分--> <section> <p>this is section</p> <article> <h2>春晓</h2> <p>春眠不觉晓，<br/> 处处蚊子咬，<br/> 打上敌敌畏,<br/> 不知死多少。<br/> </p> </article> <hr/> <article> <h2>上学歌</h2> <p>春眠不觉晓，<br/> 处处蚊子咬，<br/> 打上敌敌畏,<br/> 不知死多少。<br/> </p> </article> <hr/> <figure> <figcaption>UFO</figcaption> <p>不明飞行物</p> </figure> <figure> <dt>DDS</dt> <dd>大吊死</dd> </figure> <hr/> <dialog> <dt>今天几号？</dt> <dd>母鸡</dd> <dt>问你几号啊？</dt> <dd>19</dd> </dialog> <hr/> <menu> <li>点击</li> <li>右键单击</li> </menu> <hr/> <!--firefox 才有右键菜单效果--> <span contextmenu="caidan">右键单击</span> <menu type="context" id="caidan"> <menuitem label="菜单一" onclick="alert(‘这是菜单一‘)" icon="../img/logo.png"></menuitem> </menu> <hr/> <!--温度计--> <meter min="0" max="100" value="20" low="3" high="25"></meter> <!--进度条--> <progress max="100" value="50" id="pro"></progress> <script type="text/javascript"> var pro=document.getElementById(‘pro‘); setInterval(function(){pro.value+=1;},100); </script> <hr/> <!--展开折叠效果--> <details> <dt>这是一个问题？</dt> <dd>to be or not to be?</dd> <dt>这是一个问题？</dt> <dd>to be or not to be?</dd> <dt>这是一个问题？</dt> <dd>to be or not to be?</dd> </details> <hr/> <p>偏僻字注意功能，浏览器firefox不支持时,加（），支持者是拼音状态</p> <ruby>狂<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby> <hr/> <p> mark 是标记重点突出的效果</p> <mark>男生最喜欢</mark>玩游戏 </section> <aside> <p>this is aside</p> <hgroup> <h3>股票有风险？</h3> <h3>投资股票吗？</h3> </hgroup> </aside> </div> <footer> <p>this is footer</p> <hr/> <small>联系我们</small> <small>商户合作</small> </footer> </body> </html>
标签：
原文地址：http://www.cnblogs.com/gyz418/p/5297366.html
