如何使用 HTML 创建网页

在本教程中，我们将使用 HTML 构建一个简单的网页。本教程面向刚开始学习 HTML 但对其语法有基本了解的读者。如果您是 HTML 新手，仍然可以继续学习并学习一些内容。如果您有兴趣深入了解HTML，请务必查看 W3C HTML 简介。

您可以在此处找到本教程的完整代码。

1.创建一个新的HTML文件

首先，我们需要创建一个新文档。创建文档的方法有很多种，但我将使用文本编辑器VS Code来完成。您可以使用任何您喜欢的文本编辑器。

以下是在 VS Code 中创建新文件的步骤。

打开 VS Code
在文件菜单中选择“新建文件”，或者在 Windows 上按Ctrl+或在 macOS 上按+ 。NCmdN
在“文件”菜单中选择“保存”，或在 Windows 上按Ctrl+ ，或在 macOS 上按+ 。然后系统将提示您输入文件名。SCmdS

HTML 文档应该有.html文件扩展名。
一般网站的首页名为“index.html”。“index”表示这是浏览器默认加载的文件。
页面名称中只能使用字母数字、破折号、下划线或波浪号。
不要在文件名中使用空格
命名 HTML 文件时请使用小写字母。HTML 资源的名称通常用于 URL 中。URL 通常区分大小写。

2. 创建基本 HTML 文档

现在我们有了 HTML 文件，可以开始编写 HTML 代码来创建网页了。我们先添加一些在大多数 HTML 文件中常见的元素。

<!DOCTYPE html>- DOCTYPE 的目的是触发正确的渲染模式。由于历史原因，这是必需的，如果您是初学者，则无需关注它。<!DOCTYPE html>这是 HTML5 推荐的，也是您在大多数项目中以及本教程中都会使用的。它必须是 HTML 文件中的第一部分，并且不需要结束标记。

将 DOCTYPE 添加到 HTML 文件的第一行：

<!DOCTYPE html>

<html>- html 元素代表文档的根。所有其他元素都是 html 元素的后代。基本上，这告诉浏览器该元素内的所有内容都是 html。html 元素通常有一个结束标签，但在某些情况下并非必需。它还具有lang指示文档语言的属性，并有助于语音合成。

现在将 html 元素添加到您的文件中，如下所示：

<!DOCTYPE html>
<html lang="en"></html>

<head>- head 元素用于包含文档的元数据。这些元数据是机器可读的，用于设置内容的呈现方式或行为，或文档与其他文档的关系。这些元数据可以是标题、脚本、CSS 样式表、分析数据等。

在 html 元素内添加 head 元素：

<!DOCTYPE html>
<html lang="en">
  <head> </head>
</html>

<body>- body 元素表示文档的内容。一个文档中只能有一个 body 元素。

在 html 元素内的 head 之后添加 body 元素：

<!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body></body>
</html>

<title>- title 元素代表文档的名称，该名称将显示在浏览器标签页中。title 元素是元数据内容，因此它位于 head 元素内部。每个文档只能有一个 title 元素。

在 head 元素内添加 title 元素，并根据需要命名：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Introduction to winter camping</title>
  </head>
  <body></body>
</html>

您会注意到一些元素现在缩进，这样做是为了让代码更易于阅读。缩进是编码中一个固执己见的领域。每个人都有自己的偏好，但只要保持一致并有助于提高可读性，就可以使用任何您喜欢的样式。在本教程中，我使用了一个名为Prettier的代码格式化程序，它设置为在保存时自动格式化 HTML 文档。

我们将向这个基本布局中添加一个元素，您会经常看到它。

<meta>- meta 元素代表不同类型的元数据。meta 标签有很多不同的用途，但其中两种用途最为常见（尤其是在使用HTML 代码片段时），我们将主要讨论这两种用途。

让我们在 head 元素中添加两个 meta 元素：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to winter camping</title>
  </head>
  <body></body>
</html>

第一个带有该属性的元元素charset="UTF-8"称为字符编码声明。它指示使用哪种字符编码来存储或传输文档。如果您是初学者，不必太担心此元素的技术层面，但如果您看到它，最好先了解它的作用。

第二个元元素称为视口元标记，它由 Apple 引入，以便开发人员可以修改视口的大小和比例。虽然由于需要支持移动设备，此元标记非常常见，但并非所有网页都需要它。

3. 章节、标题和段落文本

如果我们在浏览器中查看这个页面，你实际上不会在视口中看到任何渲染的内容。这是因为我们还没有向 body 元素添加任何内容。所以，让我们给这个网页添加一些内容。

<section>- 一个 section 元素可以表示文档的某个部分。在本例中，网页将包含一个简介部分、一个露营装备部分和一个照片部分。
h1、h2、h3、h4、h5 和 h6 元素- 这些元素代表文档中的标题，是网页的重要组成部分。标题具有 SEO 价值，并且对于可访问性也至关重要。我们将在未来的教程中学习更多关于语义和网页结构的知识，目前只需记住标题是网页的重要组成部分。
- p 元素代表段落文本。

让我们继续添加第一部分及其元素，请随意跟随这个例子或在网页上添加您自己的内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to winter camping</title>
  </head>
  <body>
    <h1>Winter Camping for Beginners</h1>
    <section>
      <h2>Introduction</h2>
      <p>
        With careful planning and preparation, winter camping can be an amazing
        experience. If you're thinking about going camping in the winter, this
        page is a great place to start.
      </p>
    </section>
  </body>
</html>

4. 在浏览器中预览

现在文档正文中已经有了一些内容，让我们看看它在浏览器中是什么样子的。最简单的方法之一是将 HTML 文件拖到打开的浏览器选项卡中。

您需要重新加载浏览器标签页才能查看您可能对 HTML 所做的任何更改。另一个选择是使用实时预览，例如 VS Code 有一个流行的扩展程序 Live Server，它允许您点击按钮查看文件，并会监听更改并进行相应的更新。

5. 创建列表

此网页的第二个内容部分将列出冬季露营可能需要的装备。让我们来看看创建此部分所需的元素。

<ul>- ul 元素代表无序列表，表示项目列表，其中项目的顺序并不重要。
<li>- li 元素代表列表项。

现在我们知道了要使用哪些元素，让我们继续创建另一个包含露营装备清单的部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to winter camping</title>
  </head>
  <body>
    <h1>Winter Camping for Beginners</h1>
    <section>
      <h2>Introduction</h2>
      <p>
        With careful planning and preparation, winter camping can be an amazing
        experience. If you're thinking about going camping in the winter, this
        page is a great place to start.
      </p>
    </section>
    <section>
      <h2>Winter Camping Gear</h2>
      <p>
        Winter camping requires a bit more gear than a summer camping trip
        would. It's important to be prepared for the cold temperatures which can
        become dangerous. Here is a list of gear that would be helpful when
        winter camping.
      </p>
      <ul>
        <li>Snowshoes</li>
        <li>Winter tent</li>
        <li>Cold-weather sleeping bag</li>
        <li>Insulated sleeping pad</li>
        <li>Handwarmers & footwarmers</li>
        <li>Winter boots</li>
      </ul>
    </section>
  </body>
</html>

6.格式化文本

现在我们有了更多内容，让我们为文本添加一些格式。格式会改变文本的外观，使页面更具可读性。我们可以使用几种不同的元素来实现这一点：

- 此元素表示粗体文本。它用于吸引注意力或强调特定文本的重要性。
- 这将呈现与元素相同的效果，但是是语义的并有助于描述它所包围的文本。
- 此元素代表斜体文本，用于表示与常规文本不同的语气。
- 这标志着文本有重点
- 这代表突出显示或标记为参考的文本。
- 这代表边注和它周围的文本将会变得更小。
<del>- 这代表已删除的文本。
<ins>- 这用于表示插入的文本。ins 和 del 都用于帮助跟踪文档的变化。
- 此元素表示下标文本。下标以较低的基线和较小的文本呈现。
- 此元素表示上标文本。文本以升高的基线和较小的文本大小呈现。

让我们继续将其中一些元素添加到我们添加的上一段部分。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to winter camping</title>
  </head>
  <body>
    <h1>Winter Camping for Beginners</h1>
    <section>
      <h2>Introduction</h2>
      <p>
        With careful planning and preparation, winter camping can be an amazing
        experience. If you're thinking about going camping in the winter, this
        page is a great place to start.
      </p>
    </section>
    <section>
      <h2>Winter Camping Gear</h2>
      <p>
        <mark>Winter camping</mark> requires a bit more gear than a summer
        camping trip would. It's <strong>important to be prepared</strong> for
        the cold temperatures which <em>can become dangerous.</em> Here is a
        list of gear that would be helpful when <mark>winter camping.</mark>
      </p>
      <ul>
        <li>Snowshoes</li>
        <li>Winter tent</li>
        <li>Cold-weather sleeping bag</li>
        <li>Insulated sleeping pad</li>
        <li>Handwarmers & footwarmers</li>
        <li>Winter boots</li>
      </ul>
    </section>
  </body>
</html>

7.创建超链接

万维网的起源在于能够定义从一个页面到另一个页面的链接，并且只需点击按钮即可访问链接。这就是超链接。

—万维网联盟 (W3C)

超链接使网络成为真正的网络，也是任何网页的重要组成部分。几乎任何类型的内容都可以转换为超链接，这样当用户点击该链接时，就会跳转到另一个 URL。

我们可以使用以下元素创建超链接：

<a>- 元素或锚元素具有一个名为href的属性，使用该属性可创建超链接。

我们来看下面的例子：

<a href="https://www.w3.org/">the World Wide Web Consortium homepage</a>.

这将导致：

万维网联盟主页。

好了，既然我们已经了解了基础知识，那就让我们在冬季露营装备列表中添加几个超链接。当用户点击它们时，他们会被带到另一个地址。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to winter camping</title>
  </head>
  <body>
    <h1>Winter Camping for Beginners</h1>
    <section>
      <h2>Introduction</h2>
      <p>
        With careful planning and preparation, winter camping can be an amazing
        experience. If you're thinking about going camping in the winter, this
        page is a great place to start.
      </p>
    </section>
    <section>
      <h2>Winter Camping Gear</h2>
      <p>
        <mark>Winter camping</mark> requires a bit more gear than a summer
        camping trip would. It's <strong>important to be prepared</strong> for
        the cold temperatures which <em>can become dangerous.</em> Here is a
        list of gear that would be helpful when <mark>winter camping.</mark>
      </p>
      <ul>
        <li>Snowshoes</li>
        <li>
          <a href="https://www.rei.com/c/backpacking-tents/f/se-4-season"
            >Winter tent</a
          >
        </li>
        <li>
          <a href="https://www.rei.com/c/sleeping-bags-and-accessories"
            >Cold-weather sleeping bag</a
          >
        </li>
        <li>Insulated sleeping pad</li>
        <li>Handwarmers & footwarmers</li>
        <li>Winter boots</li>
      </ul>
    </section>
  </body>
</html>

8. 设置网页样式

如果我们现在预览一下这个网页，会发现它看起来并不赏心悦目。我们可以通过在 HTML 文档中添加一些基本样式来改变这种情况。为此，我们将添加一个<style>允许我们在 HTML 文档中嵌入 CSS 的元素。

我们将在 HTML 文档的 head 元素中添加 style 元素。我不会详细介绍我添加的 CSS，如果您对任何具体内容感兴趣，请查看MDN CSS 参考文档。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to winter camping</title>
    <style>
      html {
        max-width: 800px;
      }
      body {
        background-color: white;
        margin: 0 4rem;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.15rem;
      }
      section {
        border-bottom: lightblue solid 2px;
      }
      h1 {
        font-size: 3em;
      }
      ul,
      li {
        list-style: square;
      }
      em {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Winter Camping for Beginners</h1>
    <section>
      <h2>Introduction</h2>
      <p>
        With careful planning and preparation, winter camping can be an amazing
        experience. If you're thinking about going camping in the winter, this
        page is a great place to start.
      </p>
    </section>
    <section>
      <h2>Winter Camping Gear</h2>
      <p>
        <mark>Winter camping</mark> requires a bit more gear than a summer
        camping trip would. It's <strong>important to be prepared</strong> for
        the cold temperatures which <em>can become dangerous.</em> Here is a
        list of gear that would be helpful when <mark>winter camping.</mark>
      </p>
      <ul>
        <li>Snowshoes</li>
        <li>
          <a href="https://www.rei.com/c/backpacking-tents/f/se-4-season"
            >Winter tent</a
          >
        </li>
        <li>
          <a href="https://www.rei.com/c/sleeping-bags-and-accessories"
            >Cold-weather sleeping bag</a
          >
        </li>
        <li>Insulated sleeping pad</li>
        <li>Handwarmers & footwarmers</li>
        <li>Winter boots</li>
      </ul>
    </section>
  </body>
</html>

9. 向页面添加图片

没有图片的网页有时会显得很枯燥，所以让我们继续在这个页面上添加一张图片。要添加图片，我们将使用img元素。

<img>- 此元素代表一张图片。它必须包含src属性，用于指示图片的 URL。我们还将使用alt属性，该属性对于可访问性至关重要。我们为图片编写了替代文本，这样即使所有图片都不存在， alt 属性也能传达相同的含义。

在本例中，我们将使用来自图库网站的冬季露营图片，当然您也可以使用本地保存的图片。让我们继续添加另一个部分，其中包含标题、描述该部分的简短段落以及我们的图片：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to winter camping</title>
    <style>
      html {
        max-width: 800px;
      }
      body {
        background-color: white;
        margin: 0 4rem;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.15rem;
      }
      section {
        border-bottom: lightblue solid 2px;
      }
      h1 {
        font-size: 3em;
      }
      ul,
      li {
        list-style: square;
      }
      em {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Winter Camping for Beginners</h1>
    <section>
      <h2>Introduction</h2>
      <p>
        With careful planning and preparation, winter camping can be an amazing
        experience. If you're thinking about going camping in the winter, this
        page is a great place to start.
      </p>
    </section>
    <section>
      <h2>Winter Camping Gear</h2>
      <p>
        <mark>Winter camping</mark> requires a bit more gear than a summer
        camping trip would. It's <strong>important to be prepared</strong> for
        the cold temperatures which <em>can become dangerous.</em> Here is a
        list of gear that would be helpful when <mark>winter camping.</mark>
      </p>
      <ul>
        <li>Snowshoes</li>
        <li>
          <a href="https://www.rei.com/c/backpacking-tents/f/se-4-season"
            >Winter tent</a
          >
        </li>
        <li>
          <a href="https://www.rei.com/c/sleeping-bags-and-accessories"
            >Cold-weather sleeping bag</a
          >
        </li>
        <li>Insulated sleeping pad</li>
        <li>Handwarmers & footwarmers</li>
        <li>Winter boots</li>
      </ul>
    </section>
    <section>
      <h2>Winter camping pics</h2>
      <p>Here are some of my fav photos from winter camping!</p>
      <img
        src="https://images.unsplash.com/photo-1455496231601-e6195da1f841?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
        alt="a picture of a tent during a winter snow storm"
      />
    </section>
  </body>
</html>

让我们看看网页现在是什么样子的。

正如网络忍者所说，它不会赢得任何设计奖项，但对于我们的第一个网页来说，它已经开始成形。

包起来

在本教程中，我们学习了如何创建 HTML 文档，并了解了一些常用元素，例如列表、图像、超链接、标题和段落。我们还对文本应用了一些基本样式和格式，使设计更具吸引力。

从现在开始，我建议你撸起袖子，从头开始编写自己的 HTML 页面。等你稍微自信一点之后，再用 HTML 构建更复杂的内容。市面上有很多流行的框架、库和其他工具可以帮助你构建网页，但你也能用 HTML 构建出一些不可思议的东西。提升你的 HTML 技能会让你成为更优秀的开发者，让网络变得更美好。

单击/激活此链接即可查看此网页的最终代码。

进一步参考

文章来源：https://dev.to/jordanholtdev/how-to-create-a-web-page-with-html-26ho

如何使用 HTML 创建网页

如何使用 HTML 创建网页

目录

1.创建一个新的HTML文件

2. 创建基本 HTML 文档

3. 章节、标题和段落文本

4. 在浏览器中预览

5. 创建列表

6.格式化文本

7.创建超链接

8. 设置网页样式

9. 向页面添加图片

包起来

进一步参考