关于html：链接到外部样式表和javascript文件


Linking to external stylesheet and javascript file

我正在尝试将HTML主页链接到外部CSS样式表和外部javascript(.js)文件。无论出于什么原因，根据我在HTML文件中列出它们的顺序，只有一个可以工作。我在javascript文件中使用了一个简单的警告框来测试它是否工作，并且它只在javascript文件首先链接时才工作。这是我的工作……(顺便说一下，我也是一个HTML Noob)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8 />
<link rel="stylesheet" href="trinity.css" />
<Script src="churchJavaScript.js">
Trinity Temple
</head>

<body>



    <header id="headerSection">
         Trinity Temple
         &nbsp;&nbsp;And I sent messengers unto them, saying, I am         doing a great work, so that I cannot come down:  </br>
        &nbsp;&nbsp;why should the work cease, whilst I leave it, and come     down to you?  Nehemiah 6:3  
    </header>

<nav id="navSection">
   
<ul>

       
<li>
Home
</li>

       
<li>
Service Information
</li>

       
<li>
About Us
</li>

       
<li>
Directory
</li>

       
<li>
Contact Us
</li>

   
</ul>

</nav>

<section id="sectionSection">
     Welcome to Trinity Temple Church of God In Christ! </br>
    <hr width = 75% size="1" color="#b20000" />
    testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br>
    testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br>
    testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br>
    testing tolaslksdflksdflksdflkslksadfsadfsdafsdadslkjdslksfdlkdslkdslk</br>
    testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br>
    testing tolaslksdflksdflksdflkslkdslkddddddjdslksfdlkdslkdslk</br>
    testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br>
</section>


</aside>

<footer id="footerSection">
    2900 Josephine St. </br>
    Denver, CO 80207
</footer>


</body>
</html>

这是外部文件中的javascript代码…

1
2
3
4
5
6
7
8
9
10
11
12
13
window.addEventListener("load", todaysDate, false);
function todaysDate(){
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();

var completeDate = document.getElementById("footerSection");
footerSection.innerHMTL ="Today's Date:" +completeDate;
alert(month +"/" + day +"/" + year);

}
window.addEventListener("load", todaysDate, false);

另外，这里是服务信息HTML文档中的代码…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!doctype html>

<html >
<head lang="en">
<meta charset="utf-8"/>
<script src="churchJavaScript.js">
<link rel="stylesheet" href="trinity.css"/>
 Service Information
</head>

<body>


<header id="headerSection">

     Trinity Temple
     &nbsp;&nbsp;And I sent messengers unto them, saying, I am doing a     great work, so that I cannot come down:  </br>
    &nbsp;&nbsp;why should the work cease, whilst I leave it, and come down to      you?  Nehemiah 6:3  
</header>

<nav id="navSection">

<ul>


   
<li>
Home
</li>

   
<li>
Service Information
</li>

   
<li>
About Us
</li>

   
<li>
Directory
</li>

   
<li>
Contact Us
</li>


</ul>

</nav>

<section id="sectionSection">
 Service Information </br>
<hr width = 75% size="1" color="#b20000" />
Sunday</br>
Sunday School: Sunday 9am - 10:30am </br>
Sunday Service: Sunday 10:30 - 1:00pm</br>
</br>
Wednesday</br>
Bible Study: 6:30pm - 8:30pm
</br>





</section>


</aside>

<footer id="footerSection">

2900 Josephine St. </br>
Denver, CO 80207
</footer>


</body>
</html>

在您的部分中尝试此操作：

1
2
<script type="text/javascript" src="churchJavaScript.js">
<link href="trinity.css" rel="stylesheet" type="text/css" />

确保trinity.css、churchjavascript.js和HTML文件位于同一文件夹中。

把JS放在CSS之前对桌面网站的性能稍好一点。读一下这里的原因。

相关讨论