{"id":208,"date":"2025-11-25T09:41:34","date_gmt":"2025-11-25T01:41:34","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=208"},"modified":"2025-11-25T09:41:34","modified_gmt":"2025-11-25T01:41:34","slug":"%e5%9f%ba%e4%ba%8ehtml%e5%8d%81%e7%a7%92%e5%81%9a%e5%87%ba%e6%b7%98%e5%ae%9d%e9%a1%b5%e9%9d%a2","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/%e5%9f%ba%e4%ba%8ehtml%e5%8d%81%e7%a7%92%e5%81%9a%e5%87%ba%e6%b7%98%e5%ae%9d%e9%a1%b5%e9%9d%a2\/","title":{"rendered":"\u57fa\u4e8eHTML\u5341\u79d2\u505a\u51fa\u6dd8\u5b9d\u9875\u9762"},"content":{"rendered":"\n<p>\u4f60\u60f3\u5728 <strong>HTML+CSS+\u5c11\u91cf JS<\/strong> \u7684\u57fa\u7840\u4e0a\u5feb\u901f\u590d\u523b\u4e00\u4e2a\u7c7b\u4f3c <strong>\u6dd8\u5b9d\u9996\u9875<\/strong> \u7684\u9759\u6001\u9875\u9762\u3002\u8fd9\u91cc\u7ed9\u4f60\u4e00\u4e2a <strong>10\u79d2\u7ea7\u6548\u679c\u793a\u4f8b<\/strong>\uff08\u7b80\u5316\u7248\uff09\uff0c\u91cd\u70b9\u5c55\u793a\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9876\u90e8\u641c\u7d22\u680f<\/li>\n\n\n\n<li>\u8f6e\u64ad\u56fe<\/li>\n\n\n\n<li>\u5206\u7c7b\u5bfc\u822a<\/li>\n\n\n\n<li>\u5546\u54c1\u5217\u8868<\/li>\n<\/ul>\n\n\n\n<p>\u7eaf <strong>\u524d\u7aef\u9759\u6001 HTML+CSS+\u5c11\u91cf JS<\/strong>\uff0c\u53ef\u4ee5\u76f4\u63a5\u5728 H5 \u6d4f\u89c8\u5668\u6253\u5f00\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!DOCTYPE html&gt;\n&amp;lt;html lang=&quot;zh-CN&quot;&gt;\n&amp;lt;head&gt;\n&amp;lt;meta charset=&quot;UTF-8&quot;&gt;\n&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n&amp;lt;title&gt;\u4eff\u6dd8\u5b9d\u9996\u9875 Demo&amp;lt;\/title&gt;\n&amp;lt;style&gt;\n  body { margin:0; font-family: Arial, sans-serif; }\n  header { background: #ff0036; color:#fff; padding:10px; display:flex; align-items:center; }\n  header input { flex:1; padding:5px; border:none; border-radius:4px; margin-left:10px; }\n  nav { display:flex; justify-content:space-around; background:#fff; padding:10px 0; border-bottom:1px solid #ddd; }\n  nav div { text-align:center; }\n  nav img { width:40px; height:40px; display:block; margin:0 auto 5px; }\n  .carousel { width:100%; height:180px; overflow:hidden; position:relative; }\n  .carousel img { width:100%; height:100%; position:absolute; top:0; left:100%; transition:0.5s; }\n  .carousel img.active { left:0; }\n  .goods { display:flex; flex-wrap:wrap; padding:10px; background:#f5f5f5; }\n  .goods div { width:48%; margin:1%; background:#fff; padding:5px; box-sizing:border-box; }\n  .goods img { width:100%; }\n  .goods p { margin:5px 0; font-size:14px; }\n&amp;lt;\/style&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n\n&amp;lt;header&gt;\n  &amp;lt;h2&gt;\u6dd8\u5b9d&amp;lt;\/h2&gt;\n  &amp;lt;input type=&quot;text&quot; placeholder=&quot;\u641c\u7d22\u5546\u54c1&quot;&gt;\n&amp;lt;\/header&gt;\n\n&amp;lt;nav&gt;\n  &amp;lt;div&gt;&amp;lt;img src=&quot;https:\/\/img.icons8.com\/color\/48\/000000\/t-shirt.png&quot;\/&gt;&amp;lt;span&gt;\u670d\u9970&amp;lt;\/span&gt;&amp;lt;\/div&gt;\n  &amp;lt;div&gt;&amp;lt;img src=&quot;https:\/\/img.icons8.com\/color\/48\/000000\/laptop.png&quot;\/&gt;&amp;lt;span&gt;\u6570\u7801&amp;lt;\/span&gt;&amp;lt;\/div&gt;\n  &amp;lt;div&gt;&amp;lt;img src=&quot;https:\/\/img.icons8.com\/color\/48\/000000\/home.png&quot;\/&gt;&amp;lt;span&gt;\u5bb6\u5c45&amp;lt;\/span&gt;&amp;lt;\/div&gt;\n  &amp;lt;div&gt;&amp;lt;img src=&quot;https:\/\/img.icons8.com\/color\/48\/000000\/gift.png&quot;\/&gt;&amp;lt;span&gt;\u793c\u7269&amp;lt;\/span&gt;&amp;lt;\/div&gt;\n&amp;lt;\/nav&gt;\n\n&amp;lt;div class=&quot;carousel&quot;&gt;\n  &amp;lt;img src=&quot;https:\/\/via.placeholder.com\/400x180\/ff0036\/fff?text=\u8f6e\u64ad1&quot; class=&quot;active&quot;&gt;\n  &amp;lt;img src=&quot;https:\/\/via.placeholder.com\/400x180\/ff7a45\/fff?text=\u8f6e\u64ad2&quot;&gt;\n  &amp;lt;img src=&quot;https:\/\/via.placeholder.com\/400x180\/ffd666\/fff?text=\u8f6e\u64ad3&quot;&gt;\n&amp;lt;\/div&gt;\n\n&amp;lt;div class=&quot;goods&quot;&gt;\n  &amp;lt;div&gt;\n    &amp;lt;img src=&quot;https:\/\/via.placeholder.com\/200x200\/73d13d\/fff?text=\u5546\u54c11&quot;&gt;\n    &amp;lt;p&gt;\u5546\u54c1\u540d\u79f01&amp;lt;\/p&gt;\n    &amp;lt;p&gt;\u00a599&amp;lt;\/p&gt;\n  &amp;lt;\/div&gt;\n  &amp;lt;div&gt;\n    &amp;lt;img src=&quot;https:\/\/via.placeholder.com\/200x200\/40a9ff\/fff?text=\u5546\u54c12&quot;&gt;\n    &amp;lt;p&gt;\u5546\u54c1\u540d\u79f02&amp;lt;\/p&gt;\n    &amp;lt;p&gt;\u00a5199&amp;lt;\/p&gt;\n  &amp;lt;\/div&gt;\n  &amp;lt;div&gt;\n    &amp;lt;img src=&quot;https:\/\/via.placeholder.com\/200x200\/f759ab\/fff?text=\u5546\u54c13&quot;&gt;\n    &amp;lt;p&gt;\u5546\u54c1\u540d\u79f03&amp;lt;\/p&gt;\n    &amp;lt;p&gt;\u00a5299&amp;lt;\/p&gt;\n  &amp;lt;\/div&gt;\n  &amp;lt;div&gt;\n    &amp;lt;img src=&quot;https:\/\/via.placeholder.com\/200x200\/9254de\/fff?text=\u5546\u54c14&quot;&gt;\n    &amp;lt;p&gt;\u5546\u54c1\u540d\u79f04&amp;lt;\/p&gt;\n    &amp;lt;p&gt;\u00a5399&amp;lt;\/p&gt;\n  &amp;lt;\/div&gt;\n&amp;lt;\/div&gt;\n\n&amp;lt;script&gt;\n\/\/ \u7b80\u5355\u8f6e\u64ad\nconst imgs = document.querySelectorAll(&#039;.carousel img&#039;);\nlet index = 0;\nsetInterval(() =&gt; {\n  imgs&#x5B;index].classList.remove(&#039;active&#039;);\n  index = (index + 1) % imgs.length;\n  imgs&#x5B;index].classList.add(&#039;active&#039;);\n}, 3000);\n&amp;lt;\/script&gt;\n\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd39 \u7279\u6027\u8bf4\u660e<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u9876\u90e8\u641c\u7d22\u680f<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u7ea2\u8272\u80cc\u666f + \u641c\u7d22\u8f93\u5165\u6846<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u8f6e\u64ad\u56fe<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u4f7f\u7528\u7edd\u5bf9\u5b9a\u4f4d + <code>transition<\/code> \u5b9e\u73b0\u7b80\u5355\u5207\u6362<\/li>\n\n\n\n<li>\u81ea\u52a8\u8f6e\u64ad\uff0c\u6bcf 3 \u79d2\u5207\u6362<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5206\u7c7b\u5bfc\u822a<\/strong>\n<ul class=\"wp-block-list\">\n<li>4 \u4e2a\u5e38\u89c1\u5206\u7c7b<\/li>\n\n\n\n<li>\u56fe\u7247 + \u6587\u672c<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5546\u54c1\u5217\u8868<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u4e24\u5217\u5e03\u5c40 + margin<\/li>\n\n\n\n<li>\u5546\u54c1\u56fe\u7247 + \u540d\u79f0 + \u4ef7\u683c<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd39 \u5c0f\u6280\u5de7<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u56fe\u7247\u53ef\u6362\u6210\u771f\u5b9e\u5546\u54c1\u56fe\u6216 CDN<\/li>\n\n\n\n<li>\u8f6e\u64ad\u53ef\u5347\u7ea7\u6210\u5de6\u53f3\u6ed1\u52a8\u624b\u52bf\u652f\u6301\u79fb\u52a8\u7aef<\/li>\n\n\n\n<li>\u5546\u54c1\u5217\u8868\u53ef\u6539\u6210 <strong>\u6c34\u5e73\u6eda\u52a8<\/strong>\uff0c\u7c7b\u4f3c\u6dd8\u5b9d APP \u9996\u9875\u6548\u679c<\/li>\n<\/ul>\n\n\n\n<p>\u660e\u767d\u4e86\uff0c\u963f\u6770\uff01\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a <strong>\u5347\u7ea7\u7248\u6dd8\u5b9d\u9996\u9875 H5 \u6a21\u677f<\/strong>\uff0c\u7279\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u54cd\u5e94\u5f0f\u5e03\u5c40\uff08\u9002\u914d\u624b\u673a\uff09<\/li>\n\n\n\n<li>\u8f6e\u64ad\u56fe\u652f\u6301\u81ea\u52a8\u64ad\u653e + \u624b\u52bf\u6ed1\u52a8 + \u6307\u793a\u5668<\/li>\n\n\n\n<li>\u5546\u54c1\u5217\u8868\u52a8\u6001\u52a0\u8f7d\u6570\u636e<\/li>\n\n\n\n<li>\u9876\u90e8\u641c\u7d22\u6846\u5e26\u7b80\u5355\u8054\u60f3\u63d0\u793a<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!DOCTYPE html&gt;\n&amp;lt;html lang=&quot;zh-CN&quot;&gt;\n&amp;lt;head&gt;\n&amp;lt;meta charset=&quot;UTF-8&quot;&gt;\n&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0&quot;&gt;\n&amp;lt;title&gt;\u5347\u7ea7\u7248\u6dd8\u5b9d\u9996\u9875 H5 \u6a21\u677f&amp;lt;\/title&gt;\n&amp;lt;style&gt;\nbody { margin:0; font-family: Arial, sans-serif; background:#f5f5f5; }\nheader { background: #ff0036; color:#fff; padding:10px; display:flex; align-items:center; position:sticky; top:0; z-index:10; }\nheader h2 { margin:0; }\nheader input { flex:1; margin-left:10px; padding:5px; border:none; border-radius:4px; }\nnav { display:flex; justify-content:space-around; background:#fff; padding:10px 0; border-bottom:1px solid #ddd; position:sticky; top:50px; z-index:9; }\nnav div { text-align:center; }\nnav img { width:40px; height:40px; display:block; margin:0 auto 5px; }\n.carousel { width:100%; height:180px; overflow:hidden; position:relative; }\n.carousel img { width:100%; height:100%; position:absolute; top:0; left:100%; transition:0.5s; }\n.carousel img.active { left:0; }\n.carousel .dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; }\n.carousel .dots div { width:8px; height:8px; border-radius:50%; background:#fff; margin:0 4px; opacity:0.6; }\n.carousel .dots div.active { opacity:1; background:#ff0036; }\n.goods { display:flex; flex-wrap:wrap; padding:10px; }\n.goods div { width:48%; margin:1%; background:#fff; padding:5px; box-sizing:border-box; border-radius:4px; }\n.goods img { width:100%; border-radius:4px; }\n.goods p { margin:5px 0; font-size:14px; }\n.suggestions { position:absolute; top:50px; left:10px; right:10px; background:#fff; border:1px solid #ccc; border-radius:4px; display:none; z-index:20; }\n.suggestions div { padding:5px; border-bottom:1px solid #eee; cursor:pointer; }\n.suggestions div:last-child { border-bottom:none; }\n.suggestions div:hover { background:#f0f0f0; }\n&amp;lt;\/style&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n\n&amp;lt;header&gt;\n  &amp;lt;h2&gt;\u6dd8\u5b9d&amp;lt;\/h2&gt;\n  &amp;lt;div style=&quot;position:relative; flex:1;&quot;&gt;\n    &amp;lt;input type=&quot;text&quot; id=&quot;searchInput&quot; placeholder=&quot;\u641c\u7d22\u5546\u54c1&quot;&gt;\n    &amp;lt;div class=&quot;suggestions&quot; id=&quot;suggestions&quot;&gt;&amp;lt;\/div&gt;\n  &amp;lt;\/div&gt;\n&amp;lt;\/header&gt;\n\n&amp;lt;nav&gt;\n  &amp;lt;div&gt;&amp;lt;img src=&quot;https:\/\/img.icons8.com\/color\/48\/000000\/t-shirt.png&quot;\/&gt;&amp;lt;span&gt;\u670d\u9970&amp;lt;\/span&gt;&amp;lt;\/div&gt;\n  &amp;lt;div&gt;&amp;lt;img src=&quot;https:\/\/img.icons8.com\/color\/48\/000000\/laptop.png&quot;\/&gt;&amp;lt;span&gt;\u6570\u7801&amp;lt;\/span&gt;&amp;lt;\/div&gt;\n  &amp;lt;div&gt;&amp;lt;img src=&quot;https:\/\/img.icons8.com\/color\/48\/000000\/home.png&quot;\/&gt;&amp;lt;span&gt;\u5bb6\u5c45&amp;lt;\/span&gt;&amp;lt;\/div&gt;\n  &amp;lt;div&gt;&amp;lt;img src=&quot;https:\/\/img.icons8.com\/color\/48\/000000\/gift.png&quot;\/&gt;&amp;lt;span&gt;\u793c\u7269&amp;lt;\/span&gt;&amp;lt;\/div&gt;\n&amp;lt;\/nav&gt;\n\n&amp;lt;div class=&quot;carousel&quot; id=&quot;carousel&quot;&gt;\n  &amp;lt;img src=&quot;https:\/\/via.placeholder.com\/400x180\/ff0036\/fff?text=\u8f6e\u64ad1&quot; class=&quot;active&quot;&gt;\n  &amp;lt;img src=&quot;https:\/\/via.placeholder.com\/400x180\/ff7a45\/fff?text=\u8f6e\u64ad2&quot;&gt;\n  &amp;lt;img src=&quot;https:\/\/via.placeholder.com\/400x180\/ffd666\/fff?text=\u8f6e\u64ad3&quot;&gt;\n  &amp;lt;div class=&quot;dots&quot; id=&quot;dots&quot;&gt;&amp;lt;\/div&gt;\n&amp;lt;\/div&gt;\n\n&amp;lt;div class=&quot;goods&quot; id=&quot;goods&quot;&gt;&amp;lt;\/div&gt;\n\n&amp;lt;script&gt;\n\/\/ ------------------- \u8f6e\u64ad\u56fe -------------------\nconst carousel = document.getElementById(&#039;carousel&#039;);\nconst imgs = carousel.querySelectorAll(&#039;img&#039;);\nconst dotsContainer = document.getElementById(&#039;dots&#039;);\nlet index = 0;\nlet touchStartX = 0;\nlet touchEndX = 0;\n\n\/\/ \u521d\u59cb\u5316\u5706\u70b9\nimgs.forEach((img, i)=&gt;{\n  const dot = document.createElement(&#039;div&#039;);\n  if(i===0) dot.classList.add(&#039;active&#039;);\n  dot.addEventListener(&#039;click&#039;, ()=&gt;showSlide(i));\n  dotsContainer.appendChild(dot);\n});\n\nfunction showSlide(i){\n  imgs&#x5B;index].classList.remove(&#039;active&#039;);\n  dotsContainer.children&#x5B;index].classList.remove(&#039;active&#039;);\n  index = i;\n  imgs&#x5B;index].classList.add(&#039;active&#039;);\n  dotsContainer.children&#x5B;index].classList.add(&#039;active&#039;);\n}\n\n\/\/ \u81ea\u52a8\u8f6e\u64ad\nsetInterval(()=&gt;{ showSlide((index+1)%imgs.length); }, 3000);\n\n\/\/ \u624b\u52bf\u6ed1\u52a8\ncarousel.addEventListener(&#039;touchstart&#039;, e=&gt;{ touchStartX = e.touches&#x5B;0].clientX; });\ncarousel.addEventListener(&#039;touchend&#039;, e=&gt;{\n  touchEndX = e.changedTouches&#x5B;0].clientX;\n  if(touchEndX - touchStartX &gt; 50) showSlide((index-1+imgs.length)%imgs.length);\n  else if(touchStartX - touchEndX &gt; 50) showSlide((index+1)%imgs.length);\n});\n\n\/\/ ------------------- \u5546\u54c1\u5217\u8868 -------------------\nconst goodsData = &#x5B;\n  {name:&#039;\u5546\u54c11&#039;, price:&#039;\u00a599&#039;, img:&#039;https:\/\/via.placeholder.com\/200x200\/73d13d\/fff?text=\u5546\u54c11&#039;},\n  {name:&#039;\u5546\u54c12&#039;, price:&#039;\u00a5199&#039;, img:&#039;https:\/\/via.placeholder.com\/200x200\/40a9ff\/fff?text=\u5546\u54c12&#039;},\n  {name:&#039;\u5546\u54c13&#039;, price:&#039;\u00a5299&#039;, img:&#039;https:\/\/via.placeholder.com\/200x200\/f759ab\/fff?text=\u5546\u54c13&#039;},\n  {name:&#039;\u5546\u54c14&#039;, price:&#039;\u00a5399&#039;, img:&#039;https:\/\/via.placeholder.com\/200x200\/9254de\/fff?text=\u5546\u54c14&#039;},\n  {name:&#039;\u5546\u54c15&#039;, price:&#039;\u00a5499&#039;, img:&#039;https:\/\/via.placeholder.com\/200x200\/ff85c0\/fff?text=\u5546\u54c15&#039;},\n  {name:&#039;\u5546\u54c16&#039;, price:&#039;\u00a5599&#039;, img:&#039;https:\/\/via.placeholder.com\/200x200\/ffc069\/fff?text=\u5546\u54c16&#039;}\n];\n\nconst goodsContainer = document.getElementById(&#039;goods&#039;);\ngoodsData.forEach(item=&gt;{\n  const div = document.createElement(&#039;div&#039;);\n  div.innerHTML = `&amp;lt;img src=&quot;${item.img}&quot;&gt;&amp;lt;p&gt;${item.name}&amp;lt;\/p&gt;&amp;lt;p&gt;${item.price}&amp;lt;\/p&gt;`;\n  goodsContainer.appendChild(div);\n});\n\n\/\/ ------------------- \u641c\u7d22\u8054\u60f3 -------------------\nconst searchInput = document.getElementById(&#039;searchInput&#039;);\nconst suggestions = document.getElementById(&#039;suggestions&#039;);\nconst suggestList = &#x5B;&#039;\u670d\u88c5&#039;,&#039;\u6570\u7801&#039;,&#039;\u5bb6\u5c45&#039;,&#039;\u793c\u7269&#039;,&#039;\u978b\u5b50&#039;,&#039;\u624b\u8868&#039;,&#039;\u624b\u673a&#039;,&#039;\u7535\u8111&#039;];\n\nsearchInput.addEventListener(&#039;input&#039;, ()=&gt;{\n  const val = searchInput.value.trim();\n  suggestions.innerHTML = &#039;&#039;;\n  if(val===&#039;&#039;){ suggestions.style.display=&#039;none&#039;; return; }\n  const filtered = suggestList.filter(item=&gt;item.includes(val));\n  filtered.forEach(item=&gt;{\n    const div = document.createElement(&#039;div&#039;);\n    div.textContent = item;\n    div.addEventListener(&#039;click&#039;, ()=&gt;{\n      searchInput.value = item;\n      suggestions.style.display=&#039;none&#039;;\n    });\n    suggestions.appendChild(div);\n  });\n  suggestions.style.display = filtered.length ? &#039;block&#039; : &#039;none&#039;;\n});\n\ndocument.addEventListener(&#039;click&#039;, e=&gt;{\n  if(!searchInput.contains(e.target)) suggestions.style.display=&#039;none&#039;;\n});\n&amp;lt;\/script&gt;\n\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd39 \u5347\u7ea7\u7248\u7279\u6027<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u54cd\u5e94\u5f0f\u5e03\u5c40<\/strong>\uff1a\u9002\u914d\u624b\u673a\u5c4f\u5e55\uff0c\u9876\u90e8\u5bfc\u822a\u56fa\u5b9a<\/li>\n\n\n\n<li><strong>\u8f6e\u64ad\u56fe<\/strong>\uff1a\n<ul class=\"wp-block-list\">\n<li>\u81ea\u52a8\u64ad\u653e<\/li>\n\n\n\n<li>\u624b\u52bf\u6ed1\u52a8\u652f\u6301\u79fb\u52a8\u7aef<\/li>\n\n\n\n<li>\u4e0b\u65b9\u6307\u793a\u70b9\u663e\u793a\u5f53\u524d\u9875<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5546\u54c1\u5217\u8868\u52a8\u6001\u751f\u6210<\/strong>\uff1a\u53ef\u66ff\u6362\u6210\u771f\u5b9e\u5546\u54c1\u6570\u636e<\/li>\n\n\n\n<li><strong>\u641c\u7d22\u6846\u8054\u60f3<\/strong>\uff1a\u8f93\u5165\u5173\u952e\u5b57\u663e\u793a\u5339\u914d\u7ed3\u679c\uff0c\u70b9\u51fb\u53ef\u9009\u4e2d<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u4f60\u60f3\u5728 HTML+CSS+\u5c11\u91cf JS \u7684\u57fa\u7840\u4e0a\u5feb\u901f\u590d\u523b\u4e00\u4e2a\u7c7b\u4f3c \u6dd8\u5b9d\u9996\u9875 \u7684\u9759\u6001&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/%e5%9f%ba%e4%ba%8ehtml%e5%8d%81%e7%a7%92%e5%81%9a%e5%87%ba%e6%b7%98%e5%ae%9d%e9%a1%b5%e9%9d%a2\/\">Continue Reading &rarr;<\/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-208","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\/208","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=208"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/208\/revisions"}],"predecessor-version":[{"id":209,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/208\/revisions\/209"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}