HTML 基本语法
什么是 HTML？
HTML（超文本标记语言）是一种标记语言，它告诉网络浏览器如何构建您访问的网页。它可以像网页开发者希望的那样复杂或简单。HTML 由一系列元素组成，您可以使用它们来包含、包装或标记内容的不同部分，使其以某种方式显示或表现。包围的标签可以将内容变成连接到另一个页面的超链接、使单词斜体化等等。例如，考虑以下一行文本：
My cat is very grumpy
如果我们希望文本独立存在，我们可以通过将其包含在段落（
）元素中来指定它是一个段落。
html
My cat is very grumpy
HTML 存在于名为 HTML 文档的文本文件中，或简称 文档，文件扩展名为 .html。我们之前讨论过网页，HTML 文档包含网页的内容并指定其结构。
您会遇到的最常见的 HTML 文件是 index.html，它通常用于包含网站的主页内容。在子文件夹中看到自己的 index.html 也很常见，因此一个网站可以在不同的位置拥有多个索引文件。
注意：HTML 中的标签不区分大小写。这意味着它们可以用大写或小写书写。例如，
标签可以写成 <title>、<TITLE>、<Title>、<TiTlE> 等等，并且都能正常工作。然而，为了保持一致性和可读性，最好将所有标签都写成小写。</p> <p>HTML 元素的结构</p> <p>让我们进一步探讨上一节中的段落元素</p> <p>我们元素的结构是</p> <p>开始标签：这由元素名称（在此示例中，段落为 p）组成，并用尖括号包围。此开始标签标记元素的开始或生效之处。在此示例中，它位于段落文本的开头之前。</p> <p>内容：这是元素的内容。在此示例中，它是段落文本。</p> <p>结束标签：这与开始标签相同，只是它在元素名称之前包含一个正斜杠。这标记了元素的结束位置。未能包含结束标签是初学者常犯的错误，可能会导致奇怪的结果。</p> <p>元素是开始标签，后跟内容，再后跟结束标签。</p> <p>注意：请前往我们的学习合作伙伴 Scrimba 的HTML 标签MDN 学习合作伙伴 scrim，以获取 HTML 标签的交互式解释。</p> <p>创建你的第一个 HTML 元素</p> <p>让我们练习编写自己的 HTML 元素</p> <p>单击下面代码块中的**“播放”**以在 MDN Playground 中编辑示例。</p> <p>用 <em> 和 </em> 标签包裹这行文本。要打开元素，请将开始标签 <em> 放在行的开头。要关闭元素，请将结束标签 </em> 放在行的末尾。这样做应该会使输出面板中呈现的文本显示为斜体。</p> <p>如果您乐于冒险，可以尝试查找更多 HTML 元素并将其应用于文本示例。</p> <p>如果您犯了错误，可以使用 MDN Playground 中的重置按钮清除您的工作。如果您真的卡住了，可以在代码块下方查看解决方案。</p> <p>htmlThis is my text.</p> <p>点击此处显示解决方案</p> <p>你完成的 HTML 行应该看起来像这样</p> <p>html<em>This is my text.</em></p> <p>嵌套元素</p> <p>元素可以放置在其他元素中。这称为嵌套。如果我们想说明我们的猫非常脾气暴躁，我们可以将“非常”这个词包裹在<strong>元素中，这意味着该词将具有强调的文本格式</p> <p>html<p>My cat is <strong>very</strong> grumpy.</p></p> <p>嵌套有正确和错误的方式。在上面的例子中，我们首先打开了 p 元素，然后打开了 strong 元素。为了正确嵌套，我们应该先关闭 strong 元素，然后关闭 p 元素。</p> <p>以下是错误嵌套方式的示例</p> <p>html<p>My cat is <strong>very grumpy.</p></strong></p> <p>标签必须以它们相互嵌套或包含的方式打开和关闭。像上面示例中那种重叠的方式，浏览器必须猜测您的意图。这种猜测可能会导致意想不到的结果。</p> <p>空元素</p> <p>并非所有元素都遵循开始标签、内容和结束标签的模式。有些元素由单个标签组成，通常用于在文档中插入/嵌入某些内容。此类元素称为空元素。例如，<img> 元素将图像文件嵌入到页面中。</p> <p>html<img</p> <p>src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"</p> <p>alt="Firefox icon" /></p> <p>这将输出以下内容</p> <p>注意：在 HTML 中，空元素的标签末尾没有强制要求添加 /，例如：<img src="images/cat.jpg" alt="cat" />。然而，这也是一种有效的语法，当您希望 HTML 成为有效的 XML 时，您可以这样做。</p> <p>属性</p> <p>元素也可以有属性。属性看起来像这样</p> <p>属性包含元素的额外信息，这些信息不会显示在内容中。在此示例中，class 属性是一个标识名称，用于使用样式信息定位元素。</p> <p>属性应该有</p> <p>它与元素名称之间有一个空格。（对于具有多个属性的元素，属性之间也应该用空格分隔。）</p> <p>属性名称，后跟一个等号。</p> <p>一个属性值，用开头和结尾的引号括起来。</p> <p>向元素添加属性</p> <p>现在又轮到你了。在本节中，我们将让你向 <img> 元素添加属性，以在页面上显示图像。<img> 元素可以接受几个属性，包括</p> <p>src：一个必需属性，指定图像的位置。例如：src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"。</p> <p>alt：图像的文本描述。例如：alt="Firefox 图标"。</p> <p>width：图像的宽度（以像素为单位）。例如：width="300"。</p> <p>height：图像的高度（以像素为单位）。例如：height="300"。</p> <p>按照以下步骤完成任务</p> <p>单击下面代码块中的**“播放”**以在 MDN Playground 中编辑示例。</p> <p>在网上找到您最喜欢的图片，右键单击它，然后按“复制图片链接/地址”。</p> <p>回到 MDN 演练场，将 src 属性添加到 <img> 元素中，并将其值设置为步骤 2 中的链接。</p> <p>将 alt 属性设置为图像的适当描述。</p> <p>将 width 属性设置为例如 300 的值，以便您可以在输出面板中更好地查看图像。如果需要，进行调整。</p> <p>如果您犯了错误，可以使用 MDN Playground 中的重置按钮清除您的工作。如果您真的卡住了，可以在代码块下方查看解决方案。</p> <p>html<img /></p> <p>点击此处显示解决方案</p> <p>你完成的 HTML 元素应该看起来像这样</p> <p>html<img src="<URL-OF-IMAGE>" alt="A description of the image" width="300" /></p> <p>布尔属性</p> <p>有时您会看到没有值的属性。这完全可以接受。这些被称为布尔属性。当布尔属性没有值，或有任何值（即使是 "false"）时，布尔属性总是设置为 true。否则，如果属性没有写入 HTML 标签中，则属性设置为 false。规范要求属性的值要么是空字符串（包括当属性没有明确指定值时）要么与属性的名称相同，但其他值的工作方式也相同。例如，考虑您可以分配给表单输入元素的disabled属性。（您可以使用它来禁用表单输入元素，以便用户无法进行输入。禁用的元素通常呈现灰显外观。）例如</p> <p>html<input type="text" disabled="disabled" /></p> <p>作为简写，可以接受将其写成如下形式</p> <p>html<!-- using the disabled attribute prevents the end user from entering text into the input box --></p> <p><input type="text" disabled /></p> <p><!-- text input is allowed, as it doesn't contain the disabled attribute --></p> <p><input type="text" /></p> <p>作为参考，上面的示例还包含一个未禁用的表单输入元素。上面的 HTML 示例产生以下结果</p> <p>省略属性值周围的引号</p> <p>如果您查看许多其他网站的代码，您可能会遇到一些奇怪的标记样式，包括没有引号的属性值。这在某些情况下是允许的，但在其他情况下也可能会破坏您的标记。下面代码片段中的元素 <a> 称为锚点。锚点将文本括起来并将其转换为链接。href 属性指定链接指向的网址。您可以只使用 href 属性编写下面的基本版本，如下所示：</p> <p>html<a href=https://www.mozilla.org/>favorite website</a></p> <p>锚点还可以有一个 title 属性，用于描述链接页面。然而，一旦我们以与 href 属性相同的方式添加 title，就会出现问题</p> <p>html<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a></p> <p>如上所述，浏览器错误地解释了标记，将 title 属性误认为是三个属性：一个值为 The 的 title 属性，以及两个布尔属性 Mozilla 和 homepage。显然，这不是预期目的！这会导致错误或意外行为，正如您在下面的实时示例中看到的那样。尝试将鼠标悬停在链接上以查看标题文本！</p> <p>始终包含属性引号。这可以避免此类问题，并使代码更具可读性。</p> <p>单引号还是双引号？</p> <p>在本文中，您还会注意到属性是用双引号括起来的。但是，您可能会在某些 HTML 代码中看到单引号。这是一个风格问题。您可以随意选择自己喜欢的。这两行是等效的</p> <p>html<a href='https://www.example.com'>A link to my example.</a></p> <p><a href="https://www.example.com">A link to my example.</a></p> <p>确保不要混用单引号和双引号。下面这个例子展示了一种错误的引号混用方式</p> <p>html<a href="https://www.example.com'>A link to my example.</a></p> <p>然而，如果你使用一种类型的引号，你可以在你的属性值内部包含另一种类型的引号。</p> <p>html<a href="https://www.example.com" title="Isn't this fun?"></p> <p>A link to my example.</p> <p></a></p> <p>要在相同类型的引号（单引号或双引号）中包含引号，请使用字符引用。例如，这会导致错误</p> <p>html<a href="https://www.example.com" title="An "interesting" reference">A link to my example.</a></p> <p>相反，你需要这样做</p> <p>html<a href="https://www.example.com" title="An "interesting" reference">A link to my example.</a></p> <p>HTML 文档的结构</p> <p>单个 HTML 元素本身并不是很有用。接下来，让我们看看单个元素如何组合形成一个完整的 HTML 页面。</p> <p>html<!doctype html></p> <p><html lang="en-US"></p> <p><head></p> <p><meta charset="utf-8" /></p> <p><title>My test page This is my page