1.网页是什么?
- 分析官方对网页的解释
- 分析网页是如何运行的
- 分析网页的结构
要弄清楚什么是网页,就要了解网页的结构与网页是如何运行的。
首先问们看看搜狗百科是怎么说的:网页(英语:web page) 是一个适用于万维网和网页浏览器的 文件,它存放在世界某个角落的某一部或一组与互联网相连的 计算机中。它是构成网站的基本元素,是承载各种网站应用的平台。
网页经由 网址(URL) 来识别与访问,当我们在网页浏览器输入网址后,经过一段 复杂而又快速的程序, 网页文件会被传送到用户家的计算机,然后再通过 浏览器解释 网页的内容,再展示给用户。
来自链接 : 搜狗:网页
看看这段~~的文字,有没有想骂街的冲动。
不怕,不怕。我们逐个关键字来分析:
1、网页: 简单的从一个用户来说就是你看到的thing,淘宝网,京东网之类的。
2、文件: 我们都知道文件都是存在于计算机中的,本着眼见为实的原则问们就看一下这些文件都在哪里。
- 在服务器端
这是一个Windows下的tomcat服务器,你所浏览的网页被保存在webapps文件夹内。
- 在浏览器端
浏览器实际就是一个解析器,主要解析从服务器发来的HTTP文件,CSS文件与JS文件。
其实你想的没错,网页就是一些文件。
3、计算机: 计算机顾名思义在服务端就是服务器啦。没见过服务器?不怕,不怕看看吧:
4、网址(URL): 例如人人皆知的
5、复杂而又快速的程序: 对,当网页文件发送过来后,会叫由这些程序来处理,能写这些程序的可都不是一般公司。
6、浏览器解释: 浏览器将接收到的三种文件经过浏览器中的内核解释,渲染成我们所见到的网页。然后展示给用户。、
7、总结成一张图就是:
2.那么网页的结构是什么样的?
如果要了解网页的结构,就必须先了解一下W3C组织。
万维网联盟(World Wide Web Consortium,缩写W3C),又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者是互联网的发明者蒂姆·伯纳斯-李。
由关于网页的几乎所有标准都是由这个联盟做的。根据其标准网页的标准是HTML为基本,CSS文件负责美化,JS负责交互与动作。
这就是一个简单的DOM树,我们的网络资源可以看成树上的每一个苹果,这样组织资源会大大的提高浏览器的解析速度。日常生活中我们的家族关系,就可以通过这样一张图清晰的展现出来。
HTML使用标签把资源夹在中间,标签夹标签就形成了一个树的结构。CSS通过寻找树中的每个节点找到所需渲染的元素,JS也是通过这样找到每一个资源然后进行动态交互。
//简单的网页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页结构</title>
<style type="text/css">
/*中间写CSS代码*/
h2 {
color: red ;/*设置<h2>标签中的内容为红色*/
}
</style>
<script type="text/javascript">
/*中间写JS代码*/
var a = document.getElementById('aa');
a.innerText = '猫扑的网站';
</script>
</head>
<body>
<div>
<h2 id="aa">京东</h2>
<ul>
<li><a href="#">手机</a> <a href="#">运营商</a> <a href="#">数码</a> </li>
<li><a href="#">电脑</a> <a href="#">办公</a> </li>
<li><a href="#">家居</a> <a href="#">家具</a> <a href="#">家装</a> <a href="#">厨具</a> </li>
<li><a href="#">男装</a> <a href="#">女装</a> <a href="#">童装</a> <a href="#">内衣</a> </li>
<li><a href="#">美妆</a> <a href="#">个护清洁</a> <a href="#">宠物</a> </li>
</ul>
</div>
</body>
</html>
上面的代码是嵌入的,CSS与JS代码还可以另起文件去写。
小结:
- 具体网页是什么也不好说,只能带你了解一下网页运行的过程与网页的结构了。
看完上面的介绍,是不是对网页有了个基础的了解呢。了解网页的运行过程与结构模型就大体对它有啦一些了解。
作者:德志
参考文章:
@Dr icysoul
http://www.cnblogs.com/cnwebdeveloper/articles/2234423.html
@Java3y
https://segmentfault.com/a/1190000013122831