{"id":757,"date":"2022-02-05T14:28:22","date_gmt":"2022-02-05T06:28:22","guid":{"rendered":"https:\/\/yowlab.idv.tw\/wordpress\/?p=757"},"modified":"2022-02-05T14:36:51","modified_gmt":"2022-02-05T06:36:51","slug":"%e3%80%90%e7%ad%86%e8%a8%98%e3%80%91html5-%e4%b8%ad-5-%e5%80%8b%e5%a5%bd%e7%94%a8%e4%bd%86%e4%b8%8d%e5%b8%b8%e8%a2%ab%e7%99%bc%e7%8f%be%e7%9a%84%e5%8a%9f%e8%83%bd","status":"publish","type":"post","link":"https:\/\/yowlab.idv.tw\/wordpress\/?p=757","title":{"rendered":"\u3010\u7b46\u8a18\u3011HTML5 \u4e2d 5 \u500b\u597d\u7528\u4f46\u4e0d\u5e38\u88ab\u767c\u73fe\u7684\u529f\u80fd"},"content":{"rendered":"<p>\u672c\u6587\u4f9d\u64da<br \/>\n<a href=\"https:\/\/halimshams.medium.com\/amazing-html5-features-that-just-3-of-developers-knows-easy-and-surprising-ac67ff598162\" title=\"Amazing HTML5 Features That Just 3% of Developers Knows \u2014 Easy and Surprising (The top 5 amazing and hidden features of HTML5)\" alt=\"_blank\">Amazing HTML5 Features That Just 3% of Developers Knows \u2014 Easy and Surprising (The top 5 amazing and hidden features of HTML5)<\/a> \u800c\u4f86\uff0c\u8a73\u7d30\u5167\u5bb9\u53ef\u770b\u8a72\u6587\u3002<\/p>\n<style type=\"text\/css\">\n    li.present01 {line-height:1.5em; background-color:#F5E5C9; padding:5px; border-radius:10px; font-weight:bold; margin:5px;}\n    li.present02 {line-height:1.5em; background-color:#D1EC87; padding:5px; border-radius:10px; font-weight:bold; margin:5px;}\n    ul.none {list-style-type:none;line-height:1.5em; padding:10px;}\n    ol.lower-roman {list-style-type:lower-roman;}\n    ul.note {line-height:1.5em; padding:2px; font-weight:bold; font-size:0.9em;}\n    .highlight01 {font-weight:bold; line-height:1.5em; background-color:#e7f49c; padding:3px 10px; border:2px; border-radius:10px;}\n    .highlight02 {font-weight:bold; line-height:1.5em; background-color:#F2F26B; padding:3px 10px; border:2px; border-radius:10px;}\n    .highlight03 {font-weight:bold; line-height:1.5em; background-color:#F9BF72; padding:3px 10px; border:2px; border-radius:10px;}\n    .box01 {font-weight:bold; line-height:1.5em; padding:10px 20px; border:1px #19130B solid; border-radius:5px;}\n<\/style>\n<ol>\n<li class=\"present01\">\u4f7f\u7528 \u300cauto-complete\u300d\uff08\u81ea\u52d5\u5b8c\u6210\uff09<\/li>\n<p>\u5728\u4f7f\u7528 &lt;input type=&quot;text&quot;&gt;  &lt;\/input&gt;  \u505a\u6587\u5b57\u8f38\u5165\u6642\uff0c\u53ef\u4ee5\u914d\u5408 &lt;datalist&gt; &lt;\/datalist&gt; \u5c07\u4e00\u4e9b\u5c08\u6709\u540d\u8a5e\uff0c\u6216\u662f\u5e38\u7528\u540d\u8a5e\u5efa\u6a94\uff0c\u9019\u6a23\u5728\u8f38\u5165\u6642\uff0c\u9019\u4e9b\u540d\u8a5e\u6703\u81ea\u52d5\u51fa\u73fe\uff0c\u8b93\u4f7f\u7528\u8005\u53ef\u4ee5\u52a0\u5feb\u8f38\u5165\u901f\u5ea6\u3002<\/p>\n<p>\u4f8b\u5982\uff1a<\/p>\n<pre>\r\n&lt;h5&gt;\u8acb\u8f38\u5165\u4f60\u6240\u53bb\u904e\u7684\u884c\u653f\u5340\u57df\uff1a&lt;\/h5&gt;\r\n&lt;input type=&quot;text&quot; list=&quot;auto-complete&quot;&gt;\r\n&lt;datalist id=&quot;auto-complete&quot;&gt;\r\n    &lt;option value=&quot;\u4e09\u6c11\u5340&quot;&gt;&lt;\/option&gt;\r\n    &lt;option value=&quot;\u65d7\u6d25\u5340&quot;&gt;&lt;\/option&gt;\r\n    &lt;option value=&quot;\u524d\u93ae\u5340&quot;&gt;&lt;\/option&gt;\r\n    &lt;option value=&quot;\u82d3\u96c5\u5340&quot;&gt;&lt;\/option&gt;\r\n    &lt;option value=&quot;\u5de6\u71df\u5340&quot;&gt;&lt;\/option&gt;\r\n    &lt;option value=&quot;\u9f13\u5c71\u5340&quot;&gt;&lt;\/option&gt;\r\n&lt;\/datalist&gt;\r\n<\/pre>\n<p>\u57f7\u884c\u7d50\u679c\uff1a<\/p>\n<div class=\"box01\">\n<h5>\u8acb\u8f38\u5165\u4f60\u6240\u53bb\u904e\u7684\u884c\u653f\u5340\u57df\uff1a<\/h5>\n<p><input type=\"text\" list=\"auto-complete\"><br \/>\n<datalist id=\"auto-complete\"><option value=\"\u4e09\u6c11\u5340\"><\/option><option value=\"\u65d7\u6d25\u5340\"><\/option><option value=\"\u524d\u93ae\u5340\"><\/option><option value=\"\u82d3\u96c5\u5340\"><\/option><option value=\"\u5de6\u71df\u5340\"><\/option><option value=\"\u9f13\u5c71\u5340\"><\/option><\/datalist>\n<\/div>\n<p>\u53ef\u4ee5\u300c\u76f4\u63a5\u6253\u5b57\u300d\uff0c\u4e5f\u53ef\u4ee5\u9ede\u4e00\u4e0b\uff0c\u7136\u5f8c\u4fbf\u6703\u51fa\u73fe\u9078\u9805\uff0c\u4fbf\u65bc\u4f7f\u7528\u8005\u7bc0\u7701\u8f38\u5165\u6642\u9593\u3002<\/p>\n<hr \/>\n<li class=\"present01\">\u4f7f\u7528 \u300caccept\u300d<\/li>\n<p>\u5728\u4f7f\u7528 &lt;input type=&#8221;file&#8221; &gt; &lt;\/input&gt; \u8b93\u4f7f\u7528\u8005\u6a94\u6848\u4e0a\u50b3\u6642\uff0c\u53ef\u4ee5\u5229\u7528 <span class=\"highlight01\">accept<\/span> \u5141\u8a31\u4f7f\u7528\u8005\u53ef\u4ee5\u4e0a\u50b3\u7684\u6a94\u6848\u683c\u5f0f\u3002<\/p>\n<p>\u4f8b\u5982\uff0c\u50c5\u5141\u8a31\u4e0a\u50b3 pdf \u6a94\u6642\uff1a<\/p>\n<pre> &lt;input type=\"file\" accept=\".pdf\" &gt; <\/pre>\n<p>\u57f7\u884c\u7d50\u679c\uff1a<\/p>\n<div class=\"box01\"> <input type=\"file\" accept=\".pdf\"> <\/div>\n<p>\u700f\u89bd\u6a94\u6848\u6642\uff0c\u50c5\u6703\u770b\u898b pdf \u6a94<\/p>\n<hr \/>\n<p>\u53c8\uff0c\u4f8b\u5982\uff0c\u50c5\u5141\u8a31\u4e0a\u50b3 jpg, png \u5716\u6a94\u6642\uff1a <\/p>\n<pre> &lt;input type=\"file\" accept=\".jpg, .png\" &gt; <\/pre>\n<p>\u57f7\u884c\u7d50\u679c\uff1a<\/p>\n<div class=\"box01\"> <input type=\"file\" accept=\".png, .jpg\"><\/div>\n<p>\u700f\u89bd\u6a94\u6848\u6642\uff0c\u50c5\u6703\u770b\u898b jpg \u548c png \u6a94<\/p>\n<hr \/>\n<li class=\"present01\">\u914d\u5408 &lt;details&gt; &lt;\/details&gt; \u4e2d\u4f7f\u7528 &lt;summary&gt; &lt;\/summary&gt;<\/li>\n<p>\u4f8b\u5982<\/p>\n<pre>\r\n  &lt;details&gt;\r\n    <span class=\"highlight01\">  &lt;summary&gt;\u66f4\u591a...&lt;\/summary&gt; <\/span>\r\n    \u9ad8\u96c4\u5e02\u4e09\u6c11\u5340\u662f\u539f\u9ad8\u96c4\u5e02\u884c\u653f\u5340\u57df\u4e2d\u6700\u5927\u7684\u884c\u653f\u5340\u57df\uff0c........\r\n  &lt;\/details&gt;\r\n<\/pre>\n<p>\u57f7\u884c\u7d50\u679c\uff1a(\u9ede\u4e00\u4e0b\u300c\u66f4\u591a\u300d)<\/p>\n<div class=\"box01\">\n<details>\n<summary><span class=\"highlight01\"> \u66f4\u591a&#8230; <\/span><\/summary>\n<p>    \u9ad8\u96c4\u5e02\u4e09\u6c11\u5340\u662f\u539f\u9ad8\u96c4\u5e02\u884c\u653f\u5340\u57df\u4e2d\u6700\u5927\u7684\u884c\u653f\u5340\u57df\uff0c&#8230;&#8230;..<br \/>\n<\/details>\n<\/div>\n<p>\u9ede\u4e00\u4e0b\u300c\u66f4\u591a\u300d\u5f8c\uff0c\u4fbf\u6703\u770b\u898b\u66f4\u8a73\u76e1\u7684\u8aaa\u660e\u4e86\u3002<\/p>\n<hr \/>\n<li class=\"present01\">&lt;metter&gt;  &lt;\/metter&gt; \u986f\u793a\u523b\u5ea6\u5716<\/li>\n<p>\u7c21\u55ae\u8aaa\uff0c\u5982\u679c\u5168\u90e8\u6709 100 , \u76ee\u524d\u6301\u6709\u4e86 60 \uff01<\/p>\n<pre>\r\n&lt;label&gt;\u76ee\u524d\u6301\u6709\u91cf\u662f 60 \uff1a&lt;\/label&gt;\r\n  &lt;meter value=\"60\" max=\"100\"&gt;  &lt;\/meter&gt;\r\n<\/pre>\n<p>\u57f7\u884c\u7d50\u679c\uff1a<\/p>\n<div class=\"box01\">\n <label for=\"meter\">\u76ee\u524d\u6301\u6709\u91cf\u662f 60\uff1a <\/label><br \/>\n    <meter value=\"60\" max=\"100\"><\/meter>\n<\/div>\n<p>&nbsp;<\/p>\n<hr \/>\n<li class=\"present01\">&lt;progress&gt; &lt;\/progress&gt; \u986f\u793a\u9032\u5ea6<\/li>\n<p>\u7c21\u55ae\u8aaa\uff0c\u7528\u6cd5\u548c meter \u5f88\u985e\u4f3c\u3002\u82e5\u5168\u90e8\u70ba 100 , \u76ee\u524d\u9032\u5ea6\u70ba 47 \uff01<\/p>\n<pre>\r\n&lt;label&gt;\u76ee\u524d\u9032\u5ea6\u70ba 47\uff1a&lt;\/label&gt;\r\n  &lt;progress value=\"47\" max=\"100\"&gt;  &lt;\/progress&gt;\r\n<\/pre>\n<p>\u57f7\u884c\u7d50\u679c\uff1a<\/p>\n<div class=\"box01\">\n <label for=\"meter\">\u76ee\u524d\u9032\u5ea6\u70ba 47\uff1a <\/label>\n    <progress value=\"47\" max=\"100\"><\/progress>\n<\/div>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u6587\u4f9d\u64da Amazing HTML5 Features That Just 3%  <a class=\"more-link\" href=\"https:\/\/yowlab.idv.tw\/wordpress\/?p=757\">Continue reading <span class=\"screen-reader-text\">  \u3010\u7b46\u8a18\u3011HTML5 \u4e2d 5 \u500b\u597d\u7528\u4f46\u4e0d\u5e38\u88ab\u767c\u73fe\u7684\u529f\u80fd<\/span><span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[27],"class_list":["post-757","post","type-post","status-publish","format-standard","hentry","category-3","tag-html5"],"_links":{"self":[{"href":"https:\/\/yowlab.idv.tw\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/757","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yowlab.idv.tw\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yowlab.idv.tw\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yowlab.idv.tw\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/yowlab.idv.tw\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=757"}],"version-history":[{"count":31,"href":"https:\/\/yowlab.idv.tw\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/757\/revisions"}],"predecessor-version":[{"id":788,"href":"https:\/\/yowlab.idv.tw\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/757\/revisions\/788"}],"wp:attachment":[{"href":"https:\/\/yowlab.idv.tw\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yowlab.idv.tw\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yowlab.idv.tw\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}