1. 程式人生 > >html中常見標簽的使用

html中常見標簽的使用

code sub checkbox 圖片 pass cli 藍色 add 樣式

1 <p>段落文本</p>
2 
3 <hx>標題文本</hx>           //x為1-6  從1到6字體逐漸增大
4 
5 <em>需要強調的文本</em>     // 斜體
6 
7 <strong>需要強調的文本</strong> //加粗

 1 <style>
 2 
 3 span{
 4 
 5     color:blue;   //藍色
 6 
 7 }
 8 
 9 </style>           
10 
11 <span>文本</
span> //設置單獨的樣式

 1 <q>引用文本</q>                                   //短文本的引用
 2 
 3 <blockquote>引用文本</blockquote>                 //長文本的引用(縮進)
 4 
 5 <br>                                             //回車   空標簽只有一個開始標簽,沒有結束標簽。
 6 
 7 &nbsp;                                           //空格
8 9 <hr /> //水平橫線 10 11 <address>XX大街XX號</address> //斜體 12 13 <code>代碼語言</code> //變小 14 15 <pre>語言代碼段</pre> //長代碼 16

 1 <ul>
 2 
 3   <li>信息</li>
4 5 <li>信息</li> //信息列表,前面加一個點 · 6 7 ...... 8 9 </ul> 10 11 <ol> 12 13 <li>信息</li> 14 15 <li>信息</li> //信息列表,前面加數字序列 16 17 ...... 18 19 </ol>

1 <div></div>     //一個html頁面可以看成一個家,而一個div你們可以看<div  id="版塊名稱"></div>    成家的每個小房間

 1 table、tbody、tr、th、td            //表格
 2 
 3 
 4 
 5 
 6 
 7 <style type="text/css">
 8 
 9 table tr td,th{border:1px solid #000;}                       //為th,td單元格添加粗細為一個像素的黑色邊框。
10 
11 </style> 
12 
13 
14 
15 <table summary="本表格記錄2012年到2013年庫存記錄,記錄包括U盤和耳機庫存量">       //表格簡介
16 <caption>2012年到2013年庫存記錄</caption>              //表格標題
17 
18 <tr> 
19 <th>產品名稱 </th>
20 <th>品牌 </th>
21 <th>庫存量(個) </th>
22 <th>入庫時間 </th>
23 </tr>
24 <tr>
25 <td>耳機 </td>
26 <td>聯想 </td>
27 <td>500</td>
28 <td>2013-1-2</td>
29 </tr>
30 <tr>
31 <td>U盤 </td>
32 <td>金士頓 </td>
33 <td>120</td>
34 <td>2013-8-10</td>
35 </tr>
36 <tr>
37 <td>U盤 </td>
38 <td>愛國者 </td>
39 <td>133</td>
40 <td>2013-3-25</td>
41 </tr>
42 </table>

效果圖:

技術分享圖片

1 <a href="目標網址" target="_blank">click here!</a>  //在瀏覽器新的頁面裏打開
2 
3 <a href=mailto:郵箱地址 ? cc=抄送地址  & 密件抄送地址 & subject=無主題 & body=無內容>

1 <img src = "myimage.gif" alt = "My Image" title = "My Image" />

1 Form表單
2 
3 <form>
4    <input type="text/password" name="名稱" value="文本" />
5 </form>

1 <input   type="radio/checkbox"   value="值"    name="名稱"   checked="checked"/>        //文本框輸入
2 
3 <textarea  rows="行數" cols="列數">文本</textarea>         //文本域,支持多行文本輸入

 1     <label>愛好:</label>
 2     <select>
 3       <option value="看書">看書</option>
 4       <option selected="selected" value="旅遊">旅遊</option>
 5       <option value="運動">運動</option>
 6    
 7    <option value="購物">購物</option>
 8     </select>
 9  
10 
11     <select multiple="multiple">
12       <option value="看書">看書</option>   //直接打開
13       <option value="旅遊">旅遊</option>
14       <option value="運動">運動</option>
15       <option value="購物">購物</option>
16     </select>
17  
18 
19     <input type="reset" value="確定"  />
20     <input type="reset" value="重置"  />
  同一組的單選按鈕,name 取值一定要一致,比如上面例子為同一個名稱“radioLove”,這樣同一組的單選按鈕才可以起到單選的作用。











html中常見標簽的使用