HTML入门

小白教程

在本文中，我们介绍了HTML的绝对基础。为了让您入门，本文定义了元素，属性以及您可能已经听说过的所有其他重要术语。它还说明了这些在HTML中适合的位置。您将学习HTML元素的结构，典型HTML页面的结构以及其他重要的基本语言功能。一路上，也将有机会玩HTML！

先决条件：	基本的计算机知识，已安装的基本软件以及使用文件的基本知识。
客观的：	要基本了解HTML，并练习编写一些HTML元素。

什么是HTML？

HTML（超文本标记语言）不是编程语言。它是一种标记语言，可以告诉Web浏览器如何构造您访问的网页。它可以像Web开发人员希望的那样复杂或简单。HTML由一系列元素组成，您可以使用这些元素来包围，包装或标记内容的不同部分，以使其以某种方式显示或起作用。封闭标签可以使内容成为超链接，以连接到另一个页面，斜体化单词等。例如，考虑下面的文本行：

My cat is very grumpy

如果我们希望文本独立存在，则可以通过将其放在段落（<p>）元素中来指定它是一个段落：

<p>My cat is very grumpy</p>

注意：HTML中的标签不区分大小写。这意味着它们可以大写或小写。例如，<title>标签可以写成<title>，<TITLE>，<Title>，<TiTlE>，等，它会工作。但是，最佳做法是将所有标签都写成小写，以保持一致性和可读性。

HTML元素的剖析

让我们从上一节中进一步探讨我们的段落元素：

我们元素的解剖结构是：

• 开头标记：它由元素的名称（在此示例中为p表示）组成，并包装在打开和关闭尖括号中。此开始标记标记元素开始或开始生效的位置。在此示例中，它位于段落文本的开头。
• 内容：这是元素的内容。在此示例中，它是段落文本。
• 结束标记：与开始标记相同，不同之处在于它在元素名称之前包含一个正斜杠。这标记了元素结束的位置。未能包含结束标记是一个常见的初学者错误，可能会产生特殊的结果。
  

元素是开始标签，后跟内容，然后是结束标签。

主动学习：创建您的第一个HTML元素

编辑通过与标签包装它下面的“编辑代码”区域的线条<em>和</em>.要打开的元素，把起始标签<em>在该行的开始。要关闭元素，请将结束标记</em>放在行尾。这样做应该使行斜体文本格式！在“输出”区域中实时查看所做的更改更新。

如果输入有误，可以使用“重置”按钮清除您的工作。如果您确实遇到问题，请按“显示解决方案”按钮以查看答案。

嵌套元素

元素可以放置在其他元素内。这称为嵌套。如果要声明我们的猫非常脾气暴躁，可以将单词非常包装在一个<strong>元素中，这意味着该单词应具有更强的文本格式：

<p>My cat is <strong>very</strong> grumpy.</p>

嵌套有对与错的方法。在上面的示例中，我们p首先打开了元素，然后打开了strong元素。为了正确嵌套，我们应该先关闭strong元素，然后再关闭p。

以下是错误的嵌套方法示例：

<p>My cat is <strong>very grumpy.</p></strong>

该标签具有密切的方式，他们是内部或外部彼此开。上面示例中的重叠部分使浏览器不得不猜测您的意图。这种猜测可能会导致意外结果。

块与内联元素

在HTML中，有两个重要的元素类别：块级元素和内联元素。

• 块级元素在页面上形成可见块。块级元素将在其前面的内容之后的新行中显示。块级元素之后的任何内容也会出现在新行中。块级元素通常是页面上的结构元素。例如，块级元素可能表示标题，段落，列表，导航菜单或页脚。一个块级元素不会嵌套在一个内联元素内，但是可能会嵌套在另一个块级元素内。
• 内联元素包含在块级元素中，并且仅包围文档内容的一小部分（而不是整个段落或内容分组）。内联元素不会导致新行出现在文档中。它通常与文本一起使用，例如，<a>元素创建超链接，而元素例如<em>或<strong>创建强调。
  

考虑以下示例：

<em>first</em><em>second</em><em>third</em><p>fourth</p><p>fifth</p><p>sixth</p>

<em>是一个内联元素。如下所示，前三个元素位于同一行上，中间没有空格。另一方面，<p> 是块级元素。每个p元素都显示在新行中，上方和下方都有空格。（该间距是由于浏览器适用于段落的默认CSS样式所致。）

注意：HTML5重新定义了元素类别：请参阅元素内容类别。尽管这些定义比其前身更准确，更不模糊，但新的定义要比block和inline复杂得多。本文将保留这两个术语。

注意：本文中使用的术语“块”和“内联”不应与具有相同名称的CSS盒的类型相混淆。尽管名称在默认情况下是相关的，但是更改CSS显示类型不会更改元素的类别，也不会影响它可以包含哪些元素以及可以包含在哪些元素中。HTML5删除这些术语的原因之一是为了防止这种相当普遍的混乱。

注意：查找有用的参考页，其中包括block和inline元素的列表。请参阅块级元素和内联元素。

空元素

并非所有元素都遵循开始标签，内容和结束标签的模式。有些元素由单个标签组成，通常用于在文档中插入/嵌入某些内容。例如，该<img>元素将图像文件嵌入到页面上：

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

这将输出以下内容：

注意：空元素有时称为void元素。

属性

元素也可以具有属性。属性看起来像这样：

我的猫非常脾气暴躁＆amp; amp; amp; amp; lt; / p>" src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-attribute-small.png" width="1287" height="156" loading="lazy" style="box-sizing: border-box; max-width: 100%; display: block; height: auto; margin-right: auto; margin-left: auto; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;">

属性包含有关元素的额外信息，这些信息不会出现在内容中。在此示例中，class属性是用于使用样式信息将元素作为目标的标识名称。

属性应具有：

• 它和元素名称之间的空格。（对于具有多个属性的元素，属性也应使用空格分隔。）
• 属性名称，后跟等号。
• 属性值，用左引号和右引号引起来。
  

主动学习：向元素添加属性

元素的另一个示例是<a>。这代表锚点。锚点可以使包含在其中的文本成为超链接。锚点可以采用多种属性，但其中一些如下：

• href：此属性的值指定链接的网址。例如：href="https://www.mozilla.org/"。
• title：该title属性指定有关链接的其他信息，例如所链接页面的描述。例如，title="The Mozilla homepage"。当光标悬停在元素上时，这将显示为工具提示。
• target：该target属性指定用于显示链接的浏览上下文。例如，target="_blank"将在新选项卡中显示链接。如果要在当前选项卡中显示链接的内容，只需忽略此属性。
  

在“输入”区域中编辑下面的行，以将其转换为您喜欢的网站的链接。

• 添加<a>元素。
• 添加href属性和title属性。
• 指定target属性以在新选项卡中打开链接。
  

您将能够在“输出”区域中实时查看所做的更改更新。您应该看到一个链接（将鼠标悬停在该链接上）将显示title属性的值，并在单击该链接时 导航到该href属性中的网址。请记住，您需要在元素名称之间以及每个属性之间包含一个空格。

如果输入有误，可以随时使用“重置”按钮将其重置。如果您确实遇到问题，请按“显示解决方案”按钮以查看答案。

布尔属性

有时，您会看到没有值的属性。这是完全可以接受的。这些称为布尔属性。布尔属性只能有一个值，该值通常与属性名称相同。例如，考虑disabled可以分配给表单输入元素的属性。（您可以使用它来禁用表单输入元素，以便用户无法输入。被禁用的元素通常具有灰色外观。）例如：

<input type="text" disabled="disabled">

作为简写，可以这样编写：

<!-- using the disabled attribute prevents the end user from entering text into the input box --><input type="text" disabled><!-- text input is allowed, as it doesn't contain the disabled attribute --><input type="text">

作为参考，上面的示例还包含一个非禁用的表单输入元素。上面示例的HTML产生以下结果：

省略属性值周围的引号

如果您查看许多其他站点的代码，则可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在某些情况下允许这样做，但在其他情况下也可能破坏您的标记。例如，如果我们从前面回顾链接示例，则可以编写仅包含href属性的基本版本，如下所示：

<a href=https://www.mozilla.org/>favorite website</a>

但是，一旦我们title以这种方式添加属性，就会出现问题：

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>

如上所述，浏览器曲解写入的标记，误将title属性为三个属性：与所述值的标题属性的，和两个布尔属性，Mozilla和homepage。显然，这不是故意的！如下面的实时示例所示，这将导致错误或意外行为。尝试将鼠标悬停在链接上以查看标题文本！

始终包含属性引号。它避免了此类问题，并导致了更具可读性的代码。

单引号还是双引号？

在本文中，您还将注意到属性用双引号引起来。但是，您可能会在某些HTML代码中看到单引号。这是一个风格问题。您可以随意选择自己喜欢的一种。这两条线是等效的：

<a href="http://www.example.com">A link to my example.</a><a href='http://www.example.com'>A link to my example.</a>

确保不要混用单引号和双引号。此示例（如下）显示了一种混合引号，该引号将出错：

<a href="http://www.example.com'>A link to my example.</a>

但是，如果使用一种引号，则可以在属性值中包括另一种引号：

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

要在相同类型的其他引号（单引号或双引号）中使用引号，请使用HTML实体。例如，这将中断：

<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>

相反，您需要执行以下操作：

<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
HTML文档的剖析

单独的HTML元素本身并不是很有用。接下来，让我们检查各个元素如何组合以形成整个HTML页面：

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>My test page</title>  </head>  <body>    <p>This is my page</p>  </body></html>

这里我们有：

• <!DOCTYPE html>：文档类型。在HTML刚成立时（1991年至1992年），doctype旨在充当指向一组规则的链接，HTML页面必须遵循这些规则才能被认为是好的HTML。Doctypes过去看起来像这样：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">最近，doctype是一个历史工件，需要包含它才能使其他一切正常工作。 <!DOCTYPE html>是算作有效文档类型的最短字符串。这就是您所需要知道的！
• <html></html>：<html>元素。此元素包装页面上的所有内容。它有时被称为根元素。
• <head></head>：<head>元素。此元素充当要包含在HTML页面上的所有内容的容器，而不是该页面将显示给查看者的内容。这包括将出现在搜索结果中的关键字和页面描述，用于样式内容的CSS，字符集声明等。您将在本系列的下一篇文章中了解有关此内容的更多信息。
• <meta charset="utf-8">：此元素将您的文档的字符集指定为UTF-8，其中包括来自绝大多数人类书面语言的大多数字符。使用此设置，页面现在可以处理它可能包含的任何文本内容。没有理由不设置此设置，这样可以避免以后出现一些问题。
• <title></title>：<title>元素。这将设置页面的标题，即页面加载到的浏览器选项卡中显示的标题。页面标题还用于描述添加了书签的页面。
• <body></body>：<body>元素。它包含页面上显示的所有内容，包括文本，图像，视频，游戏，可播放的音轨或其他内容。
  

主动学习：向HTML文档添加一些功能

如果您想尝试在本地计算机上编写一些HTML，可以：

• 复制上面列出的HTML页面示例。
• 在您的文本编辑器中创建一个新文件。
• 将代码粘贴到新的文本文件中。
• 将文件另存为index.html。
  

注意：您也可以在MDN学习区Github存储库中找到此基本HTML模板。

现在，您可以在Web浏览器中打开此文件，以查看呈现的代码。编辑代码并刷新浏览器以查看结果。最初，页面如下所示：

在本练习中，您可以如前所述在本地计算机上编辑代码，也可以在下面的示例窗口中对其进行编辑（<body>在这种情况下，可编辑示例窗口仅表示元素的内容）。通过执行以下任务来提高您的技能：

• 在<body>元素的开始标签下方，添加文档的主要标题。这应该包裹在<h1>开始标签和</h1>结束标签内。
• 编辑段落内容，以包含有关您感兴趣的主题的文本。
• 将重要的单词包装在<strong>开始标签和</strong>结束标签中，以醒目的粗体字突出显示。
• 如文章前面所述，将链接添加到您的段落中。
• 将图像添加到您的文档。如文章前面所述，将其放在段落下面。如果您设法链接到其他图像（在计算机上本地或在网络上的其他位置），则可赚取奖励积分。
  

如果输入有误，可以随时使用“重置”按钮将其重置。如果您确实遇到问题，请按“显示解决方案”按钮以查看答案。

HTML中的空白

在上面的示例中，您可能已经注意到代码中包含很多空白。这是可选的。这两个代码段是等效的：

<p>Dogs are silly.</p><p>Dogs        are         silly.</p>

不管您在HTML元素内容中使用了多少空格（可以包含一个或多个空格字符，还包括换行符），HTML解析器在呈现代码时都会将每个空格序列减少为一个空格。那么为什么要使用那么多的空格呢？答案是可读性。

如果格式正确，则可以更容易地理解代码中正在发生的事情。在我们的HTML中，每个嵌套元素的缩进量比它所位于的嵌套空间缩进了两个空格。您可以选择格式设置的格式（例如，每个缩进级别有多少空格），但是您应该考虑设置格式。

实体引用：包括HTML中的特殊字符

在HTML，人物<，>，"，'和&特殊字符。它们是HTML语法本身的一部分。那么，如何在文本中包含这些特殊字符之一？例如，如果要使用与号或小于号，并且不想将其解释为代码。

您可以使用字符引用进行此操作。这些是代表字符的特殊代码，将在这些确切的情况下使用。每个字符引用均以“＆”号开头，并以“;”号结束。

[td]

文字字符	等效字符参考
<	＆lt;
>	＆gt;
”	＆quot;
'	‘
和	＆amp;

等效的字符引用很容易记住，因为它所使用的文本看起来比'＆lt;'少。，引号为“＆”；”，其他人也一样。要查找有关实体引用的更多信息，请参见 XML和HTML字符实体引用列表（Wikipedia）。

在下面的示例中，有两个段落：

<p>In HTML, you define a paragraph using the <p> element.</p><p>In HTML, you define a paragraph using the <p> element.</p>

在下面的实时输出中，您可以看到第一段出错了。浏览器将的第二个实例解释<p>为开始新段落。第二段看起来不错，因为它带有带有字符引用的尖括号。

注意：您不需要为任何其他符号使用实体引用，因为只要HTML的字符编码设置为UTF-8，现代浏览器就可以处理实际的符号。

HTML注释

HTML具有在代码中编写注释的机制。浏览器会忽略评论，从而使评论对用户不可见。注释的目的是允许您在代码中包含注释，以解释您的逻辑或编码。如果您离开足够长的时间以至于无法完全记住它，而又回到了代码库，这将非常有用。同样，由于不同的人进行更改和更新，评论是无价的。

要编写HTML注释，请将其包装在特殊标记<!--和中-->。例如：

<p>I'm not inside a comment</p><!-- <p>I am!</p> -->

如下所示，实时输出中仅显示第一段。

概括

您已完成本文的结尾！我们希望您喜欢HTML基础知识。

在这一点上，您应该了解HTML的外观以及它在基本级别上的工作方式。您还应该能够编写一些元素和属性。本模块的后续文章进一步介绍了此处介绍的一些主题，并介绍了该语言的其他概念。

注意：当您开始学习有关HTML的更多信息时，请考虑学习级联样式表或CSS的基础。CSS是用于设置网页样式的语言。（例如，更改字体或颜色，或更改页面布局）HTML和CSS可以很好地协同工作，您很快就会发现。

本帖寻求最佳方案

，目前已有 0 个回复 我要奖励