HTML,CSS,JAVA Script,Servlet四种文件的关系
由于博主本身在学习辅修专业的Java web，课堂的讲述太过于笼统以及社区里并没有专门简单讲述制作一个简单的交互式网页所需要的知识及知识之间的联系，我在教材与社区之中学习整理几天后，总结出了当下学习者更为需要了解到的关键知识之间的联系，希望给仍在困惑的学者解决一些实际的问题。
**
1. HTML是什么？
**
HTML是Hyper Text Markup Language，即超文本语言。
这里我们可以简单的把HTML与浏览器的关系和JAVA与eclipse的关系做对比。
也就是说你用记事本或者其他开发网页的专业软件写好的HTML文件在浏览器中打开，和你使用JAVA语言在eclipse中写好的Java文件在eclipse中运行是一个道理。
也可理解成HTML文件的运行软件是浏览器。与JAVA文件的运行类似，你写好的HTML文件在浏览器中运行的时候是本地文件的读取，而不是可以通过互联网访问到的网站。
例如我现在建好了一个HTML的文件：
此时我使用Edge（或者也可以选用其他浏览器，只需改变它的打开方式即可）打开它后我们可以在网页的地址栏发现这样的地址。
这里的*（！）文件*指的就是现在我们所打开的只是一个本地的HTML文件，并没有对接到互联网当中成为一个网站。
2. HTML能做什么？
在HTML文件里所有关于网页的设计都可以写进去，例如<!DOCTYPE>的作用：
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional1//EN""http://www.w3.org/TR/html4/loose.dtd">
<!-- <!DOCTYPE>该标记规定了当前文档的HTML的版本和类型-->
此外还有各种标记的使用，这些标记的使用格式，每位学者手里都会有相关的学习资料，本文不再过多讲述。
3. CSS是什么？
什么是CSS？？？
内嵌式和外嵌式的区别又在哪里？？？
CSS又为什么是HTML不可分割的一部分？？？
CSS是如何在HTML中发挥应有的作用的？？？
这些问题都曾令我苦恼，接下来我将详细解决这些疑惑，希望可以抛砖引玉，帮助读者激发自己的思考，更好地学习理解。
（以下内容并不精准，包含有笔者一定程度的猜测）
3.1. CSS的诞生
早期的HTML开发，工程师们只是在记事本中编写HTML文件，体量小，需要哪行文本或者哪个组件定义成需要的模式只需要精准把控，例如：
控制一行文本的字体格式，字体大小，字体颜色，精准控制该行文本即可
<!DOCTYPE>
<html>
<head>
</head>
<body>
我是默认样式的文本<br />
<font face="微软雅黑" size="7" color="green"><br />
我是7号绿色文本，我的字体是微软雅黑哦</font>
</body>
</html>
随着技术水平的进步，人们的需求不断上升，工程师们设计的网页越来越复杂，几乎每一行代码都需要加入精准控制来满足用户的个性化要求，问题是促进发展的第一生产力。
工程师按照其他编程语言把一些常用函数打包成一个类的方式，研发出了CSS文件，这个文件里专门储存一些设置好的格式。
@charset "UTF-8";
.zt{
face="微软雅黑" ；
size="7" ；
color="green"；
}
.green{
color:green;
}
在使用的时候只需这样（下边的代码不可运行，只是讲解对应的关系，可运行代码会在3.2.内嵌式和外嵌式的出现小节中给出）
<!DOCTYPE>
<html>
<head>
</head>
<body>
我是默认样式的文本<br />
<font class="zt"><br />
我是7号绿色文本，我的字体是微软雅黑哦</font>
</body>
</html>
就可以达到减少HTML文件体量，或许这样还不够让读者理解CSS的伟大，那么我们假设上方关于.zt定义的相关代码多达百行，那么CSS的存在就显得尤为重要了。
3.2. 内嵌式和外嵌式的出现
内嵌式，也就是在HTML中实现设计格式与控件的分离
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.zt{
face="微软雅黑" ；
size="7" ；
color="green"；
}
</style>
</head>
<body>
我是默认样式的文本<br />
<font class="zt"><br />
我是7号绿色文本，我的字体是微软雅黑哦</font>
</body>
</html>
可以看到，这里是明显的设计格式和控件分离，这样的方式只能在代码体量不断增大的前期过程中减少工程师的开发难度。
而外嵌式，则是将设计格式独立出来形成一个专门的文件，取名为CSS文件。例如：
Style.css文件：
@charset "UTF-8";
.zt{
face="微软雅黑" ；
size="7" ；
color="green"；
}
Demo.html文件：
<!DOCTYPE>
<html>
<head>
<link href="Style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
我是默认样式的文本<br />
<font class="zt"><br />
我是7号绿色文本，我的字体是微软雅黑哦</font>
</body>
</html>
读者验证代码时需要将上述两个文件放在一个文件夹中，否则应在Demo.html中<link href="Style.css" type="text/css" rel="stylesheet"/>修改href=“”（引号中写入CSS文件的地址）。
相信读到这里，读者以经可以很好的理解CSS文件的作用和大概发展历程。
4.Java Script是什么？
前言：
通过上边的学习，相信大家已经可以设计出很不错的网页了，设计一个仅供浏览的网页，是不需要用到Java Script文件。
4.1.什么时候产生的Java Script？
现在大家的生活中充满着各种各样的会员，会员带给我们便利的同时也会给我们带来很多困扰。今天笔者将从会员产生到对网页设计的影响为大家讲述Java Script的产生。
世界上第一个会员被注册以后，这种可以享受“优质服务”的会员制，瞬间席卷全世界各个行业，而网页设计的工程师也是其中很苦恼的一群人。
网页设计工程师被要求设计注册网页，然而并不是所有人都会按要求填写注册信息，例如：有些人有恶趣味，就喜欢在姓名栏输入一些奇怪的名字，像：尼古拉斯·安德烈·阿基米德66；再比如有人往电话栏写入自己的邮箱等等。
这给本来就痛苦的工程师增加了更多的麻烦，工程师们不得不在每个文本框都加入各种限制。
大量的限制代码增大了开发难度，与CSS的诞生类似。Java Script应运而生，发展至今，它的功能以及有了较为完善的定义：定义函数以达到对表单的校验。
注：Java Script在某些专业软件中可能以及被淘汰或者整合成为了JSP和Servlet的一部分，笔者学识浅薄，没有大规模的去尝试各种专业软件，不敢确定上述观点的正确性。
4.2.Java Script的应用
这里很是抱歉，笔者确实没有尝试设计Java Script的相关设计，只能由读者自行尝试。
Java Script文件与CSS文件有着极为相似的使用方法。
5.Servlet是什么？
前面我们提到，注册页面的设计，但是用户在注册页面填写完毕后，点击提交，所填信息就会传输到另一个存放信息的地方，这个地方可以是一个新的网址也可以是一个数据库。而Servlet就是用来实现把信息输送到另一个地方的过程的文件。这个过程是动态的，它的执行取决于用户是否点击了“提交”按钮。
5.1.Servlet的基本认识
我们需要知道在某个网页提交你填写的信息有两种提交方式。
1.GET式提交，你写的所有信息都将在网页地址栏显示，如下：
现在我在这个百度中搜索“李白”，“百度一下”后的网址为：
我们放大关键部分，如下：
可以明显看到“李白”这个关键词，这就是GET式提交方式，会显示在网址栏中。
我们可以做一个简单的测试：我把网址栏中的“李白”改成“白居易”
然后进入网址
可以发现我的搜索栏也变成了“白居易”，就是这么一个简单的操作，将GET式提交方法的优缺点完美展示了出来。
2.POST式提交，你写入的信息将会被打包，做到了信息的保密，然后全部提交到你在Servlet文件中指定的一个地方（另一个网址或者一个数据库）
这里笔者将使用自己制作的一个网址展示POST提交方式（文末会附上整个工程的压缩包）
此时我们点击提交，POST方式提交信息会跳转到笔者设置好的JSP文件中（JSP文件在该项目中仅仅起到存储提交信息的作用）
相比较之下POST提交方式更能保护用户的个人信息
**
5.2.GET和POST提交方式在Servlet文件的写法
**
我们放大关键部分
由于笔者并未使用GET方法所以这里仅有POST方法，也就是说如果采用GET方式提交信息，需要重写doGet方法；用POST方式提交信息，需要重写doPost方法。
具体的重写方法社区里已经有更好的文章，本文不再赘述。
6.总结
在讲述了HTML,CSS,JAVA Script,Servlet四种文件的关系后，这时再有一定的设计尝试，相信学者一定可以成功做出让自己满意的网页了。
最后希望本文的内容可以帮助学者入门网页设计的领域。
感谢你的观看！
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
