首页 >web前端 >css教程 >如何建立基本的 Html、css 和 javaScript 项目

如何建立基本的 Html、css 和 javaScript 项目

DDD
DDD原创
2024-12-07 15:41:11411浏览

本教程适合那些想要开门见山、只设置一个项目并开始编码的人。

为 Html、CSS 和 Javascript 文件创建一个文件夹。

How to set up a basic Html, css and javaScript project

在刚刚创建的文件夹中创建文件

How to set up a basic Html, css and javaScript project
虽然文件的外观可能因电脑而异,但请确保文件描述与上图相同。

将 Css 和 JavaScript 文件链接到 Html 文件

在链接文件时,记下每个文件在文件夹中的位置至关重要。在我们的例子中,文件都位于同一级别,这将使链接直接进行。

html 文件的内容应如下所示
`

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
      </head>
      <body>

     </body>
 </html>

`

我们将使用 2 个不同的标签来链接 css 和 js 文件,因为它们需要不同类型的标签来链接它们。
我们使用标签来链接 css 文件。然后我们使用 rel 和 href 属性来指示链接标签内容与页面的关系以及 css 文件所在的位置。它看起来像这样。


ink 标签应放在 head 标签之间。

对于 javascript 文件,我们使用 script 标签并在 src 属性中传递 javascript 文件的位置。看起来像这样。

<脚本 src="index.js" >

请注意,脚本标签可以放置在 head 标签和 body 标签内,但是出于性能目的,建议将 script 标签放置在 body 标签的底部,这样它最后被解析。它也可以放置在 head 中带有

的标签 添加“异步”或“延迟”属性以复制类似的加载行为。

如果您按照上面的说明进行操作,则 html 文件的内容应如下所示。
`

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
         <link rel="stylesheet" href="index.css" />
      </head>
      <body>
         <script src="index.js" ></script>
     </body>
 </html>

`

现在你已经有了一个非常基本的 Html、CSS 和 javascript 设置。如果您有任何疑问或遇到困难,请在评论部分留下您的问题,我会回复。

以上是如何建立基本的 Html、css 和 javaScript 项目的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn