整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
tml5新增input的form屬性，用于指向特定form表單的id，實現input無需放在form標簽之中，即可通過表單進行提交。
<FORM id=xinzeng>
…
</FORM>
<INPUT … form="xinzeng">
type新增屬性：
email、URL、date、time、month、week、number、range、color
input元素的新增屬性：
Autocomplete：自動完成功能.記錄用戶之前輸入的內容，并在下次輸入時自動提示完成輸入。
>>> 屬性值： on/off
>>> 可以在form表單上使用，對整張表單的所有控件進行自動完成的開關
也可以在input上使用，對特定輸入框進行修改。
>>> 絕大部分瀏覽器，默認開啟。
Autofocus：自動獲得焦點. autofocus="autofocus",只能設置input元素自動獲得焦點。
Form：所屬表單。通過form表單的id，確定此input輸入哪張表單。
Required：必填.required="required" 設置input必填，否則阻止提交。
Pattern：使用正則表達式驗證input的模式.
數字類型
跟數字強相關的類型，其中number、range在移動端開發時，會彈出數字鍵盤，而range是一個范圍滑動塊。
<input type='number'> <!--用于比較精確的純數字輸入類型-->
<input type='range'> <!--用于不是很精確的數字范圍-->
<input type='tel'> <!--用于電話號碼-->
日期和時間類型
web表單常見的字段就是日期和時間，html5以此來收集這類信息
<input type='time'>
<input type='date'>
<input type='month'>
<input type='week'>
<input type='datetime'>
<input type='datetime-local'>
其他類型 ：email、url、color、search
其中一些類型在不同的設備上都會有不同的顯示。
<input type='email'>
<input type='url'>
<input type='color'>
<input type='search'>
placeholder 占位符文本，以前我們用js來模擬，獲得焦點的時候，文本消失，失去焦點并且內容為空時，文本重現，現在html5自帶了這一項功能。
html結構：
<input id='search' type='text' placeholder='search your goods'>
如果想要修改placeholder中的文本樣式，那么我們只要給瀏覽器設置一些樣式即可，css結構：
::-webkit-input-placeholder{
color:red;
font-size:14px;
}
::-moz-placeholder{
color:red;
font-size:14px;
}
autofocus 自動聚焦 ,autofocus屬性可以讓表單在加載完成時，會有一個表單域被默認聚焦或者選中，但是盡量不要在一個頁面上在多個表單域上使用autofocus,在一些低版本瀏覽器上會默認聚焦最后一個含有autofocus的表單域，在大多數瀏覽器中會聚焦第一個含有autofocus的表單域，這會造成跨瀏覽器的混亂。還有我們通常用空格鍵來滾動頁面，如果頁面上有autofocus的表單域會阻止這一瀏覽器的默認行為。
autocomplete 自動完成，很多瀏覽器默認提供自動完成功能，幫助用戶輸入上次提交過的內容，autocomplete有兩個必備的條件才能夠工作，一是一定要有form元素，二個是表單域上必須要有name屬性和name屬性值。但是，有些時候我們為了保護隱私，需要避免自動完成這項功能，我們開啟和關閉這項功能，只需給它賦值on或者off ,如果不賦值，默認就是on,表示功能開啟。
用過Delphi的程序員，對Form這個詞應該比較熟悉。在Delphi中，Form被翻譯為“窗體、窗口”，作用是：為用戶提供界面，供用戶輸入信息，向用戶展示處理結果。
HTML5中也有Form，功能與Delphi中的Form差不多，用于接收用戶輸入，和服務器進行交互。不過HTML5中的Form，中文一般譯為“表單”。
Web前端，指瀏覽器上展示的HTML文件，以及HTML文件使用的CSS文件及JavaScript腳本。
Web后端，指運行在服務器上的，為Web前端提供服務的軟件，Web后端也常常被稱為Web服務器。
在HTML5中，Web前端與Web后端交互的流程一般如下：
（1）Web前端向Web后端發起HTTP請求；
（2）Web后端收到HTTP請求后，進行業務處理；
（3）Web后端向Web前端返回HTTP響應。
到目前為止，我們在HTML5中碰到的Web前端發起HTTP請求的方式有兩種：
第1種：HTML頁面通過<a>元素向用戶提供超級鏈接，用戶點擊該鏈接時，會向服務器發起請求；
第2種：HTML頁面通過表單為用戶提供輸入界面，用戶提交表單時，會向服務器發起請求。
HTTP請求有八種，對Web前端開發者來說，最常用的是GET請求和POST請求。
GET請求：向Web后端請求指定的頁面；GET請求攜帶的數據，以URL參數的形式提供；
POST請求：向Web后端提交數據，請求Web后端對數據進行處理；POST請求攜帶的數據，在請求消息體中提供。
在HTML5中，用戶點擊鏈接地址，Web前端向后端發起GET請求；
在HTML5中，用戶提交表單，Web前端可以向后端發起GET請求，也可以發起POST請求。
說明：由于目前沒有和后端服務器對接，為了便于對表單設計進行展示，下面的例子HTML文檔，都是用GET請求來提交數據。
<form>元素：表示表單；
<input>元素：表單中的輸入控件，輸入控件可以是文本框、單選框、復選框、按鈕等等；
<label>元素：表單中的標簽控件；
<button>元素：表單中的按鈕控件；
<select>與<option>元素：用于實現列表框和下拉菜單；
<textarea>元素：多行文本控件。
下面是一個可以提交文本框輸入的HTML文檔：
<!DOCTYPE html>
<html>
<head>
<title>form001</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>請輸入您的姓名：</label>
<input type="text" name="name" />
<br/>
<input type="submit"/>
</form>
</body>
</html>在瀏覽器中打開該HTML文檔時，展示效果如下：
我們可以在文本框中輸入信息，例如輸入tom：
當我們點擊“提交”按鈕后，瀏覽器顯示信息如下；
可以看到，數據被提交給process.html頁面，并且附帶了一個參數name，且值為我們輸入的tom。
下面是一個可以提交單選框被選信息的HTML文檔：
<!DOCTYPE html>
<html>
<head>
<title>form002</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>性別：</label>
<br/>
男：<input type="radio" name="gender" value="male" />
女：<input type="radio" name="gender" value="female" />
<br/><br/>
<label>國籍：</label>
<br/>
中國：<input type="radio" name="nationality" value="Chinese" /> <br/>
美國：<input type="radio" name="nationality" value="American" /> <br/>
日本：<input type="radio" name="nationality" value="Japanese" /> <br/>
英國：<input type="radio" name="nationality" value="English" /> <br/>
其它：<input type="radio" name="nationality" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>在瀏覽器中打開該HTML文檔時，顯示效果如下：
我們可以選擇性別和國籍，例如我們選擇“男”和“中國”：
當我們點擊“提交”按鈕后，瀏覽器顯示信息如下：
可以看到，我們選擇的信息被提交給process.html文件，并且附帶了gender參數的值為male，nationality參數的值為Chinese。
下面是一個可以提交復選框被選信息的HTML文檔；
<!DOCTYPE html>
<html>
<head>
<title>form003</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>請選擇您的業余愛好：</label>
<br/>
美術：<input type="checkbox" name="hobby" value="Art" /> <br/>
足球：<input type="checkbox" name="hobby" value="Football" /> <br/>
唱歌：<input type="checkbox" name="hobby" value="Singing" /> <br/>
廚藝：<input type="checkbox" name="hobby" value="Cook" /> <br/>
其它：<input type="checkbox" name="hobby" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>在瀏覽器中打開該HTML文檔時，顯示效果如下：
我們可以選擇自己的業余愛好，例如我們選擇足球、唱歌、廚藝：
當我們點擊“提交”按鈕后，瀏覽器顯示信息如下：
可以看到，我們選擇的信息被提交給process.html文件，并且附帶了三個hobby參數，其值分別為Football，Singing和Cook。
下面是一個可以提交下拉菜單被選信息的HTML文檔；
<!DOCTYPE html>
<html>
<head>
<title>form004</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>請選擇您的學歷：</label>
<br/>
<select name="education">
<option value="primary_school">小學</option>
<option value="junior_high_school">初中</option>
<option value="senior_high_school">高中</option>
<option value="college">大學</option>
</select>
<br/><br/>
<label>請選擇您的興趣愛好：</label>
<br/>
<select name="hobby" multiple="true">
<option value="Art">美術</option>
<option value="Football">足球</option>
<option value="Singing">唱歌</option>
<option value="Cook">廚藝</option>
<option value="Other">其它</option>
</select>
<br/><br/>
<input type="submit"/>
</form>
</body>
</html>在瀏覽器中打開該HTML文檔時，顯示效果如下：
我們可以單選我們的學歷，也可以通過按下Shift+鼠標鍵多選我們的興趣。例如我們選擇“初中”學歷，選擇“美術”和“廚藝”兩項愛好：
當我們點擊“提交”按鈕后，瀏覽器顯示信息如下：
可以看到，我們選擇的信息被提交給process.html文件，并且附帶了education參數和兩個hobby參數，education的值為junior_high_school，hobby的值為Art和Cook。
上面列舉了幾種控件的HTML5表單設計方法，其它的控件也大概差不多，把多個控件組合在同一個<form>元素中的方法也是相同的，這里就不再贅述了。
么是HTML5
官方概念：HTML5草案的前身名為Web Applications 1.0，是作為下一代互聯網標準,用于取代html4與xhtml1 的新一代標準版本,所以叫html5。它增加了新的標簽和屬性，加強了網頁的標準、語義化與web表現性能，同時還增加了本地數據庫等 Web 應用的功能。
廣義概念：HTML5代表瀏覽器端技術的一個發展階段。在這個階段，瀏覽器呈現技術得到了一個飛躍發展和廣泛支持，它包括：HTML5，CSS3，Javascript，API在內的一套技術組合
HTML 5發展時間表
由上面圖可知：現在的HTML5還不是一個最終統一的版本，所以說HTML5用在手機端的開發。
目前支持HTML5的瀏覽器
不同的瀏覽器顯示的效果可能不一樣。因為HTML5沒有一個統一的標準。（現在處在一個推廣階段），但是大部分是一樣的。
HTML5的特點
更簡單
標簽語義化
語法更寬松
多設備跨平臺
自適應網頁設計
從頭說起——文檔的聲明
Xhtml1.0的頁面架構
Html5的頁面架構
HTML5標簽的語義化
在以前的html中，盒子用div或span。
在html5中，標簽的最大變化是標簽都有了語義，以前的div和span都沒有語義，僅僅表示一個盒子。
<header> 頭標簽
<nav> 導航標簽
<aside> 側邊欄標簽
<article> 文章標簽
<footer> 頁腳
<section> 章節，頁眉，欄目
HTML5新增的表單三個屬性
1、required：必填屬性
2、placeholder：默認顯示內容
3、autofocus：自動獲取焦點
Html5中新增input標記的type屬性
| 屬性 | 描述 |
| 郵件 | |
| date | 日期 |
| url | 網址格式 |
| number | 數字 |
| range | 范圍 |
| color | 顏色 |
完整代碼
<form>
郵件：<input type="email" name="email"><br>
日期：<input type="date" name="mydate"><br>
網址：<input type="url"><br>
手機號：<input type="number"><br>
亮度：<input type="range" min="0" max="255"><br>
顏色：<input type="color"><br>
地址：
<select>
<optgroup label="北京">
<option>西城區</option>
<option>東城區</option>
</optgroup>
<optgroup label="天津">
<option>河西區</option>
<option>河東區</option>
</optgroup>
</select><br>
搜索車型：<input type="text" list="car">
<datalist id="car">
<option>奧迪</option>
<option>奧拓</option>
<option>大眾</option>
</datalist>
<input type="submit" value="提交">
</form>
Range調背景色
代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//當頁面準備完畢的時候
$(document).ready(function(e) {
$('input').change(function(e) {
var red=$('#red').val(); //得到紅色的值
var green=$('#green').val(); //得到綠色的值
var blue=$('#blue').val(); //得到藍色的值
var value=$(this).val(); //當前修改的值
$(this).next().html(value); //將值付給當前修改元素后面的span
$('body').css('background-color','rgb('+red+','+green+','+blue+')');
});
});
</script>
</head>
<body>
紅色：<input type="range" id="red" min="0" max="255" value="255"><span>255</span><br>
綠色：<input type="range" id="green" min="0" max="255" value="255"><span>255</span><br>
藍色：<input type="range" id="blue" min="0" max="255" value="255"><span>255</span>
</body>
</html>
音頻播放
第一種寫法
如果聲音的格式html5不支持，就顯示標記之間的提示信息
第二種寫法：
視頻播放
使用video標記來插入視頻 autoplay表示自動播放，controls表示顯示控制面板。
360音樂導航
完整代碼如下:
<style type="text/css">
#nav{
list-style-type:none; /*去掉無序列表前面的點*/
margin:50px auto 0px; /*上邊界50px,左右居中，下邊界為0*/
width:960px; /*整個導航的寬度*/
height:38px;
color:#333;
font-size:14px;
padding:0px; /*填充清0*/
overflow:hidden; /*超出尺寸的部分不顯示*/
}
#nav li{
width:105px;
height:36px;
float:left; /*所有的li從左到右排列*/
text-align:center; /*文字居中對齊*/
line-height:38px; /*設置行高，目的是讓文字垂直居中*/
border-top:#C9CBCE solid 1px;
border-left:#C9CBCE solid 1px;
border-bottom:#C9CBCE solid 1px;
cursor:pointer; /*光標移動到li上變成手形*/
}
#nav li:last-child{ /*#nav下的最后一個li*/
border-right:#C9CBCE solid 1px;
}
#nav .liclick{
border-top:#54B82A solid 2px;
border-bottom:none;
}
#nav span{
width:100%;
height:38px;
display:block; /*只有塊顯示標記才能設置寬度和高度*/
position:relative; /*相對定位，目的為了span可以移動*/
z-index:-1; /*設置span上下層的順序，讓它在文字的下面*/
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
//點擊li
$('#nav li').click(function(e) {
$('.liclick').removeClass('liclick');
$(this).addClass('liclick');
});
//每個li下面添加一個底色
var color=['#B9D329','#C0EBF7','#B9D329','#69BCF3','#79D9F3','#FA5F94','#ACD180','#FAB4CC','#FFAE5B'];
$('#nav li').append('<span>');
$('#nav span').each(function(index, element) {
$(this).css('background-color',color[index]);
});
//移動到li上的時候顏色色塊升起
$('#nav li').hover(function(){
$(this).children('span').animate({'top':-38},200);
//獲得當前li的索引編號
var index=$(this).index();
$('audio').get(index).play(); //播放第index個音樂
},function(){
$(this).children('span').animate({'top':0},200);
});
});
</script>
</head>
<body>
<ul id="nav">
<li>我的主頁</li>
<li>新聞頭條</li>
<li>電 視 劇</li>
<li>最新電影</li>
<li>小 游 戲</li>
<li>小說大全</li>
<li>旅游度假</li>
<li>今日團購</li>
<li>品牌特賣</li>
</ul>
<audio src="360music/m1.mp3"></audio>
<audio src="360music/m2.mp3"></audio>
<audio src="360music/m3.mp3"></audio>
<audio src="360music/m4.mp3"></audio>
<audio src="360music/m5.mp3"></audio>
<audio src="360music/m6.mp3"></audio>
<audio src="360music/m7.mp3"></audio>
<audio src="360music/m8.mp3"></audio>
<audio src="360music/m9.mp3"></audio>
</body>
相關例題：http://pan.baidu.com/s/1hsDGA8k 密碼：55ic
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
