如何正确地将CSS和JavaScript添加到HTML文档？

This very well might be a very stupid question.

这很可能是一个非常愚蠢的问题。

I'm trying to add an empty CSS file, an empty JavaScript file and the jQuery library into the most basic of HTML files, as follows:

我正在尝试将空的CSS文件,空的JavaScript文件和jQuery库添加到最基本的HTML文件中,如下所示:

<html>
<head>
  <title>Testing</title>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
  <script src="application.js" />
</head>
<body>
  <h1 class=test>This is a test! Hello, world!</h1>
</body>
</html>

However, it doesn't work. The h1 doesn't display in my browser when the link or any of the scripts are present, but displays normally otherwise.

但是,它不起作用。当链接或任何脚本存在时,h1不会显示在我的浏览器中,但通常会以其他方式显示。

What am I doing wrong here? Why doesn't this work, and how can I make it work?

我在这做错了什么?为什么这不起作用,我怎样才能使它工作?

Thank you very much,

非常感谢你,

Eden.

5 个解决方案

#1

Your <script> tags cannot be self closing. Try changing them to look like <script src="..." type="text/javascript"></script>

您的

#2

two things. script tags should have an end tag.

两件事情。脚本标签应该有一个结束标签。

<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" /></script>
<script type="text/javascript" src="application.js" /></script>

Another thing, see if you are navigating to the right file. Assume that your directory tree is the next

另一件事,看看你是否导航到正确的文件。假设您的目录树是下一个

directory
  |-yourHTMLpage.html
  |-jquery-2.0.3.js
  |-application.js
  \-theme.css

then the next will work

然后下一个将工作

<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
<script type="text/javascript" src="application.js" /></script>
<link rel="stylesheet" type="text/css" href="theme.css">

But in most recent standards, we are using a folder for css and js files, like the next

但是在最近的标准中,我们正在使用css和js文件的文件夹,就像下一个

directory
  |-yourHTMLpage.html
  |-js
     |-jquery-2.0.3.js
     \-application.js
  \-css
     \-theme.css

Then you have to adapt the link,

然后你必须调整链接,

<script language="javascript" type="text/javascript" src="js/jquery-2.0.3.js" />
<script type="text/javascript" src="js/application.js" /></script>
<link rel="stylesheet" type="text/css" href="css/theme.css">

Notice the "js/" addition for javascript files and "css/" addition for css files. HTML will navigate from its directory to the said file. But if the file isn't there as the source element is telling, then the page won't load the said file.

注意javascript文件的“js /”添加和css文件的“css /”添加。 HTML将从其目录导航到所述文件。但是如果文件不存在,因为源元素告诉,那么页面将不会加载所述文件。

#3

Are the css and js files in the same folder as your html ?

css和js文件与html位于同一文件夹中吗?

To see what is wrong, try a developper console to see what requests are sent (Press 'F12' on chrome or install the firebug extension on Firefox). There should be a "Network" tab that shows what files are requested and if your browser does or doesn't find them.

要查看错误,请尝试使用开发人员控制台查看发送的请求(在Chrome上按'F12'或在Firefox上安装firebug扩展)。应该有一个“网络”选项卡,显示请求的文件以及您的浏览器是否找到它们。

#4

Are you sure that the path to the several files is correct? If it is, is the class of the h1 spelled correctly? You should embed the javascript files like this:

您确定几个文件的路径是否正确?如果是,那么h1的类是否拼写正确?你应该嵌入这样的javascript文件:

<script language="javascript" type="text/javascript" src="jquery-2.0.3.js"> </script>
<script language="javascript" type="text/javascript" src="application.js"> </script>

#5

Here is the simple method for include css and javascript file to your page.

这是将css和javascript文件包含到页面的简单方法。

<link rel="stylesheet" type="text/css" href="YOUR FILE PATH">
<script src="YOUR FILE PATH" type="text/javascript"></script>

#1