前端學習(一) body標籤(下)

今日主要內容：

• 列表標籤 <ul>、<ol>、<dl>

• 表格標籤 <table>

• 表單標籤 <fom>

 

1、列表標籤

列表標籤分爲三種。

一、無序列表<ul>，無序列表中的每一項是<li>

英文單詞解釋以下：

• ul：unordered list，「無序列表」的意思。
• li：list item，「列表項」的意思。

示例：

<ul>
         <li>張三</li>    
         <li>李四</li>    
         <li>王五</li>    
</ul>

效果：

 

注意：

• li不能單獨存在，必須包裹在ul裏面；反過來講，ul的「兒子」不能是別的東西，只能有li。
• 咱們這裏再次強調，ul的做用，並非給文字增長小圓點的，而是增長無序列表的「語義」的。

 

屬性：

• type="屬性值"。屬性值能夠選： disc(實心原點，默認)，square(實心方點)，circle(空心圓)。

效果以下：

 

列表之間是能夠嵌套的。咱們來舉個例子：
代碼：

<ul>
    <li><b>北京市</b>
        <ul>
            <li>海淀區</li>
            <li>朝陽區</li>
            <li>東城區</li>

        </ul>
    </li>

    <li><b>廣州市</b>
        <ul>
            <li>天河區</li>
            <li>越秀區</li>
        </ul>
    </li>
  </ul>

 效果:

聲明：ul的兒子，只能是li。可是li是一個容器級標籤，li裏面什麼都能放。甚至能夠再放一個ul。

 

二、有序列表<OL>，裏面的每一項是<li>

英文單詞：Ordered List。

例如：

<ol>   
       <li>嘿哈</li>
       <li>哼哈</li>
       <li>呵呵</li>
</ol>

效果：

 

屬性：

• type="屬性值"。屬性值能夠是：1(阿拉伯數字，默認)、a、A、i、I。結合start屬性表示從幾開始。

效果：

 

和無序列表同樣，有序列表也是能夠嵌套的，這裏就不舉相似的例子了。

ol和ul就是語義不同，怎麼使用都是同樣的。
ol裏面只能有li，li必須被ol包裹。li是容器級。

ol這個東西用的很少，若是想表達順序，你們通常也用ul。舉例以下：

<ul>
    <li>1. 嘿哈</li>
    <li>2. 哼哈</li>
    <li>3. 呵呵</li>
</ul>

 

三、定義列表<dl>

定義列表的做用很是大。

<dl>英文單詞：definition list，沒有屬性。dl的子元素只能是dt和dd。

• <dt>：definition title 列表的標題，這個標籤是必須的
• <dd>：definition description 列表的列表項，若是不須要它，能夠不加

備註：dt、dd只能在dl裏面；dl裏面只能有dt、dd。

代碼：

<dl>
        <dt>第一條規則</dt>
        <dd>不許睡覺</dd>
        <dd>不許交頭接耳</dd>
        <dd>不許下神</dd>

        <dt>第二條規則</dt>
        <dd>能夠泡妞</dd>
        <dd>能夠找妹子</dd>
        <dd>能夠看mv</dd>
</dl>

效果:

 

上圖能夠看出，定義列表表達的語義是兩層：

• （1）是一個列表，列出了幾個dd項目
• （2）每個詞兒都有本身的描述項。

備註：dd是描述dt的。

定義列表用法很是靈活，能夠一個dt配不少dd：

<dl>
    <dt>北京</dt>
    <dd>國家首都，政治文化中心</dd>
    <dd>污染很嚴重，PM2.0每天暴表</dd>
    <dt>上海</dt>
    <dd>魔都，有外灘、東方明珠塔、黃浦江</dd>
    <dt>廣州</dt>
    <dd>中國南大門，有珠江、小蠻腰</dd>
</dl>

還能夠拆開，讓每個dl裏面只有一個dt和dd，這樣子感受清晰一些：

<dl>
    <dt>北京</dt>
    <dd>國家首都，政治文化中心</dd>
    <dd>污染很嚴重，PM2.0每天報表</dd>
</dl>

<dl>
    <dt>上海</dt>
    <dd>魔都，有外灘、東方明珠塔、黃浦江</dd>
</dl>

<dl>
    <dt>廣州</dt>
    <dd>中國南大門，有珠江、小蠻腰</dd>
</dl>

京東案例（京東首頁最下方）

dt、dd都是容器級標籤，想放什麼均可以。因此，如今就應該更加清晰的知道：用什麼標籤，不是根據樣子來決定，而是語義（語義本質上是結構）。

 

 

2、表格標籤

表格標籤用<table>表示。
一個表格<table>是由每行<tr>組成的，每行是由<td>組成的。
因此咱們要記住，一個表格是由行組成的（行是由列組成的），而不是由行和列組成的。
在之前，要想固定標籤的位置，惟一的方法就是表格。如今能夠經過CSS定位的功能來實現。可是如今在作頁面的時候，表格做用仍是有一些的。

例如，一行的單元格：

<table>
    <tr>
        <td>a11</td>
        <td>a12</td>
        <td>a13</td>
        <td>a14</td>
    </tr>
</table>

上面的表格中沒有加文字，因此在生成的網頁中什麼都看不到。

例如，3行4列的單元格：

<table>
    <tr>
        <td>王乃卉</td>
        <td>19</td>
        <td>女</td>
        <td>中國</td>
    </tr>

    <tr>
        <td>王力宏</td>
        <td>45</td>
        <td>男</td>
        <td>美國</td>
    </tr>

    <tr>
        <td>鄧紫棋</td>
        <td>23</td>
        <td>女</td>
        <td>香港</td>
    </tr>

</table>

效果：

上圖中的表格好像沒看到邊框呀，不急，接下來看看<table>標籤的屬性。

<table>的屬性：

• border：邊框。像素爲單位。
• style="border-collapse:collapse;"：單元格的線和表格的邊框線合併
• width：寬度。像素爲單位。
• height：高度。像素爲單位。
• bordercolor：表格的邊框顏色。
• align：表格的水平對齊方式。屬性值能夠填：left right center。
  注意：這裏不是設置表格裏內容的對齊方式，若是想設置內容的對齊方式，要對單元格標籤<td>進行設置）
• cellpadding：單元格內容到邊的距離，像素爲單位。默認狀況下，文字是緊挨着左邊那條線的，即默認狀況下的值爲0。
  注意不是單元格內容到四條邊的距離哈，而是到一條邊的距離，默認是與左邊那條線的距離。若是設置屬性dir="rtl"，那就指的是內容到右邊那條線的距離。
• cellspacing：單元格和單元格之間的距離（外邊距），像素爲單位。默認狀況下的值爲0
• bgcolor="#99cc66"：表格的背景顏色。
• background="路徑src/..."：背景圖片。
  背景圖片的優先級大於背景顏色。

單元格帶邊框的效果：

備註：表格中很細表格邊線的製做：
CSS的寫法：

style="border-collapse:collapse;"

 

<tr>：行

一個表格就是一行一行組成的嘛。
屬性：

• dir：公有屬性，設置這一行單元格內容的排列方式。能夠取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）
• bgcolor：設置這一行的單元格的背景色。
  注：沒有background屬性，即：沒法設置這一行的背景圖片，若是非要設置，能夠用css實現。
• height：一行的高度
• align="center"：一行的內容水平居中顯示，取值：left、center、right
• valign="center"：一行的內容垂直居中，取值：top、middle、bottom

　

<td>：單元格

屬性：

• align：內容的橫向對齊方式。屬性值能夠填：left right center。
  若是想讓每一個單元格的內容都居中，這個屬性太麻煩了，之後用css來解決。
• valign：內容的縱向對齊方式。屬性值能夠填：top middle bottom
• width：絕對值或者相對值(%)
• height：單元格的高度
• bgcolor：設置這個單元格的背景色。
• background：設置這個單元格的背景圖片。

　

單元格的合併

若是要將兩個單元格合併，那確定就要刪掉一個單元格。
單元格的屬性：

• colspan：橫向合併。例如colspan="2"表示當前單元格在水平方向上要佔據兩個單元格的位置。
• rowspan：縱向合併。例如rowspan="2"表示當前單元格在垂直方向上

效果：（橫向合併）

 

效果舉例：（縱向合併）

 

<th>：加粗的單元格。至關於<td> + <b>

• 屬性同<td>標籤

 

<caption>：表格的標題。使用時和tr標籤並列

效果：

 

表格的<thead>標籤、<tbody>標籤、<tfoot>標籤

這三個標籤有與沒有的區別：

• 一、若是寫了，那麼這三個部分的代碼順序能夠任意，瀏覽器顯示的時候仍是按照thead、tbody、tfoot的順序依次來顯示內容。若是不寫thead、tbody、tfoot，那麼瀏覽器解析並顯示錶格內容的時候是從按照代碼的從上到下的順序來顯示。
• 二、當表格很是大內容很是多的時候，若是用thead、tbody、tfoot標籤的話，那麼數據能夠邊獲取邊顯示。若是不寫，則必須等表格的內容所有從服務器獲取完成才能顯示出來。

例子：

<table border="1">
    <caption>人物介紹</caption>

    <tbody>
        <tr>
            <td>小馬哥</td>
            <th>18</th>
            <td>男</td>
            <td rowspan="3">中國</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>小嶽嶽</td>
            <td>45</td>
            <td>男</td>
        </tr>
    </tfoot>

    <thead>
        <tr>
            <td>鄧紫棋</td>
            <td>23</td>
            <td>女</td>
        </tr>
    </thead>

</table>

效果:

 

3、表單標籤

表單標籤用<form>表示，用於與服務器的交互。表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。

屬性：

• name：表單的名稱，用於JS來操做或控制表單時使用；
• id：表單的名稱，用於JS來操做或控制表單時使用；
• action：指定表單數據的處理程序，通常是PHP，如：action=「login.php」
• method：表單數據的提交方式，通常取值：get(默認)和post

form標籤裏面的action屬性和method屬性，在後面課程給你們講解。稍微說一下：action屬性就是表示，表單將提交到哪裏。 method屬性表示用什麼HTTP方法提交，有get、post兩種。 

get提交和post提交的區別：
GET方式：
將表單數據，以"name=value"形式追加到action指定的處理程序的後面，二者間用"?"隔開，每個表單的"name=value"間用"&"號隔開。
特色：只適合提交少許信息，而且不太安全(不要提交敏感數據)、提交的數據類型只限於ASCII字符。

POST方式：
將表單數據直接發送(隱藏)到action指定的處理程序。POST發送的數據不可見。Action指定的處理程序能夠獲取到表單數據。
特色：能夠提交海量信息，相對來講安全一些，提交的數據格式是多樣的(Word、Excel、rar、img)。

Enctype：
表單數據的編碼方式(加密方式)，取值能夠是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

• Application/x-www-form-urlencoded：默認加密方式，除了上傳文件以外的數據均可以
• Multipart/form-data：上傳附件時，必須使用這種編碼方式。

　　　　

<input>：輸入標籤（文本框）

用於接收用戶輸入。

<input type="text" />

屬性：

• type="屬性值"：文本類型。屬性值能夠是：
  • text（默認）
  • password：密碼類型
  • radio：單選按鈕，名字相同的按鈕做爲一組進行單選（單選按鈕，天生是不能互斥的，若是想互斥，必需要有相同的name屬性。name就是「名字」。
    ）。很是像之前的收音機，按下去一個按鈕，其餘的就擡起來了。因此叫作radio。
  • checkbox：多選按鈕，名字相同的按鈕做爲一組進行選擇。
  • checked：將單選按鈕或多選按鈕默認處於選中狀態。當<input>標籤的type="radio"時，能夠用這個屬性。屬性值也是checked，能夠省略。
  • hidden：隱藏框，在表單中包含不但願用戶看見的信息
  • button：普通按鈕，結合js代碼進行使用。
  • submit：提交按鈕，傳送當前表單的數據給服務器或其餘程序處理。這個按鈕不須要寫value自動就會有「提交」文字。這個按鈕真的有提交功能。點擊按鈕後，這個表單就會被提交到form標籤的action屬性中指定的那個頁面中去。
  • reset：重置按鈕，清空當前表單的內容，並設置爲最初的默認值
  • image：圖片按鈕，和提交按鈕的功能徹底一致，只不過圖片按鈕能夠顯示圖片。
  • file：文件選擇框。
    提示：若是要限制上傳文件的類型，須要配合JS來實現驗證。對上傳文件的安全檢查：一是擴展名的檢查，二是文件數據內容的檢查。
• value="內容"：文本框裏的默認內容（已經被填好了的）
• size="50"：表示文本框內能夠顯示五十個字符。一個英文或一箇中文都算一個字符。
  注意size屬性值的單位不是像素哦。
• readonly：文本框只讀，不能編輯。由於它的屬性值也是readonly，因此屬性值能夠不寫。
  用了這個屬性以後，在google瀏覽器中，光標點不進去；在IE瀏覽器中，光標能夠點進去，可是文字不能編輯。
• disabled：文本框只讀，不能編輯，光標點不進去。屬性值能夠不寫。

例子：

<form>
    姓名：<input value="呵呵" >逗比<br>
    暱稱：<input value="哈哈" readonly=""><br>
    名字：<input type="text" value="name" disabled=""><br>
    密碼：<input type="password" value="pwd" size="50"><br>
    性別：<input type="radio" name="gender" value="male" checked="">男
          <input type="radio" name="gender" value="female" >女<br>
    愛好：<input type="checkbox" name="love" value="eat">吃飯
          <input type="checkbox" name="love" value="sleep">睡覺
          <input type="checkbox" name="love" value="bat">打豆豆
</form>

效果：

 

 四種按鈕的舉例：

<form>
    <input type="button" value="普通按鈕"><br>
    <input type="submit"  value="提交按鈕"><br>
    <input type="reset" value="重置按鈕"><br>
    <input type="image" src="images/bojie.jpeg" width="400" value="圖片按鈕2"><br>
    <input type="file" value="文件選擇框">
</form>

 

<select>：下拉列表標籤

<select>標籤裏面的每一項用<option>表示。select就是「選擇」，option「選項」。

select標籤和ul、ol、dl同樣，都是組標籤。

<select>標籤的屬性：

• multiple：能夠對下拉列表中的選項進行多選。沒有屬性值。
• size="3"：若是屬性值大於1，則列表爲滾動視圖。默認屬性值爲1，即下拉視圖。

<option>標籤的屬性：

• selected：預選中。沒有屬性值。

例子：

<form>
    <select>
        <option>小學</option>
        <option>初中</option>
        <option>高中</option>
        <option>大學</option>
        <option selected="">研究生</option>
    </select>
    <br><br><br>

    <select size="3">
        <option>小學</option>
        <option>初中</option>
        <option>高中</option>
        <option>大學</option>
        <option>研究生</option>
    </select>
    <br><br><br>

    <select multiple="">
        <option>小學</option>
        <option>初中</option>
        <option selected="">高中</option>
        <option selected="">大學</option>
        <option>研究生</option>
    </select>
    <br><br><br>

</form>

舉例說明

效果:

 

<textarea>標籤：多行文本輸入框

text就是「文本」，area就是「區域」。

屬性：

• value：提交給服務器的值。
• rows="4"：指定文本區域的行數。
• cols="20"：指定文本區域的列數。
• readonly：只讀。

<form>
        <textarea name="txtInfo" rows="4" cols="20">路飛學城</textarea>
</form>

效果：

 

表單的語義化

好比，咱們在註冊一個網站的信息的時候，有一部分是必填信息，有一部分是選填信息，這個時候能夠利用表單的語義化。

  <form>

        <fieldset>
        <legend>帳號信息</legend>
        姓名：<input value="呵呵" >逗比<br>
        密碼：<input type="password" value="pwd" size="50"><br>
        </fieldset>

        <fieldset>
        <legend>其餘信息</legend>
        性別：<input type="radio" name="gender" value="male" checked="">男 
              <input type="radio" name="gender" value="female" >女<br>
        愛好：<input type="checkbox" name="love" value="eat">吃飯
              <input type="checkbox" name="love" value="sleep">睡覺
              <input type="checkbox" name="love" value="bat">打豆豆
        </fieldset>

    </form>

表單語義化

效果：

 

<label>標籤

咱們先來看下面一段代碼：

<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

對於上面這樣的單選框，咱們只有點擊那個單選框（小圓圈）才能夠選中，點擊「男」、「女」這兩個文字時是沒法選中的；因而，label標籤派上了用場。

本質上來說，「男」、「女」這兩個文字和input標籤時沒有關係的，而label就是解決這個問題的。咱們能夠經過label把input和漢字包裹起來做爲總體。

解決方法以下：

<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

上方代碼中，input元素要有一個id，而後label標籤有一個for屬性，和id相同，那麼這個label和input就有綁定關係了。

固然了，複選框也有label：（任何表單元素都有label）

<input type="checkbox" id="kk" />
<label for="kk">10天內免登錄</label>

 

 

總結一下, 標準的div+css佈局，咱們經常使用的的標籤以下：

div  p  h1  span   a   img   ul   ol    dl    input