前言
本文主要是概述html的2个部分：
- 如何编写 HTML 文档的基本样板。
- 如何在浏览器中打开 HTML 文档。
创建HTML文件
为了演示HTML样板，我们首先需要一个HTML文件。
在您的计算机上创建一个新文件夹并将其命名为html-boilerplate。在该文件夹中创建一个新文件并将其命名为index.html。
您可能已经熟悉了许多不同类型的文件，例如doc、pdf和图像文件。
为了让计算机知道我们想要创建一个HTML文件，我们需要像创建file.html index.html时那样，在文件名后附加扩展名。
值得注意的是，我们给 HTML 文件起了名字。我们应始终为包含网站主页的 HTML 文件命名。这是因为当用户访问我们的网站时，网络服务器会默认查找一个页面，如果没有这个页面，就会造成很大的问题。
DOCTYPE
每个 HTML 页面都以一个 DOCTYPE 声明开始。DOCTYPE 的作用是告诉浏览器应该使用哪个版本的 HTML 来呈现文档。HTML 的最新版本是 HTML5，该版本的 doctype 就是 .<!DOCTYPE html> 。
旧版本 HTML 的 doctype 要复杂一些。例如，这是 HTML4 的 doctype 声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
不过，我们可能永远都不想使用旧版本的 HTML，因此我们将始终使用 .<!DOCTYPE html> 文件。
在文本编辑器中打开之前创建的文件，在第一行添加.index.html<!DOCTYPE html>
HTML 元素
声明类型后，我们需要提供一个元素。这就是所谓的文档根元素，这意味着文档中的其他元素都将是它的后代。
这一点在我们以后学习用 JavaScript 操作 HTML 时会变得更加重要。现在，只需知道每个 HTML 文档都应包含该元素即可。
回到文件中，让我们输入元素的开头和结尾标记来添加该元素，如：index.html<html>
<!DOCTYPE html>
<html lang="en">
</html>
注意到这个词了吗？它代表一个 HTML 属性，该属性与给定的 HTML 标记（即本例中的标记）相关联。这些属性提供了 HTML 元素的附加信息。(langHTML属性
什么是 lang 属性？
lang 指定了该元素中文本内容的语言。该属性主要用于提高网页的可访问性。它允许屏幕阅读器等辅助技术根据语言进行调整，并调用正确的发音。
标题元素
该元素用于放置有关网页的重要元信息，以及网页在浏览器中正确显示所需的内容。在 Head 元素中，我们不应使用任何显示网页内容的元素。
元元素
我们应始终在该元素中使用网页字符集编码标签：.<meta><head><meta charset="utf-8">
设置编码非常重要，因为它能确保网页在浏览器中正确显示不同语言的特殊符号和字符。
标题元素
我们应始终在 HTML 文档头部包含的另一个元素是 <title> 元素
<title>我的第一个网页</tiele>
该元素用于给网页加上一个人可读的标题，并显示在网页的浏览器标签中。
如果我们不包含该元素，网页的标题将默认为其文件名。在我们的例子中，标题将是 ，这对用户来说意义不大；如果用户打开了很多浏览器标签页，这将使用户很难找到我们的网页。
HTML 文档的头部还可以包含更多元素。不过，现在只需了解我们在此介绍的这两个元素即可。我们将在剩余的课程中介绍更多的头部元素。
回到我们的文件，让我们添加一个包含元素和标题的元素。该元素位于该元素内，并且应始终是开头标记下的第一个元素：index.html<head><meta><head><html><html>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
</html>
主体元素
完成 HTML 模板所需的最后一个元素是元素。所有要显示给用户的内容–文本、图片、列表、链接等–都将放在这里。
要完成模板，请在文件中添加一个元素。该元素也在该元素内，并始终位于该元素下方，如：<body>index.html<body><html><head>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
</body>
</html>
在浏览器中查看 HTML 文件
此时文件中的 HTML 模板已经完成，但如何在浏览器中查看呢？有几个不同的选项：index.html
注意：为了避免因浏览器之间的差异而使课程说明变得支离破碎，我们将在本课程的剩余时间内使用谷歌 Chrome浏览器作为我们的主要浏览器。所有提到的浏览器都是指谷歌浏览器。我们强烈建议您使用谷歌浏览器进行所有测试。
- 您可以将文本编辑器中的 HTML 文件拖放到浏览器的地址栏中。
- 您可以在文件系统中找到 HTML 文件，然后双击该文件。这将在系统使用的默认浏览器中打开该文件。
- 您也可以使用终端在浏览器中打开文件。
- Ubuntu - 导航至包含该文件的目录，然后输入
google-chrome index.html - macOS - 导航至包含该文件的目录，然后键入
open ./index.html
- Ubuntu - 导航至包含该文件的目录，然后输入
使用上述方法之一，打开我们一直在处理的文件。你会发现屏幕上一片空白。这是因为我们的正文中没有要显示的内容。
回到文件，在正文中添加一个标题（稍后再详述），然后保存文件：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
现在，如果你刷新浏览器中的页面，你应该看到更改生效，并且会显示标题“Hello World!
VSCode 快捷键
VSCode有一个内置的快捷方式，可用于一次性生成所有样板。请注意，此快捷方式仅适用于编辑具有扩展名的文件或已选择HTML语言的文本文件。要触发快捷方式，请删除文件中的所有内容，并在第一行输入。这将显示几个选项。按键选择第一个，瞧，你应该已经为你填充了所有样板.htmlindex.html！Enter
但是，如果你发现自己使用的是记事本这样的文本编辑器（但愿不会），而它没有这个快捷键，那么知道如何自己编写样板代码还是很有用的。尽量不要在最初的几个 HTML 项目中使用快捷键，这样你就可以为编写样板代码建立一些肌肉记忆。
分配
通过删除文件的内容并尝试再次从内存中写出所有的样板，来建立一些肌肉记忆。
通过W3 HTML验证器运行你的样板。验证器确保你的标记是正确的，并且是一个很好的学习工具，因为它提供关于你经常可能犯的语法错误的反馈，例如缺少结束标签和HTML中的额外空格。
最后
在浏览器中打开 HTML 页面的另一种选择是将实时服务器扩展与 VSCode 一起使用。这将打开您的 HTML 文档，并在您每次保存文档时自动刷新它。但是，我们建议不要使用此扩展，而是使用老式的方式，在浏览器中打开页面并在浏览器中手动刷新前几个 HTML 项目的页面。这样，您就可以习惯该过程，并且不会立即依赖扩展。原因之一是使用扩展时可能存在细微的差异。例如，实时服务器将始终使用 UTF-8 字符编码，而不是元素中定义的字符集值。这可能会在你的网站上隐藏一些字符，因为它们不会被按照你期望的方式进行编码。
如果需要，可以将lang该属性添加到整个网页中的各个元素。后续我也会分享lang以便想要学习的小伙伴可以更好地了解该属性。
2004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
