产品必懂Web建站技术!.pdfVIP

产品必懂的Web建站技术 ！ 推荐 ：产品经理到底需不需要懂技术 ，懂要懂多少 ？这次小编为您整理 细的的建站技术 ， 让你今后和技术沟通更加顺利。 首先要知道网站访问大概是什么个过程 ： 假设你在浏览器地址栏输入这个问题的地址 ht t p://www.z hihu.co m/quest io n访问过程和下图差不多 HT ML 与 C 你家电脑拿到一个 ht ml （就是上图 HT T P 响应的 body 里的内容 ）之后 ，就会对它进行解析渲染。 HT ML 就是一种标记语言。类比一下 ，大家在论坛上经常会用一些代码来添加富文本内容 ，举一些 栗子 ： [img]图片地址[/img] 用来贴图 [url]超链接[/url] 用来贴地址 [del]呵呵[/del] 表示标签里的文字应该被删掉 （默认添加删除线效果 ） 这种论坛代码也是一种标记语言 ，HT ML 的作用就和它差不多。服务器返回给你的ht ml文件里面 ， 写的是一些代码 ，大概是这样的 ： 浏览器拿到这些代码之后 ，分析一下给你渲染好页面显示出来 ，如果不用css ，效果是这样的 ，按 照浏览器默认的样式显示出列表、图片、超链接、输入框、按钮等等 ： 是不是觉得默认样式有点看瞎狗眼呢……所以很多时候我们需要自定义样式 ，现行通用的规定样式 的语言是C ，我们可以用它写一些定义样式的代码 ，然后在 ht ml 文件里用一个link标签把这些 规定样式的 C 代码与表达内容语义的 HT ML 代码关联起来 ，然后你就能看到一个符合人类正常 审美的页面了: C 代码的格式基本是 第一个属性对应的代码翻译成人话 ，就是它的位置 （posit io n ）应该是不动 （f ixed ）的 ，浏览器会 兢兢业业地去实现这段代码要求实现的效果 ， 所以你在页面上翻来翻去顶上那个导航条都会死死地 黏在窗口顶部不跟着滚动。 再拿里面的其他几个属性做栗子解释一下就是 ： lef t 和 t o p 为零指明这个导航条要紧贴着窗口的左上角 w idt h 和 height 指定这个导航条的宽和高 backgro und 指明这个导航条的背景是一种渐变的蓝色 浏览器就会根据这些 C 代码 ，“画”出对应的样式。 HT ML 5 与 X HT ML 像人的语言一样 ，网络上的网页里的 HT ML 代码也不一定是标准的 ，好比有时候你发音不太标准 ，别人会去猜测你说的到底是什么一样 ，有些时候前端程序猿不小心写错了 HT ML ，浏览器也会试 图猜测他们原来想写的是什么 ，做对应的渲染 ，而猜是要有一个常识做依据的。加上有些浏览器支 持一些标签 ，有一些又不支持 ，以及其他混乱的情况 ，为了防止大家鸡同鸭讲 ，我们需要对 HT ML 代码里能有什么标签 ，标签怎么写 ，标签可以有什么属性这些东西有一定的共识 ，建立一个通行的 标准 ，HT ML5 就是其中一个比较新的标准。这个标准新加了很多可以用的标签和属性 ，然后各大 浏览器也吭哧吭哧按这个标准去实现了很多这些新加的标签和属性 ，本来前端程序员要写一堆代码 去实现的效果 ，现在浏览器都给你实现好了 ，只要写两三行 ，调用一下浏览器给你实现的部分就能 搞定 ，简单愉快 ，所以很多人都在热情地推广这个标准~ （当然新标准也不可能是完美的 ，总会有 一些问题 ，怕跑题这里按下不表~ ） 至于 X HT ML ，就是 HT ML 的近亲 X ML 和 HT ML 自己的杂交品种 ，对语法要求比较严格 ，并且为 了兼容 X ML ，在语法上与 HT ML 有一些不同~ Java cript 与浏览器脚本 有了表示内容和语义的 HT ML ，规定样式的 C ，得到的是一个静态的页面 ，没什么动画 （其实用 C 还是可以有一些动画的 ，不过这个跑题了 ），按 F5 才会刷新数据 ，都 21世纪了 ，这么呆板单 调的网页怎么能展现我大智人种族的创造性口胡 ！于是我们有了 Javascript （J ） 来给页面添加一 些动态的效果 ，比如知乎问题的标签 ，鼠标移上去会弹出一个小窗口 ，这个就是 J 实现的效果啦 。 浏览器都会帮你实现一些 J 可以用的工具 （函数 ，对象什么的 ），你只要写一些 J 的代码 ，保 存在 xxx.js 里 ，在 ht