在HTML5中锋恬，有不少新的富含語義的元素，可以向?yàn)g覽器和開發(fā)人員傳達(dá)元素的用途编丘。在做Html5開發(fā)時(shí)開發(fā)工具有很多：dw , sublime , Editplus ...這里推薦用sublime因?yàn)榻缑姹容^整潔与学，提示比較清晰，是專屬的文本開發(fā)工具嘉抓。
下面是HTML5的一部分新的布局元素：
??article
??aside
??figcaption
??figure
??footer
??header
??hgroup
??mark
??nav
??section
??time
header和footer的作用不言自明索守，article是創(chuàng)建一塊文章區(qū)域，aside和section是創(chuàng)建一塊區(qū)域抑片，aside元素用來安置附帶的內(nèi)容卵佛，nav將創(chuàng)造一個(gè)導(dǎo)航條或者菜單條。用mark元素將重要文本高亮顯示或標(biāo)記出來敞斋，如果要在內(nèi)容中插入一張圖（圖像截汪、圖表、照片和代碼片段等）植捎，可以使用figure(它與布局無關(guān)衙解，可以去/留)元素，figcaption元素能為圖加上標(biāo)題焰枢；time可以專門用來存放時(shí)間蚓峦。例：
[html]view plaincopy
Article?#1
This?is?the?first?article.??This?ishighlighted.
Article?#2
This?is?the?second?article.??These?articles?could?be?blog?posts,?etc.
智能表單設(shè)計(jì)：
Html5的優(yōu)點(diǎn)體現(xiàn)在表單設(shè)計(jì)客戶端校驗(yàn)上，能避免繁瑣的js操作：
—比如自動(dòng)校驗(yàn)輸入的是否為email:
[html]view plaincopy
E-mail:
—輸入數(shù)字范圍限定：
point:
type="number" name="points" min="1" max="10">
效果：
—選擇一個(gè)范圍內(nèi)的數(shù)字：
效果：
——時(shí)間選擇Input ?type— Data Pickers济锄，時(shí)間選擇避免了大量的js腳本
-date:selects date暑椰，month and year
-month: selects month and year
-week : selects week and year
-time : selects time(hour and minute)
-datetime : selects time，date, month,and year (UTC time)
-datetime —local : selects time, date, month ?and year (local time)
——選擇一種顏色荐绝，以RGB方式記錄顯示：
color:
這個(gè)效果沒有展示出來一汽，應(yīng)該是瀏覽器不支持，注意選擇瀏覽器上述幾個(gè)效果都可以很泊。
Form的新屬性：
—Autofocus
頁面加載后自動(dòng)獲得焦點(diǎn)角虫。
—placeholder可指定文本框的顯示形式
E-mail:
——required,當(dāng)頁面失去焦點(diǎn)時(shí)沾谓，提示此處為必填項(xiàng)
還有些新的屬性：
顯示圖標(biāo)界面也是Html5的一大亮點(diǎn)：如meter可以顯示進(jìn)度委造，progress可以顯示進(jìn)度條
60%
還有加密傳輸Keygen:（某個(gè)元素的值在傳輸過程中是被加密的）
username:
Encryption:高級中級
加密前：file:///C:/Users/Administrator/Desktop/1.html?user_name=yao
加密之后：file:///C:/Users/Administrator/Desktop/1.html?user_name=yao&security=MIIBOjCBpDCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEAyOyNY%2Fut7pjPkOt6JWnj9R%2F%2FOqHqwZncht7MX%2FlRovqnKso2bCuxmqjChhaQnnMcUFkej4GUCqN9PZAg2cY9zo%2F8mnH1lZl47XYUQ2QQD3cFQYs%2FVkUdzDfbywIwIog1%2B6J%2BnuoERAGaZ%2FIF%2BM%2FqtqGeQwKOC%2BastotpC9s5Xj8CAwEAARYAMA0GCSqGSIb3DQEBBAUAA4GBAHYdXIKYqN9g6XTHl%2BSFmCzmNPuoKb2gZ5SxP1Vh8uvBBnrOFHUnEmPOgzCh9k8NiMPZ5pzSMOKqzCspTL9F91FZhfxJTKV%2F5XwsLq63PmlNCNECj2CnewV%2F5%2BNPQ2uF%2F%2BBvSN6zYK1dnfMu6Wt1W8zHiyC70akrd%2BzxXcIY70gH
