從零開始學 Web 之 HTML（三）表單

時間 2019-11-17

標籤開始 web html 表單欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公衆號，歡迎你們訂閱關注。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！php

1、表格

一、表格的結構

表格的標準結構：css

 1<table>
 2  <thead>
 3    <tr>
 4    <td></td>
 5    <td></td>
 6    </tr>
 7  </thead>
 8
 9  <tbody>
10    <tr>
11    <td></td>
12    <td></td>
13    </tr>
14  </tbody>
15
16  <tfoot>
17    <tr>
18    <td></td>
19    <td></td>
20    </tr>
21  </tfoot>
22</table>

PS：寫 <thead> <tbody> <tfoot>對SEO更好，不寫也沒問題。html

二、常見寫法

 1<table width="300px" height="300px" border="5px" cellspacing="10px" cellpadding="0" bgcolor="pink" align="center" >
 2        <tr>
 3            <td>窗外的麻雀</td>
 4            <td>窗外的麻雀</td>
 5            <td>窗外的麻雀</td>
 6        </tr>
 7        <tr>
 8            <td>窗外的麻雀</td>
 9            <td>窗外的麻雀</td>
10            <td>窗外的麻雀</td>
11        </tr>
12        <tr>
13            <td>窗外的麻雀</td>
14            <td>窗外的麻雀</td>
15            <td>窗外的麻雀</td>
16        </tr>
17    </table>

width：寬度
height：高度
border：邊框寬度
cellspacing：單元格與單元格的距離
cellpadding：內容距邊框的距離
bgcolor：表格背景顏色
align=」left | right | center」
若是直接給表格用align=」center」表格居中
若是給tr或者td使用，tr或者td內容居中。前端

三、快速建表格的方式

webstorm 下的快捷方式：html5

table>tr3>td5 + tab鍵  web

PS：sublime 下須要安裝 Emmet 插件。安全

四、表頭

<caption></caption>：位於 table 標籤和 tr 標籤之間webstorm

 1<table>
 2        <caption>表頭</caption>
 3        <tr>
 4            <td></td>
 5            <td></td>
 6            <td></td>
 7        </tr>
 8        <tr>
 9            <td></td>
10            <td></td>
11            <td></td>
12        </tr>
13        <tr>
14            <td></td>
15            <td></td>
16            <td></td>
17        </tr>
18    </table>

五、單元格合併

<td colspan=「2」>填寫內容</td>：合併同一行的單元格，合併行數爲2post

<td rowspan=「3」>填寫內容</td> ：合併同一列的單元格，合併列數爲3學習

 1<table border="2" cellspacing="0" width="400" height="100" align="center">
 2    <caption><strong>表頭</strong></caption>
 3        <tr align="center" bgcolor="yellow" height="100">
 4            <td colspan="2">在電線杆上多嘴</td>
 5            <!-- <td><strong>2</strong></td> -->
 6            <td>在電線杆上多嘴</td>
 7        </tr>
 8
 9        <tr align="center" bgcolor="#CCC" height="100">
10            <td>在電線杆上多嘴</td>
11            <td>在電線杆上多嘴</td>
12            <td rowspan="2">在電線杆上多嘴</td>
13        </tr>
14
15        <tr align="center" bgcolor="#CCC" height="100">
16            <td>在電線杆上多嘴</td>
17            <td>在電線杆上多嘴</td>
18            <!-- <td><strong>3</strong></td> -->
19        </tr>
20    </table>

六、表格標題

1<tr>
2  <th></th>
3  <th></th>
4  <th></th>
5</tr>

注意：將 td 改成 th

特色：標題的文字自動加粗水平居中對齊

七、邊框顏色

1<table bordercolor=""></table>

八、內容對齊方式

1<tr>
2    <td valign="bottom">張三</td>
3</tr>

valign="top " 內容頂部對齊

valign=" middle" 內容居中對齊

valign="bottom" 內容底部對齊

九、補充：細線表格

 1<table width="500" height="300" bgcolor="green" cellspacing="1" >
 2        <tr bgcolor="white">
 3            <td></td>
 4            <td></td>
 5            <td></td>
 6            <td></td>
 7        </tr>
 8        <tr bgcolor="white">
 9            <td></td>
10            <td></td>
11            <td></td>
12            <td></td>
13        </tr>
14        <tr bgcolor="white">
15            <td></td>
16            <td></td>
17            <td></td>
18            <td></td>
19        </tr>
20        <tr bgcolor="white">
21            <td></td>
22            <td></td>
23            <td></td>
24            <td></td>
25        </tr>
26    </table>

思路：將整個 table 的背景設置爲邊框的顏色，而後填充表格爲其餘的顏色，設置邊框距邊框的距離 cellpadding 爲0，單元格與單元格之間的距離 cellspacing 爲細線邊框的寬度，最後看到的細線邊框實際上是背景顏色。

2、表單

一、組成

文本（提示信息）
表單控件

表單域

上面提示信息和表單控件等所在的區域。

1<form action="1.php" method="get"></form>

action：處理信息，就是這裏面若是有信息提交了，將由什麼來處理。
method=」get | post」
get：經過地址欄提供（傳輸）信息（能夠在地址欄裏看到你輸入的帳號和密碼），安全性差。

post ：經過文件例如 1.php 來處理信息，安全性高。

二、文本輸入框

1<input type="text"
2 name="username"
3 maxlength="6"
4 readonly="readonly"
5 disabled="disabled"
6 value="用戶名">

type：類型，輸入的是文本內容
name：輸入框的名字
maxlength：限定輸入文本長度
readonly：文本框只讀
disabled：文本框未激活
value：輸入框中的默認內容

placeholder：引導文字，當文本框無文字而且未獲取鼠標焦點時顯示引導文字，當獲取焦點或者輸入文字時隱藏引導文字。

三、密碼輸入框

1<input type="password" name="pwd">

PS：文本輸入框的全部屬性對密碼輸入框都有效

四、單選框

1<input type="radio" name="gender" checked="checked">男

checked=」checked」 設置默認選擇項。

PS：當有多個單選框是如何設置只能有一個被選中？
只有將 name 的值設置相同的時候，才能實現單選效果。

五、下拉列表

1<select multiple="multiple">
2  <optgroup lable="分組名稱">
3    <option>下拉列表選項</option>
4    <option selected="selected">下拉列表選項</option>
5  </optgroup>
6</select>

multiple=」multiple」：將下拉列表設置爲多選
selected=」selected」：設置默認選中項目
<optgroup></optgroup> 對下拉列表進行分組。
Label="分組名稱" 分組名稱。

六、多選框

1<input type="checkbox" checked="checked">

checked=」checked」 設置默認選中項

七、多行文本框

1<textarea cols="130" rows="10"></textarea>

cols：控制輸入字符的長度

rows：控制輸入字符的行數

八、文本上傳控件

1<input type="file">

九、文件提交按鈕

1<input type="submit">

能夠實現信息提交功能

十、普通按鈕

1<input type="button" value="普通按鈕">

不能提交信息，通常配合 js 按鈕點擊事件使用。

十一、圖片按鈕

1<input type="image" src="圖片路徑">

圖片按鈕可實現信息提交功能

十二、重置按鈕

1<input type="reset">

將信息重置到默認狀態

1三、表單信息分組

1<form action="1.php" method="post">
2    <fieldset>
3        <legend>分組1</legend>
4    </fieldset>
5    <fieldset>
6        <legend>分組2</legend>
7    </fieldset>
8</form>

<fieldset></fieldset>：對錶單信息分組

<legend></legend>：表單信息分組名稱

1四、html5 補充表單控件

1<input type="url">               <!-- 網址控件 -->
2<input type="date">              <!-- 日期控件 -->
3<input type="time">              <!-- 時間控件 -->
4<input type="email">             <!-- 郵件控件 -->
5<input type="number" step="5">   <!-- 數字控件 -->
6<input type="range" step="50">   <!-- 滑塊控件 -->

1五、綜合示例

 1<!-- 表單域 -->
 2    <form action="1.php" method="post">
 3    <!-- 對錶單信息分組 -->
 4    <fieldset>
 5    <!-- 表單信息分組名稱 -->
 6    <legend>分組信息</legend>
 7        <!-- 文本輸入框 -->
 8        帳戶: <input type="text" name="User" value="帳號/郵箱/手機號">
 9        <br>
10        <!-- 密碼輸出框 -->
11        密碼: <input type="password" name="Pwd">
12        <br>
13        <!-- 文件提交按鈕 -->
14        <input type="submit">
15        <br>
16        <!-- 單選框 -->
17        <input type="radio" name="gender">男
18        <input type="radio" name="gender" checked="checked">女
19
20        <br>
21        <br>
22        <!-- 下拉列表 -->
23        省(市)&nbsp; <select>
24            <!-- 下拉列表選項 -->
25            <option value="">北京</option>
26            <option value="">山東</option>
27            <option value="">廣東</option>
28            <option value="">福建</option>
29            <option value="">河南</option>
30            <option value="" selected="selected">湖北</option>
31        </select>
32
33        <select>
34            <!-- 對下拉列表分組 -->
35            <optgroup label="湖北省">
36                <option value="">武漢</option>
37                <option value="" selected="selected">襄陽</option>
38                <option value="">天門</option>
39                <option value="">荊州</option>
40                <option value="">仙桃</option>
41            </optgroup>
42        </select>
43
44        <br><br>
45        <!-- 多選框 -->
46        <input type="checkbox"> A
47        <input type="checkbox" checked="checked"> B
48        <input type="checkbox"> C
49
50        <br><br>
51        <!-- 多行文本框 -->
52        <textarea cols="30" rows="10"></textarea><br><br>
53        <!-- 文本上傳控件 -->
54        <input type="file"><br><br>
55
56        <input type="submit">&nbsp;
57        <!-- 普通按鈕 -->
58        <input type="button" value="Button">&nbsp;  
59        <!-- 重置按鈕 -->
60        <input type="reset"><br><br>
61        <!-- 圖片按鈕 -->
62        <input type="image" src="1.png" width="100"><br><br>
63        <!-- 網址控件 -->
64        <input type="url" value="http://www.baidu.com"><br><br>
65        <!-- 日期控件 -->
66        <input type="date">
67
68    </fieldset>
69    </form>

3、標籤語義化

好的語義化的網站標準就是去掉樣式表文件(css文件)以後，結構依然很清晰。
根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）

有什麼用？

一、網頁結構合理。
二、有了良好的結構和語義你的網頁內容天然容易被搜索引擎抓取。
三、方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）。
四、便於團隊開發和維護。

那怎麼作？

一、儘量少的使用無語義的標籤div和span。（好比使用p是段落標籤）
二、在語義不明顯時，既可使用div或者p時，儘可能用p, 由於p在默認狀況下有上下間距，對兼容特殊終端有利。
三、不要使用純樣式標籤，如：b、font、u 等，改用 css 設置。
四、須要強調的文本，能夠包含在 strong 或者 em 標籤中。