HTML文档的剖析

我家豆馅儿 · 发表于 2021-4-17 15:24:12

单独的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>结束标签中，以醒目的粗体字突出显示。
如文章前面所述，将链接添加到您的段落中。
将图像添加到您的文档。如文章前面所述，将其放在段落下面。如果您设法链接到其他图像（在计算机上本地或在网络上的其他位置），则可赚取奖励积分。

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

		自动登录	找回密码
密码			立即注册