Web开发入门学习笔记
公司web项目终于要启动了，本以为django学习可以在实战中进行，结果最终使用了Drupal框架，好吧，那我们就PHP走起，买了本《细说PHP》，先跟着过一遍Web开发入门。
HTTP协议
HTTP协议：所有的WWW文件都必须遵守HTTP协议，HTTP是客户端浏览器或者其他程序与Web服务器之间的应用层通信协议。HTTP协议建立在TCP/IP协议，也就是说，是一种可靠的传输协议，意味着两台设备在传输之前必须先建立可靠连接（握手），由客户端发起到服务器端的指定端口（默认为80）HTTP请求，并且服务器上会做出相应的应答，响应该请求。
HTTP协议通过URL（Uniform Resource Locator）统一资源定位符来寻找网页，URL（例如：http://www.brophp.com/book/index.html，广告了...）由六个部分组成：1.http:// 代表超文本传输协议，通常不用输入；2.www 代表访问的是一个Web服务器；3. brophp.com/ 代表装有网页的服务器域名或者站点服务器的名称；4. book/ 代表该服务器上的一个子目录； 5. index.html 代表访问的html文件；6. 端口，如果是默认的80则可以不写
HTTP协议是一个无状态的协议，一次HTTP操作称为一次事务，客户机于服务器之间通过请求和响应完成一次会话。每次会话通信双方发送的数据称为消息。协议的工作过程分为四步：1. 建立客户机于服务器的连接；2. 客户机想服务器发送请求；3. 服务器响应该请求到客户机；4. 断开连接。
HTTP消息分为请求消息和响应消息，两种消息又分别由三个部分组成：
请求消息：由请求行、请求头、请求体组成，
其中，请求行有三个字段：方法字段、URL字段、HTTP版本字段，如：GET /book/index.html HTTP/1.1。请求字段包括GET、POST、HEAD等；URL字段表示请求对象的完整路径；
请求头有很多行组成，表明请求的详细信息，如：
Host:www.brophp.com
Connection:close
User-agent:Mozilla/4.0
Accept-language:zh-cn
各行分别表明：访问服务器地址、不使用持久连接（即服务器发送请求后关闭连接），访问使用的用户代理（浏览器内核型号）、服务器应该优先发送简体中文版本
请求体不是必须的，包含的是用户提交给服务器的表单内容
响应消息：由状态行、响应头、响应体组成，
其中，状态行三个字段：协议版本字段、状态码字段、原因短语字段，如：HTTP/1.1 200 OK。状态码字段有：
200：成功，服务器成功返回网页
301：永久移动，请求的网页已经永久移动到新的位置，服务器自动将请求者转到该位置
304：未修改，自从上次请求后，请求的网页未修改，服务器返回此响应时，不会返回网页内容
400：错误请求，服务器不理解请求的语法
404：未找到，服务器找不到请求的网页
500：服务器内部错误，服务器遇到错误，无法完成请求
502：错误网关，服务器作为网关或者代理，从上游服务器受到无效响应
505：HTTP版本不支持，服务器不支持请求中所使用的HTTP协议版本
响应头和请求头类似，表明响应时的详细信息，如：
Connection:close
Server:Apache/2.2.9(Unix)
Last-Nodified:Mon,22 Jun 2008 09;23;24; GMT
Content-Length:6821
Content-Type:text/html
各行分别表示：不适用持久连接、Web服务器名称以及版本、对象本身的创建或者最后修改的日期或者时间、发送对象的字节数、发送对象的类型。
响应体包含了请求对应的资源、网页等内容。
回顾：Python网络编程
HTML超文本标记语言
HTML是一种超文本标记语言，在纯文本中包含HTML指令代码，通过这些代码对网页进行排版设计。每个HTML都应该包含以下主体标记：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="script/main.js”></script>
<link rel=“stylesheet” href="stype/main.css”/>
</head>
<body>
</body>
</html>
第一个标记表示该文本的格式为html，整个html被一个html标签涵盖，在html中，head标签定义文档的头部，是所有头部元素的容器，如其中的meta标签定义了页面的元信息，charset表明使用的字符集。title标签定义文档的标题，是head标签中唯一必须包含的东西。script标签引用一段客户端脚本。link标签链接一个外部样式表等。在body标签中，是文档的内容主体。
HTML标签总是以起始-内容-闭合组成。
HTML语法不区分大小写。
在标签中可以添加属性，属性总是以名称=值的形式在标签中出现，每个属性都是可选的，各属性之间没有先后顺序。
HTML字符实体：有一些字符在HTML中拥有特殊含义，若想输入这些字符，需要使用字体编号：
HTML内容主体中，通常包含各种格式标签：
<br >：换行
<p>: 换段落
<center>: 居中对齐
<pre>: 预格式，会保留标签内文字在源代码中的格式
<li>: 列表项目
<ul>：无序列表
<ol>：有序列表
<hr>：水平分割线
在HTML中，可以使用各种文本风格标签来展示不同类型的文本，更多标签内容，可以查看w3cschool
HTML表格：
1. table标签，用于定义一个表格，以及表格边框是否可见（frame、rules）、表格边框宽度（border）、表格宽度（width）、表格高度（height）等属性
2. caption标签，用于定义表格的标题
3. tr标签，定义一行标签，其中有多个td、th标签所定义的单元格
4. td、th标签，th标签用于定义表头单元格，会着重显示，td标签用于定义数据标签，包含具体数据内容
HTML表单设计：
1. form标签，用户定义一个表单的开始和结束，其中action属性指定处理程序的程序名称，如login.php，action属性必须指定，如果不需要，也必须定义action=“no”。method属性指定处理程序获取表单内容的方式，可取值有GET和POST。GET方法将表单内容附加在URL地址后面，所以提交信息的长度不能超过8192个字符，并且GET方法不具有保密性，并且不能够传输ASCAII字符。POST方法将用户在表单中填写的数据包含在表单的主体中，一起传送到服务器处理，不会在浏览器的地址栏中显示提交的信息。
2. input标签，定义了一个输入控件，该标记是单个标记，type属性用来指定用户输入的内容，type="text”表示输入一个文本域，type="password"表示输入一个密码域。另外有一些常用的type：submit表示一个提交按钮，reset表示一个重置按钮，button表示一个不同按钮，hidden表示隐藏域，checkbox表示一个复选框，radio表示一个单选按钮，select和option表示一个下拉框，并且option指定selected属性设置默认项，如：
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
3. textarea标签，定义了一个多行文本输入的区域，该区域没有长度限制。
表单实例：从表单发送电子邮件：
<html>
<body>
<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20">
<br />
电邮：<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
内容：<br />
<input type="text" name="comment" value="yourcomment" size="40">
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>
</body>
</html>
CSS层叠样式表
CSS表示Cascading Style Sheets，层叠样式表，CSS定义了网页的外观：字体、背景、文本、位置、布局、边缘、列表等内容，层叠样式表的含义是一组样式层叠使用，按照样式表中的属性依次显示，层叠的次序为范围从小到大，层叠的含义类似于Python中的命名空间，所以CSS会有一些面向对象的表现。通过CSS，可以将内容和样式分离，更好处理网页内容，增加工作效率。
CSS主要由选择器和声明两部分组成，通过一对大括号{}，将声明组织在一起：选择器1,选择器2,选择器n{属性1:值1;属性2:值2;属性n:值n;}
CSS中，fontsize、width、height等属性需要用到长度单位，CSS中的长度单位有：em：大致为一个字符高度；px：一个像素；pt：磅；%：百分比，百分比属性相对于其他属性，以及pc、cm、mm、in等。
CSS中可以使用rgb(x,y,z)来表示颜色，也可以用rgba表示带有透明度的颜色，同时#rrggbb，#rgb等格式都可以表示颜色。
CSS中的选择器包括HTML选择器、类选择器、ID选择器、关联选择器、伪元素等；
HTML选择器指定改变某个HTML标签的样式；
类选择器以.开头，表示元素中class为该类的样式；
id选择器以#开头，表示元素id为该值的样式；
关联选择器是用空格隔开的多个单一选择器字符串，表示一个承接关系，如 .note p 表示note类中的p标签样式，这些选择器往往具有较高的优先权。
伪元素选择器表示一个元素的多个状态的样式，如：
a:link{ color:red;};
a:hover{ color:yellow; font-size: 125%;};
a:active{ color: blue; font-size: 125%;};
a:visited{ color: green; font-size: 85%;};
link表示连接没有任何动作的状态；hover表示鼠标移动时的状态；active表示超链接选中的状态；visited表示访问过的超链接状态；
主要选择器的优先级为：关联选择器 > ID选择器 > 类选择器 > HTML选择器，判断优先级可以从判断范围大小入手，范围越小的，越能够精确界定到某个元素，优先级就越大。
CSS常见属性：字体属性、背景属性、文本属性、列表属性等，详见w3cschool
鼠标光标属性：CSS可以通过cursor属性实现鼠标形状的改变：默认：default、小手：hand、交叉十字：crosshair、文本选择：text、Windows沙漏：wait、带问号的鼠标：help以及各个方向的箭头属性值。
CSS+DIV网页布局
就不重复相同的内容，《细说PHP》最后给的例子非常的经典，做为一个展示：
HTML:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DIV+CSS简单的页面布局示例</title> 6 <link rel="stylesheet" href="my.css" type="text/css"> 7 </head> 8 <body> 9 <div id="container"> 10 <div id="header"> 11 <div id="logo" class="bgcolor">LOGO</div> 12 <div id="banner"> 13 <div id="left" class="bgcolor">BANNER1</div> 14 <div id="right" class="bgcolor">BANNER2</div> 15 </div> 16 </div> 17 <div class="nav"></div> 18 <div id="menu" class="bgcolor">水平导航条</div> 19 <div class="nav"></div> 20 <div id="content"> 21 <div class="left_box border">栏目（一）</div> 22 <div class="right_box border">栏目（二）</div> 23 <div class="nav"></div> 24 <div class="left_box"> 25 <div class="left border">栏目（三）</div> 26 <div class="right border">栏目（四）</div> 27 </div> 28 <div class="right_box"> 29 <div class="left border">栏目（五）</div> 30 <div class="right border">栏目（六）</div> 31 </div> 32 </div> 33 <div id="sidebar"> 34 <div class="bar border">栏目（七）</div> 35 <div class="nav"></div> 36 <div class="bar border">栏目（八）</div> 37 <div class="nav"></div> 38 <div class="bar border">栏目（九）</div> 39 </div> 40 <div class="nav"></div> 41 <div id="footer" class="bgcolor">页脚</div> 42 </div> 43 </body> 44 </html>
CSS:
1 body{ 2 margin:0; 3 padding: 0; 4 text-align: center; 5 font: 12px Arial,宋体; 6 } 7 .border{ 8 border:1px solid #888; 9 } 10 .bgcolor{ 11 background: #DDD; 12 } 13 #container{ 14 width: 960px; 15 margin: 0 auto; 16 } 17 #header{ 18 float: left; 19 width: 100%; 20 height: 80px; 21 } 22 #logo{ 23 float: left; 24 width: 200px; 25 height: 80px; 26 } 27 #banner{ 28 float: right; 29 width: 750px; 30 } 31 #banner #left{ 32 float: left; 33 width: 540px; 34 height: 80px; 35 } 36 #banner #right{ 37 float: right; 38 width: 200px; 39 height: 80px; 40 } 41 .nav{ 42 float: left; 43 height: 10px; 44 width: 100%; 45 overflow: hidden; 46 clear: both; 47 } 48 #menu{ 49 float: left; 50 width: 100%; 51 height: 30px; 52 } 53 #sidebar{ 54 float: right; 55 width: 200px; 56 height: 410px; 57 } 58 #sidebar .bar{ 59 float: left; 60 width: 100%; 61 height: 130px; 62 } 63 #content{ 64 float: left; 65 width: 750px; 66 } 67 #content .left_box{ 68 float: left; 69 width: 370px; 70 height: 200px; 71 } 72 #content .right_box{ 73 float: right; 74 width: 370px; 75 height: 200px; 76 } 77 #content .left{ 78 float: left; 79 width: 180px; 80 height: 200px; 81 } 82 #content .right{ 83 float: right; 84 width: 180px; 85 height: 200px; 86 } 87 #footer{ 88 float: left; 89 width: 100%; 90 height: 60px; 91 }
效果：
