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;width: 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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp inner-link tag
39 
40 3<2
41 too&lt;hello
42 too&gt;hello
43 &copy;&reg;
44 <!--©®-->
45 
46 
47 </body>
48 <script>
49     // alert(window.top.document.compatMode)
50 </script>
51 </html>
the basic use of 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>
img and list

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>
form

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 <!--&lt;!&ndash;            <td>1111</td>&ndash;&gt;-->
25 <!--            <td>2222</td>-->
26 <!--            <td>3333</td>-->
27 <!--        </tr>-->
28 <!--             <tr>-->
29 <!--            <td>1111</td>-->
30 <!--            <td colspan="2">2222</td>-->
31 <!--&lt;!&ndash;            <td>3333</td>&ndash;&gt;-->
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>
table