HTML_body標籤

經常使用符號：空格：&nbsp 　　大於號：&gt 　　小於號： &lt 

塊級標籤：H標籤(加大加粗)，P標籤(段落間有間距)，DIV(白板)

行內標籤：SPAN標籤(白板)

 1 <!--標題標籤-->
 2 <h1>h1標籤</h1>
 3 <h2>h2標籤</h2>
 4 <h3>h3標籤</h3>
 5 <h4>h4標籤</h4>
 6 <h5>h5標籤</h5>
 7 <h6>h6標籤</h6>
 8 <!--白板標籤：沒有任何css樣式-->
 9 <!--內聯標籤真白板標籤：有多大佔多大-->
10 <span>這是span標籤</span>
11 <span>這是span標籤</span>
12 
13 <!--div標籤：塊級僞白板標籤：不管多大佔一行-->
14 <div>這是div標籤</div>
15 <!--段落標籤p：實現字與字之間的換行-->
16 <!--換行標籤br：實現換行-->

 

 

 1 <!--input標籤：輸入框-->
 2 
 3 <!--name和value，是向後臺以{key:value}向後臺傳遞數據，name的值爲key，value的值爲value;-->
 4 <input type="text" name="username" value="" placeholder="請輸入用戶名">
 5 
 6 <!--密碼框 type="password"-->
 7 <input type="password" name="passwd">
 8 
 9 <!--多選框 type="checkbox"，checked 默認勾選-->
10 <input type="checkbox" name="" checked="checked">
11 
12 <!--單選框 type="radio"，name必須相同纔會互斥，實現單選-->
13 <div>
14     <span>男</span><input type="radio" name="sex">
15 </div>
16 <div>
17     <span>女</span><input type="radio" name="sex">
18 </div>
19 
20 
21 <!--form表單標籤，表單提交會刷新頁面，ajax不會刷新頁面-->
22 <!--action請求路徑，method請求方式-->
23 <form action="s.html" method="post">
24     <input type="text" value="uuytr">
25     <!--沒有任何外加操做-->
26     <input type="button" value="增長">
27     <!--submit與form表單連用，會提交form表單中的數據-->
28     <input type="submit" value="提交">
29     <!--必須與from表單連用纔能有重置的功能-->
30     <input type="reset">
31 </form>
32 
33 
34 
35 <!--label標籤與input連用，經過for屬性 映射到input的id屬性，這樣點擊用戶名，就能夠獲取輸入框的焦點-->
36 <label for="i1">用戶名：</label>
37 <!--id屬性是選擇器-->
38 <input id="i1" placeholder="請輸入用戶名" name="username" type="text">

 

 

 1 <!--多行文本-->
 2 <textarea name="content">這是textarea的內容</textarea>
 3 
 4 
 5 <!--select 下拉框標籤，在option上增長 selected 爲默認選擇-->
 6 <!--要實現按住ctrl 能夠多選的效果，須要使用multiple-->
 7 <select name="city" size="1" multiple="multiple">
 8     <option value="1">黑龍江</option>
 9     selected="selected" 默認選中第二個
10     <option value="2" selected="selected">河北</option>
11     <option value="3">河南</option>
12 </select>
13 
14 
15 <!--選黑龍江後，再選第二級-->
16 <select size="7" multiple="multiple">
17     <optgroup label="黑龍江">
18         <option>牡丹江</option>
19         <option>哈爾濱</option>
20         <option>雞西</option>
21     </optgroup>
22     <optgroup label="河北">
23         <option>石家莊</option>
24         <option>保定</option>
25         <option>淶水</option>
26     </optgroup>
27 </select>

 

 

1 <!--a標籤：超連接-->
2 <a href="https://www.baidu.com/" target="_blank" style="text-decoration:none">百度一下</a>
3 
4 <!--image標籤：-->
5 <!--alt屬性：當圖片加載失敗時所展現的文案-->
6 <img src="logo.jpg" alt="這是logo" title="logo">

 

 

 1 <!--列表標籤-->
 2 <ul>
 3     <li>用例名稱</li>
 4     <li>用例方法</li>
 5     <li>返回參數</li>
 6 </ul>
 7 
 8 <!--數字列表-->
 9 <ol>
10     <li>用例名稱</li>
11     <li>用例方法</li>
12     <li>返回參數</li>
13 </ol>
14 
15 <!--分層列表-->
16 <dl>
17     <dt>黑龍江</dt>
18     <dd>牡丹江</dd>
19 </dl>
20 <dl>
21     <dt>河北</dt>
22     <dd>保定</dd>
23 </dl>

 

 

 1 <!--表格標籤-->
 2 <!--thead：表頭 th：表頭行 tbody：內容 tr：行 td：列 boder：表格的邊框
 3 coslpan：td佔幾列 rowspan：tr佔幾列-->
 4 <table border="1">
 5     <thead>
 6         <tr>
 7             <th>id</th>
 8             <th>caseName</th>
 9             <th>method</th>
10             <th colspan="2">操做</th>  <!--列合併-->
11         </tr>
12     </thead>
13     <tbody>
14         <tr>
15             <td>1</td>
16             <td rowspan="3">抽獎</td>  <!--行合併-->
17             <td rowspan="3">post</td>
18             <td>編輯</td>
19             <td>刪除</td>
20         </tr>
21         <tr>
22             <td>2</td>
23             <td>編輯</td>
24             <td>刪除</td>
25         </tr>
26         <tr>
27             <td>3</td>
28             <td>編輯</td>
29             <td>刪除</td>
30         </tr>
31     </tbody>
32 </table>