整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
單屬性匯總：
1 name屬性
服務器會識別不同的name屬性，并根據name屬性來捕獲不同元素內的數據。
2 value屬性
value 屬性為 input 元素設定值。
對于不同的輸入類型，value 屬性的用法也不同：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關聯的值
注釋：<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 屬性。
注釋：value 屬性無法與 <input type="file"> 一同使用。
注意：單選框和復選框傳遞數據到數據庫時一定要設置value, 否則插入數據失敗;
3 type屬性
它決定了<input>標簽在頁面中的表現樣式和功能
text 文本框
password 密碼框
radio 單選框
checkbox 復選框
file 文件域
hidden 隱藏域
image 圖像域
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
4 size屬性
列表框中size屬性用來設置列表框顯示的行數；
文本框和密碼框會使用size屬性設置域的顯示寬度；
5 disabled屬性
定義disabled屬性可以禁止使用該元素；
無法將數據提交到服務器處理;
6 readonly屬性
常用在輸入性表單對象中(如文本框、密碼框、文本區域)，用來禁止輸入任何信息；
可以將數據提交到服務器處理;
7 checked屬性
它與disabled屬性一樣沒有屬性值，常用在選擇性表單對象中，定義對象處于被選中狀態(如單選按鈕和復選框)
但在列表框或者下拉式菜單中，為了表示被選中的項目，可使用selected屬性；
7 placeholder屬性
規定幫助用戶填寫輸入字段的提示。
表單對象：
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屬性 默認值：輸入的文本會自動換行。當數據提交到服務器被處理時, 換行符不會隨輸入的文本一同被提交到服務器；
off(也可寫成wrap)：不自動換行, 當輸入的內容超出文本區域右邊界時, 文本將向左滾動, 并顯示滾動條。
如果希望換行，必須手動輸入回車鍵才能將插入點移到下一行；
virtual：文本能夠自動換行, 當數據提交到服務器被處理時, 換行符不會隨輸入文本一同提交到服務器；(默認值)
physical：文本能夠自動換行, 當數據提交到服務器被處理時, 換行符將會隨輸入的文本一同被提交到服務器進行處理；
關于如何限制文本域輸入字符串的長度 見javascript|語法|設置文本框
HTML5中wrap中屬性值修改為hard|soft
soft 當在表單中提交時, textarea 中的文本不換行, 默認值。
hard 當在表單中提交時, textarea 中的文本換行(包含換行符)。
當使用 "hard" 時, 必須規定 cols 屬性
4 單選按鈕
單選按鈕傳遞的信息簡單，如1或0、True或False。
<input type="radio" name="radio" value="1"/>選項1
<input type="radio" name="radio" value="2"/>選項2
<input type="radio" name="radio" value="3"/>選項3多個單選按鈕通過定義相同的name屬性, 以實現捆綁在一起；
必需的屬性:type name value
5 復選框
<input type="checkbox" name="checkbox[]" value="1"/>選項2
<input type="checkbox" name="checkbox[]" value="2"/>選項2
<input type="checkbox" name="checkbox[]" value="3"/>選項2通過設置相同的name屬性可以把多個復選框捆綁在一起；
必需的屬性: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元素中不設置size屬性,則該元素會顯示為下拉菜單樣式
<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屬性指定列表框的高度(顯示幾個選項);
還可以通過mutiple屬性定義列表框是否為多選(默認是單選)；
通過<optgroup>標簽把相關的選項組合在一起：
<select>
<optgroup label="PHP版塊">
<option value ="resource">資源共享</option>
<option value ="study">學習交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
<optgroup label="IOS版塊">
<option value ="resource">資源共享</option>
<option value ="study">學習交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
</select>注意：其中PHP版塊和IOS版塊不能被選中
所有主流瀏覽器都支持 <optgroup> 標簽。
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來使用;
關于控制表單提交按鈕見: 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標簽
在 button 元素內部，您可以放置內容，比如文本或圖像。這是該元素與使用 input 元素創建的按鈕之間的不同之處。
<button type="button" name="button" value="按鈕"><img src="hw001.jpeg"/></button>普通按鈕<button type="button">普通按鈕</button> 它一般是配合javascript來使用, 默認值
提交按鈕<button type="submit">提交按鈕</button>
重置按鈕<button type="reset">重置按鈕</button>
提交表單
enctype屬性
該屬性包含兩種方式:
application/x-www-form-urlencoded 是默認編碼類型
multipart/form-data
multipart/form-data編碼方式可以用來傳輸二進制數據或者非ASCII字符的文本(如圖片、不同格式的文件等),上傳文件必須使用此屬性
multipart: 多部件的
multiple: 多重的
text/plain
text/plain將表單屬性發送到電子郵箱時，enctype的值必須設為"text/plain",否則將會出現亂碼。
發送電子郵件的表單程序
<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="" 表示傳遞到當前腳本文件
target 指定提交到哪一個窗口
_blank 打開新窗口
_self 當前的窗口,默認值
_parent 上一層窗口
_top 最上層窗口
框架名稱 指定指定窗口或框架名稱
label標簽
作用: 擴大觸控區域, 為了提升用戶體驗, 點擊文字也能選中表單
<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 綁定到另外一個元素。請把"for"屬性的值設置為相關元素的 id 屬性的值。
PHP實例：創建發送郵件信息的html表單
代碼：
<html>
<head>
<title>簡單郵件發送表單</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>郵件內容</b></td>
<td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
</tr>
<tr><td colspan="2">
<input type="submit" name="Submit" value="發送">
</td>
</tr>
</table>
</form>
</body>
</html>simpleEmail.php
TML是一種用來描述網頁的標記性語言。學習HTML可能并不難，主要是要記一些HTML標簽和標簽代表的含義。下面PHP程序員雷雪松根據使用的情況，整理出平時常用的HTML標簽。
HTML基礎之HTML常用標簽-PHP程序員雷雪松的博客
<!--<!DOCTYPE> 是HTML5聲明，<!DOCTYPE> 必須是 HTML 文檔的第一行，位于 <html> 標簽之前。<!DOCTYPE>是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。-->
<!DOCTYPE html>
<html>
<!-- head標簽是所有頭部元素的容器。head標簽內的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標簽都可以添加到 head 部分：title、base、link、meta、script 以及style。頭部的內容不會顯示在瀏覽器的。 -->
<head>
<!-- 設置字符集，如果字符集不對，可能導致亂碼。一般建議utf-8國際編碼 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<!-- SEO相關標簽，title定義文檔的標題,百度建議一般不要超過32位,meta定義頁面關鍵詞和頁面的描述-->
<title>網頁標題</title>
<meta name="keywords" content="PHP程序員,技術博客,個人博客,雷雪松" />
<meta name="description" content="PHP程序員，雷雪松（Raykaeso）的博客是一個優秀的個人技術博客。PHP程序員雷雪松的博客記錄了Linux學習，PHP開發與編程，Web前端開發，MySQL學習和教程，NoSQL數據庫教程以及個人的人生經歷和觀點。" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<!-- 正文部分，所有在瀏覽器上可見的內容必須寫在body標簽內部 -->
<body>
</body>
</html>
a、布局標簽
div標簽定義文檔中的分區或節（division/section），可以把文檔分割為獨立的、不同的部分，主要用于布局。
aside標簽的內容可用作文章的側欄，<span style="color: #ff0000;">html5新增標簽</span>。
header標簽定義頁面的頭部（介紹信息），<span style="color: #ff0000;">html5新增標簽</span>。
section標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分，<span style="color: #ff0000;">html5新增標簽</span>。
footer 標簽定義文檔或節的頁腳，通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等等，<span style="color: #ff0000;">html5新增標簽</span>。
article標簽規定文章獨立的其他內容，比如：標題、內容、評論，<span style="color: #ff0000;">html5新增標簽</span>。
b、文本標簽
h1-h6標簽可定義標題
p標簽定義段落
b/strong標簽加粗
em標簽來表示強調的文本，斜體
strong標簽表示重要文本
u標簽下劃線
s標簽刪除線
br標簽表示回車換行
hr標簽表示水平線
span標簽被用來組合文檔中的行內元素。
blockquote標簽表示塊引用
pre標簽可定義預格式化的文本，保持原有格式的一種標簽。
sub標簽下標，
sup>標簽上標
表示一個空格
©表示版權符
<表示<
>表示>
c、a標簽定義超鏈接，指定頁面間的跳轉。鏈接可以指向外部鏈接或者頁面內部id錨點，可以在當前頁面打開，新開窗口。
<a href="指向的鏈接地址或者網址#ID名" target="_blank|_self|_top|_parent">百度</a>
d、多媒體標簽
img標簽主要在網頁中插入圖像，可以定義圖片替換文本、顯示寬度和高度、是否帶邊框，建議等比例設置，否則圖像會變形。
<img src="圖片地址" alt="替換文本，圖片打不開的時候顯示" width="圖片寬度" height="高度" border="0" />
audio標簽定義聲音，比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標簽</span>。
<audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio>
video標簽定義視頻，比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標簽</span>。
<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標簽。</video>
e、序列化標簽
ul和li無序列表標簽
<ul>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ul>
ol和li有序列表標簽，可以使用type屬性規定有序列表符號的類型。1 按數字有序排列，為默認值，（1、2、3、4）；a 按小寫字母有序排列，（a、b、c、d）；A 按字母大寫有序排列，（A、B、C、D）。i 按小寫羅馬字母有序，（i, ii, iii, iv）；I 按小寫羅馬字母有序，（I, II, III, IV）。
<ol>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ol>
dl標簽定義了定義列表（definition list），dl標簽用于結合 dt（定義列表中的項目）和 dd（描述列表中的項目）。
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
</dl>
f、表格標簽
table標簽和tr標簽，th標簽和td標簽，合并單元格。
<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">
<tr>
<th>標題</th>
<th>標題</th>
</tr>
<tr>
<!-- 合并橫向單元格 -->
<td colspan="2" nowrap="nowrap">&nbsp;</td>
</tr>
<tr>
<td></td>
<!-- 合并縱向單元格 -->
<td rowspan="2"> </td>
</tr>
<tr>
<td height="16"> </td>
</tr>
</table>
g、表單標簽
form標簽定義提交方式、提交地址、表單字符集以及如何對其進行編碼，需要提交的表單一定要放在form標簽內。
<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>
input標簽用于搜集用戶信息
<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />
密碼，輸入的字符會被掩碼（顯示為星號或原點）
<input name="pwd" type="password" maxlength="5" size="100" value="" />
文件類型的表單，上傳文件時，form表單一定要設置為enctype="multipart/form-data"
<input type="file" name="file" />
隱藏表單
<input type="hidden" name="country" value="China" />
提交
<input type="submit" name="Submit" value="提交" disabled="disabled" />
重置
<input type="reset" name="Submit2" value="重置" />
radio單選
<input name="sex" type="radio" value="1" />男
<input name="sex" type="radio" value="2" checked="checked" />女
checkbox多選
<input name="skill" type="checkbox" value="1" checked="checked" />PHP
<input name="skill" type="checkbox" value="2" />前端
<input name="skill" type="checkbox" value="2" />數據庫
<span style="color: #ff0000;">注：checked="checked"可以簡寫成checked</span>
label標簽為input元素定義標注，如果您點擊label元素文本，就會觸發此input控件。
textarea標簽，設置文本區內的可見行數和寬度
<textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>
button標簽定義一個按鈕
提交按鈕
<button type="submit" value="提交">提交</button>
重置按鈕
<button type="reset" value="重置">重置</button>
select標簽和option標簽下拉列表
單選菜單列表框
<select name="user">
<option value="1">ray</option>
<option value="2" selected="selected">raykaeso</option>
</select>
多選列表下拉框，shift加鼠標單擊，可以連續選擇多個選擇，CTRL+鼠標點擊，可以點擊多個。
<select name="user" size="10" multiple="multiple">
<option value="1">雷雪松</option>
<option value="2" selected="selected">ray</option>
<option value="3">raykaeso</option>
</select>
注:selected="selected"可簡寫成selected，表示選中
a、HTML標簽和屬性是不區分大小寫的，建議HTML標簽和屬性都小寫，屬性值必須用雙引號包圍。
b、HTML標簽都是以開始標簽起始，以結束標簽終止。大部分HTML標簽都是成對出現的，稱為雙標簽，比如：p標簽、div標簽，也有的HTML標簽在開始標簽中結束的標簽，稱為單標簽，比如：hr標簽、br標簽。大多數 HTML 元素可擁有屬性，文本內容都是寫在開始標簽與結束標簽之間。
c、HTML標簽之間盡量縮進與換行，每行代碼不要過長，方便閱讀和維護。
d、HTML標簽使用必須符合標簽嵌套規則。禁止a標簽嵌套a標簽，p標簽嵌套div標簽。
e、建議不使用HTML已經廢棄的或者不贊成使用的標簽，少使用table布局、iframe框架嵌套以及flash播放器。
來源：PHP程序員雷雪松的博客 -HTML基礎之HTML常用標簽（http://www.leixuesong.cn/2045）
本文主要記錄常用的html標簽使用說明，用起來的時候偶爾查查。
標簽 | 英文全拼 | 作用 | 特點 |
?<html></html>?? | html | 網頁的根標簽 | 所有的標簽都要寫在這一對根標簽里面 |
??<head></head>?? | head | 網頁的頭標簽 | 包括完檔的屬性和信息 |
??<body></body>?? | body | 網頁的主題 | 包含文檔的所有內容 |
??<div></div>?? | division | 定義一個區域 | 瀏覽器通常會在??<div>??前后放置一個換行符 |
??<!-- 注釋 -->?? | - | 注釋 | 單標簽 |
??<br>或<br/>?? | break | 換行 | 單標簽，不會在其前后創建空白行 |
??<hr>或<hr/>?? | horizontal rule | 添加水平線 | 單標簽 |
??<img src="">?? | image | 添加圖片 | 單標簽 |
??<embed src="">?? | embed | 嵌入外部應用 | 單標簽 |
??<meta>?? | meta | 提供有關頁面的元信息 | 單標簽，??<meta>???標簽通常位于??<head>??區域內 |
??<link>?? | link | 定義文檔與外部資源的關系 | 單標簽，??<link>???標簽只能存在于??<head>??區域內，不過它可出現任何次數。 |
??<p></p>?? | paragraph | 定義段落 | 自動在其前后創建空白行 |
??<h1> to <h6>?? | Header 1 to Header 6 | 定義標題 | h1在一個頁面里只能出現一次 |
??<strong></strong>?? | strong | 文本加粗 | 加粗標記該文本 |
??<b></b>?? | bold | 文本加粗 | 加粗顯示文本，不推薦使用 |
??<em></em>?? | emphasize | 文本傾斜 | 傾斜標記文本 |
??<i></i>?? | italic | 文本傾斜 | 傾斜顯示文本，不推薦使用 |
??<del></del>?? | delete | 文本添加刪除線 | - |
??<s></s>?? | strike | 文本添加刪除線 | 不推薦使用 |
??<ins></ins>?? | insert | 文本添加下劃線 | - |
??<u></u>?? | underline | 文本添加下劃線 | 不推薦使用 |
??<a href="">填寫內容</a>?? | anchor | 添加超鏈接 | 最好使用CSS來改變鏈接的樣式 |
??<ul></ul>?? | unordered list | 定義無序列表 | 通常與??<li>??標簽一起使用 |
??<ol></ol>?? | ordered list | 定義有序列表 | 通常與??<li>??標簽一起使用 |
??<li></li>?? | list item | 創建列表項 | 可與各種列表定義標簽一起使用 |
??<dl></dl>?? | definition list | 定義描述列表 | 通常與??<dt>???和??<dd>??一起使用 |
??<dt></dt>?? | definition term | 定義條目 | 定義描述列表的項目 |
??<dd></dd>?? | definition description | 定義描述 | 對描述列表中的項目進行描述 |
??<table></table>?? | table | 定義HTML表格 | 盡可能通過樣式改變表格外觀 |
??<tr></tr>?? | table row | 定義表格的行 | 一個??<tr>???標簽包含一個或多個??<th>???或??<td>??標簽 |
??<th></th>?? | table headline | 定義表格每一列的標題 | 該標簽的文本通常呈現為粗體且居中 |
??<td></td>?? | table data | 定義表格中的單元格數據 | 該標簽的文本呈現為普通且左對齊 |
??<caption>表格標題</caption>?? | caption | 定義整個表格的標題 | ??<caption>???標簽必須直接放在??<table>??標簽后 |
??<input type="">?? | input | 定義輸入控件 | 輸入字段可通過多種方式改變，取決于type屬性 |
??select?? | select | 定義下拉列表 | ??<select>???中的??<option>??標簽定義了列表中的可用選項 |
??<option></option>?? | option | 定義下拉列表中的可用項 | ??<option>??標簽不可自由定義寬高 |
??<optgroup></optgroup>?? | options group | 定義選項組 | ??<optgroup>??標簽用于把相關的選項組合在一起 |
??<textarea></textarea>?? | textarea | 定義多行的文本輸入控件 | 文本的默認字體是等寬字體 |
??<form></form>?? | form | 定義表單 | ??<form>??可以包含多個元素 |
??<fieldset></fieldset>?? | field set | 定義圍繞表單中元素的邊框 | ??<legend>???為??<fieldset>??定義標題 |
??<legend></legend>?? | legend | 為??<fieldset>??定義標題 | ??<legend>??通過css設定樣式 |
??<progress></progress>?? | progress | 定義運行中的任務進度 | ??<progress>???是HTML5中的新標簽，??<progress>??標簽不適合用來表示度量衡 |
??<meter></meter>?? | meter | 度量衡 | ??<meter>???是HTML5的新標簽，??<meter>??標簽不適合用來表示進度條 |
??<audio></audio>?? | audio | 添加音頻 | ??<audio>??標簽是HTML5的新標簽 |
??<video></video>?? | video | 添加視頻 | ??<video>??標簽是HTML5的新標簽 |
??<source>?? | source | 定義媒介資源 | ??<source>??標簽是HTML5中的新標簽 |
普通用法
錨點鏈接
錨點鏈接通過點擊超鏈接，自動跳轉到我們設置錨點的位置，類似于word的目錄導航。建立錨點的元素必須要有id或name屬性，最好兩個都有。這里只跳轉本頁面元素，其他頁面跳轉自行搜索。
具體做法如下：
示例如下。為了顯示效果，通過使用lorem自動生成隨機文本（具體使用方法搜索，一般直接輸入就行），lorem*50表示重復lorem15次。
<a href="#id2">a</a>
<p id="id1">
(lorem*15)
</p>
(lorem*15)
<p id="id2">
(lorem*15)
</p>超鏈接全局設置
在頁面head中寫入代碼可以設置超鏈接的全局跳轉設置
<head>
<!-- 讓頁面所有的超鏈接新頁面打開 -->
<base target="_blank">
</head>charset編碼
name
網頁自動跳轉
無序列表
無序列表使用粗體圓點進行標記。簡單示例如下。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
...
</ul>有序列表
有序列表使用數字進行標記，我們可以通過整數值start指定列表編號的起始值。簡單示例如下。
<ol start="2">
<li>a</li>
<li>b</li>
<li>c</li>
...
</ol>描述列表
通過描述列表自定義列表，列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡單示例如下。
<dl>
<dt>A</dt> <!-- 小標題 -->
<dd>A1</dd> <!-- 解釋標題 -->
<dd>A2</dd> <!-- 解釋標題 -->
<dt>B</dt> <!-- 小標題 -->
<dd>B1</dd> <!-- 解釋標題 -->
<dd>B2</dd> <!-- 解釋標題 -->
</dl>基礎表格
簡單示例如下。
<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格標題</caption> <!-- 定義表格標題 -->
<tr>
<!-- 定義表格的行 -->
<td>A1</td> <!-- 定義表格該行第一列中的數據 -->
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<!-- 定義表格的行 -->
<th>A</th> <!-- 定義表格每一列的標題 -->
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
</table>單元格合并
簡單示例如下。
<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格標題</strong></caption> <!-- 定義表格標題 -->
<tr height="100">
<!-- 定義表格的行 -->
<td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
<td>B1</td>
</tr>
<tr height="100">
<td>A2</td>
<td>B2</td>
<td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
</tr>
<tr height="100">
<td>A3</td>
<td>B3</td>
</tr>
</table>對于??<input>??不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。
文本輸入框
簡單示例如下。
<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">密碼輸入框
簡單示例如下。
<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">單選框
示例一，兩個單選框都可以被選中
<div>
<input type="radio" name="man" checked="checked">男
</div>
<div>
<input type="radio" name="woman">女
</div>示例二，兩個單選框只能有一個被選中
<div>
<input type="radio" name="gender" checked="checked">男
</div>
<div>
<input type="radio" name="gender">女
</div>下拉列表
??<select>??
??<optgroup>??
??<option>??
示例一，單選下拉列表
<select>
<option value="a">a</option>
<option value="b">b</option>
<option value="c" selected='selected'>c</option> <!-- 默認選中 -->
</select>示例二，帶組合的單選下拉列表
<select>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1">b1</option>
<option value="b2">b2</option>
</optgroup>
</select>示例三，帶組合的多選下拉列表
<select multiple=”multiple”>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1" selected='selected'>b1</option>
<option value="b2">b2</option>
</optgroup>
</select>多選框
簡單示例如下。
<input type="checkbox" checked="checked">A
<input type="checkbox">B文本框
簡單示例如下。
<textarea cols="5" rows="2" placeholder="text"></textarea>文本上傳控件
簡單示例如下。
<input type="file" accept="image/gif, image/jpeg"/>其他類型按鈕
<input type="submit">文件提交按鈕
<input type="button" value="">普通按鈕
<input type="image" src="">圖片按鈕
<input type="reset">重置按鈕
<input type="url">網址控件
<input type="date">日期控件
<input type="time">時間控件
<!--email提供了郵箱的完整驗證，必須包含@和后綴，如果不滿足驗證，會阻止表單提交-->
<input type="email">郵件控件
<input type="number" step="3">數字控件
<input type="range" step="100">滑塊控件
<input type="color">顏色控件表單
示例一，普通表單
<form>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>示例二，帶分組信息表單
<form>
<fieldset>
<legend>Personalia:</legend>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</fieldset>
First nameA: <input type="text" name="fname"><br>
Last nameB: <input type="text" name="lname"><br>
</form>??<progress>???與??<meter>??主要區別和用法見??HTML5 progress和meter控件??
??<progress>??
簡單示例如下。
<progress value="60" max="100"></progress>??<meter>??
簡單示例如下
<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>??<audio>??
簡單示例如下
<audio src="demo.mp3" controls autoplay></audio>??<video>??
簡單示例如下
<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>??<source>??
簡單示例如下
<video controls>
<source src="demo.mp3" type="audio/mp3">
<source src="demo.mp4" type="video/mp4">
您的瀏覽器不支持video元素。
</video>??HTML特殊字符編碼對照表??
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
