{"id":1254,"date":"2013-05-16T14:58:11","date_gmt":"2013-05-16T06:58:11","guid":{"rendered":"http:\/\/www.52inwet.com\/?p=1254"},"modified":"2013-05-16T14:58:35","modified_gmt":"2013-05-16T06:58:35","slug":"%e3%80%90%e7%bd%91%e7%ab%99%e5%bb%ba%e8%ae%be%e3%80%9128%e4%b8%aa%e4%bd%a0%e5%bf%85%e9%a1%bb%e7%9f%a5%e9%81%93%e7%9a%84html5%e7%9a%84%e6%96%b0%e7%89%b9%e6%80%a7%ef%bc%8c%e6%8a%80%e5%b7%a7%e4%bb%a5","status":"publish","type":"post","link":"http:\/\/www.52inwet.com\/?p=1254","title":{"rendered":"\u3010\u7f51\u7ad9\u5efa\u8bbe\u301128\u4e2a\u4f60\u5fc5\u987b\u77e5\u9053\u7684HTML5\u7684\u65b0\u7279\u6027\uff0c\u6280\u5de7\u4ee5\u53ca\u6280\u672f"},"content":{"rendered":"

\"\"<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. \u65b0\u7684Doctype<\/strong>
\n\u5c3d\u7ba1\u4f7f\u7528<!DOCTYPE html>\uff0c\u5373\u4f7f\u6d4f\u89c8\u5668\u4e0d\u61c2\u8fd9\u53e5\u8bdd\u4e5f\u4f1a\u6309\u7167\u6807\u51c6\u6a21\u5f0f\u53bb\u6e32\u67d3<\/p>\n

2. Figure\u5143\u7d20<\/strong>
\n\u7528<figure>\u548c<figcaption>\u6765\u8bed\u4e49\u5316\u5730\u8868\u793a\u5e26\u6807\u9898\u7684\u56fe\u7247<\/p>\n

\n
\n
    \n
  1. <figure><\/li>\n
  2. <img src=\u201dpath\/to\/image\u201d alt=\u201dAbout image\u201d \/><\/li>\n
  3. <figcaption><\/li>\n
  4. <p>This is an image of something interesting. <\/p><\/li>\n
  5. <\/figcaption><\/li>\n
  6. <\/figure><\/li>\n<\/ol>\n<\/div>\n<\/div>\n

    3. \u91cd\u65b0\u5b9a\u4e49\u7684<small><\/strong><\/p>\n

    <small>\u5df2\u7ecf\u88ab\u91cd\u65b0\u5b9a\u4e49\u4e86\uff0c\u73b0\u5728\u88ab\u7528\u6765\u8868\u793a\u5c0f\u7684\u6392\u7248\uff0c\u5982\u7f51\u7ad9\u5e95\u90e8\u7684\u7248\u6743\u58f0\u660e<\/p>\n

    4. \u53bb\u6389link\u548cscript\u6807\u7b7e\u91cc\u9762\u7684type\u5c5e\u6027<\/strong><\/p>\n

    5. \u52a0\/\u4e0d\u52a0 \u62ec\u53f7<\/strong><\/p>\n

    HTML5\u6ca1\u6709\u4e25\u683c\u7684\u8981\u6c42\u5c5e\u6027\u5fc5\u987b\u52a0\u5f15\u53f7\uff0c\u95ed\u5408\u4e0d\u95ed\u5408\uff0c\u4f46\u662f\u5efa\u8bae\u52a0\u4e0a\u5f15\u53f7\u548c\u95ed\u5408\u6807\u7b7e<\/p>\n

    6. \u8ba9\u4f60\u7684\u5185\u5bb9\u53ef\u7f16\u8f91\uff0c\u53ea\u9700\u8981\u52a0\u4e00\u4e2acontenteditable\u5c5e\u6027<\/strong><\/p>\n

    7. Email Inputs<\/strong>
    \n\u5982\u679c\u6211\u4eec\u7ed9Input\u7684type\u8bbe\u7f6e\u4e3aemail\uff0c\u6d4f\u89c8\u5668\u5c31\u4f1a\u9a8c\u8bc1\u8fd9\u4e2a\u8f93\u5165\u662f\u5426\u662femail\u7c7b\u578b\uff0c\u5f53\u7136\u4e0d\u80fd\u53ea\u4f9d\u8d56\u524d\u7aef\u7684\u6821\u9a8c\uff0c\u540e\u7aef\u4e5f\u5f97\u6709\u76f8\u5e94\u7684\u6821\u9a8c<\/p>\n

    8. Placeholders<\/strong>
    \n\u8fd9\u4e2ainput\u5c5e\u6027\u7684\u610f\u4e49\u5c31\u662f\u4e0d\u5fc5\u901a\u8fc7javascript\u6765\u505aplaceholder\u7684\u6548\u679c\u4e86<\/p>\n

    9. Local Storage<\/strong><\/p>\n

    \u4f7f\u7528Local Storage\u53ef\u4ee5\u6c38\u4e45\u5b58\u50a8\u5927\u7684\u6570\u636e\u7247\u6bb5\u5728\u5ba2\u6237\u7aef\uff08\u9664\u975e\u4e3b\u52a8\u5220\u9664\uff09\uff0c\u76ee\u524d\u5927\u90e8\u5206\u6d4f\u89c8\u5668\u5df2\u7ecf\u652f\u6301\uff0c\u5728\u4f7f\u7528\u4e4b\u524d\u53ef\u4ee5\u68c0\u6d4b\u4e00\u4e0bwindow.localStorage\u662f\u5426\u5b58\u5728<\/p>\n

    10. \u8bed\u4e49\u5316\u7684header\u548cfooter<\/strong><\/p>\n

    11. \u66f4\u591a\u7684HTML5\u8868\u5355\u7279\u6027<\/strong><\/p>\n

    12. IE\u548cHTML5<\/strong>
    \n\u9ed8\u8ba4\u7684\uff0cHTML5\u65b0\u5143\u7d20\u88ab\u4ee5inline\u7684\u65b9\u5f0f\u6e32\u67d3\uff0c\u4e0d\u8fc7\u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u8fd9\u79cd\u65b9\u5f0f\u8ba9
    \n\u5176\u4ee5block\u65b9\u5f0f\u6e32\u67d3
    \nheader, footer, article, section, nav, menu, hgroup {
    \ndisplay: block;
    \n}
    \n\u4e0d\u5e78\u7684\u662fIE\u4f1a\u5ffd\u7565\u8fd9\u4e9b\u6837\u5f0f\uff0c\u53ef\u4ee5\u50cf\u4e0b\u9762\u8fd9\u6837fix:<\/p>\n

    \n
    \n
      \n
    1. document.createElement(\u201carticle\u201d);<\/li>\n
    2. document.createElement(\u201cfooter\u201d);<\/li>\n
    3. document.createElement(\u201cheader\u201d);<\/li>\n
    4. document.createElement(\u201chgroup\u201d);<\/li>\n
    5. document.createElement(\u201cnav\u201d);<\/li>\n
    6. document.createElement(\u201cmenu\u201d);<\/li>\n<\/ol>\n<\/div>\n<\/div>\n

      13. hgroup<\/strong>
      \n\u4e00\u822c\u5728header\u91cc\u9762\u7528\u6765\u5c06\u4e00\u7ec4\u6807\u9898\u7ec4\u5408\u5728\u4e00\u8d77\uff0c\u5982<\/p>\n

      \n
      \n
        \n
      1. <header><\/li>\n
      2. <hgroup><\/li>\n
      3. <h1> Recall Fan Page <\/h1><\/li>\n
      4. <h2> Only for people who want the memory of a lifetime. <\/h2><\/li>\n
      5. <\/hgroup><\/li>\n
      6. <\/header><\/li>\n<\/ol>\n<\/div>\n<\/div>\n

        14. Required\u5c5e\u6027<\/strong>
        \nrequired\u5c5e\u6027\u5b9a\u4e49\u4e86\u4e00\u4e2ainput\u662f\u5426\u662f\u5fc5\u987b\u7684\uff0c\u4f60\u53ef\u4ee5\u50cf\u4e0b\u9762\u8fd9\u6837\u58f0\u660e
        \n<input type=\u201dtext\u201d name=\u201dsomeInput\u201d required>
        \n\u6216\u8005
        \n<input type=\u201dtext\u201d name=\u201dsomeInput\u201d required=\u201drequired\u201d><\/p>\n

        15. Autofocus\u5c5e\u6027<\/strong>
        \n\u6b63\u5982\u5b83\u7684\u8bcd\u4e49\uff0c\u5c31\u662f\u805a\u7126\u5230\u8f93\u5165\u6846\u91cc\u9762
        \n<input type=\u201dtext\u201d name=\u201dsomeInput\u201d placeholder=\u201dDouglas Quaid\u201d\u00a0\u00a0required autofocus><\/p>\n

        16. Audio\u652f\u6301<\/strong>
        \nHTML5\u63d0\u4f9b\u4e86<audio>\u6807\u7b7e\uff0c\u4f60\u4e0d\u9700\u8981\u518d\u6309\u7167\u7b2c\u4e09\u65b9\u63d2\u4ef6\u6765\u6e32\u67d3\u97f3\u9891\uff0c\u5927\u591a\u6570\u73b0\u4ee3\u6d4f\u89c8\u5668\u63d0\u4f9b\u4e86\u5bf9\u4e8eHTML5 Audio\u7684\u652f\u6301\uff0c\u4e0d\u8fc7\u76ee\u524d\u4ecd\u65e7\u9700\u8981\u63d0\u4f9b\u4e00\u4e9b\u517c\u5bb9\u5904\u7406\uff0c\u5982<\/p>\n

        \n
        \n
          \n
        1. <audio autoplay=\u201dautoplay\u201d controls=\u201dcontrols\u201d><\/li>\n
        2. <source src=\u201dfile.ogg\u201d \/><!\u2013FF\u2013><\/li>\n
        3. <source src=\u201dfile.mp3\u2033 \/><!\u2013Webkit\u2013><\/li>\n
        4. <a href=\u201dfile.mp3\u2033>Download this file.<\/a><\/li>\n
        5. <\/audio><\/li>\n<\/ol>\n<\/div>\n<\/div>\n

          17. Video\u652f\u6301<\/strong>
          \n\u548cAudio\u5f88\u50cf\uff0c<video>\u6807\u7b7e\u63d0\u4f9b\u4e86\u5bf9\u4e8evideo\u7684\u652f\u6301\uff0c\u7531\u4e8eHTML5\u6587\u6863\u5e76\u6ca1\u6709\u7ed9video\u6307\u5b9a\u4e00\u4e2a\u7279\u5b9a\u7684\u7f16\u7801\uff0c\u6240\u4ee5\u6d4f\u89c8\u5668\u53bb \u51b3\u5b9a\u8981\u652f\u6301\u54ea\u4e9b\u7f16\u7801\uff0c\u5bfc\u81f4\u4e86\u5f88\u591a\u4e0d\u4e00\u81f4\u3002Safari\u548cIE\u652f\u6301H.264\u7f16\u7801\u7684\u683c\u5f0f\uff0cFirefox\u548cOpera\u652f\u6301Theora\u548cVorbis\u7f16\u7801\u7684 \u683c\u5f0f\uff0c\u5f53\u4f7f\u7528HTML5 video\u7684\u65f6\u5019\uff0c\u4f60\u5fc5\u987b\u90fd\u63d0\u4f9b\uff1a<\/p>\n

          \n
          \n
            \n
          1. <video controls preload><\/li>\n
          2. <source src=\u201dcohagenPhoneCall.ogv\u201d type=\u201dvideo\/ogg; codecs=\u00b4vorbis, theora\u00b4\u201d \/><\/li>\n
          3. <source src=\u201dcohagenPhoneCall.mp4\u2033 type=\u201dvideo\/mp4; \u00b4codecs=\u00b4avc1.42E01E, mp4a.40.2\u00b4\u201d \/><\/li>\n
          4. <p> Your browser is old. <a href=\u201dcohagenPhoneCall.mp4\u2033>Download this video instead.<\/a> <\/p><\/li>\n
          5. <\/video><\/li>\n<\/ol>\n<\/div>\n<\/div>\n

            18. \u9884\u52a0\u8f7d\u89c6\u9891<\/strong>
            \npreload\u5c5e\u6027\u5c31\u50cf\u5b83\u7684\u5b57\u9762\u610f\u601d\u90a3\u4e48\u7b80\u5355\uff0c\u4f60\u9700\u8981\u51b3\u5b9a\u662f\u5426\u9700\u8981\u5728\u9875\u9762\u52a0\u8f7d\u7684\u65f6\u5019\u53bb\u9884\u52a0\u8f7d\u89c6\u9891
            \n<video preload><\/p>\n

            19. \u663e\u793a\u89c6\u9891\u63a7\u5236<\/strong>
            \n<video preload controls><\/p>\n

            20. \u6b63\u5219\u8868\u8fbe\u5f0f<\/strong>
            \n\u7531\u4e8epattern\u5c5e\u6027\uff0c\u6211\u4eec\u53ef\u4ee5\u5728\u4f60\u7684markup\u91cc\u9762\u76f4\u63a5\u4f7f\u7528\u6b63\u5219\u8868\u8fbe\u5f0f\u4e86<\/p>\n

            \n
            \n
              \n
            1. <form action=\u201d” method=\u201dpost\u201d><\/li>\n
            2. <label for=\u201dusername\u201d>Create a Username: <\/label><\/li>\n
            3. <input type=\u201dtext\u201d name=\u201dusername\u201d id=\u201dusername\u201d placeholder=\u201d4 <> 10\u2033 pattern=\u201d[A-Za-z]{4,10}\u201d autofocus required><\/li>\n
            4. <button type=\u201dsubmit\u201d>Go <\/button><\/li>\n
            5. <\/form><\/li>\n<\/ol>\n<\/div>\n<\/div>\n

              21. \u68c0\u6d4b\u5c5e\u6027\u652f\u6301<\/strong>
              \n\u9664\u4e86Modernizr\u4e4b\u5916\u6211\u4eec\u8fd8\u53ef\u4ee5\u901a\u8fc7javascript\u7b80\u5355\u5730\u68c0\u6d4b\u4e00\u4e9b\u5c5e\u6027\u662f\u5426\u652f\u6301\uff0c\u5982\uff1a<\/p>\n

              \n
              \n
                \n
              1. <script><\/li>\n
              2. if (!\u00b4pattern\u00b4 in document.createElement(\u00b4input\u00b4) ) {<\/li>\n
              3. \/\/ do client\/server side validation<\/li>\n
              4. }<\/li>\n
              5. <\/script><\/li>\n<\/ol>\n<\/div>\n<\/div>\n

                22. Mark\u5143\u7d20<\/strong>
                \n\u628a<mark>\u5143\u7d20\u770b\u505a\u662f\u9ad8\u4eae\u7684\u4f5c\u7528\uff0c\u5f53\u6211\u9009\u62e9\u4e00\u6bb5\u6587\u5b57\u7684\u65f6\u5019\uff0cjavascript\u5bf9\u4e8eHTML\u7684markup\u6548\u679c\u5e94\u8be5\u662f\u8fd9\u6837\u7684\uff1a
                \n<h3> Search Results <\/h3>
                \n<p> They were interrupted, just after Quato said, <mark>\u201dOpen your Mind\u201d<\/mark>. <\/p><\/p>\n

                23. \u4ec0\u4e48\u65f6\u5019\u7528<div><\/strong>
                \nHTML5\u5df2\u7ecf\u5f15\u5165\u4e86\u8fd9\u4e48\u591a\u5143\u7d20\uff0c\u90a3\u4e48div\u6211\u4eec\u8fd8\u8981\u7528\u5417\uff1fdiv\u4f60\u53ef\u4ee5\u5728\u6ca1\u6709\u66f4\u597d\u7684\u5143\u7d20\u7684\u65f6\u5019\u53bb\u7528\u3002<\/p>\n

                24. \u60f3\u7acb\u5373\u4f7f\u7528HTML5?<\/strong>
                \n\u4e0d\u8981\u7b492022\u4e86\uff0c\u73b0\u5728\u5c31\u53ef\u4ee5\u4f7f\u7528\u4e86\uff0cjust do it.<\/p>\n

                25. \u54ea\u4e9b\u4e0d\u662fHTML5<\/strong>
                \n1)SVG
                \n2)CSS3
                \n3)Geolocation
                \n4)Client Storage
                \n5)Web Sockets<\/p>\n

                26. Data\u5c5e\u6027<\/strong>
                \n<div id=\u201dmyDiv\u201d data-custom-attr=\u201dMy Value\u201d> Bla Bla <\/div>
                \nCSS\u4e2d\u4f7f\u7528\uff1a<\/p>\n

                \n
                \n
                  \n
                1. <style><\/li>\n
                2. h1:hover:after {<\/li>\n
                3. content: attr(data-hover-response);<\/li>\n
                4. color: black;<\/li>\n
                5. position: absolute;<\/li>\n
                6. left: 0;<\/li>\n
                7. }<\/li>\n
                8. <\/style><\/li>\n<\/ol>\n<\/div>\n<\/div>\n

                  <h1 data-hover-response=\u201dI Said Don\u2019t Touch Me!\u201d> Don\u2019t Touch Me\u00a0\u00a0<\/h1><\/p>\n

                  27. Output\u5143\u7d20<\/strong>
                  \n<output>\u5143\u7d20\u7528\u6765\u663e\u793a\u8ba1\u7b97\u7ed3\u679c\uff0c\u4e5f\u6709\u4e00\u4e2a\u548clabel\u4e00\u6837\u7684for\u5c5e\u6027<\/p>\n

                  28. \u7528Range Input\u6765\u521b\u5efa\u6ed1\u5757<\/strong>
                  \nHTML5\u5f15\u7528\u7684range\u7c7b\u578b\u53ef\u4ee5\u521b\u5efa\u6ed1\u5757\uff0c\u5b83\u63a5\u53d7min, max, step\u548cvalue\u5c5e\u6027
                  \n\u53ef\u4ee5\u4f7f\u7528css\u7684:before\u548c:after\u6765\u663e\u793amin\u548cmax\u7684\u503c<\/p>\n

                  \n
                  \n
                    \n
                  1. i<input type=\u201drange\u201d name=\u201drange\u201d min=\u201d0\u2033 max=\u201d10\u2033 step=\u201d1\u2033 value=\u201d”><\/li>\n
                  2. nput[type=range]:before { content: attr(min); padding-right: 5px;<\/li>\n
                  3. }<\/li>\n
                  4. input[type=range]:after { content: attr(max); padding-left: 5px;}<\/li>\n<\/ol>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

                                    […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[24,11],"tags":[43,30,25],"_links":{"self":[{"href":"http:\/\/www.52inwet.com\/index.php?rest_route=\/wp\/v2\/posts\/1254"}],"collection":[{"href":"http:\/\/www.52inwet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.52inwet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.52inwet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.52inwet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1254"}],"version-history":[{"count":2,"href":"http:\/\/www.52inwet.com\/index.php?rest_route=\/wp\/v2\/posts\/1254\/revisions"}],"predecessor-version":[{"id":1257,"href":"http:\/\/www.52inwet.com\/index.php?rest_route=\/wp\/v2\/posts\/1254\/revisions\/1257"}],"wp:attachment":[{"href":"http:\/\/www.52inwet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.52inwet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1254"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.52inwet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}