Logo

菜单

发布于 2025-12-08 0 阅读
0

如何使用 HTML 创建网页

如何使用 HTML 创建网页

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

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

目录

1.创建一个新的HTML文件

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

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

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

创建 HTML 文件

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

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

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

在 html 元素内添加 head 元素：

<!DOCTYPE html>
<html lang="en">
  <head> </head>
</html>
Enter fullscreen mode Exit fullscreen mode
  • <body>- body 元素表示文档的内容。一个文档中只能有一个 body 元素。

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

<!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body></body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • <title>- title 元素代表文档的名称，该名称将显示在浏览器标签页中。title 元素是元数据内容，因此它位于 head 元素内部。每个文档只能有一个 title 元素。

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

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

您会注意到一些元素现在缩进，这样做是为了让代码更易于阅读。缩进是编码中一个固执己见的领域。每个人都有自己的偏好，但只要保持一致并有助于提高可读性，就可以使用任何您喜欢的样式。在本教程中，我使用了一个名为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>
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

4. 在浏览器中预览

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

在浏览器中预览 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>
Enter fullscreen mode Exit fullscreen mode

6.格式化文本

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

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

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

<!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>
Enter fullscreen mode Exit fullscreen mode

7.创建超链接

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

—万维网联盟 (W3C)

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

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

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

我们来看下面的例子：

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

这将导致：

万维网联盟主页。

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

<!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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

插入图像的网页

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

包起来

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

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

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

进一步参考

文章来源：https://dev.to/jordanholtdev/how-to-create-a-web-page-with-html-26ho
比特币和区块链的超级简单指南
X-headers，是什么以及为什么？