linking-to-css-and-javascript-in-an-html-file-306m

原始地址：https://dev.to/pauljwil/linking-to-css-and-javascript-in-an-html-file-306m

链接CSS和JavaScript在HTML文件中
本教程的目的是教会您如何在HTML文件中链接到CSS和JavaScript文件。在HTML文档中直接编写CSS和JavaScript是可能的，但通常最好将这三种语言放在各自单独的文件中。

目录

• 目录和文件结构
• HTML
• CSS
• JavaScript

1. 目录和文件结构
   将HTML、CSS和JavaScript文件放在单独的目录中是一个好主意。创建一个名为css-and-js的项目目录。在这个目录中，创建三个额外的目录。将它们命名为html、css和javascript。
   在html目录中，创建一个名为css-and-js.html的文件。在css目录中，创建一个名为styles.css的文件。在javascript目录中，创建一个名为script.js的文件。

2. HTML
为了链接到CSS和JavaScript文件，您需要一个HTML文档进行操作。打开css-and-js.html并输入以下HTML代码：

每次添加代码到文件中时，请确保保存您的工作。在接下来的两个部分中，我们将介绍您需要在HTML文档中添加什么内容来链接到CSS和JavaScript。 ## [ ](https://dev.to#3-css) 3. CSS 首先，您需要在HTML的body中添加一些样式。在开放的标签的下一行缩进并添加以下代码：

If this text is red, then you successfully linked your CSS file!

现在，这段文本将显示为浏览器默认样式表中定义的根颜色，通常为黑色。为了改变文本的颜色，打开您的styles.css文件并添加以下代码： h1 { color: red; } 本节的最后一步是将CSS文件链接到HTML文档中。在关闭的标签后，输入以下内容： 元素必须放置在文档的部分中。请注意，元素是一个空元素，所以它不需要闭合标签。 rel属性定义资源与HTML文档之间的关系。href属性指向您的CSS文件。 由于文件位于另一个目录中，因此必须通过使用两个点(..)和斜杠(/)指定路径，然后是CSS文件所在的目录(css)，再加上一个斜杠，然后是CSS文件名(styles.css)： href=‘../css/styles.css’。 现在您的HTML文档应该是这个样子：

If this text is red, then you successfully linked your CSS file!

## [ ](https://dev.to#4-javascript) 4. JavaScript 接下来，您需要向JavaScript文件添加一些代码。打开script.js并添加以下代码： alert('You successfully linked your JavaScript file!'); 保存您的工作并返回到HTML文档。最后一步是将JavaScript文件链接到HTML文档中。在部分的

元素后的一行中输入以下内容：

请确保在三个文件中保存您的工作。现在是时候测试链接是否有效了。在您选择的浏览器中打开css-and-js.html文件。当您打开文件时，您应该首先看到一个带有您在JavaScript文件中编写的消息的警告框。点击**确定**后，您在HTML的中输入的文本应该显示为红色。 如果警告框没有出现，或者中的文本不是红色，请返回本教程的步骤，确保一切都与此处所示的内容完全一致。 恭喜！您已成功在HTML文档中链接到CSS和JavaScript文件。