zhouzhongping/wiki
1
0
Fork 0
Code
quartz
wiki/Technology/WebDevelopment/2.HTML/HTML.html

674 lines
545 KiB
HTML
Raw Permalink Normal View History

Deploy HTML files - 2024-10-10
2024-10-10 16:56:32 +08:00
<!DOCTYPE html>
<html lang="zh"><head><title>HTML</title><meta charset="utf-8"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM Plex Mono&amp;family=Noto Serif Simplified Chinese:wght@400;700&amp;family=Source Sans Pro:ital,wght@0,400;0,600;1,400;1,600&amp;display=swap"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta property="og:title" content="HTML"/><meta property="og:description" content="HTML 超文本标记语言."/><meta property="og:image" content="https://wiki.7wate.com/static/og-image.png"/><meta property="og:width" content="1200"/><meta property="og:height" content="675"/><link rel="icon" href="../../../static/icon.png"/><meta name="description" content="HTML 超文本标记语言."/><meta name="generator" content="Quartz"/><link href="../../../index.css" rel="stylesheet" type="text/css" spa-preserve/><link href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css" rel="stylesheet" type="text/css" spa-preserve/><script src="../../../prescript.js" type="application/javascript" spa-preserve></script><script type="application/javascript" spa-preserve>const fetchData = fetch("../../../static/contentIndex.json").then(data => data.json())</script></head><body data-slug="Technology/WebDevelopment/2.HTML/HTML"><div id="quartz-root" class="page"><div id="quartz-body"><div class="left sidebar"><h2 class="page-title"><a href="../../..">🪴 X·Eden</a></h2><div class="spacer mobile-only"></div><div class="search"><button class="search-button" id="search-button"><p>搜索</p><svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title>Search</title><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"></path><circle cx="8" cy="8" r="7"></circle></g></svg></button><div id="search-container"><div id="search-space"><input autocomplete="off" id="search-bar" name="search" type="text" aria-label="搜索些什么" placeholder="搜索些什么"/><div id="search-layout" data-preview="true"></div></div></div></div><button class="darkmode" id="darkmode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="dayIcon" x="0px" y="0px" viewBox="0 0 35 35" style="enable-background:new 0 0 35 35" xml:space="preserve" aria-label="暗色模式"><title>暗色模式</title><path d="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5 S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5z M7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5 C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26z M17.5,6 C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6z M27.5,9 c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44 l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9z M6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5 c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06 L6.439,8.561z M33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16z M28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2 C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439z M17.5,29 c-0.829,0-1.5,0.672-1.5,1.5v3c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-3C19,29.672,18.329,29,17.5,29z M17.5,7 C11.71,7,7,11.71,7,17.5S11.71,28,17.5,28S28,23.29,28,17.5S23.29,7,17.5,7z M17.5,25c-4.136,0-7.5-3.364-7.5-7.5 c0-4.136,3.364-7.5,7.5-7.5c4.136,0,7.5,3.364,7.5,7.5C25,21.636,21.636,25,17.5,25z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="nightIcon" x="0px" y="0px" viewBox="0 0 100 100" sty
<h2 id="html">HTML<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#html" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h2>
<p>HTML 是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。它由一系列的元素或标签组成，这些标签可以告诉浏览器如何呈现内容。<strong>HTML 构成了网页的骨架。</strong></p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="html" data-theme="github-light github-dark"><code data-language="html" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;zh&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> charset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;UTF-8&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;viewport&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Document Title&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- CSS Stylesheet link --></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">link</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;stylesheet&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;styles.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- Navigation links, logo, etc. --></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- Main content goes here --></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- Footer content goes here --></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- JavaScript file link --></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;script.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></figure>
<ol>
<li><code>&lt;!DOCTYPE html></code>: 声明 HTML5 文档。</li>
<li><code>&lt;html lang=&quot;zh&quot;></code>: HTML 的根元素，语言设为中文。</li>
<li><code>&lt;head></code>: 文档头部，包含元信息。</li>
<li><code>&lt;meta charset=&quot;UTF-8&quot;></code>: 设定 UTF-8 字符编码。</li>
<li><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;></code>: 适应移动设备的视口设置。</li>
<li><code>&lt;title>Document Title&lt;/title></code>: 设置文档标题。</li>
<li><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;></code>: 链接外部 CSS 样式表。</li>
<li><code>&lt;body></code>: 文档主体，包含可见内容。</li>
<li><code>&lt;header></code>, <code>&lt;main></code>, <code>&lt;footer></code>: 分别为页眉、主内容、页脚的 HTML5 语义元素。</li>
<li><code>&lt;script src=&quot;script.js&quot;>&lt;/script></code>: 链接外部 JavaScript 文件。</li>
</ol>
<h3 id="元信息">元信息<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#元信息" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p>**HTML 的元信息（metadata）是关于 HTML 文档的数据，它们不会显示给用户，而是提供给浏览器和搜索引擎。**元信息通常在 HTML 文档的 <code>&lt;head></code> 部分定义。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="html" data-theme="github-light github-dark"><code data-language="html" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;zh&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> charset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;UTF-8&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;author&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;John Doe&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;viewport&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>网页的标题，这在浏览器的标签页中显示，并被搜索引擎用于索引页面。&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;description&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Page description. No longer than 155 characters.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;keywords&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;your, tags&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">link</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;icon&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;favicon.ico&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;image/x-icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">link</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;stylesheet&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;styles.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;script.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> http-equiv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;refresh&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;30&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;robots&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;noindex, nofollow&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">link</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;canonical&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;http://example.com/&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- 主要内容在这里 --></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></figure>
<ol>
<li><strong><code>&lt;meta charset=&quot;UTF-8&quot;></code></strong>: 这定义了文档的字符编码。常用的字符编码是 UTF-8，因为它包含了大多数已知的字符和符号。</li>
<li><strong><code>&lt;meta name=&quot;author&quot; content=&quot;John Doe&quot;></code></strong>: 这个 <code>&lt;meta></code> 标签定义了网页的作者。</li>
<li><strong><code>&lt;title></code></strong>: 网页的标题，这在浏览器的标签页中显示，并被搜索引擎用于索引页面。</li>
<li><strong><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;></code></strong>: 这是移动端优化的元标签。它让网页的宽度等于设备的宽度，初始缩放比例为 1。</li>
<li><strong><code>&lt;meta name=&quot;description&quot; content=&quot;Page description. No longer than 155 characters.&quot;></code></strong>: 这提供了页面的简洁描述，这在搜索引擎结果页 (SERP) 中显示，可以提高页面的可点率（CTR）。</li>
<li><strong><code>&lt;meta name=&quot;keywords&quot; content=&quot;your, tags&quot;></code></strong>: 这定义了网页的关键词。虽然现在搜索引擎很少使用这个元标签，但在 SEO 中还是有一些应用。</li>
<li><strong><code>&lt;link rel=&quot;icon&quot; href=&quot;favicon.ico&quot; type=&quot;image/x-icon&quot;></code></strong>: 这个 <code>&lt;link></code> 标签定义了网站的 favicon（收藏夹图标）。它在浏览器的标签页或地址栏中显示，也可以在用户的书签中显示。</li>
<li><strong><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;></code></strong>: 这链接了一个外部的 CSS 文件。虽然 <code>&lt;link></code> 标签不是 <code>&lt;meta></code>，但它在 <code>&lt;head></code> 中定义，也提供了一些元信息。</li>
<li><strong><code>&lt;script src=&quot;script.js&quot;>&lt;/script></code></strong>: 这链接了一个外部的 JavaScript 文件。与 <code>&lt;link></code> 标签类似，<code>&lt;script></code> 标签也提供了一些元信息。</li>
<li><strong><code>&lt;meta http-equiv=&quot;refresh&quot; content=&quot;30&quot;></code></strong>: 这可以让页面在特定的时间后自动刷新。在这个例子中，页面会在 30 秒后自动刷新。</li>
<li><strong><code>&lt;meta name=&quot;robots&quot; content=&quot;noindex, nofollow&quot;></code></strong>: 这可以控制搜索引擎爬虫的行为。在这个例子中，“noindex” 告诉爬虫不要索引这个页面，“nofollow” 告诉爬虫不要追踪页面上的链接。</li>
<li><strong><code>&lt;link rel=&quot;canonical&quot; href=&quot;http://example.com/&quot;/></code></strong>: 这告诉搜索引擎此页面是其 URL 的最佳表现形式，用于防止重复内容问题。</li>
</ol>
<p>这些是 HTML 元信息的一些常见形式，但还有更多的可能性。一般情况下，你应该根据你的<strong>需要选择合适的元信息来优化网站的性能和搜索引擎优化（SEO）。</strong></p>
<h3 id="基础标签">基础标签<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#基础标签" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p>HTML 文档的基础是由各种标签组成，这些标签定义了网页的不同部分。</p>
<p><img src="https://static.7wate.com/img/2023/10/13/707fac8d60c90.png" alt="grumpy-cat-small.png"/></p>
<p>主要部分有：</p>
<ul>
<li><strong>开始标签（Opening tag）</strong>：包含元素的名称（本例为 p），被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方。在这个示例中，它在段落文本的开始之前。</li>
<li><strong>内容（Content）</strong>：元素的内容，本例中就是段落的文本。</li>
<li><strong>结束标签（Closing tag）</strong>：与开始标签相似，只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。没有包含关闭标签是一个常见的初学者错误，它可能会产生奇特的结果。</li>
</ul>
<p>以下是一些最常见和重要的 HTML 标签：</p>
<div class="table-container"><table><thead><tr><th style="text-align:left;">标签</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>&lt;html></code></td><td style="text-align:left;">定义 HTML 文档</td></tr><tr><td style="text-align:left;"><code>&lt;head></code></td><td style="text-align:left;">包含元数据/头部数据</td></tr><tr><td style="text-align:left;"><code>&lt;title></code></td><td style="text-align:left;">定义文档的标题</td></tr><tr><td style="text-align:left;"><code>&lt;body></code></td><td style="text-align:left;">定义文档的主体</td></tr><tr><td style="text-align:left;"><code>&lt;h1></code> 到 <code>&lt;h6></code></td><td style="text-align:left;">定义标题</td></tr><tr><td style="text-align:left;"><code>&lt;p></code></td><td style="text-align:left;">定义段落</td></tr><tr><td style="text-align:left;"><code>&lt;br></code></td><td style="text-align:left;">插入换行符</td></tr><tr><td style="text-align:left;"><code>&lt;hr></code></td><td style="text-align:left;">定义主题之间的切换（水平线）</td></tr><tr><td style="text-align:left;"><code>&lt;!--...--></code></td><td style="text-align:left;">定义注释</td></tr><tr><td style="text-align:left;"><code>&lt;a></code></td><td style="text-align:left;">定义超链接</td></tr><tr><td style="text-align:left;"><code>&lt;img></code></td><td style="text-align:left;">定义图像</td></tr><tr><td style="text-align:left;"><code>&lt;table></code></td><td style="text-align:left;">定义表格</td></tr><tr><td style="text-align:left;"><code>&lt;tr></code></td><td style="text-align:left;">定义表格行</td></tr><tr><td style="text-align:left;"><code>&lt;th></code></td><td style="text-align:left;">定义表格标题</td></tr><tr><td style="text-align:left;"><code>&lt;td></code></td><td style="text-align:left;">定义表格单元格</td></tr><tr><td style="text-align:left;"><code>&lt;caption></code></td><td style="text-align:left;">定义表格标题</td></tr><tr><td style="text-align:left;"><code>&lt;thead></code></td><td style="text-align:left;">定义表格头部分组</td></tr><tr><td style="text-align:left;"><code>&lt;tbody></code></td><td style="text-align:left;">定义表格主体分组</td></tr><tr><td style="text-align:left;"><code>&lt;tfoot></code></td><td style="text-align:left;">定义表格脚部分组</td></tr><tr><td style="text-align:left;"><code>&lt;div></code></td><td style="text-align:left;">定义文档中的节</td></tr><tr><td style="text-align:left;"><code>&lt;span></code></td><td style="text-align:left;">定义文档中的行内元素</td></tr></tbody></table></div>
<h4 id="属性">属性<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#属性" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>HTML 属性是 HTML 元素提供的附加信息。它们定义了元素的一些特性或行为，或者包含了元素的可用数据。</p>
<p><img src="https://static.7wate.com/img/2023/10/13/28f67550b8e32.png" alt="grumpy-cat-attribute-small.png"/></p>
<p>属性总是在 HTML 元素的开始标签中指定，通常是以 <code>name=&quot;value&quot;</code> 的形式出现。这里的 <code>class</code> 是属性名，<code>editor-note</code> 是属性值。</p>
<p>属性必须包含：</p>
<ul>
<li><strong>空格</strong>：它在属性和元素名称之间。如果一个元素具有多个属性，则每个属性之间必须由空格分隔。</li>
<li><strong>名称</strong>：后面跟着一个等于号。</li>
<li><strong>属性值</strong>：由一对引号（&quot;&quot;）引起来。</li>
</ul>
<div class="table-container"><table><thead><tr><th>属性</th><th>描述</th><th>常用在的标签</th></tr></thead><tbody><tr><td>class</td><td>定义元素的一种或多种类名</td><td>所有标签</td></tr><tr><td>id</td><td>为元素定义唯一的 ID</td><td>所有标签</td></tr><tr><td>style</td><td>为元素定义内联 CSS 样式</td><td>所有标签</td></tr><tr><td>src</td><td>定义引用的资源 URL</td><td><code>&lt;img></code>, <code>&lt;script></code>, <code>&lt;iframe></code>, <code>&lt;source></code>, <code>&lt;audio></code>, <code>&lt;video></code></td></tr><tr><td>alt</td><td>定义图像的替代文本</td><td><code>&lt;img></code></td></tr><tr><td>width 和 height</td><td>定义元素的宽度和高度</td><td><code>&lt;img></code>, <code>&lt;canvas></code>, <code>&lt;iframe></code>, <code>&lt;video></code>, <code>&lt;object></code></td></tr><tr><td>href</td><td>定义链接的 URL</td><td><code>&lt;a></code>, <code>&lt;link></code>, <code>&lt;base></code>, <code>&lt;area></code></td></tr><tr><td>target</td><td>定义链接打开的位置</td><td><code>&lt;a></code>, <code>&lt;base></code>, <code>&lt;form></code></td></tr><tr><td>disabled</td><td>定义元素为禁用状态</td><td><code>&lt;button></code>, <code>&lt;fieldset></code>, <code>&lt;input></code>, <code>&lt;optgroup></code>, <code>&lt;option></code>, <code>&lt;select></code>, <code>&lt;textarea></code></td></tr><tr><td>placeholder</td><td>定义输入字段的占位符文本</td><td><code>&lt;input></code>, <code>&lt;textarea></code></td></tr><tr><td>value</td><td>定义元素的值</td><td><code>&lt;button></code>, <code>&lt;option></code>, <code>&lt;input></code>, <code>&lt;li></code>, <code>&lt;meter></code>, <code>&lt;progress></code>, <code>&lt;param></code></td></tr><tr><td>checked</td><td>定义单选按钮或复选框是否被选中</td><td><code>&lt;input></code></td></tr><tr><td>selected</td><td>定义选项是否被选中</td><td><code>&lt;option></code></td></tr><tr><td>readonly</td><td>定义输入元素为只读</td><td><code>&lt;input></code>, <code>&lt;textarea></code></td></tr><tr><td>maxlength</td><td>定义输入元素的最大长度</td><td><code>&lt;input></code>, <code>&lt;textarea></code></td></tr><tr><td>rel</td><td>定义当前文档与链接文档的关系</td><td><code>&lt;a></code>, <code>&lt;link></code>, <code>&lt;area></code>, <code>&lt;form></code></td></tr><tr><td>type</td><td>定义元素的类型</td><td><code>&lt;button></code>, <code>&lt;input></code>, <code>&lt;command></code>, <code>&lt;embed></code>, <code>&lt;object></code>, <code>&lt;script></code>, <code>&lt;source></code>, <code>&lt;style></code>, <code>&lt;menu></code></td></tr></tbody></table></div>
<h3 id="表单与输入">表单与输入<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#表单与输入" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p>在 HTML 中，表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，如文本字段，选择框，单选框，复选框等。</p>
<div class="table-container"><table><thead><tr><th style="text-align:left;">标签</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>&lt;form></code></td><td style="text-align:left;">定义 HTML 表单</td></tr><tr><td style="text-align:left;"><code>&lt;input></code></td><td style="text-align:left;">定义输入控制。HTML5 引入了一些新的输入类型，如 <code>color</code>, <code>date</code>, <code>datetime-local</code>, <code>email</code>, <code>month</code>, <code>number</code>, <code>range</code>, <code>search</code>, <code>tel</code>, <code>time</code>, <code>url</code>, <code>week</code></td></tr><tr><td style="text-align:left;"><code>&lt;textarea></code></td><td style="text-align:left;">定义多行文本输入控制</td></tr><tr><td style="text-align:left;"><code>&lt;button></code></td><td style="text-align:left;">定义点击按钮</td></tr><tr><td style="text-align:left;"><code>&lt;select></code></td><td style="text-align:left;">定义下拉列表</td></tr><tr><td style="text-align:left;"><code>&lt;optgroup></code></td><td style="text-align:left;">定义下拉列表中的选项组</td></tr><tr><td style="text-align:left;"><code>&lt;option></code></td><td style="text-align:left;">定义下拉列表中的选项</td></tr><tr><td style="text-align:left;"><code>&lt;label></code></td><td style="text-align:left;">定义 <code>input</code>, <code>meter</code>, <code>progress</code>, <code>select</code>, <code>textarea</code> 元素的标签</td></tr><tr><td style="text-align:left;"><code>&lt;fieldset></code></td><td style="text-align:left;">定义表单中的一组相关元素</td></tr><tr><td style="text-align:left;"><code>&lt;legend></code></td><td style="text-align:left;">定义 <code>fieldset</code> 元素的标题</td></tr><tr><td style="text-align:left;"><code>&lt;datalist></code></td><td style="text-align:left;">定义 <code>input</code> 元素的预定义选项列表</td></tr><tr><td style="text-align:left;"><code>&lt;output></code></td><td style="text-align:left;">定义计算结果</td></tr><tr><td style="text-align:left;"><code>&lt;progress></code></td><td style="text-align:left;">定义进度（进度条）</td></tr><tr><td style="text-align:left;"><code>&lt;meter></code></td><td style="text-align:left;">定义度量衡。仅用于已知最大和最小值的度量，如磁盘使用、查询结果的相关性等</td></tr></tbody></table></div>
<h3 id="html5-新特性">HTML5 新特性<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#html5-新特性" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p>HTML5 是 HTML 的最新演进，它引入了一系列新的元素和属性，以反映现代网站设计和开发的实践。</p>
<h4 id="语义元素">语义元素<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#语义元素" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>HTML5 引入了一系列新的语义元素，以更准确地描述内容。例如，<code>&lt;article></code>，<code>&lt;section></code>，<code>&lt;nav></code>，<code>&lt;header></code>，<code>&lt;footer></code>，<code>&lt;aside></code>，<code>&lt;figure></code>，<code>&lt;figcaption></code> 等。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="html" data-theme="github-light github-dark"><code data-language="html" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">article</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Article Title&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Posted on &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">time</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> datetime</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2023-10-13&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>October 13, 2023&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">time</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>This is the article content.&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Author: John Doe&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">article</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></figure>
<h4 id="图形和多媒体元素">图形和多媒体元素<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#图形和多媒体元素" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>HTML5 引入了新的元素来支持图形和多媒体，包括 <code>&lt;canvas></code> 用于绘制图形，<code>&lt;svg></code> 用于定义可缩放向量图形，以及 <code>&lt;video></code> 和 <code>&lt;audio></code> 用于在网页上播放视频和音频。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="html" data-theme="github-light github-dark"><code data-language="html" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">canvas</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;myCanvas&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;200&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;100&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;border:1px solid #000000;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">canvas</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">video</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;320&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;240&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">source</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;movie.mp4&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;video/mp4&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">source</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;movie.ogg&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;video/ogg&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Your browser does not support the video tag.</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">video</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></figure>
<h4 id="表单控件">表单控件<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#表单控件" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>HTML5 为表单输入引入了新的元素类型，如 <code>color</code>，<code>date</code>，<code>email</code>，<code>number</code>，<code>range</code>，<code>search</code>，<code>tel</code>，<code>time</code> 等。还引入了新的表单元素，如 <code>&lt;datalist></code> 和 <code>&lt;output></code>。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="html" data-theme="github-light github-dark"><code data-language="html" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;number&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;quantity&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> min</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;10&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;browsers&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;browser&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">datalist</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;browsers&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Internet Explorer&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Firefox&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Chrome&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Opera&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Safari&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">datalist</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></figure>
<h4 id="web-apis">Web APIs<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#web-apis" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>HTML5 引入了一系列新的 JavaScript APIs，如 Geolocation API，Drag and Drop API，Local Storage API，等等。这些 API 使网页可以与用户设备进行更深层次的交互。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="javascript" data-theme="github-light github-dark"><code data-language="javascript" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Geolocation API</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">navigator.geolocation.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getCurrentPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Latitude: &quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> position.coords.latitude </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;, Longitude: &quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> position.coords.longitude);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Local Storage API</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">localStorage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;name&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;John Doe&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(localStorage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;name&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">));</span></span></code></pre></figure>
<h4 id="web-socket">Web Socket<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#web-socket" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>Web Socket 是一种协议，它提供了全双工通信的能力，使得服务器能够实时地向客户端推送数据。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="javascript" data-theme="github-light github-dark"><code data-language="javascript" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> socket </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> WebSocket</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ws://localhost:8080&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">socket.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onopen</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> socket.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">send</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello Server&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">socket.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onmessage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Message from server: &quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, event.data);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></figure>
<h4 id="web-workers">Web Workers<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#web-workers" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>Web Workers 允许开发者在后台，独立于主执行线程运行脚本。这样可以在不影响用户界面的情况下执行复杂的计算任务。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="javascript" data-theme="github-light github-dark"><code data-language="javascript" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> worker </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Worker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;worker.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">worker.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onmessage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Received: &quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> event.data);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">worker.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">postMessage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello Worker&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></figure>
<h4 id="离线存储">离线存储<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#离线存储" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>HTML5 引入了应用程序缓存（AppCache）和本地存储（localStorage 和 sessionStorage），使得网页可以在离线状态下工作，以及保存用户数据在本地。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="java" data-theme="github-light github-dark"><code data-language="java" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Check if a new cache is available on page load.</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">window.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addEventListener</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'load'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(e) {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> window.applicationCache.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addEventListener</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'updateready'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(e) {</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (window.applicationCache.status </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">==</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> window.applicationCache.UPDATEREADY) {</span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Browser downloaded a new app cache.</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'A new version of this site is available. Load it?'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)) {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> window.location.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">reload</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">else</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Manifest didn't change. Nothing new to server.</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></figure>
<h2 id="文档架构">文档架构<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#文档架构" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h2>
<h3 id="基本组成">基本组成<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#基本组成" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p>HTML（超文本标记语言）是用于构建网页的标准标记语言，它使用一系列的标签（或元素）来描述和组织内容。</p>
<p>HTML 文档的基本结构通常包含以下几个主要部分：</p>
<ul>
<li><strong>页眉（Header）</strong>：通常位于整个页面的顶部，包含网站的主要标题和/或标志。它是网站的核心信息，通常在所有页面上都存在。</li>
<li><strong>导航栏（Navigation Bar）</strong>：导航栏包含指向网站各个主要区域的超链接。它通常以菜单按钮、链接或标签页的形式呈现。导航栏在设计上通常要保持一致，出现在所有页面上，以帮助用户导航网站。有些人将导航栏视为页眉的一部分，而另一些人认为导航栏是一个独立的组件。</li>
<li><strong>主内容区域（Main Content）</strong>：主内容区域是页面的中心部分，包含当前页面的大部分独有内容，如文章、视频、地图、新闻等。主内容区域是网站的核心部分，不同页面的主内容会有所不同。</li>
<li><strong>侧边栏（Sidebar）</strong>：侧边栏通常位于主内容区域旁边，包含一些附加信息、链接、引用、广告等。侧边栏通常与主内容相关，例如在新闻页面上，侧边栏可能包含作者信息或相关文章链接。侧边栏还可以包含其他重复元素，如辅助导航系统。</li>
<li><strong>页脚（Footer）</strong>：页脚位于页面底部，通常是一个横跨页面的窄条区域。类似于页眉，页脚包含一些公共信息，如版权声明或联系方式。通常使用较小的字体，内容相对次要。页脚还可以提供快速访问链接，以改善网站的搜索引擎优化（SEO）。</li>
</ul>
<p>一个<strong>典型的网站</strong>可能会这样布局：</p>
<p><img src="https://static.7wate.com/img/2023/10/13/345ddbff25c21.png" alt="sample-website.png"/></p>
<h3 id="布局细节">布局细节<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#布局细节" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p>在进行网页布局时，有一些关键的细节需要考虑。以下是一些常见的布局细节，可以帮助你创建具有良好用户体验和吸引力的网页布局。</p>
<ul>
<li>
<p>**响应式设计：**确保你的网页能够适应不同屏幕尺寸和设备类型。使用 CSS 媒体查询和弹性布局来实现响应式设计，以便在桌面电脑、平板电脑和移动设备上都能提供良好的用户体验。</p>
</li>
<li>
<p>**网格布局：**使用网格系统来创建整齐的网页布局。将页面划分为网格列和行，以便在不同屏幕尺寸上灵活地排列和对齐内容。</p>
</li>
<li>
<p>**盒子模型：**了解 CSS 盒子模型的概念，包括内容区域、填充、边框和外边距。正确地设置和管理盒子模型属性可以影响元素的大小、间距和布局。</p>
</li>
<li>
<p>**流动布局：**使用流动布局使元素按照自然流动方式排列。避免使用固定宽度和高度，而是使用百分比或自适应单位来设置元素的尺寸。</p>
</li>
<li>
<p>**定位：**使用 CSS 定位属性（如相对定位、绝对定位和固定定位）来精确控制元素在页面中的位置。这可以用于创建重叠效果、浮动元素或固定位置的元素。</p>
</li>
<li>
<p>**色彩和对比度：**选择适合你网站主题和品牌的配色方案。确保文本和背景之间有足够的对比度，以确保可读性和可访问性。</p>
</li>
<li>
<p>**导航设计：**设计易于使用的导航菜单，使用户能够轻松浏览网站的不同部分。考虑使用清晰的标签、下拉菜单或面包屑导航等。</p>
</li>
<li>
<p>**空白和间距：**合理利用空白和间距来提高页面的可读性和视觉吸引力。避免内容过于拥挤，给元素之间留出适当的空间。</p>
</li>
<li>
<p>**图片和媒体布局：**对于包含图片、视频或其他媒体的网页，考虑使用适当的布局和对齐方式来展示这些媒体内容。</p>
</li>
</ul>
<h2 id="多媒体嵌入">多媒体嵌入<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#多媒体嵌入" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h2>
<h3 id="视频">视频<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#视频" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p><code>&lt;video></code> 元素用于在网页上嵌入视频内容。以下是一个简单的例子：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="shell" data-theme="github-light github-dark"><code data-language="shell" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">video width</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;320&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;240&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">source</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> src=&quot;movie.mp4&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> type=&quot;video/mp4&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">source</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> src=&quot;movie.ogg&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> type=&quot;video/ogg&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span>
<span data-line><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> 您的浏览器不支持</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> Video</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 标签。</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/video</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span></code></pre></figure>
<p>在上面的例子中，<code>&lt;video></code> 标签内部的 <code>&lt;source></code> 标签用于指定视频源文件。支持多个 <code>&lt;source></code> 标签，这样如果浏览器不支持第一个视频格式，它将尝试下一个。<strong>您的浏览器不支持 Video 标签</strong>将在所有指定的源都不被支持的情况下显示。</p>
<p><code>&lt;video></code> 标签的常用属性包括：</p>
<div class="table-container"><table><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">描述</th><th style="text-align:left;">示例</th></tr></thead><tbody><tr><td style="text-align:left;"><code>controls</code></td><td style="text-align:left;">为视频提供播放、暂停和音量控制按钮</td><td style="text-align:left;"><code>&lt;video src=&quot;movie.mp4&quot; controls></code></td></tr><tr><td style="text-align:left;"><code>autoplay</code></td><td style="text-align:left;">视频就绪后立即开始播放。注意，因为用户体验的问题，一些浏览器可能会忽略这个属性</td><td style="text-align:left;"><code>&lt;video src=&quot;movie.mp4&quot; autoplay></code></td></tr><tr><td style="text-align:left;"><code>loop</code></td><td style="text-align:left;">视频播放结束后从头开始</td><td style="text-align:left;"><code>&lt;video src=&quot;movie.mp4&quot; loop></code></td></tr><tr><td style="text-align:left;"><code>muted</code></td><td style="text-align:left;">将视频的声音默认设置为静音</td><td style="text-align:left;"><code>&lt;video src=&quot;movie.mp4&quot; muted></code></td></tr><tr><td style="text-align:left;"><code>poster</code></td><td style="text-align:left;">在视频下载期间或用户在点击播放按钮之前，显示一个图像。图像的 URL 在 <code>poster</code> 属性中指定</td><td style="text-align:left;"><code>&lt;video src=&quot;movie.mp4&quot; poster=&quot;poster.jpg&quot;></code></td></tr><tr><td style="text-align:left;"><code>preload</code></td><td style="text-align:left;">规定页面加载后立即加载视频。可以设置为 “auto”、“metadata” 或 “none”</td><td style="text-align:left;"><code>&lt;video src=&quot;movie.mp4&quot; preload=&quot;auto&quot;></code></td></tr><tr><td style="text-align:left;"><code>width</code> 和 <code>height</code></td><td style="text-align:left;">定义视频播放器的高度和宽度</td><td style="text-align:left;"><code>&lt;video src=&quot;movie.mp4&quot; width=&quot;320&quot; height=&quot;240&quot;></code></td></tr><tr><td style="text-align:left;"><code>src</code></td><td style="text-align:left;">规定媒介源的 URL</td><td style="text-align:left;"><code>&lt;video src=&quot;movie.mp4&quot;></code></td></tr></tbody></table></div>
<h3 id="音频">音频<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#音频" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p><code>&lt;audio></code> 元素用于在网页上嵌入音频内容。语法和 <code>&lt;video></code> 类似：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="html" data-theme="github-light github-dark"><code data-language="html" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">audio</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">source</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;audio.mp3&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;audio/mpeg&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">source</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;audio.ogg&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;audio/ogg&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 您的浏览器不支持Audio标签。</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">audio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></figure>
<p><code>&lt;audio></code> 标签的常用属性也包括 controls、autoplay、loop 和 muted 等。</p>
<h3 id="iframe">Iframe<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#iframe" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p><code>&lt;iframe></code> 是一个 HTML 标签，它允许我们在当前的 HTML 文档中嵌入另一个 HTML 文档。<code>&lt;iframe></code> 标签通常被用于嵌入来自不同源的内容，例如嵌入 Google 地图，YouTube 视频，或者其他网站的页面。</p>
<p>例如通过 <code>&lt;iframe></code> 标签嵌入 YouTube 视频：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="html" data-theme="github-light github-dark"><code data-language="html" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">iframe</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;560&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;315&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://www.youtube.com/embed/dQw4w9WgXcQ&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> frameborder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;0&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> allow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> allowfullscreen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">iframe</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></figure>
<p><code>&lt;iframe></code> 标签支持多种属性，包括：</p>
<div class="table-container"><table><thead><tr><th style="text-align:left;">属性名</th><th style="text-align:left;">描述</th><th style="text-align:left;">示例</th></tr></thead><tbody><tr><td style="text-align:left;"><code>src</code></td><td style="text-align:left;">规定在 <code>&lt;iframe></code> 中显示的文档的 URL</td><td style="text-align:left;"><code>&lt;iframe src=&quot;https://www.example.com&quot;></code></td></tr><tr><td style="text-align:left;"><code>height</code> 和 <code>width</code></td><td style="text-align:left;">规定 <code>&lt;iframe></code> 的高度和宽度，单位可以是像素（px）或百分比（%）</td><td style="text-align:left;"><code>&lt;iframe src=&quot;demo.html&quot; height=&quot;200&quot; width=&quot;300&quot;></code></td></tr><tr><td style="text-align:left;"><code>frameborder</code></td><td style="text-align:left;">规定是否显示 <code>&lt;iframe></code> 的边框。在 HTML5 中，这个属性已经废弃，应使用 CSS 来控制边框</td><td style="text-align:left;"><code>&lt;iframe src=&quot;demo.html&quot; frameborder=&quot;0&quot;></code></td></tr><tr><td style="text-align:left;"><code>sandbox</code></td><td style="text-align:left;">允许对于 <code>&lt;iframe></code> 中内容的一些限制，如阻止脚本执行，限制表单提交等</td><td style="text-align:left;"><code>&lt;iframe src=&quot;demo.html&quot; sandbox></code></td></tr><tr><td style="text-align:left;"><code>allowfullscreen</code></td><td style="text-align:left;">允许 <code>&lt;iframe></code> 的内容全屏显示，这对于嵌入视频特别有用</td><td style="text-align:left;"><code>&lt;iframe src=&quot;video.html&quot; allowfullscreen></code></td></tr></tbody></table></div>
<h3 id="兼容性">兼容性<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#兼容性" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p>要注意的是，不是所有浏览器都支持所有视频或音频格式。例如，MP4 主要由 IE，Safari 和 Chrome 支持，而 Firefox 和 Opera 主要支持 Ogg 和 WebM 。因此，为了获得最佳的跨浏览器兼容性，通常需要提供多种格式的源文件。</p>
<p>总的来说，<code>&lt;video></code>、<code>&lt;audio></code> 和 <code>&lt;iframe></code> 标签在现代浏览器中都有良好的兼容性。但是，考虑到一些用户可能仍然使用老版本的浏览器，我们需要在使用这些标签的时候提供合适的备选方案。</p>
<h2 id="html-表格">HTML 表格<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#html-表格" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h2>
<p>HTML 数据表格用于在网页上显示二维数据。它由 <code>&lt;table></code>、<code>&lt;tr></code>、<code>&lt;td></code> 和 <code>&lt;th></code> 等标签组成。以下是一个基本的 HTML 表格结构：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="html" data-theme="github-light github-dark"><code data-language="html" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">th</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>标题1&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">th</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">th</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>标题2&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">th</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>数据1&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>数据2&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></figure>
<p>在上述代码中：</p>
<ul>
<li><code>&lt;table></code> 标签定义了一个表格。</li>
<li><code>&lt;tr></code> 标签定义了一个表格行。</li>
<li><code>&lt;th></code> 标签定义了一个表头单元格，通常用于显示列的标题。<code>&lt;th></code> 中的内容默认会被加粗并居中显示。</li>
<li><code>&lt;td></code> 标签定义了一个表格数据单元格，用于显示数据。</li>
</ul>
<p>HTML 表格还支持一些更高级的特性，例如：</p>
<ul>
<li><code>&lt;thead></code>、<code>&lt;tbody></code> 和 <code>&lt;tfoot></code>：用于对表格内容进行分组，有助于提高可访问性，并可以用于应用特定的样式。</li>
<li><code>colspan</code> 和 <code>rowspan</code> 属性：用于定义单元格可以横跨的列数和行数。</li>
<li><code>&lt;caption></code>：为表格提供标题或摘要。</li>
</ul>
<p>以下是一个使用了这些高级特性的表格示例：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="html" data-theme="github-light github-dark"><code data-language="html" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">caption</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>2019 年销售数据&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">caption</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">thead</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">th</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>季度&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">th</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">th</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>销售额&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">th</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">thead</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tbody</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>第一季度&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>$200,000&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>第二季度&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>$250,000&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tbody</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tfoot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> colspan</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>总计：$450,000&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tfoot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></figure>
<p>在这个例子中，<code>&lt;caption></code> 提供了表格的标题，<code>&lt;thead></code>、<code>&lt;tbody></code> 和 <code>&lt;tfoot></code> 将表格内容进行了分组，<code>colspan</code> 属性使得总计行可以横跨两列。</p>
<p>需要注意的是，**虽然 HTML 表格非常适合用于显示二维数据，但是不应该用于页面布局。**使用 CSS 布局技术（如 Flexbox 或 Grid）可以更好地控制页面布局，同时也能提高页面的可访问性和响应式设计的能力。</p></article><hr/><div class="page-footer"></div></div><div class="right sidebar"><div class="graph"><h3>关系图谱</h3><div class="graph-outer"><div id="graph-container" data-cfg="{&quot;drag&quot;:true,&quot;zoom&quot;:true,&quot;depth&quot;:1,&quot;scale&quot;:1.1,&quot;repelForce&quot;:0.5,&quot;centerForce&quot;:0.3,&quot;linkDistance&quot;:30,&quot;fontSize&quot;:0.6,&quot;opacityScale&quot;:1,&quot;showTags&quot;:true,&quot;removeTags&quot;:[],&quot;focusOnHover&quot;:false}"></div><button id="global-graph-icon" aria-label="Global Graph"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 55 55" fill="currentColor" xml:space="preserve"><path d="M49,0c-3.309,0-6,2.691-6,6c0,1.035,0.263,2.009,0.726,2.86l-9.829,9.829C32.542,17.634,30.846,17,29,17
s-3.542,0.634-4.898,1.688l-7.669-7.669C16.785,10.424,17,9.74,17,9c0-2.206-1.794-4-4-4S9,6.794,9,9s1.794,4,4,4
c0.74,0,1.424-0.215,2.019-0.567l7.669,7.669C21.634,21.458,21,23.154,21,25s0.634,3.542,1.688,4.897L10.024,42.562
C8.958,41.595,7.549,41,6,41c-3.309,0-6,2.691-6,6s2.691,6,6,6s6-2.691,6-6c0-1.035-0.263-2.009-0.726-2.86l12.829-12.829
c1.106,0.86,2.44,1.436,3.898,1.619v10.16c-2.833,0.478-5,2.942-5,5.91c0,3.309,2.691,6,6,6s6-2.691,6-6c0-2.967-2.167-5.431-5-5.91
v-10.16c1.458-0.183,2.792-0.759,3.898-1.619l7.669,7.669C41.215,39.576,41,40.26,41,41c0,2.206,1.794,4,4,4s4-1.794,4-4
s-1.794-4-4-4c-0.74,0-1.424,0.215-2.019,0.567l-7.669-7.669C36.366,28.542,37,26.846,37,25s-0.634-3.542-1.688-4.897l9.665-9.665
C46.042,11.405,47.451,12,49,12c3.309,0,6-2.691,6-6S52.309,0,49,0z M11,9c0-1.103,0.897-2,2-2s2,0.897,2,2s-0.897,2-2,2
S11,10.103,11,9z M6,51c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S8.206,51,6,51z M33,49c0,2.206-1.794,4-4,4s-4-1.794-4-4
s1.794-4,4-4S33,46.794,33,49z M29,31c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S32.309,31,29,31z M47,41c0,1.103-0.897,2-2,2
s-2-0.897-2-2s0.897-2,2-2S47,39.897,47,41z M49,10c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S51.206,10,49,10z"></path></svg></button></div><div id="global-graph-outer"><div id="global-graph-container" data-cfg="{&quot;drag&quot;:true,&quot;zoom&quot;:true,&quot;depth&quot;:-1,&quot;scale&quot;:0.9,&quot;repelForce&quot;:0.5,&quot;centerForce&quot;:0.3,&quot;linkDistance&quot;:30,&quot;fontSize&quot;:0.6,&quot;opacityScale&quot;:1,&quot;showTags&quot;:true,&quot;removeTags&quot;:[],&quot;focusOnHover&quot;:true}"></div></div></div><div class="toc desktop-only"><button type="button" id="toc" class aria-controls="toc-content" aria-expanded="true"><h3>目录</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="fold"><polyline points="6 9 12 15 18 9"></polyline></svg></button><div id="toc-content" class><ul class="overflow"><li class="depth-0"><a href="#html" data-for="html">HTML</a></li><li class="depth-1"><a href="#元信息" data-for="元信息">元信息</a></li><li class="depth-1"><a href="#基础标签" data-for="基础标签">基础标签</a></li><li class="depth-1"><a href="#表单与输入" data-for="表单与输入">表单与输入</a></li><li class="depth-1"><a href="#html5-新特性" data-for="html5-新特性">HTML5 新特性</a></li><li class="depth-0"><a href="#文档架构" data-for="文档架构">文档架构</a></li><li class="depth-1"><a href="#基本组成" data-for="基本组成">基本组成</a></li><li class="depth-1"><a href="#布局细节" data-for="布局细节">布局细节</a></li><li class="depth-0"><a href="#多媒体嵌入" data-for="多媒体嵌入">多媒体嵌入</a></li><li class="depth-1"><a href="#视频" data-for="视频">视频</a></li><li class="depth-1"><a href="#音频" data-for="音频">音频</a></li><li class="depth-1"><a href="#iframe" data-for="iframe">Iframe</a></li><li class="depth-1"><a href="#兼容性" data-for="兼容性">兼容性</a></li><li class="depth-0"><a href="#html-表格" data-for="html-表格">HTML 表格</a></li></ul></div></div><div class="explorer mobile-only"><button type="button" id="explorer" data-behavior="collapse" data-collapsed="collapsed" data-savestate="true" data-tree="[{&quot;path&quot;:&quot;Personal&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Blog&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Blog/2018&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Blog/2020&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Blog/2021&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Blog/2022&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Blog/2023&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Blog/2024&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/个人成长&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/医学健康&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/历史&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/哲学宗教&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/心理&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/政治军事&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/教育学习&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/文学&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/生活百科&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/社会文化&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/科学技术&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/经济理财&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/艺术&quot;,&quot;collapsed&quot;:true},{&quot
</script><script type="module">
let mermaidImport = undefined
document.addEventListener('nav', async () => {
if (document.querySelector("code.mermaid")) {
mermaidImport ||= await import('https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs')
const mermaid = mermaidImport.default
const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark'
mermaid.initialize({
startOnLoad: false,
securityLevel: 'loose',
theme: darkMode ? 'dark' : 'default'
})
await mermaid.run({
querySelector: '.mermaid'
})
}
});
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/copy-tex.min.js" type="application/javascript"></script><script src="../../../postscript.js" type="module"></script></html>
Copy Permalink