链接：

来源：知乎

---

HTML 与 CSS

你家电脑拿到一个 html （就是上图 HTTP 响应的 body 里的内容）之后，就会对它进行解析渲染。服务器返回给你的html文件里面，写的是一些代码，大概是这样的：浏览器拿到这些代码之后，分析一下给你渲染好页面显示出来，如果不用css，效果是这样的，按照浏览器默认的样式显示出列表、图片、超链接、输入框、按钮等等：所以很多时候我们需要自定义样式，现行通用的规定样式的语言是CSS，我们可以用它写一些定义样式的代码，然后在 html 文件里用一个<link>标签把这些规定样式的 CSS 代码与表达内容语义的 HTML 代码关联起来，然后你就能看到一个符合人类正常审美的页面了:CSS 代码的格式基本是 属性:值比如知乎顶上那个蓝色的导航条，它的 CSS 大约是这样的第一个属性对应的代码翻译成人话，就是它的位置（position）应该是不动（fixed）的，浏览器会兢兢业业地去实现这段代码要求实现的效果，所以你在页面上翻来翻去顶上那个导航条都会死死地黏在窗口顶部不跟着滚动。再拿里面的其他几个属性做栗子解释一下就是：left 和 top 为零指明这个导航条要紧贴着窗口的左上角。width 和 height 指定这个导航条的宽和高。background 指明这个导航条的背景是一种渐变的蓝色。浏览器就会根据这些 CSS 代码，“画”出对应的样式。

---

HTML 5

有些浏览器支持一些标签，有一些又不支持，以及其他混乱的情况，为了防止大家鸡同鸭讲，我们需要对 HTML 代码里能有什么标签，标签怎么写，标签可以有什么属性这些东西有一定的共识，建立一个通行的标准，HTML5 就是其中一个比较新的标准。这个标准新加了很多可以用的标签和属性，然后各大浏览器也吭哧吭哧按这个标准去实现了很多这些新加的标签和属性，本来前端程序员要写一堆代码去实现的效果，现在浏览器都给你实现好了，只要写两三行，调用一下浏览器给你实现的部分就能搞定。

---

JavaScript 与浏览器脚本

有了表示内容和语义的 HTML，规定样式的 CSS，得到的是一个静态的页面，没什么动画。于是我们有了 Javascript（JS） 来给页面添加一些动态的效果，比如知乎问题的标签，鼠标移上去会弹出一个小窗口，这个就是 JS 实现的效果。浏览器都会帮你实现一些 JS 可以用的工具（函数，对象什么的），你只要写一些 JS 的代码，保存在 xxx.js 里，在 html 文件中用 <script> 关联进来就可以用了，像上图这个效果应该就包括了 鼠标悬停到标签上时创建一个新的 <div> 小窗口 用 JS 向知乎服务器发送一个请求，得到这个小窗口应该显示的数据，放在这个小窗口里（这就是所谓的AJAX，不用刷新就能与服务器进行交互，更新页面的一小部分~）浏览器拿到这样的代码，就会解析并实现出相应的效果，楼主问的浏览器脚本，指的就是这样子的代码。其实用来写浏览器脚本的，也不是非得JavaScript 不可，当年还为到底用什么语言写这种代码有过一段战火纷飞的时期，但现在尘埃落定，各大浏览器都默认了：请用 JS 写这些动态效果的代码给我解析。