整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
單屬性匯總：
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
格語法:
注意：顏色使用格式有三種：rgb(x,x,x) #xxxxxx colorname
<table width=""></table>指定表格的寬度大小(使用數字pixel或%)
<table border=""></table>設定表格邊框大小(使用數字pixel)
<table align=""></table>表格位置,置左,為默認值
align屬性:left(左對齊表格，默認值)、right(右對齊表格)、center(居中對齊表格)
<table bgcolor=""></table>設定表格的背景顏色
<table cellpadding=""></table>指定內容與網格線之間的間距(使用數字pixel或%)
<table cellspacing=""></table>指定網格線與網格線之間的距離(使用數字pixel或%)
<table border="1" cellspacing="0" cellpadding="0">
通常表格, 這兩個參數都設置為 0 。
<table rules="rows"></table>規定內側邊框的哪個部分是可見的。(兼容性差)
rules屬性:none 沒有線條。
groups 位于行組和列組之間的線條。
rows 位于行之間的線條。
cols 位于列之間的線條。
all 位于行和列之間的線條。
<table summary="Monthly savings for the Flintstones family"></table>
定義了表格內容的摘要：
表格結構：
在使用表格進行布局時, 可以將表格劃分為頭部、主體和頁腳, 具體如下所示：
<thead></thead>：用于定義表格的頭部, 必須位于<table></table>標記中, 一般包含網頁的logo和導航等頭部信息。
<tfoot></tfoot>：用于定義表格的頁腳, 位于<table></table>標記中<thead></thead>標記之后, 一般包含網頁底部的企業信息等。
<tbody></tbody>：用于定義表格的主體, 位于<table></table>標記中<tfoot></tfoot>標記之后, 一般包含網頁中除頭部和底部之外的其他內容。
注意：在沒有<tbody></tbody>比較的情況下, 瀏覽器會自動添加<tbody></tbody>標記。
<table bordercolor=""></table>設定表格邊框的顏色
<table cols=""></table>指定表格的欄數
<table height=""></table>指定表格的高度大小(使用數字)
<table background=""></table>背景圖片的URL=就是路徑網址(默認是repeat：水平和垂直方向重復)
<table bordercolordark=""></table>設定表格暗邊框的顏色
<table bordercolorlight=""></table>設定表格亮邊框的顏色
<tr align=""></tr> 定義表格行的內容對齊方式。
align屬性值:right、left、center、justify、char
<tr bgcolor=""></tr> 規定表格行的背景顏色。
<tr valign=""></tr> 規定表格行中內容的垂直對齊方式。
valign屬性值right、left、center、justify、char
<td colspan=""></td>指定儲存格合并欄的欄數(使用數字)
<td rowspan=""></td>指定儲存格合并列的列數(使用數字)
<td align=""></td> 調整表格字段之左右對齊
<td bgcolor=""></td> 設定表格字段之背景顏色
<td colspan="" rowspan=""></td> 表格字段的合并
<td valign=""></td> 調整表格字段之上下對齊
<td width=""></td> 調整表格字段寬度
<td nowrap="nowrap"></td> 規定表格單元格中的內容不換行(注意只有一個值:nowrap)
<caption></caption>為表格加上標題
<caption align="">設定表格標題位置
align屬性:left, center(默認值), right
<th></th> 定義表頭(粗體居中)
細表格邊框
<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>表格創建后瀏覽器會自動添加<tbody>標簽
TMl 的標簽可以分為單個標簽和成對標簽。
單個標簽：html4 規定單個標簽要有一個 / 表示結尾， html5 則不用
<!--單個標簽-->
<meta>
<!--成對標簽 -->
<div></div>以下是HTMl中常用的一些標簽
div 標簽 主要用來將相關的內容組合到一塊，就像菜市場把各個蔬菜分成不同種類區分擺放是一個道理。
div 是最常見也是比較重要的標簽，網頁布局中經常使用的一類標簽。通常布局被稱為 DIV + CSS 布局
<div>
div 就是一個分類的存儲箱子
</div>p標簽表示段落， 在網頁文字中應用的比較多
<!--段落和段落間會換行-->
<p>第一段</p>
<p>第二段</p>h標簽分為六個
標簽 | 語義 |
h1 | 一級標題 |
h2 | 二級標題 |
h3 | 三級標題 |
h4 | 四級標題 |
h5 | 五級標題 |
h6 | 六級標題 |
引用標題標簽后，字體會加粗、字號一會變大
無序標簽是沒有顯示順序的列表，無序列表前面通常會有一個“小點”， 這個小點可以用type屬性控制。其中有三個展示方式（不過這種方式比較固定，不夠靈活和美觀， 已經被CSS的效果代替），如下：
值（type屬性） | 描述 |
disc | 默認值，實心圓 |
circle | 空心圓 |
square | 實心方框 |
舉例:
<!--ul標簽內部只能放置li標簽-->
<!--li標簽內部可以放其他的標簽-->
<ul type=">
<li>無序列表元素1</li> <!--列表項-->
<li>無序列表元素2</li>
</ul>
實心圓
<ul type="disc">
<li>西紅柿</li>
<li>黃瓜</li>
</ul>
空心圓
<ul type="circle">
<li>西紅柿</li>
<li>黃瓜</li>
</ul>
實心方框
<ul type="square">
<li>西紅柿</li>
<li>黃瓜</li>
</ul>type屬性值 | 意義 |
a | 小寫英文字母編號 |
A | 大寫英文字母編號 |
i | 小寫羅馬數字編號 |
I | 大寫羅馬數字編號 |
1 | 數字編號（默認） |
有序列表, 從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標簽表示自定義列表
dt表示數據項，dd表示數據定義， dd是dt標簽的解釋
<dl>
<dt>西紅柿</dt>
<dd>紅、酸</dd>
<dt>黃瓜</dt>
<dd>綠、澀</dd>
</dl>img 用來插入圖片，包括但不限于以下圖片格式
圖片格式 | 備注 |
.jpg、.jpeg | 通常用于照片，是一種有損壓縮格式 |
.png | 通常用于logo、背景，支持透明和半透明。便攜式網絡圖像 |
.svg | 矢量圖片 |
<!-- src(source)屬性， 圖片地址，可以為相對路徑，也可以為絕對路徑-->
<!-- alt 如果遇到圖片無法加載的情況，網頁上會展示 alt的 值 -->
<!-- width 和 height 表示 寬和高， 如果只設置一個， 那么另外一個就會跟著成比例縮放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">用a標簽來制作超級鏈接
<!-- href 屬性 表示 其他頁面的鏈接，支持相對路徑和絕對路徑，還可以鏈接到其它網站 -->
<!--target 屬性表示 打開其他鏈接的方式-->
<!-- title 屬性表示 鏈接的標題， 當鼠標移動到鏈接上，會展示出來-->
<a href="http://www.baidu.com" target="blank" title="文字標題">百度</a>
<!--也可以用a標簽作為錨點 錨點可以是本頁面的錨點，也可以是其他頁面的錨點-->
<h1 id="title">頭部標題</h1>
... 此處省略一些代碼
<a href="#title">返回標題</a>
<!--下載鏈接，指向 doc， zip， zip等文件格式時，a標簽將成為自動下載鏈接-->
<a href="./download/halou.zip">發郵件</a>
<!-- mailto:前綴的鏈接是郵件鏈接，系統將自動打開email相關軟件-->
<a href="mailto:halouworld@126.com">發郵件</a>
<!-- tel: 前綴鏈接是電話鏈接，系統將自動打開撥號鍵-->
<a href="tel:11111111111">打開撥號鍵盤</a>audio標簽用來插入音頻標簽
<!--添加 controls 后才會顯示 播放控件-->
<!--常用音頻格式 mp3 和 ogg格式-->
<!--autoplay 自動播放屬性-->
<!--loop 屬性表示循環播放-->
<audio controls src="./video/demo.mp3">
您的瀏覽器不支持 audio標簽，請升級
</audio>
<audio controls src="./video/demo.mp3" autoplay loop>
您的瀏覽器不支持 audio標簽，請升級
</audio>video 標簽用于插入一段視頻
<!--有的視頻不能播放 ，詳見 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 顯示視頻播放控件 -->
<!-- autoplay 自動播放 -->
<!-- loop 循環播放 -->
<!-- 常見的 視頻格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
您的瀏覽器不支持 video標簽，請升級
</video>以前的區塊標簽只有div，現在為了更好的方便搜索引擎抓取網站，因此有了以下語義更加明確的區塊標簽
<section> | 文檔的區域，比div語義上還要大一點 |
<header> | 頁頭 |
<main> | 網頁核心部分 |
<footer> | 頁腳 |
表單用來收集信息并且可以完成和后端的數據傳輸
表單中大致可以分為三種標簽
一些表單的示例
<!--action 表示要提交到后端的網址-->
<!--method 表示表單提交的方式，通常有 get 、 post 、put、delete等-->
<form action="/save" meththo="post"></form>
<!--<form> 標簽中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字，在沒任何輸入值的情況下，作為提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>
<!---單選按鈕，name相等，表示選擇了一個，另一個就不能選擇了-->
<!--checked 表示默認被選中-->
<!-- value 屬性表示要提交到后端服務器的值-->
<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 中的標簽 通過for 屬性 和 其他標簽的id屬性進行綁定-->
<input type="radio" name="sex" id="nan">
<label for="nan">男</label>
<input type="radio" name="sex" id="nv">
<label for="nv">女</label>
<!--復選框 type="checkbox" 同一組的的復選框，name值應該相同 ，復選框也有value值， 用于向服務器提交數據-->
<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 分別用于設置 行數 和 列數-->
<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 等格式，如果點擊提交按鈕，不符合格式，會有提示-->
<form>
日期空間: <input type="date"> <br/>
時間空間: <input type="time"> <br/>
日期時間空間 <input type="datetime-local"> <br/>
文件:<input type="file"> <br/> <br/>
數字控件: <input type="number"> <br/>
拖拽條: <input type="range"> <br/>
搜索框: <input type="search"> <br/>
網址控件: <input type="url"> <br/>
郵箱控件: <input type="email" >
<input type="submit" value="提交">
</form>
<!-- datalist 備選項示例 -->
<input type="text" list="province">
<datalist id="province">
<option value="陜西"></option>
<option value="山西"></option>
<option value="河北"></option>
<option value="山東"></option>
</datalist>可以用html渲染表格
<!--表格示例-->
<table border="1">
<caption>我是標題</caption>
<tr>
<th>第一列標題</th>
<th>第二列標題</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table><!--跨列示例-->
<table border="1">
<caption>我是標題</caption>
<tr>
<th>第一列標題</th>
<th>第二列標題</th>
</tr>
<tr>
<td colspan="2">跨兩行</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<!--跨行示例-->
<table border="1">
<caption>我是標題</caption>
<tr>
<th>第一列標題</th>
<th>第二列標題</th>
</tr>
<tr>
<td rowspan="2">第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>*請認真填寫需求信息，我們會在24小時內與您取得聯系。
