B/S架构的应用系统一般将客户端及服务器的代码都部署到服务器的网站上，服务器为客户端产生静态网页和脚本，然后由客户端解释，显示出来并执行动态脚本。客户端开发的技术很多，这里主要介绍HTML,CSS,JavaScript,JQuery等。这些技术也是爬虫需要了解的。
这些技术的大致分工如下：
具体格式如下：
下面分别进行说明
1）HTML简介
HTML实例
<html>
<head>
<!--此处放置标题、导航、登录等内容-->
<meta charset="utf-8">
<title>飞谷云人工智能(www.feiguyunai.com)</title>
</head>
<body>
<!--此处放置页面主要内容-->
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
实例解析
2）HTML基本标签
（1）段落
<p>
<hr/>表示单行横线
<br/>表示换行
（2）链接和图像
<a href="http://www.baidu.com" target="_self">点击进入百度</a>
定义了两个属性href及target
<img src="http://mysite.com/mypic.png" alt="网站作者的照片"/>
（3）表格
<table> 声明表格
<tr> 表行
<td> 表单元
<th> 表头
（4）列表
无序列表：<ul> 表示列表 <li>表示表项
有序列表：<ol>表示列表 <li>表示表项
定义列表：<dl>表示列表 <dt>被定义词 <dd>定义描述
（5）表单实例及按钮等
<form name="input" action="url_form_action">
<fieldset>
<legend>用户注册</legend>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="name"></td>
<td>密码:</td>
<td><input type="password" name="pass"></td>
</tr>
</table>
<table>
<tr>
<td>备注：</td>
</tr>
<tr>
<td><textarea cols=“60” rows=“6” name=“comment”></textarea></td>
</tr>
</table>
<table>
<!-----------单选按钮------------->
<tr>
<td>性别：</td>
<td>男性<input type="radio" checked="checked" name="sex" value="male"/></td>
<td>女性<input type="radio" name="sex" value="male"/></td>
</tr>
<!----------下拉列表--------------------->
<tr>
<td>学历：</td>
<td colspan="2">
<select name="grade">
<option value="middle_school">高中及以下</option>
<option value="high_school">专科</option>
<option value="bachlor" selected="selected">本科</option>
<option value="master">研究生及以上</option>
</select>
</td>
</tr>
</table>
<table>
<tr>
<td rowspan="2" >兴趣爱好：
<td>运动<input type="checkbox" name="sport"/></td>
<td>电影<input type="checkbox" name="movie"/></td>
<td>音乐<input type="checkbox" name="music"/></td>
</tr>
<tr>
<td>编程<input type="checkbox" name="programming"/></td>
<td>下厨<input type="checkbox" name="cooking"/></td>
<td>旅游<input type="checkbox" name="tour"/></td>
</tr>
</table>
<input type="file" name="pic" accept=".png,.jpg">
<p><button type="submit">注册</button></p>
</fieldset>
</form>
把以上脚本保存为test.html文件，用浏览器打开，可看到如下结果：
CSS（Cascading Style Sheet 层叠样式表）是一种用来表现HTML等文件的显示样式的语言。通过CSS可以将页面元素与显示效果分离，样式使用属性键/值对的方式。其语法为：
selector {key1:value1;key2:value2....}
以下是代码示例
<html>
<head>
<style type="text/css">
div.container{width:90%;height: 80%; background-color:gray}
div.leftframe {background-color:#00ff99; height:200px; width:20%; float:left;}
div.rightframe {background-color:#88BB99; height:200px;
width:50%;float:left;padding:50px;margin:10px}
</style>
</head>
<body>
<div class="container">
<div class="leftframe">
<ul>
<li>班级列表</li>
<li>同学查询</li>
<li>联通U成长</li>
</ul>
</div>
<div class="rightframe"> 页面主体内容 </div>
</div>
</body>
</html>
运行结果
Python网络框架实际上就是一组Python包，它能使开发者无须了解底层的一些协议、线程、进程等方面内容，专注于网站的业务逻辑。这样可大大提高开发者的工作效率，同时开发的应用程序质量更有保证。
Python有十几种开发框架，常用的有Django、Tornado、Flask和Twisted等，这里我们主要介绍Django这种框架。
目前这些框架几乎使用MVC(或MTV)架构开发web应用。
MVC（Model View Controller 模型-视图-控制器）是一种Web架构的模式（本文不讨论桌面应用的MVC），它把业务逻辑、模型数据、用户界面分离开来，让开发者将数据与表现解耦，前端工程师可以只改页面效果部分而不用接触后端代码，DBA可以重新命名数据表并且只需更改一个地方，无需从一大堆文件中进行查找和替换。MVC模式甚至还可以提高代码复用能力。现在几乎所有的Web开发框架都建立在MVC模式之上。 当然，最近几年也出现了一些诸如MVP, MVVM之类的新的设计模式。 但从技术的成熟程度和使用的广泛程度来讲，MVC仍是主流。
（1）Model（数据模型）。是对客观事物的抽象。比如上篇我们说到的知乎Live，Live就是一个模型，可以用Live类来表示。而一个模型通常还带有很多的和业务相关的逻辑，比如添加，更新，获取Live主讲人信息等等，这些组成了模型的方法。对于开发者模型的表示方法非常易懂和清晰，可以通过非常便捷的代码来做CURD操作而无需写一条又一条的SQL语句。
（2）View（视图）。呈现给用户的效果，呈现的内容是基于Model，它也是收集用户输入的地方。比如看到一篇Live，数据是一个Live.get(live_id).to_dict()的结果，效果是通过对应的模板和样式把这个数据展示出来。
（3）Contorller（控制器）。是Model和View之间的沟通者。 因为View中不会对Model作任何操作，Model不会输出任何用于表现的东西，如HTML代码或者某种效果等，它就是点数据。而Contorller用于决定使用哪些Model，对Model执行什么操作，为视图准备哪些数据，是MVC中沟通的桥梁。
MVC的特点是通信单向的：
①浏览器发送请求
②Contorller和Model交互获取数据
③Contorller调用View
④View渲染数据返回
更简单的表达式：V -> C-> M -> C -> V
下图为MVC的架构示意图
Django的MTV模式本质上和MVC是一样的，也是为了各组件间保持松耦合关系，只是定义上有些许不同，Django的MTV分别是值：
M 代表模型（Model）：负责业务对象和数据库的关系映射(ORM)。
T 代表模板 (Template)：负责如何把页面展示给用户(html)。
V 代表视图（View）：负责业务逻辑，并在适当时候调用Model和Template。
除了以上三层之外，还需要一个URL分发器，它的作用是将一个个URL的页面请求分发给不同的View处理，View再调用相应的Model和Template，MTV的响应模式如下所示：
Django是一种遵循MVC开发模型的框架，如上图所示。model.py中定义了各种类代表数据类型（Model），和数据库引擎交互，执行数据的存取操作；templates文件夹中的各个模板文件代表视图（View），负责数据内容的显示；urls.py中定义的各种url访问入口和view.py中定义的各种处理函数（称为Django视图函数）代表控制器（Controller），其中urls.py可以根据用户输入的url请求，调用view.py中相应的函数与数据模型和视图交互，响应用户的请求。基于Django的web应用开发活动由于主要集中在model.py、templates文件夹中的各模块文件及view.py之内，因此Django的开发模型通常也称为MTV开发模式。
Django的工作原理如下图：
上图展示了从一个访客的浏览器到Django应用并返回的一个web请求的简单历程。其中数字标识的路径：
①浏览器发送请求（基本上是字节类型的字符串）到web服务器。
②web服务器（比如，Nginx）把这个请求转交到一个WSGI（比如，uWSGI），或者直接地文件系统能够取出一个文件（比如，一个CSS文件）。
③不像web服务器那样，WSGI服务器可以直接运行Python应用。请求生成一个被称为environ的Ptyhon字典，而且，可以选择传递过去几个中间件的层，最终，达到Django应用。
④URLconf中含有属于应用的urls.py选择一个视图处理基于请求的URL的那个请求，这个请求就已经变成了HttpRequest——一个Python字典对象。
⑤被选择的那个视图通常要做下面所列出的一件或者更多件事情：
(5a)通过模型与数据库对话。
(5b)使用模板渲染HTML或者任何格式化过的响应。
(5c)返回一个纯文本响应（不被显示的）。
(5d)抛出一个异常。
⑥HttpResponse对象离开Django后，被渲染为一个字符串。
⑦在浏览器见到一个美化的，渲染后的web页面。
虽然某些细节被省略掉，这个解释应该有助于欣赏Django的高级架构。它也展示了关键的组件所扮演的角色，比如模型，视图，和模板。Django的很多组件都基于这几个广为人知设计模式。
# 创建Django工程
django-admin startproject 【工程名称】
mysite
- mysite # 对整个程序进行配置
- init
- settings # 配置文件
- url # URL对应关系
- wsgi # 遵循WSIG规范，uwsgi + nginx
- manage.py # 管理Django程序：
- python manage.py
- python manage.py startapp xx
- python manage.py makemigrations
- python manage.py migrate
Pip install virtualenv
Virtualenv yuelei
Cd yuelei
cd script
activate
(yuelei)
(yuelei)* >pip install django==1.11.3
python
>>>import django
>>>django.VERSION #django虚拟环境
#创建一个Django工程在django-admin执行文件的路径下
django-admin startproject yourname_project
或 django-admin startproject yuelei
【提示】这样在用户目录下就会产生一个yourname的工程文件夹
python manage.py startapp yourname_basic
python manage.py startapp yuelei_basic
#在数据库同步下配置信息
python manage.py makemigrations
python manage.py migrate
#命令窗口切换到yourname文件夹，然后运行命令启动
python manage.py runserver
python manage.py createsuperuser
# 按照提示输入用户名和对应的密码就好了邮箱可以留空，用户名和密码必填
# 修改 用户密码可以用：
python manage.py changepassword username
class BlogPost(models.Model):
title = models.CharField(max_length=150)
body = models.TextField()
timestamp = models.DateTimeField()
每个变量都和普通的类属性一样被定义为一个特定变量类（field class）的实例。这些变量类也是在django.models里定义，它们的种类非常多，从BooleanField到XMLField应有尽有。
