想看懂一个网站，但是发现所涉及到的知识点有点多，一两本书，学了某一方面的语法还是看不懂一个网站，就找一些资料为自己扫扫盲，先了解下各个部分技术的联系，再深入各个部分学习语法，最后去看懂网站。

HTML5

前端人员指责定位
策划:方案->美工:设计图->前端：静态网页->后台：获取数据（替换占位符）
web服务器（后台程序，监听着客户端服务）
- 主要web服务器产品：TOMCAT IIS APACHE（Httpd）存储Web上内容信息，响应浏览器请求，安全功能等
- Apache:软件基金会，最常见的web服务器（商业）：Apache Httpd(可靠性高，速度快)
- 查看系统打开的端口号（一个ip地址的计算机下每个服务对应一个端口号，一台共拥有65535个端口）确定服务是否启动，默认服务器占用80端口号

net start Apache2.2
netstat -and (statistic)

使用浏览器访问httpd服务

http://127.0.0.1（为当前计算机ip）

将网页放到web服务器可识别的路径

htdocs

默认首页:index.html

服务器端技术与客户端技术
服务器端技术（运行在服务器上）：JSP,PHP,ASPX
客户端技术（运行在浏览器上）：HTML,CSS,JS,SWF

CSS

定位
撰稿人——负责内容(content)
排版人——负责表现(presentation)
样式：字体、前景色、背景色、背景图、间距、边框
HTML4.0将内容和表现混杂在一起，因此XHTML1.0废除了很多标签和属性，使用css来描述页面样式
过渡板：使用严格的xml语法，允许使用废弃的样式相关标签和属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
（定义了具体规则）

Cascade Style Sheet 级联样式单（单独写的纸，单子）
内联样式（inline)(只对当前元素有效)

 <div style=""></div>

内部样式（inner）(对当前页面)

<head><style type="text/css"> </style></head>

外部样式（outer）:创建一个独立的css文件*（对所有引用它的页面都有效，可用于控制全站的风格）

<head>
      <link ref="stylesheet" type="text/css" href="x.css"/>
</head>

css样式优先级
！important>内联样式>内部/外部样式>浏览器预定义样式

javascript

前端三大基础知识
- HTML:专门编写网页内容
- CSS:专门设计网页样式
- javascripy:专门设计网页交互
javascript
- 专门设计网页交互的语言
- 运行在javascript解释器中
- ”解释“执行
- 互联网第一大语言
标准
W3C：专门制定通信标准
- 核心ECMAScript:JavaScript核心语法
- 文档对象模型DOM(Document Object Model)标准：专门操作 HTML元素，CSS样式，事件的统一标准（一套代码，多个浏览器）
- 浏览器对象模型BOM(Browser Object Model)：专门操作浏览器窗口的工具（没标准，由浏览器厂商自行实现）
  JavaScript=ECMAScript+DOM+BOM
典型用途
- 客户端数据计算（在浏览器中进行，不用发给服务器）
- 客户端表单验证
- 动画
如何使用
- 使用浏览器自带的js解释器：（区分大小写）
  F12->控制台（shift+回车=换行）
- 单独安装专门解释器软件：node.js （Chrome V8引擎做的）
  win+r->cmd->node
  退出：两次ctrl+c
  执行：1）cd到.js文件所在路径
  2）node 文件名
  .js专门保存js脚本文件
- 随网页一同运行
  浏览器包含两种工具：
  排版引擎：专门加载HTML内容和CSS样式
  解释引擎：专门运行js脚本

   <script>
     script 脚本块（js语法）
   </script>

一次定义处处使用，一次修改处处生效
解决：凡是看到重复使用的代码块，都要封装成一个方法
方法：执行一个专门功能的一组代码的序列

//定义在<head>下的<script>中
<head>
    <meta charest="utf-8">
    <script>
         function cook()
        {
        }
    </script>
</head>

使用

<button onclick="cook()">
alert
</button>

<script src="1_index.js"></script> (属性带了src，内部代码自动失效)

注释（注释也占网页流量，生产环境必须去掉）

HTML:<!---->
CSS:/* */
JS:// 单行  /*多行注释*/

语句，脚本块，程序
- 语句：让程序可以做一件事的一行命令
- 脚本块：多行语句的序列
- 程序：让计算机模拟人类的想法

dom 编程

DHTML
DHTML=HTML+CSS+JavaScript
DHTML就是将已经存在的三项技术整合起来进行组合应用，使JavaScript来“增删改查“HTML元素和CSS样式，最终使得页面呈现一个更友好的交互效果
DHTML对象
- BOM（用来访问和操纵浏览器窗口）：window,history,location,document,screen,event,navigator
  用于javascript脚本与浏览器进行交互
- DOM（用来操作文档）:
  HTML页面中的每个元素都被JavaScript理解为一个DOM对象
  用于javascript脚本与当前显示HTML文档进行交互
  *DOM概述
  文档中所有节点组成了一个文档树（或节点树），document对象是一棵文档树的根
例子

<script>
    var node0=document;
    var node1=document.firstchild;
</script>

服务器开发

HTML/CSS/JS/Flash/AS3/GIF/JPG存储于服务器，供客户端申请下载，但服务器看来这些数据只是普通的字符、字节文件而已有些服务器自己没有图形界面，仅仅提供服务

服务器技术：
存储于服务器，供客户端进行请求，但在返回客户端之前，其中代码会在会在服务器端获得执行，执行后的结果是纯的客户端技术（静态）数据，发送给客户端
服务器：网络环境中的高性能计算机
- 静态Web服务器：只能提供静态资源，读取数据发送
- 动态Web服务器：即能提供静态资源，也能提供动态资源，可以对资源进行处理
  有时候会搭两个服务器，一个静态一个动态，静态较快
动态服务器技术
JSP/PHP/ASPX,ASP.NET
PHP
- 服务器端搭建PHP运行环境（Personal Home Page->Hypertext Preprocess）
- 特点：开源，简单，跨平台，占用资源少，适合中小型应用，学习可以使用官方手册（LAMP架构Linux+Apache+MySQL+PHP）
- PHP解释器一般嵌入在某种WEB服务器中（Httpd,IIS）
- 搭建PHP服务器环境：
  1）下载安装一款静态Web服务器，如HTTPD,IIS
  2) 下载安装PHP引擎
  3）在静态服务器配置，声明PHP引擎的存在
  注：上述三步可以使用PHP服务器套件完成（例如XMPP）
  例：

//由客户端（浏览器）执行
<script>
    for (var i=0;i<50;i++){
    document.write('*');
    document.write('<hr/>');
    }
</script>

//通过.PHP启动PHP引擎(提示需要服务器端调用动态资源)，服务器端执行完后直接将结果给客户端
<?php
    for($i=0; $i<50;i++){
    echo '*';
    }
    echo '<hr/>';
?>

JSP
- java分为三个版本
  JavaME MicroEdirtion 用于嵌入式应用（已经没有了，原来塞班可以运行java小游戏）
  JavaSE StandardEdition 用于桌面应用（word,qq）
  JavaEE EnterpriseEdition 用于企业级应用
- 特点：跨平台、功能丰富、开发社区和第三方框架/插件繁多，适合中大型企业级应用（开发周期长，经费多，团队型）搭建平台复杂
  (Linux+Tomcat+MySQL+Java 免费)
  (Unix+Websphere+Orcle/DB2+java 收费，提供技术支持)
- 服务器端搭建JSP运行环境
  1)下载并安装JDK(JavaDevelopmentKit)(Java版本就是JDK版本)=编译器+虚拟机+类库
  2)配置操作系统的环境变量PATH（需要运行可执行程序）
  3)加载并安装一款JSP服务器，如Apache Tomcat,JBoss,Websphere,Weblogic
  4)启动JSP服务器即可，在特定的目录下放置jsp网页
- 例JSP动态网页
  tomcat不能直接放在根目录下，JSP网页保存在TOMCAT_HOME/webapps

//主体仍然是HTML标签
<%@ page language="java" contentType="text/html" pageEncoding="UTF-8" %>//JSP加入简单声明
<% 
out.print("hello"); //类似console.log()向客户端输出
%>//动态代码

c#
c#语言的编译和运行需要.NET Framework（先编译成虚拟机即.net框架中的中间件，再在cpu运行）来完成，限于微软的战略，目前只能运行于windos系统（中大型一般不用windos），最纯的面向对象的语言，可用于企业级应用、桌面应用、Web应用
- 服务器端搭建ASP.NET运行环境
  1)启用操作系统中的IIS Web 服务器（windos自带）
  2)安装.NET Framework——c#语言编译和运行环境
  3）启动IIS服务器（外围网发布服务），编写的网页默认放在C:\inetpub\wwwroot下（保证80端口未被占用）
  4）网站->新添网站
- 例：

//另存为.aspx（本质是HTML网页）
<%@ page language="C#" contentType="text/html" pageEncoding="gbk" %>//JSP加入简单声明
<% 
Response.Write("8888"); //嵌入的C#语法的语句
%>//动态代码

Jquery

对javascript进行进一步的封装（js库）
可以模拟Jquery的常用操作，对自己的JS库进行封装
Jquery
- 选择器的封装（选取希望应用效果的元素）
- 操作方法（对属性或者样式或者其他进行操作）
- 动画（简单动画，复杂得自己写，利用现有库）
Jquery插件
为提高效率，使用现有插件进行调用（例如ztree树形插件，zqgreed操作表格）

ajax

提升用户体验（打开网站速度，重复填写注册信息）
Asynchronous JavaScript and Xml (异步的JavaScript和Xml)
- 同步：做多件事只能一件一件做（要么与客户端交互要么与服务器交互，服务器返回完整html页面代码）
  *异步：同一时间段可以做多件事情，服务器返回部分数据，而不是一个完整的页面（html代码），以页面无刷新的效果更改页面中的局部内容
- 实质是使用异步地Javascript对象XMLHttpRequest对象异步地向服务器发送请求
- 例如验证用户名是否存在，如果同步，服务器返回完整页面，若用户名已存在，之前填的其他信息也都失效，需要重新填写
- 回调函数（事件处理函数）判断响应的信息处于什么状态，放到什么函数处理(用的也是XMLHttpReques)
适用对象,判断用户使用的浏览器类型编写代码调用XMLHttpRequest
- IE 5及以下不支持XMLHttpReques
- IE 5.5 ,6：ActiveXObject(“Microsoft.XMLHttp”)
- IE7,8,9..Chrome,FireFox: new XMLHttpRequest()

if(window.XMLHttpRequest){
//该浏览器支持XMLHttpRequest可以直接new XMLHttpRequest()
}else{
//创建ActiveXObject("Microsoft.XMLHttp") 
}

Bootstrap

框架：开发过程中的半成品（例如考试时候在填空题里填答案即可），程序中重复工作可省去，提高开发效率
IDE:可视化集成集成开发环境(测试集成运行一体)，不同公司不同行业
GIT:分布式（多服务器，客户端借助一台服务器做交换，但服务器是谁无所谓）版本控制工具（集中式管理：cvs,svn,vss），防止所写代码丢失，通过服务器集中管理
推荐:Editplus,Aptana,WebMetric
常见：Dreamweaver,WebStorm,MyEclipse,Visual Studio
编码格式： ISO-8859-1,utf-8
Bootstrap（Github热门开源项目）
简洁直观强悍的前端开发框架，所有主流浏览器都支持Bootstrap（好的帮助文档Bootstrap3中文文档（v3.3.4））,移动设备优先，由动态CSS语言Less写成
HTML+CSS+JS脚本，搭好组件，插件可以调用，也可以定制
需要先加载完Jquery
使用
- 解压bootstrap到根目录（css,font,js）(预编译版本，已编译好执行速度较快)
- 加入语句调用

 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 <link rel="stylesheet" href="styles/site.css">//若与用户自定义样式冲突或重复定义则由下面覆盖

Doraengineer’s blog说明

【知识图谱】技术小白看懂网站第一步[前端]