10-1 body標籤裏面相關的標籤（列表，表單，表格）

時間 2019-11-29

標籤 body 標籤裏面相關列表表單表格欄目 HTML 简体版

原文原文鏈接

一列表標籤<ul>,<ol>,<dl>php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表標籤</title>
</head>
<body>
<!--ul無序列表-->
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>香港</li>
</ul>
<!--有序列表-->
<ol type="a">
    <li>你</li>
    <li>好</li>
    <li>嗎</li>
</ol>
<!--定義列表-->
<!--dt、dd只能在dl裏面；dl裏面只能有dt、dd-->
<dl>
    <dt>第一條規則</dt>
    <dd>不許睡覺</dd>
    <dd>不許吃飯</dd>
    <dd>不許走神</dd>

</dl>
<dl>
        <dt>北京</dt>
        <dd>國家首都，政治文化中心</dd>
        <dd>污染很嚴重，有故宮，長城</dd>
    </dl>

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

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

二表格標籤<table>html

!--表格標籤用<table>表示。-->

瀏覽器

（1）<table>的屬性：安全

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

例子：ide

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表格標籤</title>
 6 </head>
 7 <body>
 8 <!--border邊框-->
 9  <!--style="border-collapse:collapse細邊框-->
10 <table border="1" style="border-collapse:collapse;">
11     <caption>人物介紹</caption>
12     <tbody>
13     <tr>
14         <td>孫悟空</td>
15         <td>500</td>
16         <td>男</td>
17         <td rowspan="3">中國</td>
18     </tr>
19     </tbody>
20     <tfoot>
21     <tr>
22         <td>小月月</td>
23         <td>45</td>
24         <td>男</td>
25 
26     </tr>
27     </tfoot>
28     <thead>
29     <tr>
30         <td>鄧紫棋</td>
31         <td>23</td>
32         <td>女</td>
33 
34     </tr>
35     </thead>
36 </table>
37 
38 
39 </body>
40 </html>
41 © 2018 GitHub, Inc.

View Code

（2）表格的<thead>標籤、<tbody>標籤、<tfoot>標籤post

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

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

三表單標籤<form>spa

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

屬性：

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

1， input 輸入標籤

屬性：

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：文本框只讀，不能編輯，光標點不進去。屬性值能夠不寫。

例子：

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

2 ，按鈕標籤

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

3 下拉標籤<select>

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

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

<select>標籤的屬性：

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

<option>標籤的屬性：

selected：預選中。沒有屬性值

例子：

<form>
<!--下拉標籤-->
    <!--selected：預選中。沒有屬性值。-->

    <select>
        <option value="a">小學</option>
        <option value="">初中</option>
        <option value="">高中</option>
        <option value="">大學</option>
        <option selected="">研究生</option>
    </select><br>
    <!--若是屬性值大於1，則列表爲滾動視圖。默認屬性值爲1，即下拉視圖-->
    <select size="3">
         <option>小學</option>
            <option>初中</option>
            <option>高中</option>
            <option>大學</option>
            <option>研究生</option>

    </select><br>
    <!--multiple：能夠對下拉列表中的選項進行多選。沒有屬性值。-->
    <select multiple="">
        <option>小學</option>
            <option>初中</option>
            <option selected="">高中</option>
            <option selected="">大學</option>
            <option>研究生</option>
    </select>
</form>

4 lable標籤

1 <input type="radio" name="sex" /> 男
2 <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就有綁定關係了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。