1 <!DOCTYPE html system "about:legacy-compat">
 2  <head>
 3   <title>Html 5 Test</title>
 4   <meta charset="utf-8">
 5   <style type="text/css">
 6     input[type=search]{-webkit-appearance:textfield}
 7   </style>
 8  </head>
 9  <input type=button id=editable value=Editable >
10  <input type=submit form=mainForm value=submit >
11  <form id=mainForm ></form>
12  <p><lable>Search<input type=search name=srearch form=mainForm list=searching autocomplete=on autofocus required pattern='^a*$'></lable></p>
13  <datalist id=searching style='display:none'>
14     <option>aaaa</option>
15     <option>bbbb</option>
16     <option>cccc</option>
17  </datalist>
18  <input type=checkbox checked=a>
19  <textarea spellcheck=true tabindex=-1 placeholder='input me' ></textarea>
20  <progress id=pgr1 min=0 max=100 value=50 ></progress>50%...
21  <meter min=0 max=100 value=30 ></meter>
22  <br>
23  search:<input type=search > 
24  tel:<input type=tel >
25  url:<input type=url >
26  email:<input type=email ><br> 
27  number:<input type=number min=0 max=15 step=2>
28  range:<input type=range id=range name=range form=mainForm > 
29  output:<output  onforminput='value=range.value' form=mainForm ></output> 
30  color:<input type=color value=#ff00ff ><br>
31  file:<input type=file multiple size=3 accept=image/* >
32  date:<input type=date > time:<input type=time ><br>
33  datetime-local:<input type=datetime-local > 
34  month:<input type=moth > 
35  week:<input type=week >
36  <ol contentEditable=a start=5 reversed>
37     <li>EditableItem1</li>
38     <li><cite>EditableItem2</cite></li>
39     <li>EditableItem3</li>
40  </ol> 
41  <details>
42  <summary>nano info:</summary>
43  <figure>
44     <img src='E:\javaprogram\LdgShow\WebRoot\images\nano.png' alt=nano height=150 width=150 >
45     <img src='E:\javaprogram\LdgShow\WebRoot\images\nano.png' alt=nano height=150 width=150 >
46     <img src='E:\javaprogram\LdgShow\WebRoot\images\nano.png' alt=nano height=150 width=150 >
47     <figcaption><mark>haha</mark></figcaption>
48 </figure>
49  </details>
50 <dl>
51     <dt>aa</dt>
52     <dd>bb...</dd>
53 </dl>
54 <script >
55     document.getElementById('editable').onclick=setEditable;
56 
57     function setEditable(){
58         document.designMode='on';
59     }
60 </script>

 

posted on 2013-07-20 17:34  Li Daigang  阅读(405)  评论(0)    收藏  举报