真的365平台
HTML 基础语法
发布时间: 2025-10-01 03:47:58
作者: admin
阅读量: 3891
评论数: 101
什么是 HTML？
HTML（HyperText Markup Language，超文本标记语言）是一种标记语言，它告诉 Web 浏览器如何组织你访问的网页。它可以像 Web 开发者希望的那样复杂或简单。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>开始标签（opening tag）：由元素的名称（本例中为段落的 p）包裹在开、闭角括号中组成。这个开始标签标志着元素开始或生效的位置。在此示例中，它位于段落文本的开始之前。</p>
<p>内容（content）：这是元素的内容。在此示例中，就是段落的文本。</p>
<p>结束标签（closing tag）：这与开始标签相同，只是在元素名称前包含一个正斜杠。这标志着元素的结束。忘记包含结束标签是一个常见的初学者错误，可能会产生奇特的结果。</p>
<p>元素是开始标签、内容和结束标签的总和。</p>
<p>备注：</p>
<p>可以前往我们的学习伙伴 Scrimba 的 HTML 标签 MDN 学习伙伴 资料，获取关于 HTML 标签的交互式解释。</p>
<p>创建你的第一个 HTML 元素</p>
<p>让我们来练习编写你自己的 HTML 元素：</p>
<p>点击下面代码块中的“Play”在 MDN 代码演练场中编辑示例。</p>
<p>用 <em> 和 </em> 标签包裹这行文本。要打开元素，请将开始标签 <em> 放在行的开头。要关闭元素，请将结束标签 </em> 放在行的末尾。这样做应该会使输出面板中渲染的文本变为斜体格式。</p>
<p>如果你想挑战一下，可以尝试查找更多 HTML 元素并将其应用于文本示例。</p>
<p>如果你犯了错误，可以使用 MDN 代码演练场中的“Reset”按钮清除你的工作。如果你实在卡住了，可以查看代码块下方的解决方案。</p>
<p>html这是我的文本。</p>
<p>点击这里显示解决方案</p>
<p>你完成后的 HTML 行应该像这样：</p>
<p>html<em>这是我的文本。</em></p>
<p>嵌套元素</p>
<p>元素可以放置在其他元素内部。这被称为嵌套。如果我们想要表明我们的小猫脾气很暴躁，我们可以将很这个词用 <strong> 元素包裹起来，这意味着这个词将以粗体的文本格式显示：</p>
<p>html<p>我们的小猫脾气<strong>很</strong>暴躁。</p></p>
<p>嵌套有正确和错误的方式。在上面的例子中，我们先打开了 p 元素，然后打开了 strong 元素。为了正确嵌套，我们应该先关闭 strong 元素，然后再关闭 p 元素。</p>
<p>以下是错误嵌套方式的示例：</p>
<p>html<p>我们的小猫脾气<strong>很暴躁。</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 图标" /></p>
<p>这将输出以下内容：</p>
<p>备注：</p>
<p>在 HTML 中，没有要求在空元素的标签末尾添加 /，例如：<img src="images/cat.jpg" alt="猫">。然而，这也是一种有效的语法，当你希望你的 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>点击下面代码块中的“Play”在 MDN 代码演练场中编辑示例。</p>
<p>在网上找到你最喜欢的图片，右键单击它，然后按复制图片链接/地址。</p>
<p>回到 MDN 代码演练场，将 src 属性添加到 <img> 元素，并将其值设置为第 2 步中的链接。</p>
<p>将 alt 属性设置为对图片的适当描述。</p>
<p>将 width 属性设置为一个值，比如 300，这样你可以在输出面板中更好地看到图片。如果需要可以进行调整。</p>
<p>如果你犯了错误，可以使用 MDN 代码演练场中的“Reset”按钮清除你的工作。如果你实在卡住了，可以查看代码块下方的解决方案。</p>
<p>html<img /></p>
<p>点击这里显示解决方案</p>
<p>你完成后的 HTML 元素应该像这样：</p>
<p>html<img src="<URL-OF-IMAGE>" alt="图像的描述" width="300" /></p>
<p>布尔属性</p>
<p>有时你会看到没有值的属性。这是完全可以接受的。这些被称为布尔属性。当一个布尔属性没有值，或有任何值（甚至像 "false"）时，该布尔属性总是被设置为 true。否则，如果该属性没有写在 HTML 标签中，该属性就被设置为 false。规范要求该属性的值要么是空字符串（包括属性没有明确指定值时），要么与属性的名称相同，但其他值的作用也一样。例如，考虑 disabled 属性，你可以把它赋给表单输入元素。（你可以用它来禁用表单输入元素，这样用户就不能输入内容了。被禁用的元素通常呈现为灰色。）例如：</p>
<p>html<input type="text" disabled="disabled" /></p>
<p>作为简写，可以这样写：</p>
<p>html<!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 --></p>
<p><input type="text" disabled /></p>
<p><!-- 下面这个输入框不包含 disabled 属性，所以用户可以向其中输入 --></p>
<p><input type="text" /></p>
<p>作为参考，上面的例子还包括一个非禁用的表单输入元素。上面的 HTML 会产生以下结果：</p>
<p>省略属性值周围的引号</p>
<p>如果你查看许多其他网站的代码，你可能会遇到一些奇怪的标记样式，包括没有引号的属性值。这在某些情况下是允许的，但在其他情况下也可能破坏你的标记。下面代码片段中的 <a> 元素被称为锚点。锚点包裹文本，并将其变成链接。href 属性指定了链接指向的网址。你可以只用 href 属性写出这个基本版本，像这样：</p>
<p>html<a href=https://www.mozilla.org/>最喜欢的网站</a></p>
<p>锚点也可以有一个 title 属性，用来描述链接的页面。然而，一旦我们像 href 属性一样添加 title，问题就来了：</p>
<p>html<a href=https://www.mozilla.org/ title=The Mozilla homepage>最喜欢的网站</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></p>
<p><a href="https://www.example.com">一个指向示例的链接。</a></p>
<p>确保不要混合使用单引号和双引号。下面的例子显示了一种会出错的引号混合使用方式：</p>
<p>html<a href="https://www.example.com'>一个指向示例的链接。</a></p>
<p>但是，如果你使用一种类型的引号，你可以在属性值内部包含另一种类型的引号：</p>
<p>html<a href="https://www.example.com" title="你觉得'好玩吗'？"></p>
<p>一个指向示例的链接。</p>
<p></a></p>
<p>要在相同类型的引号内使用引号（单引号或双引号），请使用字符引用。例如，这样做会出错：</p>
<p>html<a href="https://www.example.com" title="一个"有趣"的引用">一个指向示例的链接。</a></p>
<p>相反，你应该这样做：</p>
<p>html<a href="https://www.example.com" title="一个"有趣"的引用">一个指向示例的链接。</a></p>
<p>剖析 HTML 文档</p>
<p>单个 HTML 元素本身并不是很有用。接下来，让我们看看单个元素如何组合成一个完整的 HTML 页面：</p>
<p>html<!doctype html></p>
<p><html lang="zh-CN"></p>
<p><head></p>
<p><meta charset="utf-8" /></p>
<p><title>我的测试页面
这是我的页面