5.22 HTML 列表標簽和表單標簽

阿新 • • 發佈：2018-05-23

AC 向上 style tin ddl 檢查 login ack 通過

1，ul無序列表標簽

ul：unordered list ，就是無序列表的意思。

li: listitem 列表項的意思。無序列表的每一項都是<li>。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>無序列表</title>
</head>
<body>
<ul style="">
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
</ul>
<ul type=" 
square">
    <li>李四</li>
    <li>流水</li>
    <li>哭的</li>
</ul>
<ul type="">
    <li>無序</li>
    <li>無錫</li>
    <li>無序</li>
    <li>物理</li>
</ul>
</body>
</html>

註意：

li不能單獨存在，必須包裹在ul裏面；反過來說，ul的“兒子”不能是別的東西，只能有li。

我們這裏再次強調，ul的作用，並不是給文字增加小圓點的，而是增加無序列表的“語義”的。

屬性：

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

<ul type="square"><li>內容</li></ul>

列表是可以嵌套的：

<html>
<ul>
    <li><b>北京市</b>
    <ul>
        <li>海澱區</li>
        <li>昌平區</li>
        <li>朝陽區</li>
    </ul>
    </li>
    <li><b>山東省</b>
    <ul>
        <li>濟南市</li>
        <li>青島市</li>
        <li>菏澤市</li>
    </ul>
    </li>
</ul>
</html>

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

2，ol有序列表標簽：

英文單詞：Ordered List。裏面的每一項也是<li>.

屬性：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ol type="I">
    <li>排序</li>
    <li>排序</li>
    <li>排序</li>
    <li>排序</li>
</ol>
<ol type="i">
    <li>世界</li>
    <li>中國</li>
    <li>北京</li>
</ol>
</body>
</html>

3，dl定義列表標簽

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

<dt>：definition title 列表的標題，這個標簽是必須的.
<dd>：definition description 列表的列表項，如果不需要它，可以不加.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl>
    <dt><b>第一條準則 </b></dt>
    <dd>不準睡覺</dd>
    <dd>不準玩手機</dd>
    <dd>不準玩遊戲</dd>


    <dt><b>第二條準則</b></dt>
    <dd>可以學習</dd>
    <dd>可以看電影</dd>
    <dd>可以找女女</dd>

</dl>

</body>
</html>

dt、dd都是容器級標簽，想放什麽都可以。所以，現在就應該更加清晰的知道：用什麽標簽，不是根據樣子來決定，而是語義（語義本質上是結構）。

4，table表格標簽

表格標簽用<table>表示。
一個表格<table>是由每行<tr>組成的，每行是由<td>組成的。

一個表格是由行組成的（行是由列組成的），而不是由行和列組成的。

表格的基本構造

 <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </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/..."：背景圖片。
背景圖片的優先級大於背景顏色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" style="border-collapse:collapse " align="center">
    <caption>人物簡介</caption>
    <thead>
        <tr>
            <td>姓名</td>
            <td>年齡</td>
            <td>愛好</td>
            <td>特長</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>小馬哥</td>
            <td>33</td>
            <td>美女</td>
            <td>jj</td>
        </tr>
    </tfoot>
    <thead>
        <tr>
            <td>梁詠琪</td>
            <td>37</td>
            <td>唱歌</td>
            <td>冒了</td>
        </tr>
    </thead>

</table>
</body>
</html>

View Code

`<tr>`：行

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

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

<html>
<table>
    <tr dir="ltr">
        <td>年齡</td>
        <td>姓名</td>
        <td align="left">愛好</td>
    </tr>
</table>
</html>

`<td>`：單元格

屬性：

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

<html>
<table>
    <tr dir="ltr">
        <td>年齡</td>
        <td>姓名</td>
        <td align="left">愛好</td>
    </tr>
</table>
</html>

單元格的合並

如果要將兩個單元格合並，那肯定就要刪掉一個單元格。
單元格的屬性：

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

`<th>`：加粗的單元格。相當於`<td>` + `<b>`

屬性同<td>標簽

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

<!DOCTYPE html>
<!--<html lang="en">-->
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>人物簡介</caption>

        <tr>
            <th>姓名</th>
            <td>年齡</td>
            <td>愛好</td>
            <td rowspan="4">特長</td>
        </tr>


        <tr>
            <td>小馬哥</td>
            <td>33</td>
            <td>美女</td>

        </tr>

        <tr style="height: 1px">
            <td>梁詠琪</td>
            <td>37</td>
            <td>唱歌</td>
        </tr>
   
</table>
</body>
</html>

5，form表單標簽

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單</title>
</head>
<body>
<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 action="http://www.baidu.com" method="get">
    <input type="button" value="普通按鈕"><br>
    <input  type="submit" value="提交按鈕"><br>
    <input type="reset" value="重置按鈕"><br>
    <input type="image" src="./10.jpg" value="圖片按鈕"><br>
    <input type="file" value="文件選擇框">
</form>
</body>
</html>

View Code

`<select>`：下拉列表標簽

<select>標簽裏面的每一項用<option>表示。select就是“選擇”，option“選項”。

select標簽和ul、ol、dl一樣，都是組標簽。

<select>標簽的屬性：

multiple：可以對下拉列表中的選項進行多選。沒有屬性值。
size="3"：如果屬性值大於1，則列表為滾動視圖。默認屬性值為1，即下拉視圖。

<option>標簽的屬性：

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

<body>
<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>
</body>
</html>

View Code

`<textare>`標簽：多行文本輸入框

text就是“文本”，area就是“區域”。

屬性：

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

<form>
    <textarea name="txtInfo" cols="20" rows="5">老男孩教育</textarea>
</form>

表單的語義化

比如，我們在註冊一個網站的信息的時候，有一部分是必填信息，有一部分是選填信息，這個時候可以利用表單的語義化。

<html>
<form>
    <fieldset>
        <legend>賬號信息</legend>
        姓名:<input value="語言">二筆<br>
        密碼:<input type="password" value="pwd" size="50"><br>
    </fieldset>
    <fieldset>
    <legend>其他信息</leg~多次end>
        性別:<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>
</html>

View Code

`<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>

HTML 中的常用標簽

div p h1 span a img ul ol dl input

5.22 HTML 列表標簽和表單標簽

AC 向上 style tin ddl 檢查 login ack 通過 1，ul無序列表標簽 ul：unordered list ，就是無序列表的意思。 li: listitem 列表項的意思。無序列表的每一項都是<li>。 <!DOCTYPE h

5.22 HTML 列表標簽和表單標簽

1，ul無序列表標簽

2，ol有序列表標簽：

3，dl定義列表標簽

4，table表格標簽

`<tr>`：行

`<td>`：單元格

單元格的合並

`<th>`：加粗的單元格。相當於`<td>` + `<b>`

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

5，form表單標簽

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

`<select>`：下拉列表標簽

`<textare>`標簽：多行文本輸入框

表單的語義化

`<label>`標簽

5.22 HTML 列表標簽和表單標簽

028、HTML 標簽3表單標簽插入組件

HTML常用標簽及表單標簽

【HTML基礎】表格和表單

HTML常用行標籤和表單控制元件

從零開始學習html（五）與瀏覽者交互，表單標簽——下

html表格表單標簽的結合

HTML學習——表單標簽

html表單標簽與表單設計

html的<a>標簽，表單，內嵌框架

SpringMVC from 表單標簽和 input 表單標簽

前端 HTML body標簽相關內容常用標簽表單標簽 form裏面的 lable標簽介紹

前端 HTML body標簽相關內容常用標簽表單標簽 form 表單控件分類

前端 HTML body標簽相關內容常用標簽表單標簽 form裏面的 input標簽介紹

HTML表單標簽

form常用表單標簽

form表單標簽及屬性的介紹

<div>標簽仿<textarea>。contentEditable=‘true’，賦予非表單標簽內容可以編輯

7.5-7.6 列表生成式和生成器以及區別

表單標簽: <form>

5.22 HTML 列表標簽和表單標簽

1，ul無序列表 標簽

2，ol有序列表標簽：

3，dl定義列表標簽

4，table表格標簽

<tr>：行

<td>：單元格

單元格的合並

<th>：加粗的單元格。相當於<td> + <b>

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

5，form表單標簽

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

<select>：下拉列表標簽

<textare>標簽：多行文本輸入框

表單的語義化

<label>標簽

相關推薦

1，ul無序列表標簽

`<tr>`：行

`<td>`：單元格

`<th>`：加粗的單元格。相當於`<td>` + `<b>`

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

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

`<select>`：下拉列表標簽

`<textare>`標簽：多行文本輸入框

`<label>`標簽