HTML的常用总结

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 </head>
  7 <body>
  8     <form action="/add/" method="get">
  9         a:<input type="text" name="a" id="a" placeholder="请输入"><br>
 10         b:<input type="text" name="b" id="b"><br>
 11         <p>result:<span id="result"></span></p>
 12         <button type="button" id="sum">Calc</button>
 13     </form>
 14     <span style="color: aqua" id="hello">hello!</span><br>
 15     <address>地址</address><br>
 16     <em>强调</em><br>
 17     <i>突出不同</i><br>
 18     <p><cite>引用</cite>作为关键字</p>
 19     <p>段落</p>
 20     <p><strong>粗体</strong></p>
 21     <p><b>提醒</b></p>
 22     <figure>
 23         <img src="/static/dyx.png" alt="说明" width="75" height="150">
 24     </figure>
 25     <p><abbr style="color: aquamarine">虚下划线</abbr></p>
 26     <p><blockquote>带缩进，大区快大区快大区快大区快大区快大区快大区快大区快大区快大区快</blockquote></p>
 27     <p><mark >北京</mark></p>
 28     <p><sub>下标</sub>文本文本文本文本<sup>上标</sup></p>
 29     <p><ins>下划线</ins></p>
 30     <p><del>删除</del>的内容</p>
 31     <p><small>字号减小</small></p>
 32     <p><time >定义时间</time></p>
 33 
 34     <p>多选按钮</p>
 35     <input type="radio" id="a" name="deng" value="beijing" checked/>
 36     <label for="a">北京</label>
 37     <input type="radio" id="b" name="deng" value="shanghai"/>
 38     <label for="b">上海</label>
 39 
 40     <p>下拉框</p>
 41     <select id="sel" name="deng" multiple="multiple">
 42         <option value="beijing">北京</option>
 43         <option value="shanghai">上海</option>
 44         <option value="nanjing">南京</option>
 45     </select>
 46 
 47     <select>
 48         <option value="volvo">Volvo</option>
 49         <option value="saab">Saab</option>
 50         <option value="mercedes">Mercedes</option>
 51         <option value="audi" selected>Audi</option>
 52     </select>
 53 
 54     <p>上传文件</p>
 55     <input type="file" id="myfile" name="deng" size="5" />
 56 
 57     <p>创建提交按钮</p>
 58     <input type="submit" value="点击提交">
 59 
 60     <p>创建带图片的提交按钮</p>
 61     <button type="image"><img src="/static/dyx.png" alt="info" >点击这里</button>
 62 
 63     <p>创建图像按钮</p>
 64     <input type="image" alt="提交" src="/static/dyx.png" alt="info">
 65 
 66     <p>文本区域</p>
 67     <textarea name="deng" maxlength="20" rows="3" cols="10">这是一个文本区域</textarea>
 68 
 69     <p>表格</p>
 70     <table>
 71         <thead>
 72         <tr>
 73             <th>aaa</th>
 74             <th>bbb</th>
 75         </tr>
 76         </thead>
 77         <tbody>
 78         <tr>
 79             <td>a</td>
 80             <td>b</td>
 81             <td>c</td>
 82         </tr>
 83 
 84         <th scope="" >主题</th>
 85         <tr>
 86 
 87             <td rowspan="3">ddddddddddd</td>
 88             <td>e</td>
 89             <td>f</td>
 90         </tr>
 91 
 92         </tbody>
 93     </table>
 94 
 95     <p>视频</p>
 96     <video width="320" height="240" controls="controls">
 97         <source src="/static/media/1.mp4" type="video/mp4">
 98         <a href="/static/media/1.mp4">下载该视频</a>
 99     </video>
100     <br/>
101     <li>a</li>
102     <ul>b</ul>
103     <ol>c</ol>
104     <h2 align="left" style="color: #333">title</h2>
105     <h2 align="left" style="color: #ccc">title</h2>
106 
107 
108     <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
109     <script>
110         $(document).ready(function () {
111            $("#sum").click(function () {
112                var a = $('#a').val();
113                var b = $('#b').val();
114 
115                $.get("/add/", {'a':a, 'b':b}, function (ret) {
116                    $("#result").html(ret)
117                })
118            });
119         });
120     </script>
121 
122 
123 </body>
124 </html>