【前端】html5速成

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <script src="jquery.min.js"></script>
 9     <style>
10 
11     </style> 
12 </head>
13 <body>
14     <!-- paragraph -->
15     <h1>Heading One</h1>
16     <p>Lorem ipsum dolor <b>sit amet consectetur</b>, adipisicing elit. Obcaecati minima sit nihil sint ea molestiae unde odio culpa, error ipsum vitae hic incidunt velit autem tempora necessitatibus repellat voluptatum a.</p>
17     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores vel ut modi, vero repellat reprehenderit laboriosam sint, magni similique iure! Hic esse sequi beatae cumque, quia aut! Dolores, placeat?</p>
18     <a href="https:www.baidu.com" target="_blank">axaxa</a>
19 
20     <!-- list -->
21     <ul>
22         <li>List Item 1</li>
23         <li>List Item 2</li>
24     </ul>
25     <ol>
26         <li>List Item 1</li>
27         <li>List Item 2</li>
28     </ol> 
29     
30     <!-- table：tr是让文字加粗,td左对齐-->
31     <table>
32         <thead>
33             <tr>
34                 <th>First Name</th>
35                 <th>Last Name</th>
36                 <th>Age</th>
37                 <th>Email</th>
38             </tr>
39         </thead>
40         <tbody>
41             <tr>
42                 <td>马雨凡</td>
43                 <td>Ma</td>
44                 <td>21</td>
45                 <td>aca</td>
46             </tr>
47         </tbody>
48     </table>
49 
50     <br>
51     <hr>
52 
53     <!-- Forms -->
54     <form>
55         <div>
56             <label>First Name</label>
57             <input type="text" name="firstname" placeholder="Enter First Name">
58         </div>
59         <input type="submit" name="submit" value="Submit">
60     </form>
61     <br>
62     <button>This is a button</button>
63     
64     <!-- image -->
65     <img style="20vw" src="https://img1.baidu.com/it/u=806057951,2771369313&fm=26&fmt=auto" alt="This is img">
66 
67     <!-- quotation -->
68     <blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus velit natus impedit labore placeat aliquid magnam nisi repudiandae. Maiores, id odit? Id praesentium animi aperiam temporibus sequi! Dolorem, veniam ipsam?</blockquote>
69 
70     <p><abbr title="Massachusetts Insititute of Technology">MIT</abbr> is the best university</p>
71 
72     <p><cite>Mit is a good college</cite>by Yi Zheng</p>
73     <div style="margin-top:100px"></div>
74 </body>
75 
76 </html>