https://largeoyos.github.io/categories/%E5%89%8D%E7%AB%AF/ Recent content in 前端 on LarGeoYos Hugo -- gohugo.io zh-CN Sat, 25 Apr 2026 00:00:00 +0000 https://largeoyos.github.io/post/html-responsive/ Sat, 25 Apr 2026 00:00:00 +0000 https://largeoyos.github.io/post/html-responsive/ <h3 id="1-h1元素"><a href="#1-h1%e5%85%83%e7%b4%a0" class="header-anchor"></a>1. h1元素 </h3><ul> <li>HTML 由元素组成。 你将使用的第一个元素是 <code>h1</code> 元素：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Welcome to freeCodeCamp<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>它以一个开始标签（<code>&lt;h1&gt;</code>）开始，以一个结束标签（<code>&lt;/h1&gt;</code>）结束，中间是它将显示的文本。</li> <li>在你的 <code>Welcome to freeCodeCamp</code> 文本前面添加一个开始标签，后面添加一个结束标签，将其转化为一个 <code>h1</code> 元素。</li> </ul> <h3 id="2-h2元素"><a href="#2-h2%e5%85%83%e7%b4%a0" class="header-anchor"></a>2. h2元素 </h3><ul> <li><code>h1</code> 元素是网页的主标题，每个页面你应该只使用一个。<code>h2</code> 元素表现子标题。每个页面可以有多个，它们看起来像这样：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>This is a subheading.<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>HTML 中有六个标题元素： <code>h1</code> 到 <code>h6</code>。 它们用于表明网页各部分的重要性，其中 <code>h1</code> 最为重要，而 <code>h6</code> 则最为次要。</li> </ul> <h3 id="3-p元素"><a href="#3-p%e5%85%83%e7%b4%a0" class="header-anchor"></a>3. p元素 </h3><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>This is a paragraph element.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span></code></pre></div><h3 id="4-空元素"><a href="#4-%e7%a9%ba%e5%85%83%e7%b4%a0" class="header-anchor"></a>4. 空元素 </h3><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">img</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>注意，这个图像元素没有结束标签，也没有任何内容。 空元素不能有任何内容，只有一个开始标签。</li> <li>有时你会看到使用 <code>/</code> 放在 <code>&gt;</code> 之前的空元素，如下所示：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">img</span> <span class="p">/&gt;</span> </span></span></code></pre></div><ul> <li>许多代码格式化工具（如 Prettier）会选择在空元素中包含 <code>/</code>，HTML 规范指出，<code>/</code> 的存在 &ldquo;并不标志着开始标记是自闭合的，而且是不必要的，没有任何影响&rdquo;。</li> <li>在实际开发中，这两种形式你都会见到，因此熟悉它们非常重要。</li> </ul> <h2 id="5图像元素"><a href="#5%e5%9b%be%e5%83%8f%e5%85%83%e7%b4%a0" class="header-anchor"></a>5.图像元素 </h2><ul> <li>如果你要显示图像，则需要在图像元素中包含几个属性。这是一个带有 <code>src</code> 属性的图像元素示例</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg&#34;</span> <span class="p">/&gt;</span> </span></span></code></pre></div><ul> <li> <p><code>src</code> 属性用于指定图像的位置。 对于图像元素，包含另一个名为 <code>alt</code> 的属性是一种好的实践。 <code>alt</code> 属性用于为图像提供简短的描述性文本。</p> </li> <li> <p>这是一个带有 <code>src</code> 和 <code>alt</code> 属性的图像元素示例。尝试通过将 <code>src</code> 值更新为 <code>&quot;https://.freecodecamp.org/curriculum/cat-photo-app/cats.jpg&quot;</code> 来破坏图像。你将看到图像消失，只显示 <code>alt</code> 文本。</p> </li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;Two tabby kittens sleeping together on a couch.&#34;</span> <span class="p">/&gt;</span> </span></span></code></pre></div><h2 id="6-属性"><a href="#6-%e5%b1%9e%e6%80%a7" class="header-anchor"></a>6. 属性 </h2><ul> <li>属性是放置在 HTML 元素<strong>开始标签内</strong>的一个值。 属性提供元素的附加信息，或指定元素的行为方式。 以下是属性的基本语法：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">element</span> <span class="na">attribute</span><span class="o">=</span><span class="s">&#34;value&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">element</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>a元素: 锚点anchor</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://www.freecodecamp.org/news/&#34;</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;_blank&#34;</span><span class="p">&gt;</span>Visit freeCodeCamp<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>第一个示例使用了 <code>href</code> 和 <code>target</code> 属性。<code>href</code> 属性指定链接的 URL，<code>target</code> 属性指定打开链接的位置。</li> <li>将 <code>href=&quot;https://www.freecodecamp.org/news/&quot;</code> 更改为 <code>href=&quot;https://www.freecodecamp.org&quot;</code>。现在，当你点击交互式编辑器中的链接时，你将在新的浏览器标签页中看到 freeCodeCamp 主页。</li> <li>如果没有 <code>href</code> 属性，链接将无法工作，因为没有目标 URL。所以你必须包含这个 <code>href</code> 属性以使链接生效。<code>target=&quot;_blank&quot;</code> 启用链接在新的浏览器标签（页）中打开。</li> <li>其他常见的属性有 <code>src</code> 和 <code>alt</code>，或备选属性——分别用于指定图像的来源和为图像提供备选描述性文本。</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">checked</span> <span class="p">/&gt;</span> </span></span></code></pre></div><ul> <li>在上面的示例中，有一个 <code>type</code> 属性设置为 <code>checkbox</code> 的 <code>input</code> 元素。 输入用于从用户处收集数据，<code>type</code> 属性指定了输入的类型。 在本例中，该输入是一个复选框。 You will learn more about how inputs work in the upcoming lessons.</li> <li><code>checked</code> 属性用于指定默认选中的复选框。 <code>checked</code> 属性不需要值。 如果它存在，则默认选中该复选框。 如果它不存在，复选框将被取消选中。 这被称为布尔属性。 在学习 JavaScript 部分时，你将学习更多有关布尔的知识。</li> <li>在 HTML 中会遇到几种常见的布尔属性，例如 <code>disabled</code>、<code>readonly</code> 和 <code>required</code>。 这些属性用于指定元素的状态，如禁用、只读或必填。</li> <li>这是一个默认被禁用的文本 <code>input</code> 元素示例。现在从 <code>input</code> 元素中移除 <code>disabled</code> 属性，你将看到该 <code>input</code> 不再默认被禁用。你现在应该能够点击它并在字段内输入内容。</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">disabled</span><span class="p">&gt;</span> </span></span></code></pre></div><h2 id="7link元素"><a href="#7link%e5%85%83%e7%b4%a0" class="header-anchor"></a>7.link元素 </h2><ul> <li><code>link</code> 元素用于链接样式表和网站图标等外部资源。 以下是为外部 CSS 文件使用 <code>link</code> 元素的基本语法：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;./styles.css&#34;</span> <span class="p">/&gt;</span> </span></span></code></pre></div><ul> <li><code>rel</code> 属性用于指定链接资源与 HTML 文档之间的关系。 在这种情况下，我们需要指定该链接资源为 <code>stylesheet</code>。</li> <li>将 HTML 和 CSS 分置于不同的文件中被视为最佳实践。 开发人员将使用 <code>link</code> 元素来链接外部 CSS 文件，而不是在 HTML 文档中编写所有内容。</li> <li><code>href</code> 属性用于指定外部资源 URL 的位置。</li> <li>示例中的 <code>dot</code> 后跟一个斜杠，是告诉计算机在当前文件夹或目录中查找 <code>styles.css</code> 文件。</li> <li><code>link</code> 元素应放在 <code>head</code> 元素内，如下例所示：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width, initial-scale=1.0&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Examples of the link element<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;./styles.css&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>通常情况下，你会在专业代码库中看到多个 <code>link</code> 元素，它们链接到不同的样式表、字体和图标。 下面是一个使用 <code>link</code> 元素链接到外部 Google 字体 <em>Playwright Cuba</em> 的示例：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;preconnect&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://fonts.googleapis.com&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;preconnect&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://fonts.gstatic.com&#34;</span> <span class="na">crossorigin</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> </span></span><span class="line"><span class="cl"> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://fonts.googleapis.com/css2?family=Playwrite+CU:wght@100..400&amp;display=swap&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> </span></span><span class="line"><span class="cl"><span class="p">/&gt;</span> </span></span></code></pre></div><ul> <li> <p>Google 字体是一套免费的开源自定义字体，你可以在任何项目中使用。 你可以选择要使用的字体，Google 会为你提供必要的 HTML 和 CSS 代码。 在这个示例中，<code>rel</code> 属性的 <code>preconnect</code> 值告诉浏览器，要与 <code>href</code> 属性中指定的值提前建立连接。 这样做是为了加快这些外部资源的加载时间。</p> </li> <li> <p><code>link</code> 元素的另一个常见用例是链接到图标。 下面是一个链接到 favicon 的示例：</p> </li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;icon&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;favicon.ico&#34;</span> <span class="p">/&gt;</span> </span></span></code></pre></div><ul> <li>favicon 是 favorite icon（收藏夹图标）的缩写，通常是在浏览器标签（页）中显示在网站标题旁边的小图标。许多网站会使用 favicon 来显示他们的品牌图标。</li> </ul> <h2 id="8-html-模板"><a href="#8-html-%e6%a8%a1%e6%9d%bf" class="header-anchor"></a>8. HTML 模板 </h2><ul> <li>HTML 模板就像一个现成的网页模板。模板包括每个 HTML 文档所需的基本结构和重要元素。 它可以节省你的时间，并有助于确保你的页面设置正确。 这是一个示例：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> </span></span><span class="line"><span class="cl"> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width, initial-scale=1.0&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>freeCodeCamp<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;./styles.css&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>让我们来分析一下这个模板的关键部分。 首先，是 <code>DOCTYPE</code> 声明：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span></code></pre></div><ul> <li>它会告诉浏览器你使用的 HTML 版本。 接下来，是 <code>html</code> 标签：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--All other elements go inside here--&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>这包括你所有的内容，并可指定页面语言。 在 <code>html</code> 标记内，你会发现两个主要部分——一个 <code>head</code> 和一个 <code>body</code>：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--Important metadata goes here--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--Headings, paragraphs, images, etc. go inside here--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li><code>head</code> 部分包含重要的幕后信息：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width, initial-scale=1.0&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Document Title Goes Here<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;./styles.css&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>网站的元数据，包含在 <code>meta</code> 元素中，其中包含字符编码等详细信息，以及 Twitter 等网站应如何预览你的页面链接。 你网站的标题，可在 <code>title</code> 元素中找到，它决定了显示在浏览器标签页或窗口中的文本。 最后，你通常会在 <code>head</code> 部分使用 <code>link</code> 元素链接页面的外部样式表。</li> <li><code>body</code> 部分是放置所有内容的地方：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>I am a main title<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Example paragraph text<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span></code></pre></div><h2 id="9utf-8-字符编码"><a href="#9utf-8-%e5%ad%97%e7%ac%a6%e7%bc%96%e7%a0%81" class="header-anchor"></a>9.UTF-8 字符编码 </h2><ul> <li>UTF-8，或 UCS 转换格式 8，是一种在网络上广泛使用的标准化字符编码。 字符编码是计算机将字符存储为数据的方法。 从本质上讲，网页上的所有文本都是以一个或多个字节形式存储的字符序列。 在计算中，字节是由 8 位或二进制数字组成的数据单位。 UTF-8 支持 Unicode 字符集中的所有字符，包括所有书写系统、语言和技术符号中的字符和符号。 下面是使用带有将字符编码设置为 <code>UTF-8</code> 的 <code>charset</code> 属性的 <code>meta</code> 元素的示例：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span> <span class="p">/&gt;</span> </span></span></code></pre></div><ul> <li>通过将字符编码设置为 UTF-8，可确保页面上正确显示重音 <code>&quot;e&quot;</code> 字符（<code>é</code>）。 下面是使用 UTF-8 字符编码的扩展代码示例：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width, initial-scale=1.0&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Examples of the UTF-8 encoding<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Café<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>对于创建的每个新项目，你都应包含将 <code>charset</code> 属性设置为 <code>UTF-8</code> 的 <code>meta</code> 元素。</li> </ul> <h2 id="10-注释"><a href="#10-%e6%b3%a8%e9%87%8a" class="header-anchor"></a>10. 注释 </h2><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-HTML" data-lang="HTML"><span class="line"><span class="cl"><span class="c">&lt;!--`, contains any number of lines of text, and ends with `--&gt;</span> </span></span></code></pre></div><h2 id="11-main元素"><a href="#11-main%e5%85%83%e7%b4%a0" class="header-anchor"></a>11. main元素 </h2><ul> <li>HTML5 有一些元素能够标识不同的内容区域。 这些元素能让你的 HTML 易于阅读，并有助于搜索引擎优化（SEO）和无障碍。</li> <li><code>main</code> 元素用于表示 HTML 文档正文的主要内容。 <code>main</code> 元素里的内容应该是文档中唯一的，不应该在文档的其他部分重复。</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">main</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Most important content of the document<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Some more important content...<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>通过在 <code>h1</code> 元素前添加 <code>&lt;main&gt;</code> 开始标签，并在 <code>p</code> 元素后添加 <code>&lt;/main&gt;</code> 结束标签，来识别此页面的主要部分。</li> </ul> <h2 id="12ul元素"><a href="#12ul%e5%85%83%e7%b4%a0" class="header-anchor"></a>12.ul元素 </h2><ul> <li>要创建一个无序项目列表，你可以使用 <code>ul</code> 元素。</li> <li><code>li</code> 元素用于在有序或无序列表中创建列表项。</li> <li>这是一个无序列表中列表项的示例：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>milk<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>cheese<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span></code></pre></div><h2 id="13figure元素"><a href="#13figure%e5%85%83%e7%b4%a0" class="header-anchor"></a>13.figure元素 </h2><ul> <li><code>figure</code> 元素代表自包含的内容，允许你将图像与标题相关联。</li> <li>图题（<code>figcaption</code>）元素用于添加标题来描述 <code>figure</code> 元素中包含的图像。</li> <li>这是一个标题为 <code>A cute cat</code> 的 <code>figcaption</code> 的元素示例：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">figure</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;image.jpg&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;A description of the image&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">figcaption</span><span class="p">&gt;</span>A cute cat<span class="p">&lt;/</span><span class="nt">figcaption</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">figure</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>要强调一个特定的单词或短语，你可以使用 <code>em</code> 元素。</li> <li>通过将 <code>figcaption</code> 元素中的单词包裹在强调 <code>em</code> 元素中来强调它。</li> </ul> <h2 id="14ol元素"><a href="#14ol%e5%85%83%e7%b4%a0" class="header-anchor"></a>14.ol元素 </h2><ul> <li>有序列表（<code>ol</code>）的代码类似于无序列表，但有序列表中的列表项在显示时是编号的。</li> </ul> <h2 id="15em元素斜体strong元素加粗"><a href="#15em%e5%85%83%e7%b4%a0%e6%96%9c%e4%bd%93strong%e5%85%83%e7%b4%a0%e5%8a%a0%e7%b2%97" class="header-anchor"></a>15.em元素斜体,strong元素加粗 </h2><h2 id="16footer元素"><a href="#16footer%e5%85%83%e7%b4%a0" class="header-anchor"></a>16.footer元素 </h2><ul> <li><code>footer</code> 元素用于定义文档或章节的页脚。 页脚通常包含文档作者信息、版权数据、使用条款链接、联系信息等。</li> </ul> <h2 id="17div-元素"><a href="#17div-%e5%85%83%e7%b4%a0" class="header-anchor"></a>17.Div 元素 </h2><ul> <li><code>div</code> 元素用作容器以分组其他元素。</li> <li>这是一个 <code>div</code> 元素的示例。为你的 <code>div</code> 元素添加另一个段落元素，并在预览窗口中查看更改。</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Example paragraph element.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>当你想要将一组<code>将共享一组 CSS 样式的</code>超文本标记语言元素分组时，你主要会使用 <code>div</code> 元素。你将在后续的课程和研讨会中学习更多关于 CSS 的内容。</li> <li>尽管 <code>div</code> 元素在实际代码库中常被使用，你应当小心不要过度使用它。有些时候，使用其他元素会更合适。</li> <li>例如，如果你想将内容划分为多个部分，那么使用 <code>section</code> 元素比使用 <code>div</code> 元素更合适。</li> <li>在第一个 <code>section</code> 元素下方添加另一个 <code>section</code> 元素。然后在该 <code>section</code> 元素内添加 <code>h2</code> 和 <code>p</code> 元素。你可以使用任何你喜欢的文本，并且你将在预览窗口中看到更改。</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>Mammals<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> Mammals are warm-blooded animals with fur or hair. Most give birth to live </span></span><span class="line"><span class="cl"> young. </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Lion<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Elephant<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Dolphin<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li><code>section</code>元素相比<code>div</code>元素没有语义而言有语义。语义是语言中单词或短语的含义。 HTML 是一种语言，元素也有自己的语义含义。 因此，这意味着如果你使用了 <code>section</code> 元素， 浏览器将获取其语义含义并理解应将其视为一个独立部分——无论是在台式机上、移动设备上，还是其他任何设备上。</li> </ul> <h2 id="18id-和类"><a href="#18id-%e5%92%8c%e7%b1%bb" class="header-anchor"></a>18.ID 和类 </h2><ul> <li><code>id</code> 属性为 HTML 元素添加唯一标识符。</li> <li>这是一个带有 <code>id</code> 为 <code>title</code> 的 <code>h1</code> 元素示例。</li> <li>在 <code>h1</code> 元素下方，添加一个 <code>h2</code> 元素，其 <code>id</code> 设置为 <code>&quot;subtitle&quot;</code>。你可以为 <code>h2</code> 编写任意文本，并且你将在预览窗口中看到更改。</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">h1</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;title&#34;</span><span class="p">&gt;</span>Movie Review Page<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>你可以在你的 JavaScript 或 CSS 中引用 <code>title</code> 的 <code>id</code> 名称。以下是一个 CSS 示例，引用 <code>title</code> 的 <code>id</code> 来将文本 <code>color</code> 更改为 <code>red</code>。</li> <li><strong>注意</strong>：在此交互示例中已为你提供了一些 CSS。不要担心尝试理解这些 CSS 代码，因为你将在后续课程中学习更多相关内容。但如果你想看到文本颜色变为蓝色，点击 <code>styles.css</code> 标签（页），并将 <code>color: red;</code> 改为 <code>color: blue;</code>。</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> </span></span><span class="line"><span class="cl"> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width, initial-scale=1.0&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Review page Example<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;./styles.css&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;title&#34;</span><span class="p">&gt;</span>Movie Review Page<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">#</span><span class="nn">title</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">red</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><ul> <li>在 <code>title</code>之前的<code>#</code>,告诉计算你你想指向一个拥有对应<code>id</code>的值. <code>id</code>值不能重复. 关于 <code>id</code> 值的另一个需要注意的事情是它们不能有空格。 这是一个是将单词 <code>main</code> 和 <code>heading</code> 应用于一个 <code>id</code> 属性值的示例：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">h1</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;main heading&#34;</span><span class="p">&gt;</span>Main heading<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>浏览器会将此空格视为 <code>id</code> 的一部分，这将在样式和脚本处理中导致不必要的问题。<code>id</code> 属性值应仅包含字母、数字、下划线和破折号。</li> <li>与 <code>id</code> 属性不同，<code>class</code> 属性值不需要唯一，可以包含空格。</li> <li>这是一个将名为 <code>box</code> 的类应用到 <code>div</code> 元素的示例。</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;box&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>如果你想为一个元素添加多个类名，可以通过空格分隔这些名称来实现。下面是一个将多个类应用到 <code>div</code> 元素的更新示例。</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;box red-box&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>这是为多个 <code>div</code> 元素应用多个类的另一个示例。</li> <li><strong>注意</strong>：在此交互示例中已为你提供了一些 CSS。不要担心尝试理解 CSS 代码，因为你将在后续课程中学习更多相关内容。点击 <code>styles.css</code> 标签（页），并将 <code>background-color: red;</code> 改为 <code>background-color: black;</code>。</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> </span></span><span class="line"><span class="cl"> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width, initial-scale=1.0&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Colored boxes example<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;./styles.css&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;box red-box&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;box blue-box&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;box red-box&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;box blue-box&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">box</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">height</span><span class="p">:</span> <span class="mi">100</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">red-box</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="kc">red</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">blue-box</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="kc">blue</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><p>那么，回顾一下，你什么时候应该使用 <code>id</code> 而不是 <code>class</code>？ 当你希望将一组样式应用于许多元素时，最好使用类。 如果要针对特定的元素，最好使用 <code>id</code>，因为这些值需要是唯一的。</p> <h2 id="19html-实体"><a href="#19html-%e5%ae%9e%e4%bd%93" class="header-anchor"></a>19.HTML 实体 </h2><ul> <li>HTML 实体或字符引用是用于表示 HTML 中保留字符的一组字符。</li> <li>假设你想在屏幕上显示文本 <code>This is an &lt;img/&gt; element</code>。如果你使用当前编辑器中的代码，它不会显示预期的结果。即使你为示例添加了 <code>src</code> 和 <code>alt</code> 属性，它也会在段落中间显示一张图像，而不是预期的结果。</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>This is an <span class="p">&lt;</span><span class="nt">img</span> <span class="p">/&gt;</span> element<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>当超文本标记语言解析器看到小于号（<code>&lt;</code>）符号后跟一个超文本标记语言标签名称时，它会将其解释为一个超文本标记语言元素。这就是为什么你在屏幕上没有得到期望的 <code>This is an &lt;img/&gt; element</code> 结果。</li> <li>为了解决此问题，你可以使用超文本标记语言实体。以下是使用正确的超文本标记语言实体表示小于（<code>&lt;</code>）和大于（<code>&gt;</code>）符号的更新示例。现在你应该在屏幕上看到 <code>This is an &lt;img/&gt; element</code>。</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>This is an <span class="ni">&amp;lt;</span>img /<span class="ni">&amp;gt;</span> element<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li><code>&amp;lt;</code>代表<code>&lt;</code></li> <li><code>&amp;gt;</code>代表<code>&gt;</code></li> <li>这些类型的字符引用被称为命名字符引用。 命名字符引用用(<code>&amp;</code>)开头,用(<code>;</code>)结尾. 通过使用命名字符引用，HTML 解析器不会将其与实际的 HTML 元素混淆。</li> <li>另一种类型的字符引用是十进制数字引用。 这个字符引用以一个与号和哈希符号（<code>#</code>）开头，后面跟一个或多个十进制数字，后面跟一个分号。</li> <li>下面是使用小于符号的十进制数字引用的示例。 启用交互式编辑器并更改代码以查看不同的符号。你可以使用 <code>&amp;#169;</code> 表示版权符号，©使用 <code>&amp;#174;</code> 表示注册商标符号。® &lt; 表示&lt;</li> <li>最后一种类型的字符引用是十六进制数字引用。 这个字符引用以一个与号、哈希符号和字母 <code>x</code> 开头。 然后，后面跟一个或多个 ASCII 十六进制数字，并以分号结束。</li> <li>这是使用小于符号的十六进制数字引用的示例。</li> <li>启用交互式编辑器并更改代码以查看不同的符号。你可以使用 <code>&amp;#x20AC;</code> 表示欧元符号€，使用 <code>&amp;#x03A9;</code> 表示希腊大写字母欧米茄符号Ω。&lt; &lt;</li> <li>&amp;是&amp;的转义字符</li> </ul> <h2 id="20-script元素"><a href="#20-script%e5%85%83%e7%b4%a0" class="header-anchor"></a>20. Script元素 </h2><ul> <li>下面是一个在超文本标记语言文档中使用 <code>script</code> 元素的示例</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c1">// alert(&#34;Welcome to freeCodeCamp&#34;); </span></span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li>虽然从技术上讲，你可以在 <code>script</code> 标签中编写所有 JavaScript 代码，但最佳实践是链接到外部 JavaScript 文件。 这是一个使用 <code>script</code> 元素链接到外部 JavaScript 文件的例子：</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;path-to-javascript-file.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li><code>src</code>标签被用于确定外部JavaScript文件的地址. 不鼓励将所有 JavaScript 放在 HTML 文档中的原因是关注点分离。 关注点分离是一种设计原则，将程序分成不同的部分，每个部分处理一个单独的关注点。 在这种情况下，我们希望将 JavaScript 代码与 HTML 代码分开。</li> </ul> <h2 id="21"><a href="#21" class="header-anchor"></a>21. </h2><h2 id="22"><a href="#22" class="header-anchor"></a>22. </h2><h2 id="23"><a href="#23" class="header-anchor"></a>23. </h2><h2 id="24"><a href="#24" class="header-anchor"></a>24. </h2><h2 id="25"><a href="#25" class="header-anchor"></a>25. </h2>