首页 > 技术文章 > 【Tomcat】发布静态html网站

gaigaichen 2016-09-04 23:58 原文

1.启动tomcat那些准备就不说了。

2.在tomcat的webapps目录下创建firstDemo文件夹,在其下面建css和js文件夹,还有建index.html  css下创建一个css,js下建两个js分别为first.js和jquery.min.js

3.first.js下放如下:

1         $(document).ready(function(){
2           $("button").click(function(){
3                 $("#testDiv").hide();
4           });
5         });

jquery.min.js放这个网站上面的代码:http://libs.baidu.com/jquery/2.0.0/jquery.min.js

index.html写入:

 1 <!DOCTYPE html>
 2 <html>
 3 <head> 
 4     <meta charset="utf-8" /> 
 5     <title>静态html页面(runoob.com)</title> 
 6       <script src="js/jquery.min.js"></script> 
 7       <script src="js/first.js></script>“
 8 </head> 
 9 <body> 
10       <div id="testDiv">这是一个标题</div> 
11       <button>点我<button>  
12 </body>
13 </html>

此三个文件都是用记事本建立,再改后缀。打开是用Notepad++

4.运行index.html  出来界面如下:

出错了,无法加载,右键该页面单击检查:

认真回去查看index,发现这里的第二行最后引号用错,

重新运行index,

怎么有两个按钮,再修改,最后,出来如下界面

5.打开该静态网页的三种方式:

(1)双击html,上面已有,不赘述。

(2)访问http://127.0.0.1:8080/firstDemo/index.html

(3)访问http://169.254.248.224:8080/firstDemo/index.html  其中169.254.248.224为本机的IP地址,查找方法可以看上一篇【开始运行快捷键】的小技巧

6.总结:

1).细心注意符号的完整性,格式规范,”位置要放对;<button>和</button>是成对出现的,以表示按钮定义结束。  

2).在网页可以右键查看网页源代码、检查,方便读取、修改。  

3)文件的作用:html是页面,js(javascript)是行为代码,css是样式和布局,美化效果。

 

推荐阅读