HTML -如何导入javascript和css到HTML文件



我是新来的。如何导入css文件和javascript文件,什么是一个好的文件结构,当新的web开发学习?

下面是使用CSS和JS的HTML压缩框:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<link rel="stylesheet" href="linktoyourstylesheet.css">
<script type="text/javascript" src="linktoyourscript.js"></script>
<body>
Main Content Here
</body>
</html>

在我的索引文件的同一层,我有一个资产文件夹,其中包括JS和CSS文件夹。

使用<链接在对于CSS和把它放在HTML的头部标签是首选,这里href有CSS文件的路径和名称:>

<link rel="stylesheet" href="/file.css">

使用<脚本在对于javascript,把它放在body标签的底部是首选的,这里SRC有js文件的路径和名称:>

<script type="text/javascript" src="file.js"></script>

文件结构良好

至于良好的文件结构:包括你的JS和CSS文件在assets/文件夹和/或在他们自己的单独文件夹js/css/。下面是一个例子:

index.html
otherpage.html
assets/
js/
main.js
funcs.js
css/
global.css
darkmode.css

为了更简单,您可以尝试

index.html
otherpage.html
js/
main.js
funcs.js
css/
global.css
darkmode.css

index.html
otherpage.html
assets/
main.js
funcs.js
global.css
darkmode.css

这完全取决于你,取决于你的项目有多复杂。如果您只有3个文件(HTML、CSS和JS),您可能根本不需要任何文件夹结构。如果你有20个……你应该确保一切都安排妥当。您也可以对图像img/、字体font/和其他东西执行此操作。

包括CSS

要在HTML中包含CSS文件,请在head标记中插入以下内容。

<link rel="stylesheet" href="./assets/css/global.css"/>

还需要注意,您需要将href属性更改为CSS文件的实际文件路径。

包括JavaScript

对于JavaScript,它甚至更简单。将此标签包含在body标签的末尾。

<script src="./assets/js/main.js"></script>

必须同时包含开始和结束标记。同样,将文件路径更改为您的JS文件。

最新更新