html5学习测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- 4秒后自动转去相应网址 --> <!-- <meta http-equiv="refresh" content="4; http://www.baidu.com/" /> --> <title>test output</title> <style> //body{ background: navy; color: yellow;} </style> </head> <body> <form name="main"> <h3>output元素,在firefox中支持得很好</h3> <output name="result"></output> <script> document.forms.main.elements.result.value = "Hello中国"; </script> </form> <hr> <a href="about:blank">baidu</a> <script> var a = document.links[0]; a.href="http://www.baidu.com"; a.protocol = "https"; //a.setAttribute("href","http://www.163.com"); a.setAttribute("target","_blank"); </script> <hr> <h3>特殊符号</h3> 10±0.01 <br> 注册商标® <br> 度° <br> 元¥ <br> 引号" Hello World. " <hr> <strong>鼠标</strong>移上去显示详细<em>abbr</em>:<abbr title="eXtensible Hyper Text Markup Language">XHTML</abbr> <hr> <kbd>Enter</kbd> <hr> <pre> <code> function message(info){ window.alert(info); } </code></pre> <hr> <blockquote> 天才是99%的汗水+1%的天分! </blockquote> <hr> <table border=1> <colgroup span="1" style="width:150px;"></colgroup> <colgroup> <col span="2" style="width:100px; background:red"> </colgroup> <colgroup> <col span="1" style="width:100px; background:#ccff99"> </colgroup> <colgroup span="1" style="width:150px;"></colgroup> <thead>x <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>4</td> </tr> <tbody> <tbody> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>4</td> </tr> <tr> <td>9</td> <td>0</td> <td>-</td> <td>=</td> <td>4</td> </tr> </tbody> <tfoot> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>4</td> </tr> <tfoot> </table> <hr> <form action="" name="frmTest"> tel: <input type="tel"> <br> datetime: <input type="datetime"> <br> range: <input type="range" min="0" max="10" value="5"> <br> color: <input type="color" name="colorSel"> <input type="button" onclick="alert(frmTest.colorSel.value)"> <br> optgroup示例: <select name="selOptGrp" id=""> <optgroup label="娱乐"> <option value="film">电影</option> <option value="film">音乐</option> </optgroup> <optgroup label="运动"> <option value="football">足球</option> <option value="basketball">蓝球</option> </optgroup> </select> <br> <datalist id="mylist"> <option value="film">电影</option> <option value="film">音乐</option> <option value="football">足球</option> <option value="basketball">蓝球</option> </datalist> 提示: <input type="text" name="mysport" list="mylist"> <br> progress: <progress max="100" value="20"></progress> </form> <h3>menu test fail:</h3> <div style="border:1px solid red; width:400px; height:300px; word-wrap:break-word; word-break:break-all;" draggable="true" contextmenu="mymenu"> Hello World, This is great! Hello World, This is great!Hello World, This is great!Hello World, This is great! </div> <menu id="mymenu" type="toolbar" label="someth"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </menu> </body> </html>