HTML 标签

2018-06-24 02:01:57来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 

 

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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:教你五步制作精美的HTML时钟

下一篇:html制作简单框架网页二 实现自己的影音驿站 操作步骤及源文件下