單屬性匯總：

1 name屬性

服務(wù)器會(huì)識(shí)別不同的name屬性，并根據(jù)name屬性來捕獲不同元素內(nèi)的數(shù)據(jù)。

2 value屬性

value 屬性為 input 元素設(shè)定值。

對于不同的輸入類型，value 屬性的用法也不同：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本

type="text", "password", "hidden" - 定義輸入字段的初始值

type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值

注釋：<input type="checkbox"> 和 <input type="radio"> 中必須設(shè)置 value 屬性。

注釋：value 屬性無法與 <input type="file"> 一同使用。

注意：單選框和復(fù)選框傳遞數(shù)據(jù)到數(shù)據(jù)庫時(shí)一定要設(shè)置value, 否則插入數(shù)據(jù)失敗;

3 type屬性

它決定了<input>標(biāo)簽在頁面中的表現(xiàn)樣式和功能

text 文本框

password 密碼框

radio 單選框

checkbox 復(fù)選框

file 文件域

hidden 隱藏域

image 圖像域

submit 提交按鈕

reset 重置按鈕

button 普通按鈕

4 size屬性

列表框中size屬性用來設(shè)置列表框顯示的行數(shù)；

文本框和密碼框會(huì)使用size屬性設(shè)置域的顯示寬度；

5 disabled屬性

定義disabled屬性可以禁止使用該元素；

無法將數(shù)據(jù)提交到服務(wù)器處理;

6 readonly屬性

常用在輸入性表單對象中(如文本框、密碼框、文本區(qū)域)，用來禁止輸入任何信息；

可以將數(shù)據(jù)提交到服務(wù)器處理;

7 checked屬性

它與disabled屬性一樣沒有屬性值，常用在選擇性表單對象中，定義對象處于被選中狀態(tài)(如單選按鈕和復(fù)選框)

但在列表框或者下拉式菜單中，為了表示被選中的項(xiàng)目，可使用selected屬性；

7 placeholder屬性

規(guī)定幫助用戶填寫輸入字段的提示。

表單對象：

1 文本框

<input type="text" name="textfield" id="textfield" value="單行文本框" size="20" maxlength="20">

必需的屬性:name type

2 密碼域

<input type="password" name="passwordfield" id="passwordfield">

必需的屬性:name type

3 文本域

<textarea name="textarea" cols="20" rows="5" wrap="physical"></textarea>

必需的屬性:name cols rows

wrap屬性 默認(rèn)值：輸入的文本會(huì)自動(dòng)換行。當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時(shí), 換行符不會(huì)隨輸入的文本一同被提交到服務(wù)器；

off(也可寫成wrap)：不自動(dòng)換行, 當(dāng)輸入的內(nèi)容超出文本區(qū)域右邊界時(shí), 文本將向左滾動(dòng), 并顯示滾動(dòng)條。

如果希望換行，必須手動(dòng)輸入回車鍵才能將插入點(diǎn)移到下一行；

virtual：文本能夠自動(dòng)換行, 當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時(shí), 換行符不會(huì)隨輸入文本一同提交到服務(wù)器；(默認(rèn)值)

physical：文本能夠自動(dòng)換行, 當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時(shí), 換行符將會(huì)隨輸入的文本一同被提交到服務(wù)器進(jìn)行處理；

關(guān)于如何限制文本域輸入字符串的長度 見javascript|語法|設(shè)置文本框

HTML5中wrap中屬性值修改為hard|soft

soft 當(dāng)在表單中提交時(shí), textarea 中的文本不換行, 默認(rèn)值。

hard 當(dāng)在表單中提交時(shí), textarea 中的文本換行(包含換行符)。

當(dāng)使用 "hard" 時(shí), 必須規(guī)定 cols 屬性

4 單選按鈕

單選按鈕傳遞的信息簡單，如1或0、True或False。

<input type="radio" name="radio" value="1"/>選項(xiàng)1
<input type="radio" name="radio" value="2"/>選項(xiàng)2
<input type="radio" name="radio" value="3"/>選項(xiàng)3

多個(gè)單選按鈕通過定義相同的name屬性, 以實(shí)現(xiàn)捆綁在一起；

必需的屬性:type name value

5 復(fù)選框

<input type="checkbox" name="checkbox[]" value="1"/>選項(xiàng)2
<input type="checkbox" name="checkbox[]" value="2"/>選項(xiàng)2
<input type="checkbox" name="checkbox[]" value="3"/>選項(xiàng)2

通過設(shè)置相同的name屬性可以把多個(gè)復(fù)選框捆綁在一起；

必需的屬性:type name value

6 列表框/下拉菜單

<select name="select" size=1>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

如果select元素中不設(shè)置size屬性,則該元素會(huì)顯示為下拉菜單樣式

<select name="select" size="1" multiple="multiple">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

如果希望以列表框形式顯示,則可以使用size屬性指定列表框的高度(顯示幾個(gè)選項(xiàng));

還可以通過mutiple屬性定義列表框是否為多選(默認(rèn)是單選)；

通過<optgroup>標(biāo)簽把相關(guān)的選項(xiàng)組合在一起：

<select>
<optgroup label="PHP版塊">
<option value ="resource">資源共享</option>
<option value ="study">學(xué)習(xí)交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
<optgroup label="IOS版塊">
<option value ="resource">資源共享</option>
<option value ="study">學(xué)習(xí)交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
</select>

注意：其中PHP版塊和IOS版塊不能被選中

所有主流瀏覽器都支持 <optgroup> 標(biāo)簽。

7 文件域

<input type="file" name="file"/>
<input type="file" name="file" multiple/>

8 按鈕

提交按鈕

<input type="submit" name="" value="提交"/>

name值必須給出

重置按鈕

<input type="reset" name="" value="重置"/>

普通按鈕

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

它一般是配合javascript來使用;

關(guān)于控制表單提交按鈕見: javascript|語法|控制表單提交

9 圖像域

<input type="image" name="image" value="提交" src="images/vote_d.gif" alt="提交" align="middle"/>

10 隱藏域

限制上傳文件大小

<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />

傳遞ID值

<input type="hidden" name="id" value="<?php echo $result['id'];?>" />

11 button標(biāo)簽

在 button 元素內(nèi)部，您可以放置內(nèi)容，比如文本或圖像。這是該元素與使用 input 元素創(chuàng)建的按鈕之間的不同之處。

<button type="button" name="button" value="按鈕"><img src="hw001.jpeg"/></button>

普通按鈕<button type="button">普通按鈕</button> 它一般是配合javascript來使用, 默認(rèn)值

提交按鈕<button type="submit">提交按鈕</button>

重置按鈕<button type="reset">重置按鈕</button>

提交表單

enctype屬性

該屬性包含兩種方式:

application/x-www-form-urlencoded 是默認(rèn)編碼類型

multipart/form-data

multipart/form-data編碼方式可以用來傳輸二進(jìn)制數(shù)據(jù)或者非ASCII字符的文本(如圖片、不同格式的文件等),上傳文件必須使用此屬性

multipart: 多部件的

multiple: 多重的

text/plain

text/plain將表單屬性發(fā)送到電子郵箱時(shí)，enctype的值必須設(shè)為"text/plain",否則將會(huì)出現(xiàn)亂碼。

發(fā)送電子郵件的表單程序

<form name="form1" method="post" action="mailto:marker@broadview.com.cn" enctype="text/plain">
</form>

action 表單提交的腳本

如果傳遞到本頁面，則直接輸入控制 action=""

表單提交方式method:post/get

<form action="test.php?id=5" method="post" >
name: <input type="text" name="name" value="100">
</form>

id=5是get傳， name="100" 是post傳！ //高洛峰解釋

action="" 表示傳遞到當(dāng)前腳本文件

target 指定提交到哪一個(gè)窗口

_blank 打開新窗口

_self 當(dāng)前的窗口,默認(rèn)值

_parent 上一層窗口

_top 最上層窗口

框架名稱 指定指定窗口或框架名稱

label標(biāo)簽

作用: 擴(kuò)大觸控區(qū)域, 為了提升用戶體驗(yàn), 點(diǎn)擊文字也能選中表單

<form action=" method="get" accept-charset="utf-8">
<label>電子郵箱: <input type="text" name="email" value="" placeholder="請輸入電子郵箱"/></label><br/>
<label>密碼: <input type="password" name="password"/></label><br/>
<label for="address">地址</label>
<input type="text" name="address" id="address" placeholder="請輸入地址" />
</form>

for與id一致

<input type="radio" id="sec" name="sex"> <label for="sex">男</label>

簡化寫法:

<label><input type="checkbox"/>周杰倫-晴天</label>

注意: "for" 屬性可把 label 綁定到另外一個(gè)元素。請把"for"屬性的值設(shè)置為相關(guān)元素的 id 屬性的值。

PHP實(shí)例：創(chuàng)建發(fā)送郵件信息的html表單

代碼：

<html>
<head>
<title>簡單郵件發(fā)送表單</title>
</head>
<body>
<h1>Mail Form</h1>
<form name="form1" method="post" action="simpleEmail.php">
<table>
<tr><td><b>To</b></td><td><input type="text" name="mailto" size="35"></td></tr>
<tr><td><b>郵件主題：</b></td>
<td><input type="text" name="mailsubject" size="35"></td></tr>
<tr><td><b>郵件內(nèi)容</b></td>
<td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
</tr>
<tr><td colspan="2">
<input type="submit" name="Submit" value="發(fā)送">
</td>
</tr>
</table>
</form>
</body>
</html>

simpleEmail.php

格語法:

注意：顏色使用格式有三種：rgb(x,x,x) #xxxxxx colorname

<table width=""></table>指定表格的寬度大小(使用數(shù)字pixel或%)

<table border=""></table>設(shè)定表格邊框大小(使用數(shù)字pixel)

<table align=""></table>表格位置,置左,為默認(rèn)值

align屬性:left(左對齊表格，默認(rèn)值)、right(右對齊表格)、center(居中對齊表格)

<table bgcolor=""></table>設(shè)定表格的背景顏色

<table cellpadding=""></table>指定內(nèi)容與網(wǎng)格線之間的間距(使用數(shù)字pixel或%)

<table cellspacing=""></table>指定網(wǎng)格線與網(wǎng)格線之間的距離(使用數(shù)字pixel或%)

<table border="1" cellspacing="0" cellpadding="0">

通常表格, 這兩個(gè)參數(shù)都設(shè)置為 0 。

<table rules="rows"></table>規(guī)定內(nèi)側(cè)邊框的哪個(gè)部分是可見的。(兼容性差)

rules屬性:none 沒有線條。

groups 位于行組和列組之間的線條。

rows 位于行之間的線條。

cols 位于列之間的線條。

all 位于行和列之間的線條。

<table summary="Monthly savings for the Flintstones family"></table>

定義了表格內(nèi)容的摘要：

表格結(jié)構(gòu)：

在使用表格進(jìn)行布局時(shí), 可以將表格劃分為頭部、主體和頁腳, 具體如下所示：

<thead></thead>：用于定義表格的頭部, 必須位于<table></table>標(biāo)記中, 一般包含網(wǎng)頁的logo和導(dǎo)航等頭部信息。

<tfoot></tfoot>：用于定義表格的頁腳, 位于<table></table>標(biāo)記中<thead></thead>標(biāo)記之后, 一般包含網(wǎng)頁底部的企業(yè)信息等。

<tbody></tbody>：用于定義表格的主體, 位于<table></table>標(biāo)記中<tfoot></tfoot>標(biāo)記之后, 一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。

注意：在沒有<tbody></tbody>比較的情況下, 瀏覽器會(huì)自動(dòng)添加<tbody></tbody>標(biāo)記。

<table bordercolor=""></table>設(shè)定表格邊框的顏色

<table cols=""></table>指定表格的欄數(shù)

<table height=""></table>指定表格的高度大小(使用數(shù)字)

<table background=""></table>背景圖片的URL=就是路徑網(wǎng)址(默認(rèn)是repeat：水平和垂直方向重復(fù))

<table bordercolordark=""></table>設(shè)定表格暗邊框的顏色

<table bordercolorlight=""></table>設(shè)定表格亮邊框的顏色

<tr align=""></tr> 定義表格行的內(nèi)容對齊方式。

align屬性值:right、left、center、justify、char

<tr bgcolor=""></tr> 規(guī)定表格行的背景顏色。

<tr valign=""></tr> 規(guī)定表格行中內(nèi)容的垂直對齊方式。

valign屬性值right、left、center、justify、char

<td colspan=""></td>指定儲(chǔ)存格合并欄的欄數(shù)(使用數(shù)字)

<td rowspan=""></td>指定儲(chǔ)存格合并列的列數(shù)(使用數(shù)字)

<td align=""></td> 調(diào)整表格字段之左右對齊

<td bgcolor=""></td> 設(shè)定表格字段之背景顏色

<td colspan="" rowspan=""></td> 表格字段的合并

<td valign=""></td> 調(diào)整表格字段之上下對齊

<td width=""></td> 調(diào)整表格字段寬度

<td nowrap="nowrap"></td> 規(guī)定表格單元格中的內(nèi)容不換行(注意只有一個(gè)值:nowrap)

<caption></caption>為表格加上標(biāo)題

<caption align="">設(shè)定表格標(biāo)題位置

align屬性:left, center(默認(rèn)值), right

<th></th> 定義表頭(粗體居中)

細(xì)表格邊框

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="158" height="68">
<tr>
<td width="158" height="68"></td>
</tr>
</table>

表格創(chuàng)建后瀏覽器會(huì)自動(dòng)添加<tbody>標(biāo)簽

TMl 的標(biāo)簽可以分為單個(gè)標(biāo)簽和成對標(biāo)簽。

單個(gè)標(biāo)簽：html4 規(guī)定單個(gè)標(biāo)簽要有一個(gè) / 表示結(jié)尾， html5 則不用

<!--單個(gè)標(biāo)簽-->
<meta>
<!--成對標(biāo)簽 -->
<div></div>

以下是HTMl中常用的一些標(biāo)簽

div 標(biāo)簽

div 標(biāo)簽 主要用來將相關(guān)的內(nèi)容組合到一塊，就像菜市場把各個(gè)蔬菜分成不同種類區(qū)分?jǐn)[放是一個(gè)道理。

div 是最常見也是比較重要的標(biāo)簽，網(wǎng)頁布局中經(jīng)常使用的一類標(biāo)簽。通常布局被稱為 DIV + CSS 布局

<div>
  div 就是一個(gè)分類的存儲(chǔ)箱子
</div>

p標(biāo)簽

p標(biāo)簽表示段落， 在網(wǎng)頁文字中應(yīng)用的比較多

<!--段落和段落間會(huì)換行-->
<p>第一段</p>
<p>第二段</p>

H-標(biāo)題標(biāo)簽

h標(biāo)簽分為六個(gè)

引用標(biāo)題標(biāo)簽后，字體會(huì)加粗、字號(hào)一會(huì)變大

ul 無序標(biāo)簽

無序標(biāo)簽是沒有顯示順序的列表，無序列表前面通常會(huì)有一個(gè)“小點(diǎn)”， 這個(gè)小點(diǎn)可以用type屬性控制。其中有三個(gè)展示方式（不過這種方式比較固定，不夠靈活和美觀， 已經(jīng)被CSS的效果代替），如下：

舉例:

<!--ul標(biāo)簽內(nèi)部只能放置li標(biāo)簽-->
<!--li標(biāo)簽內(nèi)部可以放其他的標(biāo)簽-->
<ul type=">
    <li>無序列表元素1</li> <!--列表項(xiàng)-->
    <li>無序列表元素2</li>
</ul>




實(shí)心圓
<ul type="disc">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>
空心圓
<ul type="circle">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>
實(shí)心方框
<ul type="square">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>

ol 有序標(biāo)簽

• ol 前面的標(biāo)簽是有序的，可以是數(shù)字、字母、羅馬數(shù)字等。同樣控制這些樣式使用的是type屬性。

• 設(shè)置start屬性，表示從哪個(gè)編號(hào)開始
• 加 reversed 表示倒敘排列

有序列表, 從2開始
<ol start="2">
  <li>元素1</li>
  <li>元素2</li>
</ol>


小寫字母表示
<ol type="a">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>


倒敘
<ol reversed>
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>

dl 自定義列表

dl標(biāo)簽表示自定義列表

dt表示數(shù)據(jù)項(xiàng)，dd表示數(shù)據(jù)定義， dd是dt標(biāo)簽的解釋

<dl>
    <dt>西紅柿</dt>
    <dd>紅、酸</dd>
    <dt>黃瓜</dt>
    <dd>綠、澀</dd>
  </dl>

img標(biāo)簽

img 用來插入圖片，包括但不限于以下圖片格式

<!-- src(source)屬性， 圖片地址，可以為相對路徑，也可以為絕對路徑-->
<!-- alt 如果遇到圖片無法加載的情況，網(wǎng)頁上會(huì)展示 alt的 值 -->
<!-- width 和 height 表示 寬和高， 如果只設(shè)置一個(gè)， 那么另外一個(gè)就會(huì)跟著成比例縮放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">

a 標(biāo)簽

用a標(biāo)簽來制作超級鏈接

<!-- href 屬性 表示 其他頁面的鏈接，支持相對路徑和絕對路徑，還可以鏈接到其它網(wǎng)站 -->
<!--target 屬性表示 打開其他鏈接的方式-->
<!-- title 屬性表示 鏈接的標(biāo)題， 當(dāng)鼠標(biāo)移動(dòng)到鏈接上，會(huì)展示出來-->
<a href="http://www.baidu.com" target="blank" title="文字標(biāo)題">百度</a>






<!--也可以用a標(biāo)簽作為錨點(diǎn) 錨點(diǎn)可以是本頁面的錨點(diǎn)，也可以是其他頁面的錨點(diǎn)-->
<h1 id="title">頭部標(biāo)題</h1>
... 此處省略一些代碼
<a href="#title">返回標(biāo)題</a>




<!--下載鏈接，指向 doc， zip， zip等文件格式時(shí)，a標(biāo)簽將成為自動(dòng)下載鏈接-->
<a href="./download/halou.zip">發(fā)郵件</a>
<!-- mailto:前綴的鏈接是郵件鏈接，系統(tǒng)將自動(dòng)打開email相關(guān)軟件-->
<a href="mailto:halouworld@126.com">發(fā)郵件</a>
<!-- tel: 前綴鏈接是電話鏈接，系統(tǒng)將自動(dòng)打開撥號(hào)鍵-->
<a href="tel:11111111111">打開撥號(hào)鍵盤</a>

audio標(biāo)簽

audio標(biāo)簽用來插入音頻標(biāo)簽

<!--添加 controls 后才會(huì)顯示 播放控件-->
<!--常用音頻格式 mp3 和 ogg格式-->
<!--autoplay 自動(dòng)播放屬性-->
<!--loop 屬性表示循環(huán)播放-->
<audio controls src="./video/demo.mp3">
       您的瀏覽器不支持 audio標(biāo)簽，請升級
</audio>




<audio controls src="./video/demo.mp3" autoplay loop>
     您的瀏覽器不支持 audio標(biāo)簽，請升級
</audio>

video標(biāo)簽

video 標(biāo)簽用于插入一段視頻

<!--有的視頻不能播放 ，詳見 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 顯示視頻播放控件  -->
<!-- autoplay 自動(dòng)播放 -->
<!-- loop 循環(huán)播放 -->
<!-- 常見的 視頻格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
    您的瀏覽器不支持 video標(biāo)簽，請升級
</video>

其它區(qū)塊標(biāo)簽

以前的區(qū)塊標(biāo)簽只有div，現(xiàn)在為了更好的方便搜索引擎抓取網(wǎng)站，因此有了以下語義更加明確的區(qū)塊標(biāo)簽

其他的語義標(biāo)簽

• span 標(biāo)記文本標(biāo)記區(qū)域，沒有特殊效果，結(jié)合CSS使用

• b 標(biāo)簽 加粗文章（可以使用CSS實(shí)現(xiàn)同樣效果）

• u 加下?lián)Q線文字

• br 換行

• i 傾斜文字（可以使用CSS實(shí)現(xiàn)同樣效果）

• strong 代表特別重要的文字

• em 需要強(qiáng)調(diào)的文字，有一定的傾斜，也可以用其配置CSS做表情文字

• mark 高亮文字

• figure 和 figcaption 。figure - 一段獨(dú)立的內(nèi)容 figcaption- figure 內(nèi)部元素的說明性內(nèi)容

表單

表單用來收集信息并且可以完成和后端的數(shù)據(jù)傳輸

表單中大致可以分為三種標(biāo)簽

• form標(biāo)簽，標(biāo)識(shí)表單區(qū)域， 內(nèi)部的元素都可能被表單提取信息
• input 標(biāo)簽， 標(biāo)識(shí)輸入、點(diǎn)擊等需要和用戶交互的場景
• datalist 下拉框，支持搜索，通常和input一塊使用

一些表單的示例

<!--action 表示要提交到后端的網(wǎng)址-->
<!--method 表示表單提交的方式，通常有 get 、 post 、put、delete等-->


<form action="/save" meththo="post"></form>


<!--<form> 標(biāo)簽中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字，在沒任何輸入值的情況下，作為提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>


<!---單選按鈕，name相等，表示選擇了一個(gè)，另一個(gè)就不能選擇了-->
<!--checked 表示默認(rèn)被選中-->
<!-- value 屬性表示要提交到后端服務(wù)器的值-->
<input type="radio" name="radio_group" checked>
<input type="radio"  name="radio_group">




<label>
    <input type="radio" name="sex"> 男
</label>
<label> 
    <input type="radio" name="sex"> 女
</label>




<!--html4 中的標(biāo)簽 通過for 屬性 和 其他標(biāo)簽的id屬性進(jìn)行綁定-->


<input type="radio" name="sex" id="nan"> 
<label for="nan">男</label>


<input type="radio" name="sex"   id="nv">
<label for="nv">女</label>


<!--復(fù)選框 type="checkbox" 同一組的的復(fù)選框，name值應(yīng)該相同 ，復(fù)選框也有value值， 用于向服務(wù)器提交數(shù)據(jù)-->
<input type="checkbox" name="hobby" value="soccer" > 足球
<input type="checkbox" name="hobby" value="basket" > 籃球


<!--密碼框-->
<input type="password" placeholder="請輸入密碼">


<!-- 下拉菜單 -->
<select>
  <option value="alipay">支付寶</option>
  <option value="wxpay">微信支付</option>
</select>


<!--多文本框 rows 和  clos 分別用于設(shè)置 行數(shù) 和 列數(shù)-->
<textarea rows="3" cols="5"></textarea>


<!--三種按鈕 submit 提交按鈕  button 普通按鈕 可以簡寫為  <button></button> reset 按鈕 重置按鈕-->
<input type="button" value="普通按鈕">
    <input type="reset" value="重置按鈕"> 
    <input type="submit" value="提交表單">




<!--像 email 和 url 等格式，如果點(diǎn)擊提交按鈕，不符合格式，會(huì)有提示-->
<form>
    日期空間: <input type="date">  <br/>
    時(shí)間空間: <input type="time">  <br/>
    日期時(shí)間空間 <input type="datetime-local">  <br/>


    文件:<input type="file"> <br/>  <br/>
    數(shù)字控件: <input type="number"> <br/>
    拖拽條: <input type="range"> <br/>
    搜索框: <input type="search"> <br/>
    網(wǎng)址控件: <input type="url"> <br/>
    郵箱控件: <input type="email" >
    <input type="submit" value="提交">
</form>




<!-- datalist 備選項(xiàng)示例 -->
<input type="text" list="province">
<datalist id="province">
  <option value="陜西"></option>
  <option value="山西"></option>
  <option value="河北"></option>
  <option value="山東"></option>
</datalist>

表格

可以用html渲染表格

• table 標(biāo)簽表示表格

• tr 表示行
• td 表示單元格
• caption 表格的標(biāo)題，通常放在表格的第一行
• th 表示列標(biāo)題

<!--表格示例-->
<table border="1">
  <caption>我是標(biāo)題</caption>
  <tr>
      <th>第一列標(biāo)題</th>
      <th>第二列標(biāo)題</th>
  </tr>
  <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
  </tr>
  <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
  </tr>
</table>

• 單元格的合并, clospan 用來設(shè)置td 或者th的列跨度 ， rowspan屬性用來設(shè)置td或者th的行跨度

<!--跨列示例-->
<table border="1">
    <caption>我是標(biāo)題</caption>
    <tr>
        <th>第一列標(biāo)題</th>
        <th>第二列標(biāo)題</th>
    </tr>
    <tr>
        <td colspan="2">跨兩行</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>


<!--跨行示例-->
<table border="1">
        <caption>我是標(biāo)題</caption>
        <tr>
            <th>第一列標(biāo)題</th>
            <th>第二列標(biāo)題</th>
        </tr>
        <tr>
            <td rowspan="2">第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第二列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
        </tr>
  </table>

• 表格的其他標(biāo)簽 ， thead 定義表頭， tbody 定義表格的主題內(nèi)容， tfoot 標(biāo)簽定義表格底部，通常用來匯總等