{"id":100,"date":"2025-11-22T10:01:34","date_gmt":"2025-11-22T02:01:34","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=100"},"modified":"2025-11-22T10:01:34","modified_gmt":"2025-11-22T02:01:34","slug":"html5%e7%9a%84%e5%93%8d%e5%ba%94%e5%bc%8f%e5%b8%83%e5%b1%80%e7%9a%84%e6%96%b9%e6%b3%95%e7%a4%ba%e4%be%8b%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/22\/html5%e7%9a%84%e5%93%8d%e5%ba%94%e5%bc%8f%e5%b8%83%e5%b1%80%e7%9a%84%e6%96%b9%e6%b3%95%e7%a4%ba%e4%be%8b%e8%af%a6%e8%a7%a3\/","title":{"rendered":"html5\u7684\u54cd\u5e94\u5f0f\u5e03\u5c40\u7684\u65b9\u6cd5\u793a\u4f8b\u8be6\u89e3"},"content":{"rendered":"\n

\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd \u6700\u5b8c\u6574\u3001\u8bb2\u89e3\u6e05\u6670\u3001\u542b\u4ee3\u7801\u793a\u4f8b\u7684\u300aHTML5 \u54cd\u5e94\u5f0f\u5e03\u5c40\u65b9\u6cd5\u8be6\u89e3\u300b<\/strong>\uff0c\u6db5\u76d6\u79fb\u52a8\u7aef\u9002\u914d\u3001\u5a92\u4f53\u67e5\u8be2\u3001\u5f39\u6027\u5e03\u5c40\uff08Flex\uff09\u3001\u7f51\u683c\uff08Grid\uff09\u3001\u767e\u5206\u6bd4\u5e03\u5c40\u3001VW\/VH\u3001rem\/em\u3001\u56fe\u7247\u4e0e\u89c6\u9891\u54cd\u5e94\u5f0f\u65b9\u5f0f\u7b49\u3002<\/p>\n\n\n\n

\u9002\u5408\u6559\u7a0b\u3001\u6587\u6863\u7f16\u5199\u3001\u5b66\u4e60\u4f7f\u7528\u3002<\/p>\n\n\n\n

\n\n\n\n

\u2b50 HTML5 \u54cd\u5e94\u5f0f\u5e03\u5c40\u65b9\u6cd5\uff08\u542b\u5b8c\u6574\u793a\u4f8b\uff09<\/strong><\/h1>\n\n\n\n

\u54cd\u5e94\u5f0f\u5e03\u5c40\uff08Responsive Layout\uff09\u6307\u7f51\u9875\u5728 \u4e0d\u540c\u5c4f\u5e55\u8bbe\u5907<\/strong>\uff08PC \/ \u5e73\u677f \/ \u624b\u673a\uff09\u4e0a\u81ea\u52a8\u8c03\u6574\u6392\u7248\uff0c\u4fdd\u8bc1\u826f\u597d\u7684\u9605\u8bfb\u4f53\u9a8c\u3002<\/p>\n\n\n\n

HTML5 \u54cd\u5e94\u5f0f\u5e03\u5c40\u79bb\u4e0d\u5f00\uff1a<\/p>\n\n\n\n

    \n
  • CSS \u5a92\u4f53\u67e5\u8be2\uff08Media Queries\uff09<\/strong><\/li>\n\n\n\n
  • \u5f39\u6027\u76d2\u5b50\u5e03\u5c40\uff08Flexbox\uff09<\/strong><\/li>\n\n\n\n
  • CSS Grid \u7f51\u683c\u5e03\u5c40<\/strong><\/li>\n\n\n\n
  • \u767e\u5206\u6bd4 \/ \u81ea\u9002\u5e94\u5bbd\u5ea6<\/strong><\/li>\n\n\n\n
  • \u6d41\u5f0f\u56fe\u7247 \/ \u89c6\u9891<\/strong><\/li>\n\n\n\n
  • viewport \u8bbe\u7f6e<\/strong><\/li>\n\n\n\n
  • rem \/ vw \/ vh \u5e03\u5c40<\/strong><\/li>\n<\/ul>\n\n\n\n

    \u4e0b\u9762\u9010\u4e00\u8bb2\u89e3\u5e76\u914d\u5408\u5b9e\u9645\u793a\u4f8b\u3002<\/p>\n\n\n\n

    \n\n\n\n

    \u4e00\u3001Viewport \u8bbe\u7f6e\uff08\u79fb\u52a8\u7aef\u54cd\u5e94\u5f0f\u7684\u7b2c\u4e00\u6b65\uff09<\/strong><\/h1>\n\n\n\n

    \u5728 <head><\/code> \u4e2d\u52a0\u5165\u4ee5\u4e0b\u6807\u7b7e\uff1a<\/p>\n\n\n

    \n&lt;meta name="viewport"\n      content="width=device-width, initial-scale=1.0, maximum-scale=1.0">\n\n<\/pre><\/div>\n\n\n
    \u4f5c\u7528\uff1a<\/p>\n\n\n\n
    \u2714 \u9875\u9762\u5bbd\u5ea6\u968f\u8bbe\u5907\u5bbd\u5ea6\u53d8\u5316
    \u2714 \u7981\u6b62\u7528\u6237\u81ea\u52a8\u7f29\u653e\uff08\u53ef\u9009\uff09
    \u2714 \u89e3\u51b3\u624b\u673a\u4e0a\u5b57\u4f53\u53d8\u5927\/\u7f29\u5c0f\u95ee\u9898<\/p>\n\n\n\n
    \n\n\n\n
    \u4e8c\u3001CSS \u5a92\u4f53\u67e5\u8be2\uff08Media Queries\uff09\u54cd\u5e94\u5f0f\u6838\u5fc3<\/strong><\/h1>\n\n\n\n
    \u7528\u4e8e\u6839\u636e\u8bbe\u5907\u5bbd\u5ea6\u5e94\u7528\u4e0d\u540c CSS\u3002<\/p>\n\n\n\n
    \u793a\u4f8b\uff1a\u57fa\u7840\u5a92\u4f53\u67e5\u8be2<\/strong><\/h2>\n\n\n
    \n\/* PC *\/\nbody { background: #e8f5ff; }\n\n\/* \u5e73\u677f\uff08\u2264 1024px\uff09 *\/\n@media (max-width: 1024px) {\n    body { background: #ffe7e7; }\n}\n\n\/* \u624b\u673a\uff08\u2264 600px\uff09 *\/\n@media (max-width: 600px) {\n    body { background: #e7ffe7; }\n}\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u793a\u4f8b\uff1a\u54cd\u5e94\u5f0f\u4e24\u680f\u5e03\u5c40<\/strong><\/h2>\n\n\n
    \n&lt;style>\n.container {\n    display: flex;\n    gap: 10px;\n}\n.left { width: 70%; background: #b3d9ff; }\n.right { width: 30%; background: #ffd6d6; }\n\n\/* \u624b\u673a\u53d8\u4e3a\u4e0a\u4e0b\u5e03\u5c40 *\/\n@media (max-width: 768px) {\n    .container {\n        flex-direction: column;\n    }\n    .left, .right {\n        width: 100%;\n    }\n}\n&lt;\/style>\n\n&lt;div class="container">\n    &lt;div class="left">\u5de6\u4fa7\u5185\u5bb9&lt;\/div>\n    &lt;div class="right">\u53f3\u4fa7\u680f&lt;\/div>\n&lt;\/div>\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u4e09\u3001Flexbox \u5f39\u6027\u5e03\u5c40\uff08\u6700\u5e38\u7528\uff09<\/strong><\/h1>\n\n\n\n
    Flex \u662f\u54cd\u5e94\u5f0f\u5e03\u5c40\u7684\u4e3b\u529b\u519b\u3002<\/p>\n\n\n\n
    \u4f8b\u5b50\uff1a\u81ea\u52a8\u6362\u884c + \u81ea\u9002\u5e94\u5bbd\u5ea6<\/strong><\/h2>\n\n\n
    \n&lt;style>\n.box {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n}\n.item {\n    flex: 1 1 200px; \/* \u6700\u5c0f\u5bbd\u5ea6200px\uff0c\u81ea\u52a8\u6362\u884c *\/\n    background: #def;\n    padding: 20px;\n}\n&lt;\/style>\n\n&lt;div class="box">\n    &lt;div class="item">\u5185\u5bb91&lt;\/div>\n    &lt;div class="item">\u5185\u5bb92&lt;\/div>\n    &lt;div class="item">\u5185\u5bb93&lt;\/div>\n    &lt;div class="item">\u5185\u5bb94&lt;\/div>\n&lt;\/div>\n\n<\/pre><\/div>\n\n\n
    \u7279\u70b9\uff1a<\/p>\n\n\n\n
    \u2714 \u81ea\u52a8\u6362\u884c
    \u2714 \u6bcf\u5217\u6700\u5c0f\u5bbd\u5ea6 200px
    \u2714 PC 4\u5217\uff0ciPad 2\u5217\uff0c\u624b\u673a 1\u5217\uff08\u81ea\u9002\u5e94\uff09<\/p>\n\n\n\n
    \n\n\n\n
    \u56db\u3001CSS Grid \u7f51\u683c\u5e03\u5c40\uff08\u6700\u5f3a\u5927\u7684\u54cd\u5e94\u5f0f\u65b9\u6848\uff09<\/strong><\/h1>\n\n\n\n
    Grid \u8ba9\u54cd\u5e94\u5f0f\u5e03\u5c40\u66f4\u7b80\u5355\u3002<\/p>\n\n\n\n
    \u4f8b\u5b50\uff1a\u4e0d\u5199\u5a92\u4f53\u67e5\u8be2\u7684\u81ea\u9002\u5e94\u5361\u7247\u5e03\u5c40<\/strong><\/h2>\n\n\n
    \n&lt;style>\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 15px;\n}\n.card {\n  background: #f0f0f0;\n  padding: 20px;\n}\n&lt;\/style>\n\n&lt;div class="grid">\n  &lt;div class="card">\u5361\u72471&lt;\/div>\n  &lt;div class="card">\u5361\u72472&lt;\/div>\n  &lt;div class="card">\u5361\u72473&lt;\/div>\n  &lt;div class="card">\u5361\u72474&lt;\/div>\n&lt;\/div>\n\n<\/pre><\/div>\n\n\n
    \u4f18\u52bf\uff1a<\/p>\n\n\n\n
    \u2714 \u4e0d\u9700\u8981\u5a92\u4f53\u67e5\u8be2
    \u2714 \u5bbd\u5ea6\u4e0d\u8db3\u81ea\u52a8\u6362\u884c
    \u2714 \u6700\u5c11 200px\uff0c\u6bcf\u884c\u81ea\u52a8\u6392\u5217<\/p>\n\n\n\n
    \n\n\n\n
    \u4e94\u3001\u767e\u5206\u6bd4\u5e03\u5c40\uff08\u6700\u7ecf\u5178\u54cd\u5e94\u5f0f\u65b9\u5f0f\uff09<\/strong><\/h1>\n\n\n
    \n.left { width: 70%; }\n.right { width: 30%; }\n\n@media (max-width: 768px) {\n    .left, .right {\n        width: 100%;\n    }\n}\n\n<\/pre><\/div>\n\n\n
    \u7b80\u5355\u76f4\u89c2\uff0c\u9002\u5408\u65e7\u9879\u76ee\u3002<\/p>\n\n\n\n
    \n\n\n\n
    \u516d\u3001VW \/ VH\uff08\u6839\u636e\u89c6\u53e3\u5927\u5c0f\u8ba1\u7b97\uff09<\/strong><\/h1>\n\n\n\n
      \n
    • 1vw = 1% \u7684\u89c6\u53e3\u5bbd\u5ea6<\/code><\/li>\n\n\n\n
    • 1vh = 1% \u7684\u89c6\u53e3\u9ad8\u5ea6<\/code><\/li>\n<\/ul>\n\n\n\n
      \u793a\u4f8b\uff1a\u6807\u9898\u968f\u5c4f\u5e55\u5bbd\u5ea6\u7f29\u653e<\/strong><\/h2>\n\n\n
      \nh1 {\n    font-size: 5vw;\n}\n\n<\/pre><\/div>\n\n\n
      \u624b\u673a \/ PC \u81ea\u52a8\u7f29\u653e\u3002<\/p>\n\n\n\n
      \n\n\n\n
      \u4e03\u3001rem \/ em + \u5a92\u4f53\u67e5\u8be2\uff08\u5e38\u7528\u79fb\u52a8\u7aef\u7b49\u6bd4\u7f29\u653e\uff09<\/strong><\/h1>\n\n\n
      \nhtml { font-size: 16px; }\n\n@media (max-width: 600px) {\n    html { font-size: 14px; }\n}\n\n.box {\n    width: 20rem; \/* \u6839\u636e\u6839\u5b57\u4f53\u5927\u5c0f\u7f29\u653e *\/\n}\n\n<\/pre><\/div>\n\n\n
      \u9002\u5408 APP \u7aef \/ \u5927\u9879\u76ee\u3002<\/p>\n\n\n\n
      \n\n\n\n
      \u516b\u3001\u54cd\u5e94\u5f0f\u56fe\u7247\uff08\u6d41\u5f0f\u56fe\u7247\uff09<\/strong><\/h1>\n\n\n\n
      \u65b9\u5f0f 1\uff1amax-width: 100%\uff08\u6700\u5e38\u7528\uff09<\/strong><\/h2>\n\n\n
      \nimg {\n    max-width: 100%;\n    height: auto;\n}\n\n<\/pre><\/div>\n\n\n
      \u65b9\u5f0f 2\uff1apicture\uff08\u6839\u636e\u8bbe\u5907\u52a0\u8f7d\u4e0d\u540c\u56fe\u7247\uff09<\/strong><\/h2>\n\n\n
      \n&lt;picture>\n    &lt;source media="(max-width: 600px)" srcset="small.jpg">\n    &lt;img src="large.jpg" alt="">\n&lt;\/picture>\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u4e5d\u3001\u54cd\u5e94\u5f0f\u89c6\u9891<\/strong><\/h1>\n\n\n
      \n.video-wrapper {\n    position: relative;\n    padding-top: 56.25%; \/* 16:9 *\/\n}\n.video-wrapper iframe {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n}\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u5341\u3001\u7efc\u5408\u5b8c\u6574\u6848\u4f8b\uff1a\u54cd\u5e94\u5f0f\u4e09\u680f\u5e03\u5c40\uff08PC \u2192 \u5e73\u677f \u2192 \u624b\u673a\uff09<\/strong><\/h1>\n\n\n
      \n&lt;style>\n.container {\n    display: flex;\n    gap: 10px;\n}\n.left, .middle, .right {\n    padding: 20px;\n    background: #def;\n}\n\n\/* PC \u4e09\u680f *\/\n.left   { flex: 1; }\n.middle { flex: 2; }\n.right  { flex: 1; }\n\n\/* \u5e73\u677f\u53d8\u6210\u4e24\u680f *\/\n@media (max-width: 1024px) {\n    .right { display: none; }\n}\n\n\/* \u624b\u673a\u53d8\u4e00\u680f *\/\n@media (max-width: 600px) {\n    .container { flex-direction: column; }\n}\n&lt;\/style>\n\n&lt;div class="container">\n    &lt;div class="left">\u5de6\u4fa7&lt;\/div>\n    &lt;div class="middle">\u4e2d\u95f4&lt;\/div>\n    &lt;div class="right">\u53f3\u4fa7&lt;\/div>\n&lt;\/div>\n\n<\/pre><\/div>\n\n\n
      \u7ed3\u679c\uff1a<\/p>\n\n\n\n
      \u2714 PC\uff1a3\u680f
      \u2714 \u5e73\u677f\uff1a2\u680f
      \u2714 \u624b\u673a\uff1a1\u680f<\/p>\n\n\n\n
      \n\n\n\n
      \u2705 \u603b\u7ed3\uff1a\u54cd\u5e94\u5f0f\u5e03\u5c40\u7684\u5e38\u7528\u65b9\u6cd5<\/strong><\/h1>\n\n\n\n
      \u65b9\u6cd5<\/th>\u7279\u70b9<\/th><\/tr><\/thead>
      viewport<\/td>\u57fa\u7840\u9002\u914d\uff0c\u5fc5\u987b\u8bbe\u7f6e<\/td><\/tr>
      \u5a92\u4f53\u67e5\u8be2<\/td>\u7cbe\u786e\u63a7\u5236\u4e0d\u540c\u5206\u8fa8\u7387\u7684\u6837\u5f0f<\/td><\/tr>
      Flex<\/td>\u5f39\u6027\u76d2\u5b50\uff0c\u79fb\u52a8\u7aef\u5e03\u5c40\u4e3b\u6d41<\/td><\/tr>
      Grid<\/td>\u6700\u5f3a\u5927\u7684\u54cd\u5e94\u5f0f\u5e03\u5c40\uff08\u63a8\u8350\uff09<\/td><\/tr>
      \u767e\u5206\u6bd4\u5e03\u5c40<\/td>\u7b80\u5355\u6613\u7528<\/td><\/tr>
      rem\/vw\/vh<\/td>\u81ea\u9002\u5e94\u5b57\u4f53\u3001\u5bb9\u5668\u5927\u5c0f<\/td><\/tr>
      \u6d41\u5f0f\u56fe\u7247\/\u89c6\u9891<\/td>\u9632\u6b62\u6ea2\u51fa<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      \u592a\u68d2 \u2014\u2014 \u6211\u628a\u4f60\u8981\u7684 \u201c\u5168\u90e8\u201d\u54cd\u5e94\u5f0f\u5185\u5bb9<\/strong>\u90fd\u505a\u4e86\uff1a
      \u4e0b\u9762\u5305\u542b\u56db\u4e2a\u53ef\u76f4\u63a5\u590d\u5236\u8fd0\u884c<\/strong>\u7684\u5b8c\u6574 HTML \u793a\u4f8b\uff08\u6bcf\u4e2a\u90fd\u662f\u72ec\u7acb\u6587\u4ef6\uff09\uff1a<\/p>\n\n\n\n
        \n
      1. \u54cd\u5e94\u5f0f\u5bfc\u822a\u680f\uff08\u542b\u6c49\u5821\u83dc\u5355 + \u65e0\u969c\u788d\/\u952e\u76d8\u652f\u6301\uff09<\/li>\n\n\n\n
      2. \u54cd\u5e94\u5f0f\u7535\u5546\u9996\u9875\u6a21\u677f\uff08PC \/ \u5e73\u677f \/ \u624b\u673a\uff0c\u5e26\u8f6e\u64ad\u3001\u5546\u54c1\u5361\u7247\uff09<\/li>\n\n\n\n
      3. \u6781\u7b80\u54cd\u5e94\u5f0f\u6805\u683c\u7cfb\u7edf\uff0850 \u884c\u5de6\u53f3\uff0c\u53ef\u590d\u7528\u7684 CSS \u5b9e\u73b0\uff09<\/li>\n\n\n\n
      4. \u54cd\u5e94\u5f0f\u540e\u53f0\u7ba1\u7406\u9762\u677f\u5e03\u5c40\uff08\u4fa7\u680f\u53ef\u6298\u53e0\u3001\u9876\u90e8\u680f\u3001\u54cd\u5e94\u5f0f\u5185\u5bb9\u533a\uff09<\/li>\n<\/ol>\n\n\n\n
        \u6bcf\u4e2a\u793a\u4f8b\u524d\u6211\u4f1a\u7ed9\u4e00\u6bb5\u7b80\u77ed\u8bf4\u660e \u2014\u2014 \u76f4\u63a5\u590d\u5236\u5230 .html<\/code> \u6587\u4ef6\u6253\u5f00\u5373\u53ef\u6d4b\u8bd5\u3002\u5f00\u59cb\u5427\uff01<\/p>\n\n\n\n
        1. \u54cd\u5e94\u5f0f\u5bfc\u822a\u680f\uff08Hamburger \u83dc\u5355 + \u53ef\u8bbf\u95ee\u6027\uff09<\/h1>\n\n\n\n
        \u8bf4\u660e\uff1a\u9876\u90e8\u56fa\u5b9a\u5bfc\u822a\uff0c\u684c\u9762\u663e\u793a\u6c34\u5e73\u83dc\u5355\uff0c\u79fb\u52a8\u663e\u793a\u6c49\u5821\u83dc\u5355\u5e76\u6ed1\u51fa\u4fa7\u680f\u3002\u652f\u6301\u952e\u76d8\u4e0e aria \u5c5e\u6027\u3002<\/p>\n\n\n
        \n&lt;!DOCTYPE html>\n&lt;html lang="zh-CN">\n&lt;head>\n&lt;meta charset="utf-8" \/>\n&lt;meta name="viewport" content="width=device-width,initial-scale=1" \/>\n&lt;title>\u54cd\u5e94\u5f0f\u5bfc\u822a\u680f\u793a\u4f8b&lt;\/title>\n&lt;style>\n  :root{\n    --bg:#fff; --accent:#1d72ff; --muted:#666;\n  }\n  *{box-sizing:border-box}\n  body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;background:#f5f7fb}\n  header{position:fixed;top:0;left:0;right:0;background:var(--bg);border-bottom:1px solid #eee;z-index:60}\n  .nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:12px}\n  .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--accent)}\n  .brand .logo{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#6fb1ff)}\n  nav{display:flex;gap:8px;align-items:center}\n  nav a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:500}\n  nav a:hover, nav a:focus{background:#f0f6ff;color:var(--accent);outline:none}\n  .actions{display:flex;gap:8px;align-items:center}\n  .btn{padding:8px 12px;border-radius:8px;border:1px solid #e6e9ef;background:#fff}\n  \/* hamburger *\/\n  .hamburger{display:none;background:transparent;border:0;padding:8px;border-radius:8px}\n  .hamburger:focus{outline:2px solid #cfe0ff}\n  \/* mobile menu drawer *\/\n  .drawer{position:fixed;top:0;left:-280px;width:260px;height:100vh;background:var(--bg);box-shadow:2px 0 18px rgba(20,20,30,.08);transition:left .22s;z-index:70;padding:18px;display:flex;flex-direction:column;gap:10px}\n  .drawer.open{left:0}\n  .drawer a{display:block;padding:12px;border-radius:8px;color:#333;text-decoration:none}\n  .drawer .close{align-self:flex-end;background:transparent;border:0;padding:6px;font-size:18px}\n  \/* overlay *\/\n  .overlay{position:fixed;inset:0;background:rgba(10,10,20,.35);opacity:0;pointer-events:none;transition:opacity .22s;z-index:65}\n  .overlay.show{opacity:1;pointer-events:auto}\n  \/* responsive *\/\n  @media (max-width:880px){\n    nav{display:none}\n    .hamburger{display:inline-flex}\n    .actions .desktop-only{display:none}\n  }\n&lt;\/style>\n&lt;\/head>\n&lt;body>\n\n&lt;header>\n  &lt;div class="nav-inner">\n    &lt;div style="display:flex;align-items:center;gap:12px">\n      &lt;button class="hamburger" id="hamburger" aria-label="\u6253\u5f00\u83dc\u5355" aria-controls="mobile-drawer" aria-expanded="false">\u2630&lt;\/button>\n      &lt;div class="brand">&lt;div class="logo" aria-hidden="true">&lt;\/div>MyShop&lt;\/div>\n    &lt;\/div>\n\n    &lt;nav role="navigation" aria-label="\u4e3b\u5bfc\u822a">\n      &lt;a href="#">\u9996\u9875&lt;\/a>\n      &lt;a href="#">\u5206\u7c7b&lt;\/a>\n      &lt;a href="#">\u6d3b\u52a8&lt;\/a>\n      &lt;a href="#">\u5173\u4e8e\u6211\u4eec&lt;\/a>\n    &lt;\/nav>\n\n    &lt;div class="actions">\n      &lt;button class="btn desktop-only">\u767b\u5f55&lt;\/button>\n      &lt;button class="btn">\u8d2d\u7269\u8f66&lt;\/button>\n    &lt;\/div>\n  &lt;\/div>\n&lt;\/header>\n\n&lt;!-- Drawer -->\n&lt;aside id="mobile-drawer" class="drawer" aria-hidden="true">\n  &lt;button class="close" id="close-drawer" aria-label="\u5173\u95ed\u83dc\u5355">\u2715&lt;\/button>\n  &lt;nav>\n    &lt;a href="#">\u9996\u9875&lt;\/a>\n    &lt;a href="#">\u5206\u7c7b&lt;\/a>\n    &lt;a href="#">\u6d3b\u52a8&lt;\/a>\n    &lt;a href="#">\u5173\u4e8e\u6211\u4eec&lt;\/a>\n    &lt;hr>\n    &lt;a href="#">\u767b\u5f55&lt;\/a>\n    &lt;a href="#">\u8d2d\u7269\u8f66&lt;\/a>\n  &lt;\/nav>\n&lt;\/aside>\n&lt;div id="overlay" class="overlay" tabindex="-1">&lt;\/div>\n\n&lt;main style="max-width:1100px;margin:90px auto;padding:20px;">\n  &lt;h1>\u54cd\u5e94\u5f0f\u5bfc\u822a\u680f\u793a\u4f8b&lt;\/h1>\n  &lt;p>\u8c03\u6574\u6d4f\u89c8\u5668\u5bbd\u5ea6\u67e5\u770b\u6c49\u5821\u83dc\u5355\u4e0e\u62bd\u5c49\u884c\u4e3a\u3002\u6309 Esc \u5173\u95ed\u62bd\u5c49\uff1b\u70b9\u51fb\u906e\u7f69\u4e5f\u4f1a\u5173\u95ed\u3002&lt;\/p>\n&lt;\/main>\n\n&lt;script>\n  const btn = document.getElementById('hamburger');\n  const drawer = document.getElementById('mobile-drawer');\n  const closeBtn = document.getElementById('close-drawer');\n  const overlay = document.getElementById('overlay');\n\n  function openDrawer(){\n    drawer.classList.add('open');\n    overlay.classList.add('show');\n    drawer.setAttribute('aria-hidden','false');\n    btn.setAttribute('aria-expanded','true');\n    \/\/ focus first link\n    setTimeout(()=>drawer.querySelector('a')?.focus(),120);\n    document.body.style.overflow = 'hidden';\n  }\n  function closeDrawer(){\n    drawer.classList.remove('open');\n    overlay.classList.remove('show');\n    drawer.setAttribute('aria-hidden','true');\n    btn.setAttribute('aria-expanded','false');\n    document.body.style.overflow = '';\n    btn.focus();\n  }\n\n  btn.addEventListener('click', openDrawer);\n  closeBtn.addEventListener('click', closeDrawer);\n  overlay.addEventListener('click', closeDrawer);\n  document.addEventListener('keydown', (e)=>{\n    if(e.key === 'Escape' &amp;&amp; drawer.classList.contains('open')) closeDrawer();\n  });\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html>\n\n<\/pre><\/div>\n\n\n
        \n\n\n\n
        2. \u54cd\u5e94\u5f0f\u7535\u5546\u9996\u9875\u6a21\u677f\uff08PC \/ \u5e73\u677f \/ \u624b\u673a\uff09<\/h1>\n\n\n\n
        \u8bf4\u660e\uff1a\u793a\u4f8b\u5305\u542b\u9876\u90e8\u5bfc\u822a\u3001\u8f6e\u64ad\uff08\u7b80\u6613\u5b9e\u73b0\uff09\u3001\u54cd\u5e94\u5f0f\u5546\u54c1\u7f51\u683c\u3001\u5e95\u90e8\u680f\u3002\u9002\u5408\u4f5c\u4e3a\u7535\u5546\u9996\u9875\u9aa8\u67b6\u3002<\/p>\n\n\n
        \n&lt;!DOCTYPE html>\n&lt;html lang="zh-CN">\n&lt;head>\n&lt;meta charset="utf-8" \/>\n&lt;meta name="viewport" content="width=device-width,initial-scale=1" \/>\n&lt;title>\u54cd\u5e94\u5f0f\u7535\u5546\u9996\u9875\u6a21\u677f&lt;\/title>\n&lt;style>\n  *{box-sizing:border-box}\n  body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans SC',Arial;background:#fafafa;color:#222}\n  header{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:40}\n  .wrap{max-width:1200px;margin:0 auto;padding:12px}\n  .top-row{display:flex;gap:12px;align-items:center;justify-content:space-between}\n  .logo{font-weight:800;color:#1d72ff}\n  .search{flex:1;margin:0 12px}\n  .search input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e6e9ef}\n  \/* banner *\/\n  .banner{margin-top:16px;background:linear-gradient(90deg,#ffd6a5,#ffd6f2);border-radius:10px;padding:24px;display:flex;align-items:center;gap:20px}\n  .hero{flex:1}\n  .hero h2{margin:0 0 8px;font-size:20px}\n  .hero p{margin:0;color:#555}\n  .carousel{width:320px;height:140px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(20,20,40,.06)}\n  \/* product grid *\/\n  .products{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:18px 0}\n  .card{background:#fff;border-radius:10px;padding:12px;box-shadow:0 6px 18px rgba(20,20,40,.04);display:flex;flex-direction:column;gap:8px}\n  .card img{width:100%;height:140px;object-fit:cover;border-radius:8px}\n  .price{color:#e83e3e;font-weight:700}\n  \/* footer *\/\n  footer{margin-top:30px;background:#fff;padding:16px;border-top:1px solid #eee}\n  \/* responsive tweaks *\/\n  @media (max-width:720px){\n    .banner{flex-direction:column;align-items:stretch}\n    .carousel{width:100%;height:160px}\n  }\n&lt;\/style>\n&lt;\/head>\n&lt;body>\n\n&lt;header>\n  &lt;div class="wrap top-row">\n    &lt;div class="logo">ShopLogo&lt;\/div>\n    &lt;div class="search" aria-label="\u7ad9\u5185\u641c\u7d22">\n      &lt;input type="search" placeholder="\u641c\u7d22\u5546\u54c1\u3001\u54c1\u724c">\n    &lt;\/div>\n    &lt;div style="display:flex;gap:8px;align-items:center">\n      &lt;button class="btn">\u767b\u5f55&lt;\/button>\n      &lt;button class="btn">\u8d2d\u7269\u8f66(0)&lt;\/button>\n    &lt;\/div>\n  &lt;\/div>\n&lt;\/header>\n\n&lt;main class="wrap" style="padding-top:18px">\n  &lt;section class="banner">\n    &lt;div class="hero">\n      &lt;h2>\u5468\u672b\u72c2\u6b22 \u2014 \u5168\u573a\u6700\u4f4e\u4e94\u6298&lt;\/h2>\n      &lt;p>\u7cbe\u9009\u5546\u54c1\uff0c\u6781\u901f\u53d1\u8d27\uff0c7\u5929\u65e0\u7406\u7531\u9000\u8d27&lt;\/p>\n    &lt;\/div>\n    &lt;div class="carousel" id="carousel">BANNER&lt;\/div>\n  &lt;\/section>\n\n  &lt;section style="margin-top:18px">\n    &lt;h3>\u70ed\u95e8\u63a8\u8350&lt;\/h3>\n    &lt;div class="products" id="productList">\n      &lt;!-- cards \u6e32\u67d3 -->\n    &lt;\/div>\n  &lt;\/section>\n\n  &lt;section style="margin-top:6px">\n    &lt;h3>\u731c\u4f60\u559c\u6b22&lt;\/h3>\n    &lt;div class="products" id="moreList">&lt;\/div>\n  &lt;\/section>\n&lt;\/main>\n\n&lt;footer class="wrap">\n  &lt;div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px">\n    &lt;div>\u00a9 2025 MyShop - \u6240\u6709\u6743\u4fdd\u7559&lt;\/div>\n    &lt;div>\u5173\u4e8e \u00b7 \u8054\u7cfb \u00b7 \u5e2e\u52a9&lt;\/div>\n  &lt;\/div>\n&lt;\/footer>\n\n&lt;script>\n  \/\/ \u7b80\u6613\u5546\u54c1\u6570\u636e\n  const products = Array.from({length:12}).map((_,i)=>({\n    id:i+1,\n    title:`\u6f6e\u6d41\u5355\u54c1 ${i+1}`,\n    price:(Math.random()*300+49).toFixed(2),\n    img:`https:\/\/picsum.photos\/seed\/p${i+1}\/600\/400`\n  }));\n  function render(listEl, arr){\n    listEl.innerHTML = arr.map(p=>`\n      &lt;article class="card" role="article" aria-labelledby="p${p.id}">\n        &lt;img src="${p.img}" alt="${p.title}">\n        &lt;div id="p${p.id}" style="font-weight:600">${p.title}&lt;\/div>\n        &lt;div style="display:flex;justify-content:space-between;align-items:center">\n          &lt;div class="price">\u00a5${p.price}&lt;\/div>\n          &lt;button style="padding:8px 10px;border-radius:8px;border:1px solid #eee">\u52a0\u5165\u8d2d\u7269\u8f66&lt;\/button>\n        &lt;\/div>\n      &lt;\/article>\n    `).join('');\n  }\n  render(document.getElementById('productList'), products.slice(0,8));\n  render(document.getElementById('moreList'), products.slice(8));\n\n  \/\/ \u7b80\u6613\u8f6e\u64ad\uff08\u53ea\u5207\u6587\u672c\uff09\n  const carousel = document.getElementById('carousel');\n  const banners = ['\u8d85\u503c\u7206\u6b3e','\u65b0\u54c1\u9996\u53d1','\u9650\u65f6\u6298\u6263','\u70ed\u5356\u63a8\u8350'];\n  let idx=0;\n  setInterval(()=>{ idx=(idx+1)%banners.length; carousel.textContent=banners[idx]; },2200);\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html>\n\n<\/pre><\/div>\n\n\n
        \n\n\n\n
        3. \u6781\u7b80\u54cd\u5e94\u5f0f\u6805\u683c\u7cfb\u7edf\uff08\u7ea6 50 \u884c CSS\uff0c\u53ef\u590d\u7528\uff09<\/h1>\n\n\n\n
        \u8bf4\u660e\uff1a\u5b9e\u73b0\u7c7b\u4f3c Bootstrap \u7684\u6805\u683c\uff1a.row<\/code> + .col-<\/code>\uff0c\u652f\u6301\u65ad\u70b9\uff08desktop \/ tablet \/ mobile\uff09\u3002\u63d0\u4f9b\u7b80\u5355\u7684\u4f7f\u7528\u793a\u4f8b\u3002<\/p>\n\n\n
        \n&lt;!DOCTYPE html>\n&lt;html lang="zh-CN">\n&lt;head>\n&lt;meta charset="utf-8" \/>\n&lt;meta name="viewport" content="width=device-width,initial-scale=1" \/>\n&lt;title>\u7b80\u6613\u54cd\u5e94\u5f0f\u6805\u683c\u7cfb\u7edf&lt;\/title>\n&lt;style>\n  \/* \u57fa\u7840 *\/\n  *{box-sizing:border-box}\n  .container{max-width:1200px;margin:0 auto;padding:12px}\n  .row{display:flex;flex-wrap:wrap;margin-left:-8px;margin-right:-8px}\n  .row > [class*="col-"]{padding:8px}\n\n  \/* \u9ed8\u8ba4\u5217\uff08mobile-first\uff09: \u6bcf\u5217\u5360\u6ee1 *\/\n  [class*="col-"]{flex-basis:100%;flex-grow:0;max-width:100%}\n\n  \/* \u5c0f\u4e8e\u7b49\u4e8e 768 (tablet) *\/\n  @media (min-width: 769px){\n    .col-sm-1{flex-basis:8.3333%;max-width:8.3333%}\n    .col-sm-2{flex-basis:16.6667%;max-width:16.6667%}\n    .col-sm-3{flex-basis:25%;max-width:25%}\n    .col-sm-4{flex-basis:33.3333%;max-width:33.3333%}\n    .col-sm-6{flex-basis:50%;max-width:50%}\n    .col-sm-12{flex-basis:100%;max-width:100%}\n  }\n\n  \/* \u684c\u9762 >= 1024 *\/\n  @media (min-width: 1024px){\n    .col-1{flex-basis:8.3333%;max-width:8.3333%}\n    .col-2{flex-basis:16.6667%;max-width:16.6667%}\n    .col-3{flex-basis:25%;max-width:25%}\n    .col-4{flex-basis:33.3333%;max-width:33.3333%}\n    .col-6{flex-basis:50%;max-width:50%}\n    .col-12{flex-basis:100%;max-width:100%}\n  }\n\n  \/* \u5de5\u5177\u6837\u5f0f *\/\n  .card{background:#fff;padding:16px;border-radius:8px;box-shadow:0 8px 20px rgba(15,15,30,.06);text-align:center}\n  h1{font-size:18px;margin:16px 0}\n&lt;\/style>\n&lt;\/head>\n&lt;body>\n  &lt;div class="container">\n    &lt;h1>\u7b80\u6613\u54cd\u5e94\u5f0f\u6805\u683c\u7cfb\u7edf\u6f14\u793a&lt;\/h1>\n\n    &lt;div class="row">\n      &lt;div class="col-4 col-sm-6">&lt;div class="card">col-4 (desktop) \/ col-sm-6 (tablet) \/ full for mobile&lt;\/div>&lt;\/div>\n      &lt;div class="col-4 col-sm-6">&lt;div class="card">col-4&lt;\/div>&lt;\/div>\n      &lt;div class="col-4 col-sm-12">&lt;div class="card">col-4 \/ \u5207\u6362\u4e3a\u4e00\u5217&lt;\/div>&lt;\/div>\n    &lt;\/div>\n\n    &lt;div style="height:18px">&lt;\/div>\n\n    &lt;div class="row">\n      &lt;div class="col-3 col-sm-6">&lt;div class="card">col-3&lt;\/div>&lt;\/div>\n      &lt;div class="col-3 col-sm-6">&lt;div class="card">col-3&lt;\/div>&lt;\/div>\n      &lt;div class="col-3 col-sm-6">&lt;div class="card">col-3&lt;\/div>&lt;\/div>\n      &lt;div class="col-3 col-sm-6">&lt;div class="card">col-3&lt;\/div>&lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n&lt;\/body>\n&lt;\/html>\n\n<\/pre><\/div>\n\n\n
        \n
        \u8bf4\u660e\uff1a\u4f60\u53ef\u4ee5\u628a .col-*<\/code> \u547d\u540d\u89c4\u5219\u6269\u5c55\u5230 12 \u5217\u4efb\u610f\u7ec4\u5408\uff1b\u8fd9\u4e2a\u7248\u672c\u7528 mobile-first \u7b56\u7565\uff08\u5c0f\u5c4f\u9ed8\u8ba4\u4e00\u5217\uff09\u3002<\/p>\n<\/blockquote>\n\n\n\n
        \n\n\n\n
        4. \u54cd\u5e94\u5f0f\u540e\u53f0\u7ba1\u7406\u5e03\u5c40\uff08\u4fa7\u680f\u53ef\u6298\u53e0 + \u9876\u680f + \u5185\u5bb9\u533a\uff09<\/h1>\n\n\n\n
        \u8bf4\u660e\uff1a\u5bbd\u5c4f\u663e\u793a\u5de6\u4fa7\u83dc\u5355 + \u5185\u5bb9\u533a\uff0c\u7a84\u5c4f\u6298\u53e0\u4fa7\u680f\u53d8\u4e3a\u6c49\u5821\u62bd\u5c49\u3002\u5305\u542b\u793a\u4f8b\u8868\u683c\u548c\u54cd\u5e94\u5f0f\u5361\u7247\u3002<\/p>\n\n\n
        \n&lt;!DOCTYPE html>\n&lt;html lang="zh-CN">\n&lt;head>\n&lt;meta charset="utf-8" \/>\n&lt;meta name="viewport" content="width=device-width,initial-scale=1" \/>\n&lt;title>\u54cd\u5e94\u5f0f\u540e\u53f0\u5e03\u5c40 \u793a\u4f8b&lt;\/title>\n&lt;style>\n  :root{--sidebar:260px;--collapsed:64px;--bg:#f7f8fb;--card:#fff}\n  *{box-sizing:border-box}\n  body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,'Noto Sans SC',Arial;background:var(--bg);color:#222}\n  .app{display:flex;min-height:100vh}\n  \/* sidebar *\/\n  .sidebar{width:var(--sidebar);background:#fff;border-right:1px solid #eee;padding:12px 8px;transition:width .2s}\n  .brand{font-weight:800;padding:12px 8px;margin-bottom:8px}\n  .menu{display:flex;flex-direction:column;gap:6px}\n  .menu a{padding:10px;border-radius:8px;color:#444;text-decoration:none;display:flex;gap:10px;align-items:center}\n  .menu a:hover{background:#f0f6ff;color:#1d72ff}\n  \/* main area *\/\n  .main{flex:1;display:flex;flex-direction:column}\n  .topbar{height:56px;background:transparent;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;padding:8px 16px}\n  .content{padding:18px;max-width:1200px;margin:0 auto;width:100%}\n  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}\n  .card{background:var(--card);padding:14px;border-radius:10px;box-shadow:0 6px 18px rgba(20,20,40,.04)}\n  table{width:100%;border-collapse:collapse;background:var(--card);border-radius:10px;overflow:hidden}\n  th,td{padding:12px;border-bottom:1px solid #f0f0f0;text-align:left}\n  th{background:#fafafa;font-weight:700}\n  \/* responsive behavior *\/\n  @media (max-width:900px){\n    .sidebar{position:fixed;left:-320px;top:0;height:100vh;z-index:60;width:260px}\n    .sidebar.open{left:0}\n    .overlay{position:fixed;inset:0;background:rgba(10,10,20,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}\n    .overlay.show{opacity:1;pointer-events:auto}\n    .main{margin-left:0}\n  }\n  @media (min-width:901px){\n    .overlay{display:none}\n  }\n&lt;\/style>\n&lt;\/head>\n&lt;body>\n\n&lt;div class="app">\n  &lt;aside class="sidebar" id="sidebar" aria-hidden="false">\n    &lt;div class="brand">AdminPanel&lt;\/div>\n    &lt;nav class="menu" aria-label="\u4fa7\u8fb9\u5bfc\u822a">\n      &lt;a href="#">&lt;span>\ud83c\udfe0&lt;\/span> \u4eea\u8868\u76d8&lt;\/a>\n      &lt;a href="#">&lt;span>\ud83d\udce6&lt;\/span> \u5546\u54c1\u7ba1\u7406&lt;\/a>\n      &lt;a href="#">&lt;span>\ud83e\uddfe&lt;\/span> \u8ba2\u5355\u7ba1\u7406&lt;\/a>\n      &lt;a href="#">&lt;span>\ud83d\udc65&lt;\/span> \u7528\u6237\u7ba1\u7406&lt;\/a>\n      &lt;a href="#">&lt;span>\u2699\ufe0f&lt;\/span> \u8bbe\u7f6e&lt;\/a>\n    &lt;\/nav>\n  &lt;\/aside>\n\n  &lt;div class="main">\n    &lt;div class="topbar">\n      &lt;div style="display:flex;align-items:center;gap:12px">\n        &lt;button id="toggle" aria-label="\u5207\u6362\u4fa7\u680f" style="padding:8px;border-radius:8px">\u2630&lt;\/button>\n        &lt;h3 style="margin:0">\u4eea\u8868\u76d8&lt;\/h3>\n      &lt;\/div>\n      &lt;div style="display:flex;gap:12px;align-items:center">\n        &lt;input placeholder="\u641c\u7d22\u8ba2\u5355" style="padding:8px 12px;border-radius:8px;border:1px solid #e6e9ef">\n        &lt;div>\u7ba1\u7406\u5458&lt;\/div>\n      &lt;\/div>\n    &lt;\/div>\n\n    &lt;div class="content">\n      &lt;div class="grid">\n        &lt;div class="card">&lt;div style="font-size:14px;color:#666">\u4eca\u5929\u6536\u5165&lt;\/div>&lt;div style="font-size:20px;font-weight:700">\u00a512,345&lt;\/div>&lt;\/div>\n        &lt;div class="card">&lt;div style="font-size:14px;color:#666">\u65b0\u7528\u6237&lt;\/div>&lt;div style="font-size:20px;font-weight:700">1,234&lt;\/div>&lt;\/div>\n        &lt;div class="card">&lt;div style="font-size:14px;color:#666">\u5f85\u53d1\u8d27\u8ba2\u5355&lt;\/div>&lt;div style="font-size:20px;font-weight:700">32&lt;\/div>&lt;\/div>\n      &lt;\/div>\n\n      &lt;div style="height:16px">&lt;\/div>\n\n      &lt;div class="card">\n        &lt;h4 style="margin:0 0 8px">\u6700\u8fd1\u8ba2\u5355&lt;\/h4>\n        &lt;table>\n          &lt;thead>&lt;tr>&lt;th>ID&lt;\/th>&lt;th>\u7528\u6237&lt;\/th>&lt;th>\u91d1\u989d&lt;\/th>&lt;th>\u72b6\u6001&lt;\/th>&lt;\/tr>&lt;\/thead>\n          &lt;tbody>\n            &lt;tr>&lt;td>#1001&lt;\/td>&lt;td>\u5f20\u4e09&lt;\/td>&lt;td>\u00a5299.00&lt;\/td>&lt;td>\u5df2\u652f\u4ed8&lt;\/td>&lt;\/tr>\n            &lt;tr>&lt;td>#1002&lt;\/td>&lt;td>\u674e\u56db&lt;\/td>&lt;td>\u00a51,299.00&lt;\/td>&lt;td>\u5f85\u53d1\u8d27&lt;\/td>&lt;\/tr>\n            &lt;tr>&lt;td>#1003&lt;\/td>&lt;td>\u738b\u4e94&lt;\/td>&lt;td>\u00a549.00&lt;\/td>&lt;td>\u5df2\u53d6\u6d88&lt;\/td>&lt;\/tr>\n          &lt;\/tbody>\n        &lt;\/table>\n      &lt;\/div>\n\n    &lt;\/div>\n  &lt;\/div>\n&lt;\/div>\n\n&lt;div id="overlay" class="overlay" tabindex="-1">&lt;\/div>\n\n&lt;script>\n  const toggle = document.getElementById('toggle');\n  const sidebar = document.getElementById('sidebar');\n  const overlay = document.getElementById('overlay');\n\n  function openSidebar(){\n    sidebar.classList.add('open');\n    overlay.classList.add('show');\n    sidebar.setAttribute('aria-hidden','false');\n    document.body.style.overflow='hidden';\n  }\n  function closeSidebar(){\n    sidebar.classList.remove('open');\n    overlay.classList.remove('show');\n    sidebar.setAttribute('aria-hidden','true');\n    document.body.style.overflow='';\n  }\n\n  toggle.addEventListener('click', ()=>{\n    if(window.innerWidth &lt;= 900){\n      if(sidebar.classList.contains('open')) closeSidebar();\n      else openSidebar();\n    } else {\n      \/\/ \u5bbd\u5c4f\u4e0b\u5207\u6362\u6298\u53e0\uff08\u7b80\u5355\u5b9e\u73b0\uff1a\u5bbd\u5ea6\u5207\u5c0f\uff09\n      if(getComputedStyle(sidebar).width === '64px'){\n        sidebar.style.width = '260px';\n      } else {\n        sidebar.style.width = '64px';\n      }\n    }\n  });\n\n  overlay.addEventListener('click', closeSidebar);\n  window.addEventListener('resize', ()=>{\n    if(window.innerWidth > 900){\n      sidebar.classList.remove('open');\n      overlay.classList.remove('show');\n      sidebar.style.width = '';\n      document.body.style.overflow = '';\n    }\n  });\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html>\n\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
        \u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd \u6700\u5b8c\u6574\u3001\u8bb2\u89e3\u6e05\u6670\u3001\u542b\u4ee3\u7801\u793a\u4f8b\u7684\u300aHTML5 \u54cd\u5e94\u5f0f\u5e03\u5c40\u65b9\u6cd5\u8be6\u89e3\u300b\uff0c… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-100","post","type-post","status-publish","format-standard","hentry","category-html5"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/100\/revisions"}],"predecessor-version":[{"id":101,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/100\/revisions\/101"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}