Web（一）:概述

date: 2016-10-12 20:02:29

学Python也有一段时间了，学完基本语法后整个人都蒙了。没有什么可以来练手，感觉什么也不会。
准备主攻爬虫和Web。
。

C/S结构和B/S结构

C/S-Client/Server 客户机/服务器结构
B/S-Browser/Server 浏览器/服务器结构

B/S优势：

不用安装软件
不用通知升级
轻松跨平台

访问网站过程：

用户向Web服务器发起请求
Web服务器返回html给用户
用户浏览器将html渲染成网页

静态网站

用户向Web服务器请求，Web服务器会直接将html返回给用户。

动态网站

用户向Web服务器请求。
Web服务器执行Python程序，将执行结果输出成html文件返回给用户。Web服务器可以修改html文件结果。网站会因为用户的请求不同的呈现出不同的结果。也就是动态网站的由来。

采用MVC设计Web应用

M: Model模型，存储Web应用数据的代码
V： View视图，格式化和显示Web应用的用户界面的代码。
C: Controller控制器，将Web应用粘合在一起并提供业务逻辑的代码。

CGI

Common Gateway Interface 通用网关接口

可以让一个客户端，从网页浏览器向服务器请求数据。这是描述客户端和服务器程序之间传输数据的一种标准。

应用于Web的编程语言
PHP
ASP/ASP.net
JSP
Python

前端程序

HTMl
CSS
JS

后台程序

Python
PHP
JSP

数据库 --与后台程序进行数据交互

Mysql
MongoDB

前端

HTML：Hyper Text Markup Language 超文本标记语言
CSS：Cascading Style Sheet 层叠样式表
JS ：JavaScript

后端

Python
PHP
JSP
···

数据库及静态存储

Mysql
SQLite
MongoDB

HTML和JavaScript的简单介绍

目标:使用HTML语言和JS语言，编写程序。实现两数相加。
新建index.html文件：

<head> 
    <title>Calculator</title>  
    <script src="add.js" type="text/javascript"></script>>
</head>
<body>
    <div align="center" style="margin-top:60px;">
        <form name="form1">
            <input type="text" placeholder="adder" name="adder1">
            <input type="text" placeholder="adder-2" name="adder2">=
            <input type="text" readonly="readonly" placeholder="result" name="result">
            <input type="button" value="calculate" onclick="add()">
        </form>
    </div>
</body>
<footer>
</footer>

新建add.js文件：

<pre>
function add()
{
var adder1=Number(document.form1.adder1.value);
var adder2=Number(document.form1.adder2.value);
var result=adder1+adder2;
document.form1.result.value=result;
}
</pre>

显示为:
<head>
<title>Calculator</title>
<script src="add.js" type="text/javascript"></script>>
</head>
<body>
<div align="center" style="margin-top:60px;">
<form name="form1">
<input type="text" placeholder="adder" name="adder1">
<input type="text" placeholder="adder-2" name="adder2">=
<input type="text" readonly="readonly" placeholder="result" name="result">
<input type="button" value="calculate" onclick="add()">
</form>
</div>
</body>
<footer>
</footer>

上面的只是html文件，不能计算出结果。

Web（一）:概述

推荐阅读更多精彩内容