{"id":1379,"date":"2011-01-06T00:29:59","date_gmt":"2011-01-05T16:29:59","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=1379"},"modified":"2018-01-01T22:02:25","modified_gmt":"2018-01-01T14:02:25","slug":"%e5%ae%8c%e5%96%84%ef%bc%9ahtml5%e8%a1%a8%e5%8d%95%e6%96%b0%e7%89%b9%e5%be%81%e7%ae%80%e4%bb%8b%e4%b8%8e%e4%b8%be%e4%be%8b","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2011\/01\/%e5%ae%8c%e5%96%84%ef%bc%9ahtml5%e8%a1%a8%e5%8d%95%e6%96%b0%e7%89%b9%e5%be%81%e7%ae%80%e4%bb%8b%e4%b8%8e%e4%b8%be%e4%be%8b\/","title":{"rendered":"\u5b8c\u5584\uff1aHTML5\u8868\u5355\u65b0\u7279\u5f81\u7b80\u4ecb\u4e0e\u4e3e\u4f8b"},"content":{"rendered":"

by zhangxinxu<\/a> from http:\/\/www.zhangxinxu.com<\/a>
\n\u672c\u6587\u5730\u5740\uff1a http:\/\/www.zhangxinxu.com\/wordpress\/?p=1379<\/a><\/p>\n

\u4e00\u3001\u524d\u8a00\u4e00\u6487<\/h3>\n

\u5176\u5b9e\u5173\u4e8eHTML5\u7684\u8868\u5355\u7279\u5f81\u65e9\u5728\u53bb\u5e74\u201c\u4f60\u5fc5\u987b\u77e5\u9053\u768428\u4e2aHTML5\u7279\u5f81\u3001\u7a8d\u95e8\u548c\u6280\u672f<\/a>\u201d\u4e00\u6587\u4e2d\u5c31\u6709\u6240\u4ecb\u7ecd\uff08\u5728\u7b2c\u5341\u4e00\u9879\uff09\uff0c\u4e0d\u8fc7\uff0c\u6709\u4e9b\u9057\u61be\u7684\u662f\uff0c\u6b64\u90e8\u5206\u7684\u4ecb\u7ecd\u662f\u4ee5\u89c6\u9891\u5f62\u5f0f\u5c55\u793a\u7684\uff0c\u5176\u5b9e\uff0c\u662f\u89c6\u9891\u8fd8\u597d\u5566\uff0c\u5173\u952e\u662fTouTuBe\u89c6\u9891\uff0c\u9700\u8981\u8d8a\u72f1\u89c2\u770b\u3002\u5f97\uff0c\u50cf\u6211\u8fd9\u6837\u5b89\u5206\u5b88\u5df2\u7684\u826f\u6c11\uff0c\u9664\u4e86\u770b\u7a7a\u59d0\uff0c\u5176\u4ed6\u60c5\u51b5\u90fd\u662f\u61d2\u5f97fan\u5899\u7684\uff0c\u6240\u4ee5\u8fd9\u90e8\u5206\u89c6\u9891\u5c55\u793a\u7684\u5185\u5bb9\uff0c\u5176\u5b9e\u5c31\u662f\u4e2a\u201c\u7a7a\u201d\u3002
\n\"\u622a\u56fe<\/p>\n

\u6240\u4ee5\uff0c\u8fd9\u91cc\u6253\u4e2a\u8865\u4e01\uff0c\u628a\u8fd9\u90e8\u5206\u5185\u5bb9\u5b8c\u5584\u4e0b\u3002\u672c\u6587\u7684\u5927\u81f4\u5185\u5bb9\u6709\uff1a
\n# <input type=”number” \/>
\n# <input type=”range” \/>
\n# <input type=”date” \/> \u4ee5\u53ca\u5176\u4ed6\u65f6\u95f4\u9009\u62e9\u5668\u63a7\u4ef6
\n# <input type=”color” \/> \u989c\u8272\u9009\u62e9\u5668
\n# <input type=”search” \/>
\n# <datalist>\u5143\u7d20\u548clist\u5c5e\u6027<\/p>\n

# HTML5\u8868\u5355\u9a8c\u8bc1\u4e0eCSS3\u7684\u66a7\u6627\u5173\u7cfb<\/p>\n

\u4e8c\u3001HTML5\u8868\u5355\u65b0\u7279\u5f81<\/h3>\n

1. type=number<\/strong><\/p>\n

type=number<\/code>\u7684HTML\u8868\u5355\u5143\u7d20\u53ef\u4ee5\u8ba9\u4f60\u4ee5\u6309\u952e\u7684\u65b9\u5f0f\u6539\u53d8\u6587\u672c\u6846\u4e2d\u7684\u503c\uff0c\u8fd9\u79cd\u6548\u679c\u5728window\u7cfb\u7edf\u4e2d\u7ecf\u5e38\u89c1\u5230\uff0c\u4f8b\u5982\uff1a
\n\"window\u7cfb\u7edf\u4e2d\u7684\u65f6\u95f4\u70b9\u51fb\u9009\u62e9<\/p>\n

\u61d2\u60f0\u7684\u4eba\u5b81\u53ef\u8eba\u5728\u6905\u5b50\u4e0a\u70b9\u70b9\u9f20\u6807\u4e5f\u4e0d\u5143\u7d20\u5750\u8d77\u6765\u6309\u952e\u76d8\uff0c\u6240\u4ee5\uff0c\u76f8\u6bd4\u952e\u76d8\u8f93\u5165\uff0c\u70b9\u51fb\u8f93\u5165\u4e5f\u662f\u6709\u5e02\u573a\u7684\u3002\u8fd9\u5c31\u662f\u4e3a\u4f55HTML5\u8868\u5355\u4e2d\u6709\u6570\u503c\u9009\u62e9\u63a7\u4ef6\u3002<\/p>\n

\u5927\u81f4HTML\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n

\n
\n\u4eba\u6570\uff1a<input type=\"number\" value=\"1\" \/>\n<\/pre>\n<\/div>\n
\u5982\u679c\u52a0\u4e0a\u70b9\u5408\u9002\u7684\u5bbd\u5ea6\u9650\u5236\uff0c\u5219\u5728Chrome\u6d4f\u89c8\u5668\u4e0b\u6548\u679c\uff08\u4f30\u8ba1UI\u4e0e\u7cfb\u7edf\u4e3b\u9898\u76f8\u5173\uff09\u5982\u4e0b\uff1a
\n\"Chrome<\/p>\n
\u76ee\u524d\u8fd8\u652f\u6301\u7684\u6d4f\u89c8\u5668\u5c31\u662fOpera 11\u4e86\uff0c\u4e0d\u8fc7Opera\u4e0b\u7684\u4e0a\u4e0b\u589e\u51cf\u6570\u503c\u7684\u6309\u94ae\u957f\u5f97\u6709\u4e9b\u6b6a\u74dc\u88c2\u67a3\uff0c\u5f88\u6709\u62bd\u8c61\u6d3e\u7684\u98ce\u683c\u3002
\n\"Opera\u6d4f\u89c8\u5668\u4e0bnumber\u7c7b\u8868\u5355\u6a21\u6837<\/p>\n
\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aHTML5\u8868\u5355\u4e4bnubmer\u63a7\u4ef6demo<\/a><\/p>\n
2. type=range<\/strong>
\nrange\u4e2d\u6587\u610f\u4e49\u503c\u533a\u57df\u8303\u56f4\uff0c\u8fd9\u7c7b\u6548\u679c\u5728window\u7cfb\u7edf\u4e2d\u4e5f\u5c61\u89c1\u4e0d\u9c9c\uff0c\u5982\u4e0b\u622a\u56fe\uff1a
\n\"window\u7cfb\u7edf\u4e0b\u62d6\u52a8\u6761<\/p>\n
HTML5\u4e2d\u6709\u7c7b\u4f3c\u6548\u679c\u7684input<\/code>\u63a7\u4ef6\uff0c\u53ea\u8981\u5b9a\u4e49\u5176type<\/code>\u4e3arange<\/code>\u5c31\u53ef\u4ee5\u4e86\uff0cso easy!<\/p>\n
\n
\u62d6\u52a8\u8303\u56f4\uff1a<input type=\"range\" value=\"50\" \/><\/pre>\n<\/div>\n
\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u7684value<\/code>\u8303\u56f4\u662f0~100<\/code>\uff0c\u6240\u4ee5\u5462\uff0cvalue=50<\/code>\uff0c\u5219\u62d6\u52a8\u6761\u5c31\u5728\u533a\u57df\u8303\u56f4\u7684\u4e2d\u95f4\u3002\u5982\u4e0b\u56fe\u6240\u793a\uff1a
\n\"Opera\u4e0brange\u7a7a\u95f4\u6548\u679c<\/p>\n
\u6211\u7684Firefox\u76ee\u524d\u7248\u672c3.6\uff0c\u5c1a\u672a\u652f\u6301\u6b64\u7279\u6027\u3002\u4e0d\u8fc7\uff0cChrome\uff0cOpera\uff0c\u4ee5\u53caSafari4\u4e0b\u5747\u6709\u6548\u679c\uff0c\u53ea\u662f\u6bd5\u7adf\u4e0d\u662f\u540c\u4e00\u4e2a\u7238\u7238\uff0c\u6240\u4ee5\u6a21\u6837\u4e0a\u8fd8\u6709\u6709\u4e9b\u5dee\u5f02\u7684\uff0c\u8fd9\u91cc\u5c31\u4e0d\u5c55\u793a\u8fd9\u4e9b\u5dee\u5f02\u4e86\u3002<\/p>\n
\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aHTML5\u8868\u5355\u4e4brange\u63a7\u4ef6demo<\/a><\/p>\n
\u5728\u4e00\u5f00\u59cb\u63d0\u5230\u7684\u201c\u4f60\u5fc5\u987b\u77e5\u9053\u768428\u4e2aHTML5\u7279\u5f81\u3001\u7a8d\u95e8\u548c\u6280\u672f<\/a>\u201d\u4e00\u6587\u4e2d\u6700\u540e\u4e00\u9879\uff0c\u4e5f\u5c31\u662f\u7b2c\u4e8c\u5341\u516b\u9879\u7684\u7cbe\u6e5b\u6548\u679c\u5b9e\u4f8b\u5c31\u662f\u5728range<\/code>\u7c7b\u63a7\u4ef6\u4e0a\u5b9e\u73b0\u7684\u6548\u679c\uff0c\u91cc\u9762\u8fd8\u6d89\u53ca\u5230\u4e86min<\/code>\uff0cmax<\/code>\u5c5e\u6027\uff0c\u4ee5\u53castep<\/code>\u5c5e\u6027\uff0c\u662f\u4e2a\u975e\u5e38\u503c\u5f97\u89c2\u6469\u5b66\u4e60\u4f53\u9a8c\u7684\u4f8b\u5b50\u3002\u5173\u4e8e\u6b64\u5b9e\u4f8bdemo\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc<\/a>\u3002<\/p>\n
3. type=”date”\u4ee5\u53ca\u5176\u4ed6\u65f6\u95f4\u63a7\u4ef6<\/strong>
\n\u8fd9\u662f\u65f6\u95f4\u9009\u62e9\u5668\u63a7\u4ef6\uff0c\u4ee5\u540e\u9009\u62e9\u65f6\u95f4\u4e45\u4e0d\u8981\u53bb\u6298\u817e\u4ec0\u4e48js\u63d2\u4ef6\u4e86\uff0c\u76f4\u63a5\u4e00\u4e2adate<\/code>\u5c5e\u6027\u503c\uff0c\u7136\u540e\uff0c\u4f60\u5c31\u53ef\u4ee5\u8fb9\u548c\u5496\u5561\u8fb9\u548c\u65c1\u8fb9\u626b\u5730\u7684\u8001\u592a\u592a\u4ea4\u6d41\u4ee3\u7801\u4e86\u3002\u4e0d\u4fe1\uff0c\u4f60\u770b\uff1a<\/p>\n
\n
\n\u9009\u62e9\u65e5\u671f\uff1a<input type=\"date\" value=\"2011-01-04\" \/>\n<\/pre>\n<\/div>\n
\u7ed3\u679c\u5728\u652f\u6301\u7684\u6d4f\u89c8\u5668\u4e0b\uff0c\u4f8b\u5982Opera\u4e0b\uff0c\u5c31\u6709\u5982\u4e0b\u6548\u679c\uff1a
\n\"date\u7c7b\u63a7\u4ef6\u6548\u679c<\/p>\n
\u8fd9\u4e0d\u6d3b\u8131\u8131\u7684\u4e00\u4e2a\u65f6\u95f4\u9009\u62e9\u5668\u561b\uff01
\n\"window\u7cfb\u7edf\u4e0b\u65f6\u95f4\u63a7\u4ef6<\/p>\n
\u9664\u4e86\u957f\u76f8\u6709\u4e9b\u78d5\u789c\uff0c\u5176\u4ed6\u8fd8\u662f\u633a\u8ba9\u4eba\u6b23\u559c\u7684\u3002<\/p>\n
\u65f6\u95f4\u7c7b\u7a7a\u95f4\uff0c\u4e0d\u4ec5\u6709date<\/code>\u7c7b\u578b\u7684\uff0c\u8fd8\u6709time<\/code>\u7c7b\u578b\uff0c\u8fd8\u6709datetime<\/code>\uff0cweek<\/code>\uff0cmonth<\/code>\u3002<\/p>\n
\u663e\u7136\uff0c\u987e\u540d\u601d\u610f\uff0cdate<\/code>\u7c7b\u578b\u662f\u9009\u62e9\u65e5\u671f\uff0ctime<\/code>\u7c7b\u578b\u662f\u9009\u62e9\u65f6\u95f4\uff0cdatetime<\/code>\u662f\u65e5\u671f\u65f6\u95f4\u4e00\u8d77\u9009\uff0c\u800cweek<\/code>\u662f\u9009\u62e9\u661f\u671f\uff0cmonth<\/code>\u5b9e\u73b0\u9009\u62e9\u6708\u4efd\u3002<\/p>\n
\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aHTML5\u8868\u5355\u65f6\u95f4\u7c7b\u7a7a\u95f4demo<\/a><\/p>\n
\u6211\u6d4b\u8bd5\u4e86\u756a\uff0c\u8bbe\u7f6e\u521a\u628aSafari\u5347\u7ea7\u52305.0\u7248\u672c\uff0c\u53d1\u73b0\uff0c\u76ee\u524d\u800c\u8a00\uff0c\u5c31Opera\u6d4f\u89c8\u5668\u652f\u6301\u8fd9\u7c7b\u65f6\u95f4\u63a7\u4ef6\u3002\u6548\u679c\u5206\u522b\u5982\u4e0b\uff1a
\ntype=time<\/code>\u6548\u679c\u6709\u4e9b\u7c7b\u4f3ctype=number<\/code>\uff0c\u53ef\u4ee5\u901a\u8fc7\u70b9\u51fb\u5207\u6362\u4e8b\u4ef6\uff0c\u9ed8\u8ba4\u6bcf\u70b9\u4e00\u6b21\uff0c\u65f6\u95f4\u5207\u63621\u5206\u949f\uff0c\u9f20\u6807\u957f\u6309\u4e5f\u662f\u6709\u6548\u7684\u3002<\/p>\n
\n
\u9009\u62e9\u65f6\u95f4\uff1a<input type=\"time\" value=\"22:52\" \/><\/pre>\n<\/div>\n
\u9009\u62e9\u65f6\u95f4\uff1a<\/p>\n
\"\u9009\u62e9\u65f6\u95f4\u7684\u6548\u679c<\/p>\n
type=week\u4e0b\uff0c\u9f20\u6807\u7ecf\u8fc7\u7684\u65f6\u5019\uff0c\u6bcf\u4e00\u884c\uff08\u4ee3\u8868\u4e00\u5468\uff09\u7684\u65e5\u671f\u80cc\u666f\u8272\u4f1a\u96c6\u4f53\u53d8\u6697\uff0c\u5982\u4e0b\u56fe\uff1a
\n\"type=week\u63a7\u4ef6\u9f20\u6807hover\u6548\u679c<\/p>\n
\u800ctype=month<\/code>\u7684\u65f6\u5019\uff0c\u662f\u6574\u6708\u7684\u80cc\u666f\u8272\u53d8\u6df1\uff0c\u5982\u4e0b\u56fe\uff1a
\n\"\u6574\u6708\u65e5\u671f\u9f20\u6807\u7ecf\u8fc7\u80cc\u666f\u53d8\u6df1<\/p>\n
\u4e24\u8005\u9009\u62e9\u540e\u7684\u6570\u636e\u503c\u5982\u4e0b\uff1a
\n\"week\u7c7b\u578b\u548cmonth\u7c7b\u578b\u7684\u503c<\/p>\n
4. type=”color”<\/strong>
\n\u8fd9\u662f\u989c\u8272\u9009\u62e9\u5668\u63a7\u4ef6\uff0c\u76f8\u5f53\u7684\u7ed9\u529b\u3002\u4f7f\u7528\u5f88\u7b80\u5355\uff0c\u5982\u4e0b\uff1a<\/p>\n
\n
\n\u9009\u53d6\u989c\u8272\uff1a<input type=\"color\" value=\"#34538b\" \/>\n<\/pre>\n<\/div>\n
\u7ed3\u679c\u5728Opera\u6d4f\u89c8\u5668\u4e0b\u9ed8\u8ba4\u6548\u679c\u5982\u4e0b\uff1a
\n\"\u989c\u8272\u9009\u62e9\u5668\u9ed8\u8ba4<\/p>\n
\u9ed8\u8ba4input\u63a7\u4ef6\u6709\u4e2a\u5706\u5706\u7684\u989c\u8272\u4e3a#34538b\u7684\u80cc\u666f\uff0c\u6211\u4eec\u70b9\u51fb\u4e0b\u62c9\uff0c\u7ed3\u679c\uff0c\u64e6\uff0c\u5c55\u5f00\u7684web\u8272\u9762\u677f\uff1a
\n\"web\u8272\u9762\u677f\u6548\u679c\u622a\u56fe<\/p>\n
\u70b9\u51fb\u4e0b\u9762\u6709\u201c\u5176\u4ed6…\u201d\u5b57\u6837\u7684\u6309\u94ae\uff0c\u7ed3\u679c\uff0c\u564c\uff0c\u5c55\u5f00\u4e86\u534e\u4e3d\u7684\u989c\u8272\u9009\u62e9\u9762\u677f\uff1a
\n\"\u534e\u4e3d\u7684\u989c\u8272\u9009\u62e9\u9762\u677f\u622a\u56fe<\/p>\n
\u5f88\u9177\uff0c\u5173\u952e\u4f7f\u7528\u5f88\u65b9\u4fbf\uff0c\u54e6\u5475\u5475\u3002<\/p>\n
\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aHTML5\u8868\u5355\u4e4bcolor\u989c\u8272\u9009\u62e9\u63a7\u4ef6demo<\/a> <\/p>\n
5. type=search<\/strong>
\n\u5c31\u662f\u641c\u7d22\u529f\u80fd\uff0c\u6211\u8bb0\u5f97\u4ec0\u4e48\u65f6\u5019\u770b\u5230search<\/code>\u7c7b\u578b\u7684input<\/code>\u6846\u91cc\u9762\u4f1a\u81ea\u52a8\u6709\u641c\u7d22\u7684\u653e\u5927\u955c\u56fe\u6807\u7684\u3002\u4e0d\u8fc7\uff0c\u8fd9\u6b21\u6d4b\u8bd5\u6ca1\u6709\u89c1\u5230\uff08\u96be\u9053\u662f\u5728\u68a6\u5883\u4e2d\uff09\uff0c\u6b64\u5c5e\u6027\u7684UI\u6548\u679c\u5f88\u4f4e\u8c03\uff0c\u5f88\u51b7\u6de1\u3002\u5728webkit\u6838\u5fc3\u7684\u6d4f\u89c8\u5668\u4e0b\uff0c\u6709\u503c\u7684\u65f6\u5019\uff0c\u8f93\u5165\u6846\u540e\u9762\u4f1a\u6709\u4e2a\u6e10\u53d8\u7684\u5f88\u6027\u611f\u7684\u53c9\u53f7\uff0c\u5982\u4e0b\u56fe\uff1a
\n\"search\u7c7b\u578b\u7684HTML\u7a7a\u95f4\u6837\u5f0f<\/p>\n
\u5176\u4ed6\u6211\u5c31\u6ca1\u6709\u53d1\u73b0\u4ec0\u4e48\u7279\u522b\u4e4b\u5904\uff0c\u6240\u4ee5\uff0c\u8fd9\u4e2a\u5c31\u63d0\u8fd9\u4e48\u70b9\u3002\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aHTML5 search\u7c7b\u578b\u63a7\u4ef6demo<\/a><\/p>\n
6. <datalist>\u5143\u7d20\u548clist\u5c5e\u6027<\/strong>
\ndatalist<\/code>\u662f\u4e2a\u5f88\u7a00\u5947\u7684\u5143\u7d20\uff0c\u5b9e\u73b0\u6570\u636e\u5217\u8868\u4e0b\u62c9\u6548\u679c\u7684\uff0cUI\u98ce\u683c\u6709\u70b9\u7c7b\u4f3c\u4e8eautocomplete<\/code>\u3002
\n\"autocomplete\u4e0b\u62c9\u98ce\u683c<\/p>\n
\u4e3e\u4e2a\u7b80\u5355\u4f8b\u5b50\uff1a
\n\u5982\u4e0bHTML\u4ee3\u7801\uff1a<\/p>\n
\n
\n\u5217\u8868\uff1a<input type=\"text\" list=\"mydata\" placeholder=\"\u70ed\u95e8\u7535\u5f71\u6392\u884c\" \/>\n    <datalist id=\"mydata\">\n        <option label=\"Top1\" value=\"\u8ba9\u5b50\u5f39\u98de\">\n        <option label=\"Top2\" value=\"\u975e\u8bda\u52ff\u62702\">\n        <option label=\"Top3\" value=\"\u5927\u7b11\u6c5f\u6e56\">\n        <option label=\"Top4\" value=\"\u8d75\u6c0f\u5b64\u513f\">\n        <option label=\"Top5\" value=\"\u521d\u604b\u8fd9\u4ef6\u5c0f\u4e8b\">\n    <\/datalist>\n<\/pre>\n<\/div>\n
\u7ed3\u679c\u8f93\u5165\u6846\u83b7\u5f97\u7126\u70b9\u540e\u6548\u679c\u5982\u4e0b\uff1a
\n\"datalist\u4e0b\u62c9\u6548\u679c\u622a\u56fe<\/p>\n
\u8fd9\u73a9\u610f\uff0c\u8fd9\u5c5e\u6027\u662f\u4e2a\u597d\u4e1c\u897f\uff0c\u4e0d\u8981\u6e9c\u8fbe\u4e86\u4e00\u5708\u53d1\u73b0\uff0c\u8fd8\u53ea\u5728\u6700\u65b0\u7684Opera\u6d4f\u89c8\u5668\u4e0b\u6709\u6548\u679c\uff0c\u5176\u4ed6\u6d4f\u89c8\u5668\u65e5\u540e\u662f\u5426\u652f\u6301\uff0c\u4e0d\u5f97\u800c\u77e5\u3002<\/p>\n
\u4e09\u3001HTML5\u8868\u5355\u9a8c\u8bc1\u4e0eCSS3<\/h3>\n
\u4f34\u968f\u7740HTML5\uff0cCSS3\u7684\u9009\u62e9\u5668\u90e8\u5206\u4e5f\u51fa\u73b0\u4e86\u4e00\u4e9b\u65b0\u7684\u4f2a\u7c7b\uff0c\u4f8b\u5982\uff1a<\/p>\n