一个学期前我也和楼主差不多不知道这些都是啥,一个学期之后差不多都弄懂了,来讲讲自己的理解吧 > < 因为接触的时间不是很长,有错误的地方欢迎指正~


首先要知道网站访问大概是什么个过程:
假设你在浏览器地址栏输入这个问题的地址
http://www.zhihu.com/question/22689579

访问过程和下图差不多,浏览器和服务器交流,服务器和数据库交流(有时候数据库就在服务器那台机子上)


HTML 与 CSS

你家电脑拿到一个 html (就是上图 HTTP 响应的 body 里的内容)之后,就会对它进行解析渲染。HTML 就是一种标记语言。类比一下,大家在论坛上经常会用一些代码来添加富文本内容,举一些栗子:

  • [img]图片地址[/img]

    用来贴图

  • [url]超链接[/url]

    用来贴地址

  • [del]呵呵[/del]

    表示标签里的文字应该被删掉(默认添加删除线效果)

这种论坛代码也是一种标记语言,HTML 的作用就和它差不多。服务器返回给你的html文件里面,写的是一些代码,大概是这样的:

浏览器拿到这些代码之后,分析一下给你渲染好页面显示出来,如果不用css,效果是这样的,按照浏览器默认的样式显示出列表、图片、超链接、输入框、按钮等等:

是不是觉得默认样式有点看瞎狗眼呢……所以很多时候我们需要自定义样式,现行通用的规定样式的语言是CSS,我们可以用它写一些定义样式的代码,然后在 html 文件里用一个<link>标签把这些规定样式的 CSS 代码与表达内容语义的 HTML 代码关联起来,然后你就能看到一个符合人类正常审美的页面了:

CSS 代码的格式基本是

属性:值

比如知乎顶上那个蓝色的导航条,它的 CSS 大约是这样的

第一个属性对应的代码翻译成人话,就是它的位置(position)应该是不动(fixed)的,浏览器会兢兢业业地去实现这段代码要求实现的效果, 所以你在页面上翻来翻去顶上那个导航条都会死死地黏在窗口顶部不跟着滚动。

再拿里面的其他几个属性做栗子解释一下就是:

  • left 和 top 为零指明这个导航条要紧贴着窗口的左上角

  • width 和 height 指定这个导航条的宽和高

  • background 指明这个导航条的背景是一种渐变的蓝色

浏览器就会根据这些 CSS 代码,“画”出对应的样式。


浏览器都会帮你实现一些 JS 可以用的工具(函数,对象什么的),你只要写一些 JS 的代码,保存在 xxx.js 里,在 html 文件中用 <script> 关联进来就可以用了,像上图这个效果应该就包括了 

  1. 鼠标悬停到标签上时创建一个新的 <div> 小窗口 

  2. 用 JS 向知乎服务器发送一个请求,得到这个小窗口应该显示的数据,放在这个小窗口里(这就是所谓的AJAX,不用刷新就能与服务器进行交互,更新页面的一小部分~)

浏览器拿到这样的代码,就会解析并实现出相应的效果,楼主问的浏览器脚本,指的就是这样子的代码。其实用来写浏览器脚本的,也不是非得JavaScript 不可,当年还为到底用什么语言写这种代码有过一段战火纷飞的时期,但现在尘埃落定,各大浏览器都默认了:请用 JS 写这些动态效果的代码给我解析~


以上就是前端部分的内容,下面简述一下后端的东西吧> <


Web Server 和 Web Services

浏览器给服务器发一个请求,服务器不是一看就知道怎么响应的。首先这些请求和响应要有一个通用的写法,也就是要有一个协议,常用的是 HTTP 协议。
像最前面的图,服务器的响应写了一个状态码 200 OK ,是 HTTP 协议里约定俗成的一个东西,服务器写 200 OK 在响应里,表示“你请求的这个东西我有”,如果是404 Not Found,就是“你请求的这个东西我这里没有”。


HTTP 响应里还包括很多东西,比如 Content-type 表示服务器发过来的文件类型是什么(文本?动画?图片?音频?),这样发过去了人家浏览器好知道怎么展示给用户看。人家服务器怎么知道按协议要写什么东西进去呢,这就是 Web Server 干活的时候了。

形象化一下HTTP响应,大概就长这样:

再上个锤子,浏览器和服务器之间请求响应的过程大致是长这样的,右下角的那些东西就是由 Web Server 生成的(服务器脚本可以做一些改动,但这些一般是 Web Server 的份内活):







觉得本文对你有帮助?请分享给更多人

关注「网页设计自学平台」快速提升技能


福利!免费领取腾讯高级讲师网页设计教程

点我领取


来源:知乎


每天学一点·小白快速进阶大神

设计|DW教程|AE教程|前端资讯

微信ID:WEB_wysj

▲长按二维码关注







相关问题推荐