資訊專欄INFORMATION COLUMN
摘要：一列表標(biāo)簽列表標(biāo)簽分為三種。二表格標(biāo)簽表格標(biāo)簽用表示。單元格和單元格之間的距離外邊距，像素為單位。例如表示當(dāng)前單元格在水平方向上要占據(jù)兩個單元格的位置。輸入標(biāo)簽文本框輸入標(biāo)簽文本框用于接收用戶輸入。
列表標(biāo)簽分為三種。
英文單詞解釋如下：
a.ul：unordered list，“無序列表”的意思。
b.li：list item，“列表項”的意思。
示例：
| 1 2 3 4 5 |
?????????/li>???
?????????/li>???
?????????/li>???
</ul>
|
效果：
注意：
a.li不能多帶帶存在，必須包裹在ul里面；反過來說，ul的“兒子”不能是別的東西，只能有l(wèi)i。
b.我們這里再次強(qiáng)調(diào)，ul的作用，并不是給文字增加小圓點(diǎn)的，而是增加無序列表的“語義”的。
屬性：
1.type="屬性值"。屬性值可以選：?disc(實心原點(diǎn)，默認(rèn))，square(實心方點(diǎn))，circle(空心圓)。
效果如下：
?
列表之間是可以嵌套的。我們來舉個例子：
代碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
???/b>
??????????????????/li>
???????????/li>
???????????/li>
?
???????</ul>
???</li>
?
???/b>
??????????????????/li>
???????????/li>
???????</ul>
???</li>
?</ul>
|
效果:
?
聲明：ul的兒子，只能是li。但是li是一個容器級標(biāo)簽，li里面什么都能放。甚至可以再放一個ul。
英文單詞：Ordered List。
例如：
| 1 2 3 4 5 |
????????/li>
???????/li>
????????/li>
</ol>
|
效果：
屬性：
1.type="屬性值"。屬性值可以是：1(阿拉伯?dāng)?shù)字，默認(rèn))、a、A、i、I。結(jié)合start屬性表示從幾開始。
效果：
和無序列表一樣，有序列表也是可以嵌套的哦，這里就不舉類似的例子了。
ol和ul就是語義不一樣，怎么使用都是一樣的。
ol里面只能有l(wèi)i，li必須被ol包裹。li是容器級。
ol這個東西用的不多，如果想表達(dá)順序，大家一般也用ul。舉例如下：
| 1 2 3 4 5 |
????1.?嘿哈</li>
????2.?哼哈</li>
????3.?呵呵</li>
</ul>
|
3、定義列表
英文單詞：definition list，沒有屬性。dl的子元素只能是dt和dd。
a.：definition title 列表的標(biāo)題，這個標(biāo)簽是必須的
b.：definition description 列表的列表項，如果不需要它，可以不加
備注：dt、dd只能在dl里面；dl里面只能有dt、dd。
代碼：
| 1 2 3 4 5 6 7 8 9 10 11 |
????????/dt>
????????/dd>
????????/dd>
????????/dd>
?
????????/dt>
????????/dd>
????????/dd>
????????/dd>
</dl>
|
效果：
?
上圖可以看出，定義列表表達(dá)的語義是兩層：
（1）是一個列表，列出了幾個dd項目
?。?）每一個詞兒都有自己的描述項。
備注：dd是描述dt的。
定義列表用法非常靈活，可以一個dt配很多dd：
| 1 2 3 4 5 6 7 8 9 |
???????/dt>
???????/dd>
???????0天天報表</dd>
???????/dt>
???????/dd>
???????/dt>
???????/dd>
</dl>
|
還可以拆開，讓每一個dl里面只有一個dt和dd，這樣子感覺清晰一些：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
????/dt>
????/dd>
????0天天報表</dd>
</dl>
?
????/dt>
????/dd>
</dl>
?
????/dt>
????/dd>
</dl>
|
京東案例（京東首頁最下方）
dt、dd都是容器級標(biāo)簽，想放什么都可以。所以，現(xiàn)在就應(yīng)該更加清晰的知道：用什么標(biāo)簽，不是根據(jù)樣子來決定，而是語義（語義本質(zhì)上是結(jié)構(gòu)）。
表格標(biāo)簽用 例如，一行的單元格： 上面的表格中沒有加文字，所以在生成的網(wǎng)頁中什么都看不到。 例如，3行4列的單元格： 效果： 上圖中的表格好像沒看到邊框呀，不急，接下來看看 單元格帶邊框的效果： 備注：表格中很細(xì)表格邊線的制作： 一個表格就是一行一行組成的嘛。 ? 屬性： ? 如果要將兩個單元格合并，那肯定就要刪掉一個單元格。 效果：（橫向合并） 效果舉例：（縱向合并） a.屬性同 ? 效果： 這三個標(biāo)簽有與沒有的區(qū)別： 1、如果寫了，那么這三個部分的代碼順序可以任意，瀏覽器顯示的時候還是按照thead、tbody、tfoot的順序依次來顯示內(nèi)容。如果不寫thead、tbody、tfoot，那么瀏覽器解析并顯示表格內(nèi)容的時候是從按照代碼的從上到下的順序來顯示。 2、當(dāng)表格非常大內(nèi)容非常多的時候，如果用thead、tbody、tfoot標(biāo)簽的話，那么數(shù)據(jù)可以邊獲取邊顯示。如果不寫，則必須等表格的內(nèi)容全部從服務(wù)器獲取完成才能顯示出來。 例子： 效果： ? 表單標(biāo)簽用 ? 屬性： a. b. d. form標(biāo)簽里面的action屬性和method屬性，在后面課程給大家講解。稍微說一下：action屬性就是表示，表單將提交到哪里。 method屬性表示用什么HTTP方法提交，有g(shù)et、post兩種。? get提交和post提交的區(qū)別： POST方式： Enctype： a.Application/x-www-form-urlencoded：默認(rèn)加密方式，除了上傳文件之外的數(shù)據(jù)都可以 b.Multipart/form-data：上傳附件時，必須使用這種編碼方式。 用于接收用戶輸入。 屬性： 例子： 效果： 四種按鈕的舉例： 效果： select標(biāo)簽和ul、ol、dl一樣，都是組標(biāo)簽。 a. b. a. 例子： 效果: 表示。
一個表格是由每行
組成的，每行是由 組成的。
所以我們要記住，一個表格是由行組成的（行是由列組成的），而不是由行和列組成的。
在以前，要想固定標(biāo)簽的位置，唯一的方法就是表格?，F(xiàn)在可以通過CSS定位的功能來實現(xiàn)。但是現(xiàn)在在做頁面的時候，表格作用還是有一些的。
1
2
3
4
5
6
7
8
????
????????< /td>
????????< /td>
????????< /td>
????????<
/td>
????</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
??????
??????????小馬哥< /td>
??????????18</td>
??????????男< /td>
??????????山東< /td>
??????</tr>
?
??????
??????????小岳岳< /td>
??????????45</td>
??????????男< /td>
??????????河南< /td>
??????</tr>
?
??????
??????????鄧紫棋< /td>
??????????23</td>
??????????女< /td>
??????????香港<
/td>
??????</tr>
?
??</table>
標(biāo)簽的屬性。
的屬性：
border：邊框。像素為單位。style="border-collapse:collapse;"：單元格的線和表格的邊框線合并width：寬度。像素為單位。height：高度。像素為單位。bordercolor：表格的邊框顏色。align：表格的水平對齊方式。屬性值可以填：left right center。
注意：這里不是設(shè)置表格里內(nèi)容的對齊方式，如果想設(shè)置內(nèi)容的對齊方式，要對單元格標(biāo)簽進(jìn)行設(shè)置）
cellpadding：單元格內(nèi)容到邊的距離，像素為單位。默認(rèn)情況下，文字是緊挨著左邊那條線的，即默認(rèn)情況下的值為0。
注意不是單元格內(nèi)容到四條邊的距離哈，而是到一條邊的距離，默認(rèn)是與左邊那條線的距離。如果設(shè)置屬性dir="rtl"，那就指的是內(nèi)容到右邊那條線的距離。cellspacing：單元格和單元格之間的距離（外邊距），像素為單位。默認(rèn)情況下的值為0bgcolor="#99cc66"：表格的背景顏色。background="路徑src/..."：背景圖片。
背景圖片的優(yōu)先級大于背景顏色。
CSS的寫法：
1
style="border-collapse:collapse;"
：行
屬性：
dir：公有屬性，設(shè)置這一行單元格內(nèi)容的排列方式?？梢匀≈担?code>ltr：從左到右（left to right，默認(rèn)），rtl：從右到左（right to left）bgcolor：設(shè)置這一行的單元格的背景色。
注：沒有background屬性，即：無法設(shè)置這一行的背景圖片，如果非要設(shè)置，可以用css實現(xiàn)。height：一行的高度align="center"：一行的內(nèi)容水平居中顯示，取值：left、center、rightvalign="center"：一行的內(nèi)容垂直居中，取值：top、middle、bottom ：單元格
align：內(nèi)容的橫向?qū)R方式。屬性值可以填：left right center。
如果想讓每個單元格的內(nèi)容都居中，這個屬性太麻煩了，以后用css來解決。valign：內(nèi)容的縱向?qū)R方式。屬性值可以填：top middle bottomwidth：絕對值或者相對值(%)height：單元格的高度bgcolor：設(shè)置這個單元格的背景色。background：設(shè)置這個單元格的背景圖片。 單元格的合并
單元格的屬性：
colspan：橫向合并。例如colspan="2"表示當(dāng)前單元格在水平方向上要占據(jù)兩個單元格的位置。rowspan：縱向合并。例如rowspan="2"表示當(dāng)前單元格在垂直方向上 ：加粗的單元格。相當(dāng)于 ?+?
標(biāo)簽
：表格的標(biāo)題。使用時和tr標(biāo)簽并列?
表格的
標(biāo)簽、標(biāo)簽、標(biāo)簽
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
="1">
??????/caption>
??????
????????????
????????????????小馬哥< /td>
????????????????18</th>
????????????????男< /td>
????????????????="3">中國</td>
????????????</tr>
????????</tbody>
?????
????
????????????
????????????????小岳岳< /td>
????????????????45</td>
????????????????男< /td>
?????????????????
????????????</tr>
????????</tfoot>
????
????????????
????????????????鄧紫棋< /td>
????????????????23</td>
????????????????女<
/td>??????????
????????????</tr>
????????</thead>
?
????</table>
三 表單標(biāo)簽
表示，用于與服務(wù)器的交互。表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。name：表單的名稱，用于JS來操作或控制表單時使用；id：表單的名稱，用于JS來操作或控制表單時使用；c.action：指定表單數(shù)據(jù)的處理程序，一般是PHP，如：action=“l(fā)ogin.php”method：表單數(shù)據(jù)的提交方式，一般取值：get(默認(rèn))和post
GET方式：
將表單數(shù)據(jù)，以"name=value"形式追加到action指定的處理程序的后面，兩者間用"?"隔開，每一個表單的"name=value"間用"&"號隔開。
特點(diǎn)：只適合提交少量信息，并且不太安全(不要提交敏感數(shù)據(jù))、提交的數(shù)據(jù)類型只限于ASCII字符。
將表單數(shù)據(jù)直接發(fā)送(隱藏)到action指定的處理程序。POST發(fā)送的數(shù)據(jù)不可見。Action指定的處理程序可以獲取到表單數(shù)據(jù)。
特點(diǎn)：可以提交海量信息，相對來說安全一些，提交的數(shù)據(jù)格式是多樣的(Word、Excel、rar、img)。
表單數(shù)據(jù)的編碼方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。 ：輸入標(biāo)簽（文本框）
1
<input?type="text"?/>
type="屬性值"：文本類型。屬性值可以是：
text（默認(rèn)）password：密碼類型radio：單選按鈕，名字相同的按鈕作為一組進(jìn)行單選（單選按鈕，天生是不能互斥的，如果想互斥，必須要有相同的name屬性。name就是“名字”。
）。非常像以前的收音機(jī)，按下去一個按鈕，其他的就抬起來了。所以叫做radio。checkbox：多選按鈕，名字相同的按鈕作為一組進(jìn)行選擇。checked：將單選按鈕或多選按鈕默認(rèn)處于選中狀態(tài)。當(dāng)標(biāo)簽的type="radio"時，可以用這個屬性。屬性值也是checked，可以省略。hidden：隱藏框，在表單中包含不希望用戶看見的信息button：普通按鈕，結(jié)合js代碼進(jìn)行使用。submit：提交按鈕，傳送當(dāng)前表單的數(shù)據(jù)給服務(wù)器或其他程序處理。這個按鈕不需要寫value自動就會有“提交”文字。這個按鈕真的有提交功能。點(diǎn)擊按鈕后，這個表單就會被提交到form標(biāo)簽的action屬性中指定的那個頁面中去。reset：重置按鈕，清空當(dāng)前表單的內(nèi)容，并設(shè)置為最初的默認(rèn)值image：圖片按鈕，和提交按鈕的功能完全一致，只不過圖片按鈕可以顯示圖片。file：文件選擇框。
提示：如果要限制上傳文件的類型，需要配合JS來實現(xiàn)驗證。對上傳文件的安全檢查：一是擴(kuò)展名的檢查，二是文件數(shù)據(jù)內(nèi)容的檢查。value="內(nèi)容"：文本框里的默認(rèn)內(nèi)容（已經(jīng)被填好了的）size="50"：表示文本框內(nèi)可以顯示五十個字符。一個英文或一個中文都算一個字符。
注意size屬性值的單位不是像素哦。readonly：文本框只讀，不能編輯。因為它的屬性值也是readonly，所以屬性值可以不寫。
用了這個屬性之后，在google瀏覽器中，光標(biāo)點(diǎn)不進(jìn)去；在IE瀏覽器中，光標(biāo)可以點(diǎn)進(jìn)去，但是文字不能編輯。disabled：文本框只讀，不能編輯，光標(biāo)點(diǎn)不進(jìn)去。屬性值可以不寫。
1
2
3
4
5
6
7
8
9
10
11
??????姓名：<input?value="呵呵"?>逗比
??????昵稱：<input?value="哈哈"?readonly="">
??????名字：<input?type="text"?value="name"?disabled="">
??????密碼：<input?type="password"?value="pwd"?size="50">
??????性別：<input?type="radio"?name="gender"?value="male"?checked="">男
????????????<input?type="radio"?name="gender"?value="female"?>女
??????愛好：<input?type="checkbox"?name="love"?value="eat">吃飯
????????????<input?type="checkbox"?name="love"?value="sleep">睡覺
????????????<input?type="checkbox"?name="love"?value="bat">打豆豆
??</form>
1
2
3
4
5
6
7
????????<input?type="button"?value="普通按鈕">
????????<input?type="submit"??value="提交按鈕">
????????<input?type="reset"?value="重置按鈕">
????????<input?type="image"?src="images/bojie.jpeg"?width="400"?value="圖片按鈕2">
????????<input?type="file"?value="文件選擇框">
</form>
：下拉列表標(biāo)簽 標(biāo)簽里面的每一項用表示。select就是“選擇”，option“選項”。 標(biāo)簽的屬性：multiple：可以對下拉列表中的選項進(jìn)行多選。沒有屬性值。size="3"：如果屬性值大于1，則列表為滾動視圖。默認(rèn)屬性值為1，即下拉視圖。 標(biāo)簽的屬性：selected：預(yù)選中。沒有屬性值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
????
????????/option>
????????/option>
????????/option>
????????/option>
????????