HTML 标签

 

 

1. 段落

  • 占整行

p 段落之间有间距

br，换行，但是还在这个段落里面，没有间距（<br />）

h 一般用于标题 h1,h2,h3,h4,h5,h6 大小 h1最大h6最小

div  仅仅占一行

2. 内容

span 不分段，只是分行，只占自己的位置 （对个div是多行，多个span都在一行里面）

3. 输入

input  (get 会把内容放在url中）

1 <form action="http://localhost:1234/index" method="get">
2     <input type="text"  name="user"/>
3     <input type="password" name="pwd"/>
4     <input type="button" value="login"/>
5     <input type="submit" value="submit"/>
6 </form>
1 <form action="http://localhost:1234/index" method="post">

2     <input type="text"  name="user"/>
3     <input type="password" name="pwd"/>
4     <input type="button" value="login"/>
5     <input type="submit" value="submit"/>
6 </form>

百度搜索

1 <!--去百度搜索-->
2 <form action="https://www.baidu.com/s">
3     <input type="text" name="wd" value="cloud"/>
4     <input type="submit" value="search"/>
5 </form>

 

<form enctype="multipart/form-data">
    <div>
        <p>select gender</p>
        <!--radio 圆的选择框, 加上相同的name后只能单选,checked 默认被选中 -->
        male: <input type="radio" name="gender" value="male" checked="checked"/>
        female: <input type="radio" name="gender" value="female"/>
        <p>hobby</p>
        <!--checkbox 方的选择框，可以多选-->
        football: <input type="checkbox" name= hobby value="football" checked="checked"/>
        basketball: <input type="checkbox" name= hobby value="basketball" checked="checked"/>
        ping-pong: <input type="checkbox" name= hobby value="ping-pong"/>
        <input type="submit" value="submit" name="gender"/>
        <p>upload file</p>
        <!--上传文件 relay on enctype-->
        <input type="file" name="file"/>
        <input type="text" name="user" />
    </div>
    <!--reset-->
    <input type="reset" value="reset" />
    <input type="submit" value="submit" />
</form>

　　

多行文本输入

<form>
    <div>
        <!--把default值放在中间-->
        <textarea name="meno">asdsada</textarea>
    </div>
    <input type="submit" value="submit" />
</form>

 

label,点击label也可以输入

1 <fieldset>
2     <legend>login</legend>
3         <label for="username">username:</label>
4         <input id='username' type="text" name="username" />
5         <br />
6         <label for="passwd">password:</label>
7         <input id='passwd' type="text" name="passwd" />
8 </fieldset>
View Code

 

下拉框 select,optgroup

 1 <form>
 2     <!--下拉框 size框的大小，默认为1，只显示一个 加上multiple可以多选-->
 3     <p>select your city</p>
 4     <select name="city" size="5" multiple="multiple">
 5         <option value="Peking">Peking</option>
 6         <option value="QD" selected="selected">QD</option>
 7         <option value="Shanghai">Shanghai</option>
 8     </select>
 9     <br />
10     <p>select your city from province</p>
11     <select name="optgroup" size="5">
12         <!--optgroup中的不能选中，只有option里面的可以选中-->
13         <optgroup label="Shandong Province">
14             <option value="QD">QD</option>
15             <option value="Jinan">Jinan</option>
16         </optgroup>
17         <optgroup label="Heilongjiang Province">
18             <option value="Harbin">Harbin</option>
19             <option value="Mudanjiang">Mudanjiang</option>
20         </optgroup>
21     </select>
22     <input type="reset" value="reset" />
23     <input type="submit" value="submit" />
24 </form>

 4 图片 img

ie 会默认加边框，最好把border设置为0

1 <body>
2 <!--点击图片跳转-->
3 <a href="https://www.baidu.com">
4     <!--alt 图片失效显示的文件，title为鼠标悬浮时显示的-->
5     <img src="1.jpg" style="height: 200px; width: 200px" alt="car" title="car"/>
6 </a>
7 </body>

 

5 列表 ul,ol,dl

 1 <body>
 2 <!--列表 点为开头-->
 3 <ul>
 4     <li>aaa</li>
 5     <li>aaa</li>
 6     <li>aaa</li>
 7     <li>aaa</li>
 8 </ul>
 9 <!--列表 数字为开头-->
10 <ol>
11     <li>aaa</li>
12     <li>aaa</li>
13     <li>aaa</li>
14     <li>aaa</li>
15 </ol>
16 <!--列表 标题和分层-->
17 <dl>
18     <dt>aaa</dt>
19     <dd>bbb</dd>
20     <dd>bbb</dd>
21     <dt>aaa</dt>
22     <dd>bbb</dd>
23     <dd>bbb</dd>
24 </dl>
25 </body>

 

6.表格 table

 1 <body>
 2 <table border="1">
 3     <!--行-->
 4     <tr>
 5         <!--列-->
 6         <td>11</td>
 7         <!--表格中的跳转， 也可以加多个跳转-->
 8         <td>
 9             <a href="https://www.baidu.com">12</a>
10             <a href="https://www.baidu.com">12</a>
11         </td>
12         <td>13</td>
13     </tr>
14     <tr>
15         <td>21</td>
16         <td>22</td>
17         <td>23</td>
18     </tr>
19 </table>
20 </body>

thead,tbody 以及合并单元格

 1 <table border="1">
 2     <!--header-->
 3     <thead>
 4         <!--行-->
 5         <tr>
 6             <!--列-->
 7             <th>header1</th>
 8             <th>header2</th>
 9             <th>header3</th>
10             <th>header4</th>
11         </tr>
12     </thead>
13     <!--body-->
14     <tbody>
15         <tr>
16             <td>11</td>
17             <td>12</td>
18             <td>13</td>
19             <td>14</td>
20         </tr>
21         <tr>
22             <td>21</td>
23             <!--占2列，去掉右面的-->
24             <td colspan="2">22</td>
25             <td>23</td>
26             <!--<td>24</td>-->
27         </tr>
28         <tr>
29             <!--占2行，去掉下面的-->
30             <td rowspan="2">31</td>
31             <td>32</td>
32             <td>33</td>
33             <td>34</td>
34         </tr>
35         <tr>
36             <!--<td>41</td>-->
37             <td>42</td>
38             <td>43</td>
39             <td>44</td>
40         </tr>
41         <tr>
42             <td>51</td>
43             <td>52</td>
44             <td>53</td>
45             <td>54</td>
46         </tr>
47     </tbody>
48 </table>

 

posted @ 2017-11-23 16:49  Demoncloud  阅读(248)  评论(0)  编辑  收藏  举报