新华编程特战队

创建一个个人网页是学习编程的绝佳入门项目，不仅可以帮助你理解网页是如何构建的，还可以让你有机会展示自己的个人品牌。通过遵循上述步骤，即使是编程新手也能轻松创建出自己的个人网页。随着你编程技能的提升，你可以逐步增加更多高级功能，如使用JavaScript增加页面互动性，或学习使用框架如React或Vue.js来构建更复杂的应用。编程之旅充满无限可能，而一步一个脚印地构建自己的个人网页，无疑是这趟旅程中的一次有趣且有益的尝试。

Handlebars.js 是一个无逻辑模板引擎，可将 HTML 代码和代码的逻辑部分分开，并使您能够编写更简洁的代码。Handlebars 通过减少您必须编写的循环、数组和语句的数量来简化工作负载，以实现 Handlebars 可以对模板执行的操作。Handlebars.js 是 JavaScript 的客户端（尽管它也可以在服务器上使用）模板引擎。它是一个 JavaScript 库，您可以将其包含在页面上，就像您包含任何其他 JavaScript 文件一样。

随着时间的流逝，编写HTML 和 CSS似乎有点乏味，因为许多相同的任务需要重复。例如，在 HTML 中关闭标签或在 CSS 中重复查找十六进制颜色值等任务。这些不同的任务虽然通常很小，但加起来效率很低。幸运的是，这些和其他一些低效率的问题已经得到认可，预处理器解决方案已经迎接了挑战，如缩进和没有打开和关闭标签等。预处理器是将一种数据输入形式转换为另一种输入数据形式的程序。就 HTML 和 CSS 而言，Haml 和 Sass 是更流行的预处理器语言之一。

功能性网站不是仅使用 HTML 和 CSS 构建的，而是与称为的脚本语言一起构建的。JavaScript 使构建交互式网站成为可能，因为它是一种在浏览器上运行的客户端语言。当与 HTML 一起使用并使用 CSS 设置样式时，您可以构建出色的用户友好型网站。需要注意的是，JavaScript 可以通过不同的方式添加到 HTML 中。在本文中，将通过相关示例详细介绍将 JavaScript 添加到 HTML 的不同方法。如何将 JavaScript 添加到 HTMLJavaScript 可以通过3。

将 CSS 添加到 HTML 的三种不同方法可以一起使用，但浏览器遵循最接近 HTML 元素的样式，即内联 CSS，然后是内部 CSS，然后是外部 CSS。要设置上述链接的样式，请在 HTML 文档的 head 部分创建一个样式标签，并使用表示为选择器的标签名称获取链接，然后您可以应用这些样式。随着项目规模的扩大，外部 CSS 是必不可少的，因为它要求您为不同的 HTML 文档创建不同的样式，而不是用样式重载 HTML 文档。文件中，以设置链接的样式，就像我们在内部 CSS 中所做的那样。

这是因为您必须添加另一个称为“控件”的属性，该属性将为您提供播放、暂停和音频按钮等控件，就像视频标签一样。HTML5 提供了此标签，您可以在其中将音乐/音频文件嵌入到 HTML 文档中，而不是使用任何第三方插件（外部库）。但是，如果您尝试在任何其他浏览器上运行此代码，您肯定会看到音频自动播放。在这种情况下，您需要有一个备份文件，如果第一个文件不受支持，该文件将被播放。顾名思义，我们可以得到提示，这些属性可以被 HTML 的所有元素使用。这将在您的网站上显示您的视频。请注意，显示的是图像，而不是加载图标。

可以单独编辑矢量图形的每个组件，因此在编辑时不必重新创建所有内容。它用途广泛，由于其跨设备的可扩展性和清晰度，为网页设计提供了好处。但是，对于多边形，路径会自动将最后一个点与第一个点连接起来，从而创建一个闭合的形状。可用于操作基于 SVG 的图像，因为它们与 DOM 集成。这是一种基于文本的方法，用于描述任何大小的图像，并且可以与其他技术（如。可能需要向其他图像格式添加额外的数据或资产，以解决与分辨率相关的问题。标记是定义的缩写，包含特殊元素（如渐变）的定义。元素绘制的矩形，在它里面，我们有一个圆。

事件可以是任何内容，例如单击按钮，或将鼠标悬停在按钮上，或者当我们对它们执行任何操作时响应的任何内容（假设链接在我们单击后更改了颜色）。在上面的示例中，输入字段为“类型”电子邮件，因此，它将始终期望用户输入电子邮件地址。因此，如果我们输入了不正确的电子邮件地址（例如跳过“@”），那么它将立即抛出一个错误，表明需要电子邮件字段。我们可以对它们进行编码，以控制我们想要的任何功能，在我们网页上的任何位置，例如我们执行某些活动时的任何动画或颜色变化。类型的输入元素定义一个按钮，用于将表单数据提交到表单处理程序。

将有一个注册选项，它将用户重定向到一个页面，用户必须在该页面输入某些详细信息，例如姓名、电子邮件、出生日期、密码等，这些详细信息可以发送到服务器。例如，为了收集用户的个人详细信息等信息，我们可以将所需的详细信息单独分组。它定义，如果输入的值错误或与字段不匹配，则不应验证表单数据。在以下示例中，我们为文本创建了输入类型，以获取用户名和输入类型电子邮件以及输入类型编号。如果该人不输入，则无法提交表单。HTML 中的表单包含复选框、单选按钮、输入文本字段、密码字段等，可以在任何网站注册或登录/注册页面上看到。

标签用于提供与主要内容没有直接关系的信息，或者我们希望它与主要内容分开。正如我们在这个例子中看到的，“Note”被保留在旁白标签中，因为它是附加信息，可能与主要内容没有直接关系。语义标签与非语义标签相比具有许多优势，例如语义标签对屏幕阅读器有很大帮助，并且还有助于代码优化。它们可以与不同的属性一起使用，以标记组通用的语义。语义标记提供的附加信息可帮助屏幕阅读器更好地理解内容，并帮助他们更有效地确定页面中的不同部分。由于 h1 和 p 的内容与上例中文章的主要内容直接相关，因此它们被括在 main 标签内。

现在我们需要为 Ale 分配相同的工作经验，在我们的示例中为 John 分配相同的工作经验，这可以按如下方式完成。表中的 Rowspan 的工作方式类似于列的 clospan，但在这里，我们使用属性。在第一个示例中，我们发现表格中没有边框，并且很难在表格的单元格之间直观地区分内容。因此，为了解决这个问题，我们可以在表格中添加边框，这可以通过两种方式完成。当我们需要以特定方式设置表格的偶数和奇数单元格的样式时，我们会借助。在上面的例子中，我们为一个表的所有单元格和另一个表的折叠单元格设置。

为了将数据组织成行和列，请使用HTML 中的表格。表格用于组织图像、文本和链接等信息。假设您想显示学生的数据，并且仅以文本格式书写会非常不整洁，因此使用表格对于用户来说将变得乏味且易于理解。

它通常用于广告、视频、分析和交互式内容，它创建了一个矩形区域，用于嵌入网页和父文档之间的无缝交互，由 JavaScript 促进。中的目标，方法是为其指定一个名称，例如iframe_a，然后再次使用该名称作为目标，如下面的示例所示。iframe 应被视为您内容的组成部分，而不是您网站的一部分。对于属性值，默认使用像素，但也可以使用百分比值，例如“链接的 target 属性必须引用 iframe 的 name 属性。这可能会降低您的网站速度，并使您的网站面临恶意软件的风险，尤其是当内容来自。

HTML 标签用于滚动文本或图像，根据设置，在网站页面上水平或垂直向下显示。HTML 中有一些不常用的标签，但这些标签有助于使我们的文档结构化和美观。标记功能在 Web 文档中实现可滚动的文本或图像定义预先设置格式的文本以斜体样式显示文本存储具有嵌入内容的项目以进度条的形式显示内容。

标签用于提供与主要内容没有直接关系的信息，或者我们希望它与主要内容分开。正如我们在这个例子中看到的，“Note”被保留在旁白标签中，因为它是附加信息，可能与主要内容没有直接关系。语义标签与非语义标签相比具有许多优势，例如语义标签对屏幕阅读器有很大帮助，并且还有助于代码优化。它们可以与不同的属性一起使用，以标记组通用的语义。语义标记提供的附加信息可帮助屏幕阅读器更好地理解内容，并帮助他们更有效地确定页面中的不同部分。由于 h1 和 p 的内容与上例中文章的主要内容直接相关，因此它们被括在 main 标签内。

canvas> 标记是 HTML5 元素之一。它在网页上定义了一个区域，我们可以在其中通过脚本（通常是 JavaScript）创建不同的对象、图像、动画、照片构图。您应该使用脚本来绘制图形，因为 标记只是图形的容器。HTML 中的Canvas标签用于流畅地绘制和创建图形。它充当包含绘制图形的 HTML 文档中的容器。可以使用像 JavaScript 这样的脚本语言来绘制此类图形。canvas 标签本身是透明的，这意味着它不会独立创建图形。画布标签就像画家在上面创建图形和草图的空白纸。

标签）位于同一级别，并且在此目录中，存在一个image.png，该 image 标签应该使用哪个 image 标签来表示 Web 上的相应图形。指定的高度和宽度以字符串形式表示，以像素为单位表示图像的高度和宽度。因此，在上述情况下，图像的宽度为 100 像素，高度为。在上面的示例中，如果您的图像未能显示，则“JavaScript 徽标”文本将呈现在其位置，以使用户了解图像所代表的内容。它会在网页上创建一个容器，用于保存对指定图像的引用。要使用 image 标签在页面上呈现图像，您必须在 img 标签的。

HTML 中的引用可以用 、、、、 和 标签表示。下表简要介绍了 HTML 中引号标记的功能。标记描述定义缩写或首字母缩略词定义从其他来源引用的部分定义简短的内联引号定义文档的作者/所有者的联系信息定义作品的标题定义文本方向。

在下面的示例中，“Formatting tags”用粗体标签书写，以粗体字体书写，而“Helpful”用强标签书写，以强调“Helpful”一词。删除标记用于不再需要或必须删除的文本。HTML 格式是一个过程，我们通过使用不同类型的 HTML 格式标签来设置内容样式，使其更具信息性和吸引力。我们可以使用各种类型的格式标签，通过这些标签我们可以编写不同风格和格式的文本。请注意，在下面的示例中，“小标签”比周围的文本小一号，“大号”比周围的文本大一号。标签使文本的字体比周围的文本大一号，即从小到中，从中到大。

Emmet 是一个编码工具包，可简化大量 HTML 代码的创建。它使开发人员能够使用简洁的 Emmet 快捷方式快速生成大型 HTML 块，将几行或几个单词转换为完整的代码结构。首先，它将 CSS 选择器与 HTML 集成在一起，提供了一种快速、高效的编码方法。本文介绍了 Emmet 的功能，并指导了其用于优化 HTML 开发的使用方法。Emmet 可以通过向 IDE 添加 emmet 插件来使用。将 emmet 插件添加到 IDE 和使用 emmet 已在下一节中讨论像 VS Code 这样的现代 IDE

在 HTML 文件中编写 CSS 代码的最传统和最常见的方法之一是在 HTML 中使用 style 标签。HTML 中的样式标签是通过在 HTML 文件中直接添加样式表来使用的，该。因此，如果您希望添加一些特定于设备的样式，可以通过将 media 属性添加到样式标记来实现。有两个属性，这两个属性都是可选的。在这里，我有一些最小的 HTML 样板代码，带有可用于设置此 HTML 样式的 style 标签。，除非认为非常必要，因为它们会使您的 HTML 更加混乱，并且您的 CSS 难以调试和维护。

列表是指项目的集合，它被认为是表示信息的最佳方式之一。即使在 HTML 中，列表也是最常用的元素之一，无论是用于导航还是用于表示一般内容。HTML 为我们提供了三种表示列表的方法——有序列表、无序列表和描述列表。我们每天都会在多种情况下遇到列表。列表对很多事情都很有用，包括杂货店购物和创建日常生活。类似的例子可以在网站上找到。HTML 列表实用程序可帮助我们在网站上创建列表。有序列表无序列表描述列表。

本文介绍 HTML 中的链接、其实现、属性和类型。我们还将学习如何在 HTML 中使用不同的标签和元素作为链接。

假设，在上面的例子中;用于标识一组具有某些相似性的元素（例如，具有相同样式的元素或具有相同功能的元素）。的元素，我们给它一个红色的背景色。这不会引发任何警告，因为具有相同类名的不同元素是正常的。id 对于 HTML 页面中的每个元素都是唯一的，而多个元素可以具有相同的类。我们经常需要针对一个特定的元素或一组特定的元素来实现不同的功能，如样式。如果我们尝试为文档中的两个不同元素提供相同的 id，我们将收到警告。使用 id，我们可以轻松地使用 CSS 定位元素并操纵它们的样式。因此，假设我们要更改元素的背景。

Web 浏览器通过某些关键字区分普通文本和用 HTML 编写的文本，这些关键字称为HTML 标签。HTML 为我们提供了各种类型的标签，每个标签具有不同的属性。一些最常用的标签是标题、段落、br等。HTML 标题和段落标签用于告诉浏览器应如何将内容显示为标题、副标题或段落。如果你写的东西是有条理的，它总是很容易阅读的！例如，在这篇文章中，标题和段落不是很容易区分，所以很难阅读。

块元素从新行开始，并根据内容覆盖整个空间。此外，它覆盖了整个水平空间。内联元素仅覆盖由 HTML 元素中的标记边界的区域，并且从不从换行开始。 标签是一个块元素。它用作 HTML 页面中的一个部分，用于对 HTML 元素的所有大部分进行分组。 标记是一个内联元素。它用作突出显示或标记特定文本或文档部分的容器。

在本文中，您将了解名为 标记的 HTML 元素。正文标签包含网页的所有主要内容，如标题、段落、图像、表格等。它始终包含在 标记中。您在 Web 浏览器上看到的所有内容都将出现在 标签中。HTML 标签包含网页的所有主要内容，例如标题、段落、图像、表格等。 标签内的所有内容仅在网页上可见。HTML 标签具有 bgcolor、text 等属性，可以改变网页的外观。HTML 标记。

HTML 中的 标签用作元数据的容器，保存有关文档的关键信息。这包括 、、 和 等元素，它们共同定义了文档的各个方面。虽然 HTML 4.01 强制要求存在 元素，但 HTML5 允许省略它。 元素位于 和 标记之间，用于封装有关文档的数据，例如标题、字符集、样式、链接和脚本。

HTML doctype 是关于页面的 HTML 版本的指令，传递给 Web 浏览器。它用于确保不同的 Web 浏览器以类似的方式解析它。

本文介绍了 HTML 标记作为 Web 浏览器的格式说明，包括介于两者之间的打开和关闭标记。它涵盖了基本标签、语法、HTML 注释和属性，强调了它们的用途和用法。同样，一个表格，需要信息为用户预订酒店，就像你在 Oyo 和 Airbnb 上看到的那样。HTML 中有一些标签对于您的 HTML 文档是必需的，因为它们提供了有关我们网页的重要信息，以便浏览器解释。HTML 提供了一堆标签，允许我们在网页上以不同的格式和大小呈现文本。标记用于在 HTML 页面的容器内呈现任何外部资源，如图像、视频或网站。

设置您的工作空间不仅包括物理空间，还包括应用程序和软件，这些应用程序和软件可以使编码 HTML 成为您富有成效的时间。是一个文本编辑器，它支持 HTML 格式，并提供节省时间、高效且免费使用的 HTML 扩展。Code（缩写为VS Code）是 HTML 编码应用程序，具有内置功能和扩展，可提升开发人员的编码体验。当我们开始编写 HTML 代码时，记事本是我们的首选编辑器。但从那时起，很多事情都发生了变化。更新、更高效的文本编辑器已经进入市场，为我们提供了很多选择。

让我们想象一下，对于这个假设的场景，你的父亲刚刚开了一家新餐厅，“The Pizza Box”，供应美味的比萨饼。您注意到餐厅没有网站。你决定为他的餐厅建立网站。网站上需要哪些内容如何搭建网站对于第一个，你爸爸把网站的要求交给你。在网页上，他只需要一些简单的东西，包括披萨的名称和价格。一切准备就绪，你弄清楚了第一件事：+1： 现在这里最大的挑战是你不知道如何创建一个网站。让我们一起学习如何使用 HTML 构建网站。使用任何文本或代码编辑器（例如记事本、文本编辑）创建 HTML 文件。