一.云端开发全栈技术简介

（1）全栈：概念和技术的有效集合

（一）云端开发基础_css

应用 = APP
• 云端掌握应用逻辑，存储应用数据，控制应用权限，体现应用智能
• 应用提供交互体验

思考：云端一定有Web界面吗？
思考：云端一定提供浏览器浏览吗？

绝大部分应用情况
• 云端与应用之间使用HTTP协议
• 加密需求采用HTTPS协议
• 云端需要部署Web服务器
• 应用数据采用JSON格式传输
• 接口采用RESTful风格设计
• 终端采用浏览器或APP等多种形式

（一）云端开发基础_css_02

（2）终端技术趋势

（一）云端开发基础_css_03

（3）数据交互

（一）云端开发基础_css_04

（4）云端全栈（Python体系）

（一）云端开发基础_css_05

1.HTML技术理念及发展简介

Hyper Text Markup Language 超文本传输语言

HTML是WWW(World Wide Web)的信息组织方式

HTML通过预定义的<>…</>标签形式组织不同类型的信息

• HTML本身是一段文本，由标签组成
• 浏览器负责解析HTML，并展示成Web页面内容
• HTML所使用的标签是预定义的，浏览器可解析
• HTML符合XML规范，是XML的一种实例
• HTML是组织不同类型数据的最好形式

1）HTML的框架标签

<!DOCTYPE html>
<html lang=“en”>
<head>
…
</head>
<body>
…
</body>
</html>

HTML框架实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>Python网络爬虫</li>
        <li>Python云端系统开发</li>
        <li>Python全栈能力</li>
    </ul>
</body>
</html>

2）HTML的发展

• 2014年发布HTML5，侧重移动端，成为HTML当前标准
• HTML5在浏览器上运行，不受限于操作系统
• HTML将成为计算机/网络系统界面开发的事实标准
更多资源：http://www.w3school.com.cn

• Web 1.0: HTML+CSS 基本的网页展示
• Web 2.0: Ajax+JS+XML 高效的数据表达
• Web 3.0: HTML5+CSS3 Web自适应和普适应用
Web 3.0时代真的到来了吗？

3）布局、显示风格和页面样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li><font color="red">Python网络爬虫</font></li>
        <li>Python云端系统开发</li>
        <li>Python全栈能力</li>
    </ul>
</body>
</html>

2.CSS技术理念简介

1）Cascading Style Sheets 层叠样式表

（一）云端开发基础_python_06

• HTML和不同CSS的组合，可以展示不同风格
• CSS和不同HTML的组合，可以展示不同风格
• CSS对HTML中某一“类”内容定义风格
• CSS可以单独存储成文件，或书写在HTML中

2）CSS的3种写法

• 行内模式：在标签的style属性中书写
• 页内模式：在HTML网页中使用独立的<style>标签书写
• 外部模式：单独在CSS文件中书写

行内模式（把该行字改成红色）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li style="color:red">Python网络爬虫</li>
        <li style="color:red">Python云端系统开发</li>
        <li>Python全栈能力</li>
    </ul>
</body>
</html>

页内模式（全部<li>标签的风格都被修改）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        li {color:red}
    </style>
</head>
<body>
    <ul>
        <li>Python网络爬虫</li>
        <li>Python云端系统开发</li>
        <li>Python全栈能力</li>
    </ul>
 
</body>
</html>

外部模式：

HTML文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <ul>
        <li>Python网络爬虫</li>
        <li>Python云端系统开发</li>
        <li>Python全栈能力</li>
    </ul>
 
</body>
</html>

上面引入的CSS文件（demo.css）：

li {
    color:red
}

3.JavaScript

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function displayDate() {
            document.getElementById("time").innerHTML=Date();
        }
    </script>
</head>
<body>
    <p id="time">这里将显示时间</p>
    <ul>
        <li>Python网络爬虫</li>
        <li>Python云端系统开发</li>
        <li>Python全栈能力</li>
    </ul>
    <button type="button" onclick="displayDate()">显示时间</button>
 
</body>
</html>

JavaScript
JavaScript (简称JS，和Java没任何关系)

• 一种轻量级的脚本型编程语言
• 为Web增加了交互、动态效果和行为功能
• JS由浏览器执行，访问时会被下载到本地
• JS可以写在HTML文件中，也可以单独为.js文件

JavaScript库

• 脚本性使得JS更容易开放开源
• 大量的JS库可以使用
• 希望什么效果，找个第三方库来使用
• echarts.js （百度出品）​​​http://echarts.baidu.com/​​

二.HTTP与Web服务器简介

（1）HTTP，Hypertext Transfer Protocol，超文本传输协议

HTTP是一个基于“请求与响应”模式的、无状态的应用层协议
HTTP协议采用URL作为定位网络资源的标识，URL格式如下：
​​​ http://host[:port][path]​​​ host: 合法的Internet主机域名或IP地址
port: 端口号，缺省端口为80
path: 请求资源的路径

HTTP URL实例：
​​​ http://www.bit.edu.cn​​​ http://220.181.111.188/duty
HTTP URL的理解：
URL是通过HTTP协议存取资源的Internet路径，一个URL对应一个数据资源

（2）HTTP协议对资源的操作

（一）云端开发基础_html_07

通过URL和命令管理资源，操作独立无状态，网络通道及服务器成为了黑盒子

（一）云端开发基础_python_08

（3）Web服务器

• Web服务器（Web Server）是软件工具
• Web服务器用于提供HTTP/HTTPS访问服务
• Web服务器很成熟，只需要配置，不需要开发
• 常用的Web服务器软件：
Web服务器    Apache、Nginx、IIS、BEA Weblogic、Tomcat、Node.js

（一）云端开发基础_python_09