如何将 JavaScript 链接到 HTML 和 CSS

已发表: 2022-02-25

创建、设计和启动您的网页或网站很简单。 如果您查看通常挤满并填充屏幕的所有文本、代码和脚本。 HTML、CSS 和 JavaScript 语言广为人知并被广泛使用。 为了更好地理解这一点，我们需要一些关于这 3 个的定义，使其相关且直截了当。

在我们继续之前，我想有机会感谢 NaturHandel.dk 和 Virksomhedsoplysninger.dk 使这篇文章成为可能。

因此，请允许我们将您的网页介绍为艺术品。 这件艺术品有 3 个元素，使其成为杰作。 当您确保开始雕刻、绘画或创作您的作品所需的所有工具都经过彻底计划和定义，以确定它们将为您的艺术做出什么贡献时，就可以实现这一目标。 这些包括（HTML）纸张或您的艺术品基础。 (CSS) 颜色和设计被纳入你的基础，最后，(JavaScript) 这件艺术品的目的和功能。 有了所有这 3 个，就建立了一种和谐的关系，每个人都可以看到、使用和成为其中的一部分。

让我们进一步分解它，这样我们就可以完全关联这些语言之间的关系，我们应该：

不同代码语言的解释

HTML

  • 您的超文本标记语言
  • 带有所有标准集的空白画布，您的杰作将随之而来。
  • 在此处指明您网页的基本文本、标题和操作
  • 这是您的所有其他部分将被托管、定义或合并的部分
  • UI 所在的位置

CSS

  • 层叠样式表
  • 在这里，您现在可以根据您在画布中完成的想法或初稿，为您的作品或网页添加配饰、设计、决定尺寸和添加颜色。 所有美学元素都可以在这里引导并在此处输入以供您的观众看到。

JavaScript

  • 您在网页或艺术作品中使用的定义图形、动画和声音的语言
  • 如果您希望您的作品具有其他特性和功能的奖励，那么这就是负责的部分。
  • 将其视为一种奖励，并为您的艺术作品增添光彩。
  • 这负责为您的按钮、链接、图标以及与页面上可点击内容有关的任何内容提供便利的后续步骤
  • 这定义了您的艺术作品的全部内容和用途。

为确保您的作品或网页充分利用您的 JavaScript 元素，您必须在标签中清楚地介绍它需要执行的功能。 现在，您的标题或文本将能够在单击、播放视频或呈现图像时根据附加的链接/链接将您重定向到弹出页面。 当在您的网页上单击文本、按钮或图标时，这种语言 (JavaScript) 负责您的图形功能和所有其他操作。

但要实现这一点，您必须在命令中包含一个桥接元素，使您的语言能够理解您想要执行的功能。 在你的用户界面中进行任何交互的关键是由你的“标签”的存在来定义的。 此标签是您的网站定位它所在位置、了解您希望它做什么以及页面在浏览器上加载时需要采用的节奏或速度的方式。 您的标签可以包含或放在您希望添加到站点的头部、正文或外部文件中。 由于这是最常用的方法（脚本标签），还有其他方法可以链接您的 JavaScript，具体取决于您的偏好和界面。

以下是有关如何链接 JavaScript（使用 HTML 和 CSS）的详细说明：

带有脚本标签的 HTML

<title>JavaScript</title>

在本例中，您可以通过这种方式通过 HTML 链接您的 JavaScript。 当它加载时，这被视为“JavaScript”作为您网页上的标题。

HTML 通过代码编程

这更多地用于页面中的动态操作，例如颜色转换、文本大小、动画等。这可以通过 <script type=”text/JavaScript”> ('<body style=”background-color 在您的语言中进行操作: (插入你喜欢的颜色)”>')

请记住，您可以在这部分中使用内部 JavaScript 代码，然后在出现错误时将其转换，因为您仍然可以以下面显示的不同方式操作此功能。

通过单独文件的 HTML

您也可以通过 javascript.js 将其作为没有脚本标签的单独文件进行尝试。 但是这种技术有点棘手，因为这会混淆浏览器定位代码的位置并可能导致错误。

为避免在使用此方法时出现这些错误，请附加一个路径以通过 <script src=(insert “PATH”)> 启用方向

通过样式标签的 CSS

在您的 HTML 正文中，添加一些可以归因于样式的内容，包括通过 <title>Linking to CSS and JavaScript</title> 链接两者（或您希望文本显示的方式）

带有 JavaScript 标记的链接元素应放置在源文档和

HTML。 这样，每个对应代码的关系就被公平地归因了。

尽管建议在大多数情况下不一定要这样做，因为 CSS 和 JavaScript 中的某些功能都可以提供归因于它们的内容，但它仍然是可能的。

页面的背景颜色、文本或字体的大小以及文本的动态都可以在此处进行操作。

使用这些参数，您的站点图像处理或动态内容更改和表单验证的执行可以全部添加到您的网页功能中。 通过它使您的艺术品或网页更加全面。 这些命令将允许您导入外部和内部文件以将它们相应地附加到您的 JavaScript 代码中，就像在 HTML 的情况下一样，但在您的 CSS 中不是必需的。 所以请记住，在嵌入 JavaScript 之前，请务必先插入脚本或标签，以便您的网站或 HTML 能够理解您的语言，并知道它们如何直接翻译您正在操纵它们执行的功能。 您的页面很大程度上取决于您的命令在脚本标签、代码和编程之间输入的逻辑，以逐步采取适当的操作。