CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>运行实例 - MDN Web 文档项目 | MDN</title><link rel="alternate" title="Live-Beispiele" href="https://developer.mozilla.org/de/docs/MDN/Writing_guidelines/Page_structures/Live_samples" hrefLang="de"/><link rel="alternate" title="Live examples" href="https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Live_samples" hrefLang="en"/><link rel="alternate" title="Ejemplos ejecutables" href="https://developer.mozilla.org/es/docs/MDN/Writing_guidelines/Page_structures/Live_samples" hrefLang="es"/><link rel="alternate" title="Comment convertir des exemples de code pour qu'ils soient "live"" href="https://developer.mozilla.org/fr/docs/MDN/Writing_guidelines/Page_structures/Live_samples" hrefLang="fr"/><link rel="alternate" title="ライブサンプル" href="https://developer.mozilla.org/ja/docs/MDN/Writing_guidelines/Page_structures/Live_samples" hrefLang="ja"/><link rel="alternate" title="Como converter exemplos de codigos para funcionar "ao vivo"" href="https://developer.mozilla.org/pt-BR/docs/MDN/Writing_guidelines/Page_structures/Live_samples" hrefLang="pt"/><link rel="alternate" title="Как "оживить" примеры кода" href="https://developer.mozilla.org/ru/docs/MDN/Writing_guidelines/Page_structures/Live_samples" hrefLang="ru"/><link rel="alternate" title="运行实例" href="https://developer.mozilla.org/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Live_samples" hrefLang="zh"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="MDN 支持将文章中的示例代码转化为读者可以实际查看的在线演示。这被称为运行实例，使得用户可以查看代码的实际输出。这使得文档变得更具动态性和指导性。"/><meta property="og:url" content="https://developer.mozilla.org/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Live_samples"/><meta property="og:title" content="运行实例 - MDN Web 文档项目 | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="zh_CN"/><meta property="og:description" content="MDN 支持将文章中的示例代码转化为读者可以实际查看的在线演示。这被称为运行实例，使得用户可以查看代码的实际输出。这使得文档变得更具动态性和指导性。"/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Live_samples"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.5e889624.js"></script><link href="/static/css/main.26c64ea7.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/zh-CN/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/zh-CN/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/zh-CN/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a href="/zh-CN/docs/Learn" class="top-level-entry">Guides</a><ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Learn/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Learn/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Learn/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/zh-CN/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/zh-CN/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/zh-CN/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/zh-CN/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/zh-CN/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/zh-CN/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/zh-CN/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FMDN%2FWriting_guidelines%2FPage_structures%2FLive_samples" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FMDN%2FWriting_guidelines%2FPage_structures%2FLive_samples" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/MDN" class="breadcrumb" property="item" typeof="WebPage"><span property="name">MDN Web 文档项目</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/MDN/Writing_guidelines" class="breadcrumb" property="item" typeof="WebPage"><span property="name">撰写指南</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/MDN/Writing_guidelines/Page_structures" class="breadcrumb" property="item" typeof="WebPage"><span property="name">文档结构</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Live_samples" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">运行实例</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>中文 (简体)</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="de" href="/de/docs/MDN/Writing_guidelines/Page_structures/Live_samples" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="en-US" href="/en-US/docs/MDN/Writing_guidelines/Page_structures/Live_samples" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="es" href="/es/docs/MDN/Writing_guidelines/Page_structures/Live_samples" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/MDN/Writing_guidelines/Page_structures/Live_samples" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/MDN/Writing_guidelines/Page_structures/Live_samples" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/MDN/Writing_guidelines/Page_structures/Live_samples" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/MDN/Writing_guidelines/Page_structures/Live_samples" class="button submenu-item"><span>Русский</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard localized-content-note"><p><a href="/zh-CN/docs/MDN/Community/Contributing/Translated_content#活跃语言">此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar" data-macro="MDNSidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#运行实例系统如何工作">运行实例系统如何工作</a></li><li class="document-toc-item "><a class="document-toc-link" href="#使用运行实例系统">使用运行实例系统</a></li><li class="document-toc-item "><a class="document-toc-link" href="#运行实例演示">运行实例演示</a></li><li class="document-toc-item "><a class="document-toc-link" href="#关于运行实例的约定">关于运行实例的约定</a></li></ul></section></div></div><div class="sidebar-body"><ol><li><a href="/zh-CN/docs/MDN">MDN Web 文档项目</a></li><li class="toggle"><details><summary>社区指南</summary><ol><li><a href="/zh-CN/docs/MDN/Community">社区准则</a></li><li class="toggle"><details><summary>为 MDN 做贡献</summary><ol><li><a href="/zh-CN/docs/MDN/Community/Contributing">为 MDN Web 文档作贡献</a></li><li><a href="/zh-CN/docs/MDN/Community/Contributing/Getting_started">初识 MDN Web 文档</a></li><li><a href="/zh-CN/docs/MDN/Community/Contributing/Our_repositories">MDN Web 文档仓库</a></li><li><a href="/zh-CN/docs/MDN/Community/Contributing/Translated_content">MDN Web 文档的本地化</a></li><li><a href="/zh-CN/docs/MDN/Community/Contributing/Security_vulnerability_response">安全漏洞响应步骤</a></li></ol></details></li><li><a href="/zh-CN/docs/MDN/Community/Open_source_etiquette">开源项目礼节</a></li><li><a href="/zh-CN/docs/MDN/Community/Communication_channels">沟通渠道</a></li><li><a href="/zh-CN/docs/MDN/Community/Discussions">社区讨论</a></li><li><a href="/zh-CN/docs/MDN/Community/Learn_forum">学习论坛</a></li><li><a href="/zh-CN/docs/MDN/Community/Issues">创建和解决议题指南</a></li><li><a href="/zh-CN/docs/MDN/Community/Pull_requests">拉取请求的提交和审查指南</a></li><li><a href="/zh-CN/docs/MDN/Community/Roles_teams">MDN Web 文档角色和团队</a></li></ol></details></li><li class="toggle"><details open=""><summary>撰写指南</summary><ol><li><a href="/zh-CN/docs/MDN/Writing_guidelines">撰写指南</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/What_we_write">MDN 收录规则</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Writing_style_guide">文档写作规范</a></li><li class="toggle"><details><summary>MDN 写作指南</summary><ol><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Howto">MDN Web 文档写作指南</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Howto/Images_media">如何添加图像和媒体</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Howto/Creating_moving_deleting">如何创建、移动、删除及编辑页面</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Howto/Document_a_CSS_property">如何记录 CSS 属性</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Howto/Document_an_HTTP_header">如何记录 HTTP 标头</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Howto/Document_web_errors">如何记录 web 错误</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Howto/Research_technology">如何研究一项技术</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Howto/JSON_Structured_data">如何使用结构化数据</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Howto/Write_an_api_reference">如何撰写 API 参考文档</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_glossary">如何撰写和引用一个术语表中的条目</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN">如何使用 Markdown 来撰写文档</a></li></ol></details></li><li class="toggle"><details open=""><summary>页面结构</summary><ol><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Page_structures">文档结构</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Banners_and_notices">横幅和通知</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Code_examples">代码示例</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables">兼容性表格和浏览器兼容性数据仓库（BCD）</a></li><li><em><a href="/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Live_samples" aria-current="page">运行实例</a></em></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Page_types">页面类型</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Sidebars">侧边栏</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Specification_tables">规范表格</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Syntax_sections">语法小节</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Macros">使用宏</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Feature_status">特性状态</a></li></ol></details></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Attrib_copyright_license">署名和版权许可</a></li><li><a href="/zh-CN/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete">实验性、已弃用和过时</a></li></ol></details></li><li class="toggle"><details><summary>Advisory Board</summary><ol><li><a href="/zh-CN/docs/MDN/MDN_Product_Advisory_Board">MDN 产品咨询委员会</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/MDN/MDN_Product_Advisory_Board/Membership">Product Advisory Board Charter & Membership</a></li></ol></details></li><li class="toggle"><details><summary>History</summary><ol><li><a href="/zh-CN/docs/MDN/At_ten">Mozilla 开发者网络 10 周年</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/MDN/At_ten/History_of_MDN">The history of MDN</a></li></ol></details></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/MDN/Changelog">MDN Web Docs changelog</a></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#运行实例系统如何工作">运行实例系统如何工作</a></li><li class="document-toc-item "><a class="document-toc-link" href="#使用运行实例系统">使用运行实例系统</a></li><li class="document-toc-item "><a class="document-toc-link" href="#运行实例演示">运行实例演示</a></li><li class="document-toc-item "><a class="document-toc-link" href="#关于运行实例的约定">关于运行实例的约定</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="zh-CN"><header><h1>运行实例</h1></header><div class="section-content"><p>MDN 支持将文章中的示例代码转化为读者可以实际查看的在线演示。这被称为<em>运行实例</em>，使得用户可以查看代码的实际输出。这使得文档变得更具动态性和指导性。</p> <p>运行实例可以包括 HTML、CSS 和 JavaScript 的任意组合。注意，“运行”实例是<em>非交互性</em>的。但是，它们确保了示例展现的输出与示例代码相匹配，因为它仅仅由代码实例生成。</p></div><section aria-labelledby="运行实例系统如何工作"><h2 id="运行实例系统如何工作"><a href="#运行实例系统如何工作">运行实例系统如何工作</a></h2><div class="section-content"><p>运行实例系统将所有代码整合为一个集合，再将这个集合融合到一个 HTML 文件中，然后在内联框架 <a href="/zh-CN/docs/Web/HTML/Element/iframe"><code><iframe></code></a> 中渲染这个文件。一个运行实例由两个部分构成：</p> <ul> <li>一个代码块组成的集合</li> <li>一个调用（创建的框架或链接）以展示该代码块结果的宏</li> </ul> <p>一个代码块的“集合”，在此上下文中，以标题或块级元素（类似 <a href="/zh-CN/docs/Web/HTML/Element/div"><code><div></code></a>）的 id 作为标识。</p> <ul> <li>如果 id 属于一个块级元素，该集合将包含此块级元素包含范围内的所有代码。</li> <li>如果 id 属于一个标题，该集合将包含此标题之后到下个同级标题之前的所有代码。请注意，子标题下的代码块也会被包含，如果不希望得到这样的效果，可以使用块级元素的 id。</li> </ul> <p>宏使用一个特殊的 URL 来取得一个分组中的代码示例，例如：<code>https://yari-demos.prod.mdn.mozit.cloud/zh-CN/docs/Web/CSS/animation/_sample_.Cylon_Eye.html</code>。总体结构是 <code>https://url-of-page/_sample_.group-id.html</code>，其中的 <code>group-id</code> 指代码所在标题或者块级元素的 id。</p> <p>用来展示运行结果的框架（或页面）会运行在沙盒中，在安全条件下实现任何想在 web 上实现的功能。当然，在实践中，代码需要针对包含它的页面，MDN 上运行的随意的内容会被社区移除。</p> <div class="notecard note"> <p><strong>备注：</strong> <strong>必须</strong>使用宏来展示运行实例的输出。</p> </div> <p>每个包含示例代码的<a href="/zh-CN/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81%E5%9D%97">代码块</a>都有一个语言标识符指示它由何种语言写成（HTML、CSS 或 JavaScript）。标识符的值有“html”、“css”和“js”。这些标识符必须与对应的代码块匹配。</p> <p>运行实例系统由很多可用选项，我们会分解开来讲解。</p></div></section><section aria-labelledby="运行实例宏"><h3 id="运行实例宏"><a href="#运行实例宏">运行实例宏</a></h3><div class="section-content"><p>你可以用两种宏来展示运行实例：</p> <ul> <li><a href="https://github.com/mdn/yari/blob/master/kumascript/macros/EmbedLiveSample.ejs" class="external" target="_blank"><code>EmbedLiveSample</code></a> 将一个运行实例嵌入到页面中</li> <li><a href="https://github.com/mdn/yari/blob/master/kumascript/macros/LiveSampleLink.ejs" class="external" target="_blank"><code>LiveSampleLink</code></a> 创建一个链接，在新的页面中打开运行实例</li> </ul> <p>在很多情况下，可以很方便地在页面中使用 <code>EmbedLiveSample</code> 或 <code>LiveSampleLink</code> 宏。只要代码示例可以通过一个标题的 id 或一个块级元素的 id 的区分开，就可以简单的插入宏来实现功能。</p> <h4 id="页内运行实例（embedlivesample）宏">页内运行实例（EmbedLiveSample）宏</h4> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>{{EmbedLiveSample(block_ID, width, height, screenshot_URL, page_slug)}} </code></pre></div> <dl> <dt id="block_id"><a href="#block_id">block_ID</a></dt> <dd> <p>必需。包含示例代码的标题或块级元素的 id。保证 id 正确的最好的办法是在页面的内容列表中查看 URL，也可以通过查看网页源码的方式检查。</p> </dd> <dt id="width"><a href="#width">width</a></dt> <dd> <p>可选。创建的 <a href="/zh-CN/docs/Web/HTML/Element/iframe"><code><iframe></code></a> 元素的宽度，以 <code>px</code> 为单位。若忽略该项，系统会使用一个合理的默认宽度。请注意，如果需要指定该项，那么<em>必须</em>同时指定高度。</p> </dd> <dt id="height"><a href="#height">height</a></dt> <dd> <p>可选。创建的 <a href="/zh-CN/docs/Web/HTML/Element/iframe"><code><iframe></code></a> 元素的高度，以 <code>px</code> 为单位。若忽略该项，系统会使用一个合理的默认高度。请注意，如果需要指定该项，那么<em>必须</em>同时指定宽度。如果仅仅指定了高度和宽度中的一个，那么系统会应用默认尺寸。</p> </dd> <dt id="screenshot_url"><a href="#screenshot_url">screenshot_URL</a></dt> <dd> <p>可选。屏幕截图的 URL，显示了运行实例的效果。对于用户浏览器尚未支持的新技术很有用，他们就可以看到结果的快照。如果指定该项，屏幕截图会带着相关标题显示在运行实例旁边。</p> </dd> <dt id="page_slug"><a href="#page_slug">page_slug</a></dt> <dd> <p>可选。包含示例的页面的代称。若忽略该项，示例将会从宏所在页面获取。</p> <div class="notecard warning"> <p><strong>警告：</strong>这个参数已被弃用。请不要在新的示例中使用它，并将其从你找到的示例中移除。我们正在主动移除对这个参数的使用，在移除了所有的使用后，我们将会移除对它的支持。</p> </div> </dd> </dl> <h4 id="链接运行实例（livesamplelink）宏">链接运行实例（LiveSampleLink）宏</h4> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>{{LiveSampleLink(block_ID, link_text)}} </code></pre></div> <dl> <dt id="block_id_2"><a href="#block_id_2">block_ID</a></dt> <dd> <p>必需。包含示例代码的标题或块级元素的 id。保证使用正确 id 的最好的办法是在页面的内容目录中查找 URL，也可以通过查看网页源码的方式检查。</p> </dd> <dt id="link_text"><a href="#link_text">link_text</a></dt> <dd> <p>链接文本。</p> </dd> </dl></div></section><section aria-labelledby="使用运行实例系统"><h2 id="使用运行实例系统"><a href="#使用运行实例系统">使用运行实例系统</a></h2><div class="section-content"><p>以下部分描述了一些运行实例系统的常见用例。</p></div></section><section aria-labelledby="将代码片段转为运行实例"><h3 id="将代码片段转为运行实例"><a href="#将代码片段转为运行实例">将代码片段转为运行实例</a></h3><div class="section-content"><p>一个常见的用例是将 MDN 中已有代码片段转为运行实例。</p> <h4 id="准备代码示例">准备代码示例</h4> <p>第一步是添加代码片段，或根据内容和标记确认已有片段可以成为运行实例。代码片段必须组成一个完整可运行的示例。比如，如果已有 <code>CSS</code> 片段，那么需要添加一段 <code>HTML</code>。</p> <p>每段代码都需要包含在正确标记其语言的代码块中，一个代码块只能包含一种语言。多数情况下，这些步骤都没问题，不过再检查一遍总是好的。当代码块的语言标识符为 <code>language-type</code>（<em>language-type</em> 是该代码块的语言类型，如：<code>html</code>、<code>css</code> 或 <code>js</code>）时，说明这一步已经完成。</p> <div class="notecard note"> <p><strong>备注：</strong>每种语言的代码可以分布在几个代码块里，所有代码会被拼接起来。这个特性允许一块代码对应一块简介。这样有利于制作教程，比如代码间夹杂着大量解释性的文本。</p> </div> <p>所以在确认代码块被正确标记为其所用语言以提供语言的语法高亮之后，你就可以继续了。</p></div></section><section aria-labelledby="运行实例演示"><h2 id="运行实例演示"><a href="#运行实例演示">运行实例演示</a></h2><div class="section-content"><p>这部分是使用“插入运行实例模板”按钮插入运行实例标题和代码块的结果。每种语言可以有不止一个代码块。同样也不需要有特定的顺序，所有代码会被混合匹配。</p> <p>可以选择删除任何部分。如果不需要脚本，那么删掉脚本的标题和代码块就可以了。同样，也可以在不再被运行实例宏使用的情况下，删掉代码块的标题（“HTML”、“CSS”或“JavaScript”）。</p> <p>代码模板插入之后，可以增加一些代码，也可以加入一些注释。</p></div></section><section aria-labelledby="html"><h3 id="html"><a href="#html">HTML</a></h3><div class="section-content"><p>这段 HTML 代码创建了一个段落和几个块级元素（<code>div</code>）以定位和为信息添加样式。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><p>A simple example of the live sample system in action.</p> <div class="box"> <div id="item">Hello world! Welcome to MDN</div> </div> </code></pre></div></div></section><section aria-labelledby="css"><h3 id="css"><a href="#css">CSS</a></h3><div class="section-content"><p>这段 CSS 代码为 box 和其中的文字添加样式。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box { width: 200px; border-radius: 6px; padding: 20px; background-color: #ffaabb; } #item { font-weight: bold; text-align: center; font-family: sans-serif; font-size: 1.5em; } </code></pre></div></div></section><section aria-labelledby="javascript"><h3 id="javascript"><a href="#javascript">JavaScript</a></h3><div class="section-content"><p>这段代码很简单，只是增加了一个点击事件处理器来弹出信息。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const el = document.getElementById("item"); el.onclick = function () { alert("Owww, stop poking me!"); }; </code></pre></div></div></section><section aria-labelledby="结果"><h3 id="结果"><a href="#结果">结果</a></h3><div class="section-content"><p>这是通过 <code>{{EmbedLiveSample('运行实例演示')}}</code> 来展示上面运行代码块的结果。</p><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="运行实例演示 sample" id="frame_运行实例演示" src="about:blank" data-live-path="/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Live_samples" data-live-id="运行实例演示" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>这是使用外链宏 <code>{{LiveSampleLink('运行实例演示', '运行实例演示链接')}}</code> 来展示实例运行的结果：</p><a href="#livesample_fullscreen=运行实例演示">运行实例演示链接</a></div></section><section aria-labelledby="关于运行实例的约定"><h2 id="关于运行实例的约定"><a href="#关于运行实例的约定">关于运行实例的约定</a></h2><div class="section-content"><dl> <dt id="代码块顺序"><a href="#代码块顺序">代码块顺序</a></dt> <dd> <p>添加运行实例时，应对代码块进行排序，以便使第一个代码块对应该示例的主要语言（如果有的话）。例如，在 HTML 参考中添加运行实例时，第一个代码块应该是 HTML；在 CSS 参考中添加时，第一个代码块则应该是 CSS；以此类推。</p> </dd> <dt id="标题命名"><a href="#标题命名">标题命名</a></dt> <dd> <p>在没有歧义的情况下（如，例子位于“示例”部分中），标题应该简明扼要，仅使用相应语言的名称：HTML、CSS、CSS、JavasScript、SVG 等（见上文）。不应使用如“HTML 内容”或“JavaScript 内容”等标题。但是，如果这样的短标题无法明确内容，可以使用更具体的标题。</p> </dd> <dt id="使用“结果”块"><a href="#使用“结果”块">使用“结果”块</a></dt> <dd> <p>在不同的代码块之后，请在最后调用 <code>EmbedLiveSample</code> 宏之前使用“结果”块（见上文）。这样，示例的语义对于阅读器或其他解析页面的工具（如：屏幕阅读器、网络爬虫）都会变得更加清晰。</p> </dd> </dl></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/translated-content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2024-07-26T08:35:43.000Z">2024年7月26日</time> by <a href="/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Live_samples/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content/blob/main/files/zh-cn/mdn/writing_guidelines/page_structures/live_samples/index.md?plain=1" title="Folder: zh-cn/mdn/writing_guidelines/page_structures/live_samples (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/translated-content/issues/new?template=page-report-zh-cn.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FMDN%2FWriting_guidelines%2FPage_structures%2FLive_samples&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60zh-cn%2Fmdn%2Fwriting_guidelines%2Fpage_structures%2Flive_samples%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FMDN%2FWriting_guidelines%2FPage_structures%2FLive_samples%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fzh-cn%2Fmdn%2Fwriting_guidelines%2Fpage_structures%2Flive_samples%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2F76a07e73495a68c90612c76d9f36d3167fcaaad1%0A*+Document+last+modified%3A+2024-07-26T08%3A35%3A43.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mozilla.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg width="112" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mozilla-footer-logo-svg">Mozilla logo</title><path d="M41.753 14.218c-2.048 0-3.324 1.522-3.324 4.157 0 2.423 1.119 4.286 3.29 4.286 2.082 0 3.447-1.678 3.447-4.347 0-2.826-1.522-4.096-3.413-4.096Zm54.89 7.044c0 .901.437 1.618 1.645 1.618 1.427 0 2.949-1.024 3.044-3.352-.649-.095-1.365-.185-2.02-.185-1.426-.005-2.668.397-2.668 1.92Z" fill="currentColor"></path><path d="M0 0v32h111.908V0H0Zm32.56 25.426h-5.87v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h1.864v3.044h-5.864v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h2.669v3.044H6.642v-3.044h1.863v-7.918H6.642V11.42h5.864v2.11c.839-1.489 2.3-2.39 4.252-2.39 2.02 0 3.878.963 4.566 3.01.778-1.862 2.361-3.01 4.566-3.01 2.512 0 4.812 1.522 4.812 4.84v6.402h1.863v3.044h-.005Zm9.036.307c-4.314 0-7.296-2.635-7.296-7.106 0-4.096 2.484-7.481 7.514-7.481s7.481 3.38 7.481 7.29c0 4.472-3.228 7.297-7.699 7.297Zm22.578-.307H51.942l-.403-2.11 7.7-8.846h-4.376l-.621 2.17-2.888-.313.498-4.907h12.294l.313 2.11-7.767 8.852h4.533l.654-2.172 3.167.308-.872 4.908Zm7.99 0h-4.191v-5.03h4.19v5.03Zm0-8.976h-4.191v-5.03h4.19v5.03Zm2.618 8.976 6.054-21.358h3.945l-6.054 21.358h-3.945Zm8.136 0 6.048-21.358h3.945l-6.054 21.358h-3.939Zm21.486.307c-1.863 0-2.887-1.085-3.072-2.792-.805 1.427-2.232 2.792-4.498 2.792-2.02 0-4.314-1.085-4.314-4.006 0-3.447 3.323-4.253 6.518-4.253.778 0 1.584.034 2.3.124v-.465c0-1.427-.034-3.133-2.3-3.133-.84 0-1.488.061-2.143.402l-.453 1.578-3.195-.34.549-3.224c2.45-.996 3.692-1.27 5.992-1.27 3.01 0 5.556 1.55 5.556 4.75v6.083c0 .805.314 1.085.963 1.085.184 0 .375-.034.587-.095l.034 2.11a5.432 5.432 0 0 1-2.524.654Z" fill="currentColor"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under <a href="/zh-CN/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Live_samples","doc":{"isMarkdown":true,"isTranslated":true,"isActive":true,"flaws":{},"title":"运行实例","mdn_url":"/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Live_samples","locale":"zh-CN","native":"中文 (简体)","sidebarHTML":"<ol><li><a href=\"/zh-CN/docs/MDN\">MDN Web 文档项目</a></li><li class=\"toggle\"><details><summary>社区指南</summary><ol><li><a href=\"/zh-CN/docs/MDN/Community\">社区准则</a></li><li class=\"toggle\"><details><summary>为 MDN 做贡献</summary><ol><li><a href=\"/zh-CN/docs/MDN/Community/Contributing\">为 MDN Web 文档作贡献</a></li><li><a href=\"/zh-CN/docs/MDN/Community/Contributing/Getting_started\">初识 MDN Web 文档</a></li><li><a href=\"/zh-CN/docs/MDN/Community/Contributing/Our_repositories\">MDN Web 文档仓库</a></li><li><a href=\"/zh-CN/docs/MDN/Community/Contributing/Translated_content\">MDN Web 文档的本地化</a></li><li><a href=\"/zh-CN/docs/MDN/Community/Contributing/Security_vulnerability_response\">安全漏洞响应步骤</a></li></ol></details></li><li><a href=\"/zh-CN/docs/MDN/Community/Open_source_etiquette\">开源项目礼节</a></li><li><a href=\"/zh-CN/docs/MDN/Community/Communication_channels\">沟通渠道</a></li><li><a href=\"/zh-CN/docs/MDN/Community/Discussions\">社区讨论</a></li><li><a href=\"/zh-CN/docs/MDN/Community/Learn_forum\">学习论坛</a></li><li><a href=\"/zh-CN/docs/MDN/Community/Issues\">创建和解决议题指南</a></li><li><a href=\"/zh-CN/docs/MDN/Community/Pull_requests\">拉取请求的提交和审查指南</a></li><li><a href=\"/zh-CN/docs/MDN/Community/Roles_teams\">MDN Web 文档角色和团队</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary>撰写指南</summary><ol><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines\">撰写指南</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/What_we_write\">MDN 收录规则</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Writing_style_guide\">文档写作规范</a></li><li class=\"toggle\"><details><summary>MDN 写作指南</summary><ol><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Howto\">MDN Web 文档写作指南</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Howto/Images_media\">如何添加图像和媒体</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Howto/Creating_moving_deleting\">如何创建、移动、删除及编辑页面</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Howto/Document_a_CSS_property\">如何记录 CSS 属性</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Howto/Document_an_HTTP_header\">如何记录 HTTP 标头</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Howto/Document_web_errors\">如何记录 web 错误</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Howto/Research_technology\">如何研究一项技术</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Howto/JSON_Structured_data\">如何使用结构化数据</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Howto/Write_an_api_reference\">如何撰写 API 参考文档</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_glossary\">如何撰写和引用一个术语表中的条目</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN\">如何使用 Markdown 来撰写文档</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary>页面结构</summary><ol><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Page_structures\">文档结构</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Banners_and_notices\">横幅和通知</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Code_examples\">代码示例</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables\">兼容性表格和浏览器兼容性数据仓库（BCD）</a></li><li><em><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Live_samples\" aria-current=\"page\">运行实例</a></em></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Page_types\">页面类型</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Sidebars\">侧边栏</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Specification_tables\">规范表格</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Syntax_sections\">语法小节</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Macros\">使用宏</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Feature_status\">特性状态</a></li></ol></details></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Attrib_copyright_license\">署名和版权许可</a></li><li><a href=\"/zh-CN/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete\">实验性、已弃用和过时</a></li></ol></details></li><li class=\"toggle\"><details><summary>Advisory Board</summary><ol><li><a href=\"/zh-CN/docs/MDN/MDN_Product_Advisory_Board\">MDN 产品咨询委员会</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/MDN/MDN_Product_Advisory_Board/Membership\">Product Advisory Board Charter & Membership</a></li></ol></details></li><li class=\"toggle\"><details><summary>History</summary><ol><li><a href=\"/zh-CN/docs/MDN/At_ten\">Mozilla 开发者网络 10 周年</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/MDN/At_ten/History_of_MDN\">The history of MDN</a></li></ol></details></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/MDN/Changelog\">MDN Web Docs changelog</a></li></ol>","sidebarMacro":"MDNSidebar","body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<p>MDN 支持将文章中的示例代码转化为读者可以实际查看的在线演示。这被称为<em>运行实例</em>，使得用户可以查看代码的实际输出。这使得文档变得更具动态性和指导性。</p>\n<p>运行实例可以包括 HTML、CSS 和 JavaScript 的任意组合。注意，“运行”实例是<em>非交互性</em>的。但是，它们确保了示例展现的输出与示例代码相匹配，因为它仅仅由代码实例生成。</p>"}},{"type":"prose","value":{"id":"运行实例系统如何工作","title":"运行实例系统如何工作","isH3":false,"content":"<p>运行实例系统将所有代码整合为一个集合，再将这个集合融合到一个 HTML 文件中，然后在内联框架 <a href=\"/zh-CN/docs/Web/HTML/Element/iframe\"><code><iframe></code></a> 中渲染这个文件。一个运行实例由两个部分构成：</p>\n<ul>\n <li>一个代码块组成的集合</li>\n <li>一个调用（创建的框架或链接）以展示该代码块结果的宏</li>\n</ul>\n<p>一个代码块的“集合”，在此上下文中，以标题或块级元素（类似 <a href=\"/zh-CN/docs/Web/HTML/Element/div\"><code><div></code></a>）的 id 作为标识。</p>\n<ul>\n <li>如果 id 属于一个块级元素，该集合将包含此块级元素包含范围内的所有代码。</li>\n <li>如果 id 属于一个标题，该集合将包含此标题之后到下个同级标题之前的所有代码。请注意，子标题下的代码块也会被包含，如果不希望得到这样的效果，可以使用块级元素的 id。</li>\n</ul>\n<p>宏使用一个特殊的 URL 来取得一个分组中的代码示例，例如：<code>https://yari-demos.prod.mdn.mozit.cloud/zh-CN/docs/Web/CSS/animation/_sample_.Cylon_Eye.html</code>。总体结构是 <code>https://url-of-page/_sample_.group-id.html</code>，其中的 <code>group-id</code> 指代码所在标题或者块级元素的 id。</p>\n<p>用来展示运行结果的框架（或页面）会运行在沙盒中，在安全条件下实现任何想在 web 上实现的功能。当然，在实践中，代码需要针对包含它的页面，MDN 上运行的随意的内容会被社区移除。</p>\n<div class=\"notecard note\">\n <p><strong>备注：</strong> <strong>必须</strong>使用宏来展示运行实例的输出。</p>\n</div>\n<p>每个包含示例代码的<a href=\"/zh-CN/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81%E5%9D%97\">代码块</a>都有一个语言标识符指示它由何种语言写成（HTML、CSS 或 JavaScript）。标识符的值有“html”、“css”和“js”。这些标识符必须与对应的代码块匹配。</p>\n<p>运行实例系统由很多可用选项，我们会分解开来讲解。</p>"}},{"type":"prose","value":{"id":"运行实例宏","title":"运行实例宏","isH3":true,"content":"<p>你可以用两种宏来展示运行实例：</p>\n<ul>\n <li><a href=\"https://github.com/mdn/yari/blob/master/kumascript/macros/EmbedLiveSample.ejs\" class=\"external\" target=\"_blank\"><code>EmbedLiveSample</code></a> 将一个运行实例嵌入到页面中</li>\n <li><a href=\"https://github.com/mdn/yari/blob/master/kumascript/macros/LiveSampleLink.ejs\" class=\"external\" target=\"_blank\"><code>LiveSampleLink</code></a> 创建一个链接，在新的页面中打开运行实例</li>\n</ul>\n<p>在很多情况下，可以很方便地在页面中使用 <code>EmbedLiveSample</code> 或 <code>LiveSampleLink</code> 宏。只要代码示例可以通过一个标题的 id 或一个块级元素的 id 的区分开，就可以简单的插入宏来实现功能。</p>\n<h4 id=\"页内运行实例（embedlivesample）宏\">页内运行实例（EmbedLiveSample）宏</h4>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>{{EmbedLiveSample(block_ID, width, height, screenshot_URL, page_slug)}}\n</code></pre></div>\n<dl>\n <dt id=\"block_id\"><a href=\"#block_id\">block_ID</a></dt>\n <dd>\n <p>必需。包含示例代码的标题或块级元素的 id。保证 id 正确的最好的办法是在页面的内容列表中查看 URL，也可以通过查看网页源码的方式检查。</p>\n </dd>\n <dt id=\"width\"><a href=\"#width\">width</a></dt>\n <dd>\n <p>可选。创建的 <a href=\"/zh-CN/docs/Web/HTML/Element/iframe\"><code><iframe></code></a> 元素的宽度，以 <code>px</code> 为单位。若忽略该项，系统会使用一个合理的默认宽度。请注意，如果需要指定该项，那么<em>必须</em>同时指定高度。</p>\n </dd>\n <dt id=\"height\"><a href=\"#height\">height</a></dt>\n <dd>\n <p>可选。创建的 <a href=\"/zh-CN/docs/Web/HTML/Element/iframe\"><code><iframe></code></a> 元素的高度，以 <code>px</code> 为单位。若忽略该项，系统会使用一个合理的默认高度。请注意，如果需要指定该项，那么<em>必须</em>同时指定宽度。如果仅仅指定了高度和宽度中的一个，那么系统会应用默认尺寸。</p>\n </dd>\n <dt id=\"screenshot_url\"><a href=\"#screenshot_url\">screenshot_URL</a></dt>\n <dd>\n <p>可选。屏幕截图的 URL，显示了运行实例的效果。对于用户浏览器尚未支持的新技术很有用，他们就可以看到结果的快照。如果指定该项，屏幕截图会带着相关标题显示在运行实例旁边。</p>\n </dd>\n <dt id=\"page_slug\"><a href=\"#page_slug\">page_slug</a></dt>\n <dd>\n <p>可选。包含示例的页面的代称。若忽略该项，示例将会从宏所在页面获取。</p>\n <div class=\"notecard warning\">\n <p><strong>警告：</strong>这个参数已被弃用。请不要在新的示例中使用它，并将其从你找到的示例中移除。我们正在主动移除对这个参数的使用，在移除了所有的使用后，我们将会移除对它的支持。</p>\n </div>\n </dd>\n</dl>\n<h4 id=\"链接运行实例（livesamplelink）宏\">链接运行实例（LiveSampleLink）宏</h4>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>{{LiveSampleLink(block_ID, link_text)}}\n</code></pre></div>\n<dl>\n <dt id=\"block_id_2\"><a href=\"#block_id_2\">block_ID</a></dt>\n <dd>\n <p>必需。包含示例代码的标题或块级元素的 id。保证使用正确 id 的最好的办法是在页面的内容目录中查找 URL，也可以通过查看网页源码的方式检查。</p>\n </dd>\n <dt id=\"link_text\"><a href=\"#link_text\">link_text</a></dt>\n <dd>\n <p>链接文本。</p>\n </dd>\n</dl>"}},{"type":"prose","value":{"id":"使用运行实例系统","title":"使用运行实例系统","isH3":false,"content":"<p>以下部分描述了一些运行实例系统的常见用例。</p>"}},{"type":"prose","value":{"id":"将代码片段转为运行实例","title":"将代码片段转为运行实例","isH3":true,"content":"<p>一个常见的用例是将 MDN 中已有代码片段转为运行实例。</p>\n<h4 id=\"准备代码示例\">准备代码示例</h4>\n<p>第一步是添加代码片段，或根据内容和标记确认已有片段可以成为运行实例。代码片段必须组成一个完整可运行的示例。比如，如果已有 <code>CSS</code> 片段，那么需要添加一段 <code>HTML</code>。</p>\n<p>每段代码都需要包含在正确标记其语言的代码块中，一个代码块只能包含一种语言。多数情况下，这些步骤都没问题，不过再检查一遍总是好的。当代码块的语言标识符为 <code>language-type</code>（<em>language-type</em> 是该代码块的语言类型，如：<code>html</code>、<code>css</code> 或 <code>js</code>）时，说明这一步已经完成。</p>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>每种语言的代码可以分布在几个代码块里，所有代码会被拼接起来。这个特性允许一块代码对应一块简介。这样有利于制作教程，比如代码间夹杂着大量解释性的文本。</p>\n</div>\n<p>所以在确认代码块被正确标记为其所用语言以提供语言的语法高亮之后，你就可以继续了。</p>"}},{"type":"prose","value":{"id":"运行实例演示","title":"运行实例演示","isH3":false,"content":"<p>这部分是使用“插入运行实例模板”按钮插入运行实例标题和代码块的结果。每种语言可以有不止一个代码块。同样也不需要有特定的顺序，所有代码会被混合匹配。</p>\n<p>可以选择删除任何部分。如果不需要脚本，那么删掉脚本的标题和代码块就可以了。同样，也可以在不再被运行实例宏使用的情况下，删掉代码块的标题（“HTML”、“CSS”或“JavaScript”）。</p>\n<p>代码模板插入之后，可以增加一些代码，也可以加入一些注释。</p>"}},{"type":"prose","value":{"id":"html","title":"HTML","isH3":true,"content":"<p>这段 HTML 代码创建了一个段落和几个块级元素（<code>div</code>）以定位和为信息添加样式。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><p>A simple example of the live sample system in action.</p>\n<div class=\"box\">\n <div id=\"item\">Hello world! Welcome to MDN</div>\n</div>\n</code></pre></div>"}},{"type":"prose","value":{"id":"css","title":"CSS","isH3":true,"content":"<p>这段 CSS 代码为 box 和其中的文字添加样式。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box {\n width: 200px;\n border-radius: 6px;\n padding: 20px;\n background-color: #ffaabb;\n}\n\n#item {\n font-weight: bold;\n text-align: center;\n font-family: sans-serif;\n font-size: 1.5em;\n}\n</code></pre></div>"}},{"type":"prose","value":{"id":"javascript","title":"JavaScript","isH3":true,"content":"<p>这段代码很简单，只是增加了一个点击事件处理器来弹出信息。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const el = document.getElementById(\"item\");\nel.onclick = function () {\n alert(\"Owww, stop poking me!\");\n};\n</code></pre></div>"}},{"type":"prose","value":{"id":"结果","title":"结果","isH3":true,"content":"<p>这是通过 <code>{{EmbedLiveSample('运行实例演示')}}</code> 来展示上面运行代码块的结果。</p><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"运行实例演示 sample\" id=\"frame_运行实例演示\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Live_samples\" data-live-id=\"运行实例演示\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>这是使用外链宏 <code>{{LiveSampleLink('运行实例演示', '运行实例演示链接')}}</code> 来展示实例运行的结果：</p><a href=\"#livesample_fullscreen=运行实例演示\">运行实例演示链接</a>"}},{"type":"prose","value":{"id":"关于运行实例的约定","title":"关于运行实例的约定","isH3":false,"content":"<dl>\n <dt id=\"代码块顺序\"><a href=\"#代码块顺序\">代码块顺序</a></dt>\n <dd>\n <p>添加运行实例时，应对代码块进行排序，以便使第一个代码块对应该示例的主要语言（如果有的话）。例如，在 HTML 参考中添加运行实例时，第一个代码块应该是 HTML；在 CSS 参考中添加时，第一个代码块则应该是 CSS；以此类推。</p>\n </dd>\n <dt id=\"标题命名\"><a href=\"#标题命名\">标题命名</a></dt>\n <dd>\n <p>在没有歧义的情况下（如，例子位于“示例”部分中），标题应该简明扼要，仅使用相应语言的名称：HTML、CSS、CSS、JavasScript、SVG 等（见上文）。不应使用如“HTML 内容”或“JavaScript 内容”等标题。但是，如果这样的短标题无法明确内容，可以使用更具体的标题。</p>\n </dd>\n <dt id=\"使用“结果”块\"><a href=\"#使用“结果”块\">使用“结果”块</a></dt>\n <dd>\n <p>在不同的代码块之后，请在最后调用 <code>EmbedLiveSample</code> 宏之前使用“结果”块（见上文）。这样，示例的语义对于阅读器或其他解析页面的工具（如：屏幕阅读器、网络爬虫）都会变得更加清晰。</p>\n </dd>\n</dl>"}}],"toc":[{"text":"运行实例系统如何工作","id":"运行实例系统如何工作"},{"text":"使用运行实例系统","id":"使用运行实例系统"},{"text":"运行实例演示","id":"运行实例演示"},{"text":"关于运行实例的约定","id":"关于运行实例的约定"}],"summary":"MDN 支持将文章中的示例代码转化为读者可以实际查看的在线演示。这被称为运行实例，使得用户可以查看代码的实际输出。这使得文档变得更具动态性和指导性。","popularity":0,"modified":"2024-07-26T08:35:43.000Z","other_translations":[{"locale":"de","title":"Live-Beispiele","native":"Deutsch"},{"locale":"en-US","title":"Live examples","native":"English (US)"},{"locale":"es","title":"Ejemplos ejecutables","native":"Español"},{"locale":"fr","title":"Comment convertir des exemples de code pour qu'ils soient \"live\"","native":"Français"},{"locale":"ja","title":"ライブサンプル","native":"日本語"},{"locale":"pt-BR","title":"Como converter exemplos de codigos para funcionar \"ao vivo\"","native":"Português (do Brasil)"},{"locale":"ru","title":"Как \"оживить\" примеры кода","native":"Русский"}],"pageType":"unknown","source":{"folder":"zh-cn/mdn/writing_guidelines/page_structures/live_samples","github_url":"https://github.com/mdn/translated-content/blob/main/files/zh-cn/mdn/writing_guidelines/page_structures/live_samples/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/76a07e73495a68c90612c76d9f36d3167fcaaad1","filename":"index.md"},"short_title":"运行实例","parents":[{"uri":"/zh-CN/docs/MDN","title":"MDN Web 文档项目"},{"uri":"/zh-CN/docs/MDN/Writing_guidelines","title":"撰写指南"},{"uri":"/zh-CN/docs/MDN/Writing_guidelines/Page_structures","title":"文档结构"},{"uri":"/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Live_samples","title":"运行实例"}],"pageTitle":"运行实例 - MDN Web 文档项目 | MDN","noIndexing":false}}</script></body></html>