Web 建站技术网上资料收集

HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Service

一个普通网站访问的过程
简单概括一下，对于我们普通的网站访问，涉及到的技术就是：

1. 用户操作浏览器访问，浏览器向服务器发出一个 HTTP 请求；
2. 服务器接收到 HTTP 请求，Web Server 进行相应的初步处理，使用服务器脚本生成页面；
3. 服务器脚本（利用Web Framework）调用本地和客户端传来的数据，生成页面；
4. Web Server 将生成的页面作为 HTTP 响应的 body，根据不同的处理结果生成 HTTP header，发回给客户端；
5. 客户端（浏览器）接收到 HTTP 响应，通常第一个请求得到的 HTTP 响应的 body 里是 HTML 代码，于是对 HTML 代码开始解析；
6. 解析过程中遇到引用的服务器上的资源（额外的 CSS、JS代码，图片、音视频，附件等），再向 Web Server 发送请求，Web Server 找到对应的文件，发送回来；
7. 浏览器解析 HTML 包含的内容，用得到的 CSS 代码进行外观上的进一步渲染，JS 代码也可能会对外观进行一定的处理；
8. 用户与页面交互（点击，悬停等等）时，JS 代码对此作出一定的反应，添加特效与动画；
9. 交互的过程中可能需要向服务器索取或提交额外的数据（局部的刷新，类似微博的新消息通知），一般不是跳转就是通过 JS 代码（响应某个动作或者定时）向 Web Server 发送请求，Web Server 再用服务器脚本进行处理（生成资源or写入数据之类的），把资源返回给客户端，客户端用得到的资源来实现动态效果或其他改变。

注意这只是小网站里比较常见的模型，大网站为了解决规模问题还会有很多处理，

每个环节都会有一些细微的差异，中间还会使用各种各样的工具减轻服务器的压力，提高效率，方便日常维护

几种常见的架构包括：

• LAMP = Linux + Apache + MySQL + PHP（P还可能是Python或Perl。有时候L会改成W=Windows。），也就是服务器上的操作系统是 Linux，Web Server 用 Apache，数据库用 MySQL，服务器脚本用 PHP，这些都是开源技术，网站起步时用起来的成本会比较低，所以是普通网站里非常常见的架构（虽然对于发展得很大的网站会遇到很多瓶颈），Facebook就是这种，淘宝也曾经是。
• J2EE，Java 世界的架构，通常是企业用的（银行、大型公司,.etc），比较常见地还会搭配一种 UNIX 做操作系统，Apache 做 Web Server，Tomcat 转换 JSP 到 Java 给服务器程序用（其实它也自带 Web Server），Oracle 数据库等等。不一定拿来建站，常常用来提供企业里的各种需要用到网络的业务。我们学校教务系统就是用J2EE做的=。= 淘宝现在也是从LAMP转型到了这个。
  
• http://ASP.NET，微软家的架构，通常会搭配 Windows Server 操作系统，SQL Server 数据库，IIS 做 Web Server。StackOverflow和京东（曾经）就是这个架构。
• 神奇的MEAN架构，MongoDB做数据库，Express做 Web Framework，Angular 做前端的 JavaScript 框架，Node.js 用于编写 Web Server。神奇之处在于这几个东西的语言都是 JavaScript （MongoDB的实现不是，但与外界沟通用的语言是）。因为是比较新的架构，还有待时间的考验，不过被很多人（尤其是靠 JavaScript 吃饭的前端程序猿们）热切关注。
• 一般来说重点不在技术而且在乎成本的新网站比较喜欢用 LAMP，重视安全稳定和速度的企业和机构喜欢 J2EE，想省事的网站喜欢 http://ASP.NET，比较 Geek 的网站和创业公司喜欢折腾各种 Python、Ruby、Node.js世界的东西，Google 这样现成的技术都解决不了需求的超大型网站就自己折腾解决方案。作者：知乎用
  
• 
  

  1.首先要给这个问题里的一串专业术语分分类。

  
  

  A.按概念的粒度可以分为两类，一类是具体的某一种技术，另外一类是一个笼统的技术概念。一串英文缩写的那些都是一种特定的技术，大部分都是一种具体的编程语言，剩下的Web Service、浏览器脚本、服务器脚本都是一种技术概念。

  
  

  B.按功能分的话种类就比较多了，而且一个分类中的技术可能还会有别的用处，我这里就讲讲常用的功能，看不懂也没关系，后面我再具体地讲。

  HTML、HTML5、XHTML、CSS和浏览器绘制页面有关；SQL跟网站后台数据库有关；JavaScript是一种浏览器脚本语言；PHP，http://ASP.NET都是服务器端编程的技术；Web Service的话，我也不是特别懂，我一般认为这是一种基础平台透明的远程调用技术集；浏览器脚本和服务器脚本分别是在浏览器上运行和在服务器端运行的程序代码。

  2.技术之间的关系。

  
  

  A.用户使用浏览器时接触到的一般就是用HTML描述的页面，当用户执行了点击链接之类的请求操作后，浏览器会生成一个HTTP请求。

  B.服务器端程序在接收到请求之后就会在服务器上跑一段程序，然后根据运行结果生成一个HTML页面发回给浏览器。

  C.然后浏览器就会根据HTML的描述在屏幕上绘制出这个页面。

  3.简单介绍一下这些技术。

• 

  技术之间的组合其实就跟组装电脑时电脑零件的关系一样，主板用什么牌子、显卡用什么型号都是开发者可以自己决定的。

  应用范围的话一般每个技术都有它的设计功能，但实际运用的时候往往会有一些大牛开发出新的用法，所以也不用太拘泥于这个，用得开心就好。

  现在介绍一下具体的技术吧，我也只是三流小菜鸡，介绍仅供参考。

  
  

  HTML、XHTML、HTML5可以看做是一种同类技术的演进吧，随着技术的发展，语言作为技术的容器可能会出现瓶颈，这个时候就要换新的语言来作为技术的容器才能使技术继续发展。这三者的设计目的都是为了能描述出特定的页面，就像是画画的颜料一样。

  
  

  CSS是对HTML描述的辅助，可以让页面描述的建立和修改变得更容易。

  
  

  SQL是一种数据库语言，但一般可以用来暗指网站后台的数据库技术。一般常用的（关系型）数据库管理都和SQL有关。

  
  

  JavaScript一般作为浏览器脚本使用。

  
  

  PHP、http://ASP.NET一般都作为服务器端程序语言使用，开发者就是用这些语言开发出了接受用户请求后在服务器上跑的程序代码。一般服务器端程序的目的都是根据请求生成响应或者执行操作。

  
  

  Web Service主要用于异构系统之间的远程通信等作用。就好像你打电话给微软的技术支持人员，然后你就可以获得帮助，只要他说的是你听得懂的一种语言比如英语那你就不用管接你电话的到底是美国人还是开挂的阿三哥。

  
  

  浏览器脚本是在浏览器上运行的程序，虽然服务器端程序生成了浏览器脚本，但是这些代码只有在浏览器上才会真正地被使用。比如用户滑动鼠标的时候页面自动发生变化。服务器端程序只有在用户发起请求时才能给用户提供服务，就像是一个客户服务电话，而浏览器脚本就好像是你派到用户家里的保姆。

  
  

  服务器端脚本一般是服务器端程序的一部分。

• 8、前端MVC：Angular/Backbone
  
  

  这种模式下，前后端的分工非常清晰，前后端的关键协作点是 Ajax 接口，规定好交互接口后，前后端工程师就可以根据约定，分头开工，开发环境中通过Mock等方式进行测试，同时在特定时间节点进行前后端集成测试。但是，随着业务功能的愈发复杂（看看现在的Gmail），这种模式本质上和JSP时代的Web开发并无本质区别，只不过是将复杂的业务逻辑从JSP文件转移到了JavaScript文件中而已。现在，对于一个前端功能、交互复杂的SPA，JavaScript代码很容易膨胀（超过10万行）。很自然地，像服务端从JSP向MVC框架转换的过程一样，前端开发也出现了大量的MVC框架，比较典型的包括BackboneJS, AngularJS, EmberJS, KnockoutJS。总的来说，MV*框架的提出是为了解决前端开发的复杂度，提供一套规则组织代码、分层（MVC），通过合理的组织和分层，前端的代码职责明确、清晰，便于开发与测试。

• 

• 9、JavaScript在服务器端的逆袭：Node
  
  

  各大浏览器的竞争，使其引擎的性能不断提升，至今Google V8引擎的性能已经足以运行大型Javascript程序。在V8之上加以网络、文件系统等内置模块，形成了如今的Node.
  

前端开发知识结构

• 前端工程师

  • 浏览器
    • IE6/7/8/9/10/11 (Trident)
    • Firefox (Gecko)
    • Chrome/Chromium (Blink)
    • Safari (WebKit)
    • Opera (Blink)
  • 编程语言
    • JavaScript/Node.js
    • CoffeeScript
    • TypeScript
  • 切页面
    • HTML/HTML5
    • CSS/CSS3
    • Sass/LESS/Stylus
    • PhotoShop/Paint.net/Fireworks/GIMP/Sketch
  • 开发工具
    • 编辑器和IDE
      • VIM/Sublime Text2
      • Notepad++/EditPlus
      • WebStorm
      • EmacsEmacsWiki
      • Brackets
      • Atom
      • Lime Text
      • Light Table
      • Codebox
      • TextMate
      • Neovim
      • Komodo IDE / Edit
      • Eclipse
      • Visual Studio
      • NetBeans
      • Cloud9 IDE
      • HBuilder
    • 调试工具
      • Firebug/Firecookie
      • YSlow
      • IEDeveloperToolbar/IETester
      • Fiddler
      • Chrome Dev Tools
      • Dragonfly
      • DebugBar
      • Venkman
    • 版本管理
      • Git/SVN/Mercurial
      • Github/GitLab/Bitbucket/Google Code/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge
  • 代码质量
    • Coding style
      • JSLint/JSHint/jscs
      • CSSLint
      • Markup Validation Service
      • HTML Validators
    • 单元测试
      • QUnit/Jasmine
      • Mocha/Should/Chai/Expect
      • Unit JS
    • 自动化测试
      • WebDriver/Protractor/Karma Runner/Sahi
      • phantomjs
      • SourceLabs/BrowserStack
  • 前端库/框架
    • jQuery/Underscore/Mootools/Prototype.js
    • YUI3/Dojo/ExtJS/KISSY
    • Backbone/KnockoutJS/Emberjs
    • AngularJS
      • Batarang
    • Bootstrap
    • Semantic UI
    • Juice UI
    • Web Atoms
    • Polymer
    • Dhtmlx
    • qooxdoo
    • React
    • Brick
    • Knockout
  • 前端标准/规范
    • HTTP/1.1: RFCs 7230-7235
    • HTTP/2
    • ECMAScript3/5
    • W3C: DOM/BOM/XHTML/XML/JSON/JSONP/...
    • CommonJS Modules/AMD
    • HTML5/CSS3
    • Semantic Web
      • MicroData
      • RDFa
    • Web Accessibility
      • WCAG
      • Role Attribute
      • WAI-ARIA
  • 性能
    • JSPerf
    • YSlow 35 rules
    • PageSpeed
    • HTTPWatch
    • DynaTrace's Ajax
    • 高性能JavaScript
  • SEO
  • 编程知识储备
    • 数据结构
    • OOP/AOP
    • 原型链/作用域链
    • 闭包
    • 编程范型
    • 设计模式
    • Javascript Tips
  • 部署流程
    • 压缩合并
      • YUI Compressor
      • Google Clousure Complier
      • UglifyJS
      • CleanCSS
    • 文档输出
      • JSDoc
      • Dox/Doxmate/Grunt-Doxmate
    • 项目构建工具
      • make/Ant
      • GYP
      • Grunt
      • Gulp
      • Yeoman
      • FIS
      • Mod
  • 代码组织
    • 类库模块化
      • CommonJS/AMD
      • YUI3模块
    • 业务逻辑模块化
      • bower/component
    • 文件加载
      • LABjs
      • SeaJS/Require.js
    • 模块化预处理器
      • Browserify
  • 安全
    • CSRF/XSS
    • CSP
    • Same-origin policy
    • ADsafe/Caja/Sandbox
  • 移动Web
    • HTML5/CSS3
    • 响应式网页设计
    • Zeptojs/iScroll
    • V5/Sencha Touch
    • PhoneGap
    • jQuery Mobile
    • W3C Mobile Web Initiative
    • W3C mobileOK Checker
    • Open Mobile Alliance
  • 前沿技术社区/会议
    • D2/WebRebuild
    • NodeParty/W3CTech/HTML5梦工厂
    • JSConf/沪JS(JSConf.cn)
    • QCon/Velocity/SDCC
    • JSConf/NodeConf
    • CSSConf
    • YDN/YUIConf
    • HybridApp
    • WHATWG
  • 计算机知识储备
    • 编译原理
    • 计算机网络
    • 操作系统
    • 算法原理
    • 软件工程/软件测试原理
    • Unicode
  • 软技能
    • 知识管理/总结分享
    • 沟通技巧/团队协作
    • 需求管理/PM
    • 交互设计/可用性/可访问性知识
  • 可视化
    • SVG/Canvas/VML
    • SVG: D3/Raphaël/Snap.svg/DataV
    • Canvas: CreateJS/KineticJS
    • WebGL/Three.JS

• 后端工程师

  • 编程语言
    • C/C++/Java/PHP/Ruby/Python/...
  • 网页服务器
    • Nginx
    • Apache
    • Lighttpd
  • 数据库
    • SQL
    • MySQL/PostgreSQL/Oracle/DB2
    • MongoDB/CouchDB
  • 数据缓存
    • Redis
    • Memcached
  • 文件缓存/代理
    • Varnish
    • Squid
  • 操作系统
    • Unix/Linux/OS X/Windows
  • 数据结构

前端书籍推荐

★越少越简单,越适合入门,★多的要么是难度比较高,要么是比较适合在后面看,比如讲性能之类的书.

CSS

• Eric Meyer 谈 CSS（卷二）★★★
• CSS权威指南 （第3版）★★
• 精通CSS★★★

JavaScript

• JavaScript DOM编程艺术 （第2版）★
• JavaScript高级程序设计（第3版）★★
• 锋利的jQuery★★
• 高性能JavaScript★★★
• JavaScript语言精粹★★★
• JavaScript权威指南★★★
• 编写可维护的JavaScript★★★
• JAVASCRIPT语言精髓与编程实践★★★
• Effective Javascript★★★
• Secrets of the JavaScript Ninja★★★
• JavaScript模式★★★
• JavaScript设计模式★★★★
• 基于MVC的JavaScript Web富应用开发★★★

性能实践

• Web性能实践日志★★★
• Web性能权威指南★★★

版本控制工具

• 版本控制之道 (git)★★
• Pro Git★★★
• Git权威指南★★★★

后端书籍推荐Linux管理

• Linux 系统管理技术手册
• 鸟哥的 Linux 私房菜
• Linux 101 Hacks
• UNIX Shell Scripting
• The Linux Command Line
• Linux Network Administrator's Guide

Linux编程

• Linux程序设计
• Linux系统编程
• Unix环境高级编程
• Unix编程艺术
• The Linux Programming Interface
• 程序员的自我修养
• 深入理解Linux内核
• Unix网络编程
• TCP/IP高级编程

C/C++

• Linux C编程一站式学习
• C和指针
• C陷阱与缺陷
• C专家编程
• C语言核心技术
• 彻底搞定C指针
• 征服C指针
• C++编程思想
• 高质量程序设计指南---C/C++语言
• Inside the C++ Object Model
• A Tour of C++
• The C++ Programming Language
• The C++ Standard Library - A Tutorial and Reference
• The C++ Standard (INCITS/ISO/IEC 14882-2011)
• Overview of the New C++