1:the basic use of html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="content-type" charset="UTF-8"> 5 <title>Zita</title> 6 <!-- <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">--> 7 <link rel="icon" href="//www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon"> 8 </head> 9 <body> 10 11 <!--<h1 name="alex">hello world</h1>>--> 12 <!--<h2>hello world</h2>>--> 13 <!--<h3>hello world</h3>>--> 14 <!--<h4>hello world</h4>><h5>hello world</h5>><h6>hello world</h6>>--> 15 <!--hello world hello--> 16 17 <!--<input type="text" readonly>--> 18 <!--<h2>prise</h2>>--> 19 <!--<p>eee</p>--> 20 <!--<p>the beautiful</p>--> 21 <!--<p>such a elegant</p>--> 22 23 <!--<b>such a huge waterfall</b>--> 24 25 <!--<strike>hello</strike>>--> 26 <!--<em>slash</em>>--> 27 <!--3<sub>2</sub>>--> 28 <!--3<sup>2</sup>>--> 29 <!--<hr>--> 30 <h1 style="color: red">hello</h1>> 31 <div style="color: green;background-color: aquamarine;height: 100px; 50%;font-size: 40px;text-align: center"> 32 hello 33 </div> 34 35 <span style="background-color: purple"> hello span </span>> 36 special character:many in the webiste 37 38 block tag   inner-link tag 39 40 3<2 41 too<hello 42 too>hello 43 ©® 44 <!--©®--> 45 46 47 </body> 48 <script> 49 // alert(window.top.document.compatMode) 50 </script> 51 </html>
2:img&& list
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div id="abc"> the top</div> 10 <img id="abcd" src="123.png" alt="jietu" title="jd" width="100px" height="200px"> 11 <a href="http://www.xiaohua.com" target="_blank"><img src="123.png" alt="">beautiful net</a> 12 13 14 order list: 15 <ol> 16 <li>111</li> 17 <li>22</li> 18 <li>33</li> 19 20 </ol> 21 22 unorder list: 23 <ul> 24 <li>111</li> 25 <li>22</li> 26 <li>33</li> 27 </ul> 28 29 <dl> 30 <dt>chapter1</dt> 31 <dd>block1</dd> 32 <dd>block2</dd> 33 34 </dl> 35 36 37 <a href="#abc">return to top</a> 38 </body> 39 </html>
3:form
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <h1>register page</h1> 10 11 <form action="http://127.0.0.1:8080/index" method="get" enctype="multipart/form-data"> 12 13 <p>username<input type="text" name="username" placeholder="姓名" disabled></p> 14 <p>password<input type="password" name="pwd" placeholder="密码" readonly="readonly"></p> 15 <p>hobby: music<input type="checkbox" name="hobby" value="music" checked> movie<input type="checkbox" name="hobby" value="movie"></p> 16 17 <p>gender: male<input type='radio' name="gender" value="men"> female<input type="radio" name="gender" value="woman"></p> 18 19 <p><input type="file" name="put_file"></p> 20 21 22 province 23 <select name="province" multiple size="2"> 24 <optgroup label="chongqing"> 25 <option value="nanchuan" selected>南川</option> 26 <option value="nanchuan">涪陵</option> 27 <option value="nanchuan">大足</option> 28 <option value="nanchuan">武隆</option> 29 30 </optgroup> 31 <!-- <option value="beijing">beijing</option>--> 32 <!-- <option value="chongqing" selected>chongqing</option>--> 33 <!-- <option value="shanghai">shanghai</option>--> 34 <!-- <option value="sichuan">sichuan</option>--> 35 36 </select> 37 resume<textarea name="desc" rows="5" cols="20"></textarea> 38 39 <!-- <lable for="www">姓名</lable>--> 40 <!-- <input id="www" type="text">--> 41 42 43 <p><input type="reset" value="reset"></p> 44 <!--<p><input type="button" value="sent register"></p> --> 45 <p><input type="submit" value="sent register"></p> 46 </form> 47 </body> 48 </html>
4:table
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <table border="1px" cellpadding="10px" cellspacing="5px"> 9 <!-- <thead>--> 10 <!-- <tr>--> 11 <!-- <th>111</th>--> 12 <!-- <th>222</th>--> 13 <!-- <th>333</th>--> 14 <!-- </tr>--> 15 16 <!-- </thead>--> 17 <!-- <tbody>--> 18 <!-- <tr>--> 19 <!-- <td rowspan="2">1111</td>--> 20 <!-- <td>2222</td>--> 21 <!-- <td>3333</td>--> 22 <!-- </tr>--> 23 <!-- <tr>--> 24 <!--<!– <td>1111</td>–>--> 25 <!-- <td>2222</td>--> 26 <!-- <td>3333</td>--> 27 <!-- </tr>--> 28 <!-- <tr>--> 29 <!-- <td>1111</td>--> 30 <!-- <td colspan="2">2222</td>--> 31 <!--<!– <td>3333</td>–>--> 32 <!-- </tr>--> 33 <!-- </tbody>--> 34 <tr> 35 <th>111</th> 36 <th>222</th> 37 <th>333</th> 38 </tr> 39 <tr> 40 <td rowspan="2">1111</td> 41 <td>2222</td> 42 <td>3333</td> 43 </tr> 44 <tr> 45 <!-- <td>1111</td>--> 46 <td>2222</td> 47 <td>3333</td> 48 </tr> 49 <tr> 50 <td>1111</td> 51 <td colspan="2">2222</td> 52 <!-- <td>3333</td>--> 53 </tr> 54 </table> 55 </body> 56 </html>