面向初学者的 Web 开发教程 02 - 让我们开始一个项目
了解 HTML
有哪些类型的标签？
让我们开始创建网站吧！
结论
欢迎来到我的“Web开发入门”系列教程的第二部分！在这一部分中，我们将开始创建我们的第一个项目并编写一些代码。但在编写代码之前，我会先解释一下你实际要编写的代码类型。
了解 HTML
HTML 是一种标记语言，浏览器用它来创建待渲染的节点“树状结构”。它是每个网站的核心，如果你想学习 Web 开发，就离不开 HTML。但如果你能够用一种思维方式思考， 它其实非常简单。
门户盒子。
HTML 文件是由许多标签组成的。
<header>
<p>Hello world</p>
</header>
这里我使用了两个标签，分别是 <header>header和 <p> p。<header><header> 用于告诉浏览器这是一个头部元素，而 <p><p>是段落的简写。
有些浏览器会默认为元素设置样式（例如，标题、段落和列表始终具有浏览器预设的默认样式）。<header>而 `<div>` 元素则不提供任何样式，其行为与其他任何没有浏览器预设样式的元素相同。
所以这段代码会输出一个包含“Hello world”段落的标题元素。
有哪些类型的标签？
很多。HTML5 为我们带来了大量新的标签，我们可以尽情探索。其中大部分是语义标签。语义标签用于告诉浏览器某个元素的类型。<header>例如，`<head>` 标签告诉浏览器这是一个头部元素。这些信息对屏幕阅读器、搜索引擎等也很有帮助。
您可以在MDN（Mozilla 开发者网络）上查看完整的 HTML 元素列表。
正如你所见，它们种类繁多，每个元素都有其独特的作用。在本教程中，你将学习一些你经常会用到的元素。
让我们开始创建网站吧！
关于 HTML 就说到这里，让我们创建一个项目并加以运用。我建议你创建一个专门用于存放网站的文件夹。我把我的网站命名为 `<website_name>` example-website。在这个新文件夹里，我们将创建一个名为 `<index_name>` 的文件index.html。`<index_name>` 文件通常是大多数网络服务器加载的第一个页面，所以它index.html就是你的首页。
我的 Visual Studio Code 工作区现在看起来像这样。
现在您可以打开浏览器，然后将index.html文件拖入其中打开它。
看起来有点无聊。在 Firefox 和 Chrome 浏览器中，你可以按 F12 或 Command+Shift+I 打开开发者工具。我的界面是这样的：
如您所见，屏幕右侧有一些代码，但实际上我们还没有编写任何代码。这是为什么呢？原因在于，每个 HTML 文件都必须包含 `<head>`<html>和<body>` <head><body>` 标签。
标签<html>是整个文档的包装器。所有内容都存在于这个文件中，它是文档的根节点。
标签<head>用于存放元信息，例如页面标题、描述以及其他浏览器信息。同时，大部分样式资源也会在这里加载。
标签<body>就是活动实际发生的地方。它是你的网站内容，访客可以看到它。由于每个网站都需要这些标签，我们将开始在我们的代码中自行编写它们index.html。
<html>
<head>
<title>Hello world</title>
</head>
<body>
</body>
</html>
这种格式化方式只是我个人的选择，也是Prettier定义的最佳实践。你可以按照自己的喜好编写代码，但如果你愿意，可以尽量遵循我的缩进风格。
如您所见，我们定义了网站的 html、head 和 body 标签，但我还添加了一个包含“Hello world”的<title>标签。它的作用是什么呢？请在浏览器中重新加载您的网站，亲自体验一下！
如您所见，我们现在已在浏览器标签页中定义了网站标题。该title标签包含浏览器以及搜索引擎或爬虫所需的元信息。
但是你的页面还是空白的。唉。要不我们加个标题，再加点网站介绍吧？
<html>
<head>
<title>Hello world</title>
</head>
<body>
<h1>Tutorial demo website</h1>
<p>This is a tutorial demo page for my dev.to beginner tutorial about HTML.</p>
</body>
</html>
这里我们添加了 `<p>`<h1>和<p>`<head>` 标签。我们之前已经讨论过<p>`<p>` 标签，它表示段落。但是 `<head>` 标签是什么<h1>意思呢？` h<head>` 代表标题，它后面的数字表示标题类型。
如果把它想象成一个 Word 文档，你会看到 6 种标题类型。每种标题都有自己的优先级。<h1>例如<h6>，优先级最高<h1>，应该用于页面标题；而优先级最低，应该用于非常小的章节标题。<h6>
现在加载页面后，我们应该看到以下内容：
太棒了！你现在有了第一份用HTML编写的文档。虽然有点枯燥，但总比没有强。
如果还能添加指向您 dev.to 个人资料的链接，岂不是很棒？我们来试试吧！
<html>
<head>
<title>Hello world</title>
</head>
<body>
<h1>Tutorial demo website</h1>
<p>
This is a tutorial demo page for my dev.to beginner tutorial about HTML.<br />
You can find my profile <a href="https://dev.to/bdbch/">here</a>
</p>
</body>
</html>
这是怎么回事？我们稍微调整了一下段落的格式。正如你所看到的，<br />这里我们使用了一个 `<br>` 标签。为什么它的写法这么奇怪？这是一个自闭合标签。` <br>br `代表换行符，这意味着它本身不能包含内容。如果一个标签不能包含自己的子元素，它就是一个自闭合元素，可以这样写：`<br>` 。另一个例子是图片，我稍后会展示给你看。<tag />
您可以看到另一个新标签，<a>后面跟着一些奇怪的乱码。这些乱码是一个 `<div>` 标签attribute。HTML 标签可以有多个 `<div>` 标签，它们会修改标签的行为。
标签<a>是一个锚点（或链接），这意味着点击它可以将你的网站链接到另一个页面。由于你需要告诉锚点链接到哪里，你可以使用属性来提供它所需的信息。
这个<a>标签现在会链接到我的 dev.to 个人资料页面。我们来试试吧！
现在成功了！太棒了！但是它会替换当前标签页🤔，我们该如何解决这个问题呢？我们引入另一个属性，叫做`target` target。这两个属性都专用于锚标签。`target`定义了浏览器应该在哪里打开链接。
<html>
<head>
<title>Hello world</title>
</head>
<body>
<h1>Tutorial demo website</h1>
<p>
This is a tutorial demo page for my dev.to beginner tutorial about HTML.<br />
You can find my profile <a href="https://dev.to/bdbch/" target="_blank">here</a>
</p>
</body>
</html>
我们将该target属性设置为 true _blank。这意味着它将在新窗口中打开。但由于浏览器现在都支持标签页，因此它将在新标签页中打开。
您可以在这里<a>查看标签的所有属性。
好了，现在链接会在新标签页中打开。
结论
我觉得这些应该足以让你掌握HTML的基本概念。我的建议是，你可以尝试使用这里的一些元素。仔细研究它们及其属性，以便更深入地了解它们。
下一部分我们将添加图片、列表并嵌入 YouTube 播放器！
下次见。
文章来源：https://dev.to/bdbchgg/webdevelopment-for-beginners-lets-start-a-project-m65