center 居中標籤

1  <center>
2         <h1>使用者列表</h1>
3         <a href="">首頁</a> |
4         <a href="">新增使用者</a>
5         <hr>
6    </center>

font 字型標籤
屬性：
color 文字的顏色
face 設定文字的字型，設定的字型需要是計算機上安裝好的字型；字型安裝路徑為：c:/windows/fonts
size 文字的大小，值為1~7

<
 
font color="red" face="大傻,二筆,楷體,黑體,宋體" size="7">人到中年不得已，保溫杯裡泡枸杞！</font>

input標籤 定義輸入框
屬性：
name/value/type
type 規定輸入框的值
值： text/password/radio/checkbox

file 檔案上傳域
hidden 隱藏域，悄悄的傳輸資料

submit 提交按鈕，用value指定按鈕的文字
button 普通按鈕
image 用圖片作為提交按鈕，配合src屬性使用
reset 重置按鈕

 1 <form action="../html03/1.php"
 
>
 2         使用者名稱： <input type="text" /> <br>
 3         密　碼： <input type="password" /> <br>
 4         性　別： 
 5             <input name="sex" type="radio" />男
 6             <input name="sex" type="radio" />女
 7             <input name="sex" type="radio" />鬼
 
 8             <br>
 9         頭像： <input type="file" /> <br>
10 
11         <input type="hidden" name="name" value="中意雷">
12 
13         <input type="checkbox" />我已閱讀您的《霸王條款》 <br>
14 
15         <button>立即註冊</button>
16         <!-- 提交按鈕 -->
17         <input type="submit" value="立即註冊">
18         <!-- 普通按鈕 -->
19         <input type="button" value="普通">
20         <!-- 圖片作為提交按鈕 -->
21         <input type="image" src="./1.png">
22         <!-- 重置按鈕 -->
23         <input type="reset" value="重置按鈕">
24  </form>

input標籤
屬性： 前面講過 type/name/value
size 可以設定輸入框的寬度
checked 單選框或者多選框的預設選中
maxlength 設定輸入框的最大輸入長度
readonly 設定為只讀
multiple 設定檔案上傳域為多檔案上傳

1 <form action="../html03/1.php">
2         <input readonly name="yukang" size="30" maxlength="6" value="哈哈哈哈">
3         <input checked type="radio" name="sex">男
4         <input type="radio" name="sex">女
5         <input checked type="radio" name="sex">妖
6 
7         <input type="file" multiple>
8         <button>提交</button>
9 </form>

前端驗證：包括JavaScript、HTML的驗證
僅僅是為了提升使用者體驗
後端驗證才是為了安全

button 按鈕標籤
屬性：
type 決定按鈕的型別
值：
button 普通按鈕
reset 重置按鈕
submit 提交按鈕（預設）

//瞭解
form 規定form標籤之外的按鈕屬於某個form表單
formaction/formmethod/formtarget 會覆蓋form標籤本來的屬性

 1 <form id="form1" action="../html03/1.php" method="post">
 2         <input type="text" name="wd">
 3         <button type="reset">重置</button>
 4         <button type="button">普通按鈕</button>
 5         <input type="submit" value="提交">
 6 
 7         <!-- 提交到百度的按鈕 -->
 8         <button formmethod="get" formaction="http://www.baidu.com/s" formtarget="_blank">提交到百度</button>
 9     </form>
10     
11     <!-- 規定當前按鈕輸入form1的表單 -->
12     <button form="form1">我想提交表單</button>

textarea 可以設定多行文字域
屬性：
cols 決定寬度
rows 決定高度
name/readonly
注意：這個雙標籤不建議換行

select 設定下拉框
屬性：
name 給下拉框取名，方便後臺拿值
multiple 設定下拉框為多選的（很少用）
option 設定下拉選項
屬性：
value 設定option的值；如果不設定，預設拿option中間的內容
selected 設定下拉框的預設選中

 1     <form action="../html03/1.php">
 2         自我描述：<input value="213" type="text"><br>
 3         自我描述：
 4             <textarea cols="50" rows="5"></textarea>
 5             <br>
 6         收貨地址：
 7             <select name="sheng">
 8                 <option>--請選擇--</option>
 9                 <option value="1">廣東省</option>
10                 <option value="2">福建省</option>
11                 <option selected value="3">四川省</option>
12                 <option value="4">東北3省</option>
13                 <option value="5">廣西省</option>
14                 <option selected value="6">廣北省</option>
15                 <option>廣南省</option>
16             </select>
17 
18         <button>提交</button>
19     </form>

H5新增的標籤
output 用於輸出
datalist 設定input框的列表，列表項用option定義
屬性：
id 值需要和input標籤的list屬性的值相對應

H5新增的屬性
placeholder 設定提示資訊
autofocus 自動獲取焦點
required 設定了之後表示必須輸入值，不能為空
autocomplete 設定是否提示，值為on/off

min/max/step 設定type為number的輸入框的最小值/最大值/步進值

type屬性新增的值
number 表示只能輸入數字
url 表示只能輸入url地址
email 表示只能輸入email郵箱地址

range 範圍
color 顏色

 1     <form action="../html03/1.php">
 2         <!-- 新增標籤：datalist -->
 3         <input type="text" list="movie">
 4         <datalist id="movie">
 5             <option>毒液</option>
 6             <option>拜拜甜甜圈</option>
 7             <option>西紅柿</option>
 8             <option>土豆絲</option>
 9             <option>土行孫</option>
10             <option>土槽大會</option>
11         </datalist>
12         
13         <hr>
14         <!-- 新增屬性 -->
15         <input name="username" autocomplete="off"  autofocus placeholder="手機/郵箱/使用者名稱" />
16         <br>
17 
18         <!-- 常用 -->
19         年齡：<input step="5" min="0" type="number" max="30"><br>
20         網址：<input type="url"><br>
21         郵箱：<input type="email"><br>
22 
23         <!-- 瞭解 -->
24         範圍：<input name="fw" type="range"><br>
25         顏色：<input name="color" type="color"><br>
26         date：<input type="datetime-local"><br>
27         <button>提交</button>
28     </form>