重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
Python自动化开发学习14-html和css-创新互联
插曲
之前已发布了一次了。在编写和发布的过程中一直有一个BUG困扰着我。最后被我找到了，只能暂时避开这个BUG重新发布一篇了。之前那篇就被我删掉了，浏览和收藏的也没了。
那个问题我也记录下来了：https://blog.51cto.com/steed/2071264
Web的三个层次
网页设计思路是把网页分成三个层次，即：结构层(HTML)、表示层(CSS)、行为层(Javascript)。
形象的比喻，先是HTML捏了一个人，然后CSS则是给人穿上衣服，最后通过JS让人动起来。
Web服务的本质
对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。用户向服务器发送一个请求。然后服务器响应，将数据和格式发回给客户端，然后断开这个连接。客户端收到返回的数据后，通过浏览器将数据按照一定的格式呈现出来。整个过程就是一个socket的短连接。
下面是一个服务端的python代码，实现一个简单的Hello World：
import socket
def handle_request(conn):
data = conn.recv(1024) # 接收数据，随便收到啥我们都回复Hello World
conn.send('HTTP/1.1 200 OK\r\n\r\n'.encode('utf-8')) # 这是什么暂时不需要知道，客户端浏览器会处理
conn.send('Hello World'.encode('utf-8')) # 回复的内容，就是网页的内容
def main():
# 先起一个socket服务端
server = socket.socket()
server.bind(('localhost', 8000))
server.listen(5)
# 然后持续监听
while True:
conn, addr = server.accept() # 开启监听
handle_request(conn) # 将连接传递给handle_request函数处理
conn.close() # 关闭连接
if __name__ == '__main__':
main()在本机启动上面的socket之后，直接使用浏览器作为客户端连接。在地址栏输入 http://127.0.0.1:8000/ 或 http://localhost:8000/ 之后，浏览器上就会显示服务端返回的内容了。
这里显示的内容比较low，实际应用中，要返回给客户端的网页内容比较大。而且除了数据，还会包括格式（html标签）。实际应用中会将所有的内容写成一个html文件，然后再返回数据的时候调用这个文件。
先写一个简单的带一点标签的html文件，index.html:
Hello World
51CTO
1
2
3
A
B
C
然后我们的socket不再发送简单的数据，而是读取文件，将文件中的数据发送给客户端。
在上面代码的基础上修改一下handle_request函数的内容：
def handle_request(conn):
data = conn.recv(1024) # 接收数据，随便收到啥我们都回复Hello World
conn.send('HTTP/1.1 200 OK\r\n\r\n'.encode('utf-8')) # 这是什么暂时不需要知道，客户端浏览器会处理
# conn.send('Hello World'.encode('utf-8')) # 回复的内容
# 读取html文件，将文件内容返回给客户端
with open('index.html' , encoding='utf-8') as file:
html = file.read()
conn.send(html.encode('utf-8'))现在已经将html和我们的socket服务分离了，需要返回给客户端什么样的页面，我们只需要编辑修改我们的html文件即可。而我们的socket服务器代码则负责和客户端的数据交换。
之后学习Web暂时只需要关注html的部分就好了，直接使用浏览器打开本地的html文件就可以查看实现的效果。
html
使用pycharm直接创建一个html文件，内容如下（HTML5的模板）：
Title
：这是一个声明，声明下面html的版本。这里是一个html5的声明。这个不是html标签，下面的都是。
：这是一个html标签，里面的 lang="en" 是标签内部的属性。一般html标签这么写就行了。这个属性也用不着。
：body标签，html的主体，后面详讲
最后补充一个
注释 ：
标签的分类
主动闭合标签：大多数的标签都是这种形式。标签有两部分，比如上面的、
、，后面都有一个对应的、、来主动闭合这个标签。自闭合标签：像上面 head 中的 meta 标签，就是一个自闭合标签。这类标签比较少。另外也可以这样写，加上一个
/符号，不影响浏览器的识别，但是可以直观的让人看明白各个标签已经闭合了。推荐加上表示闭合的/。head内标签
：指定页面的字符编码，否则中文可能会变成乱码。
type="text" ：可以输入文本，
type="password" ：可以输入密码，
type="button" ：是一个按钮，现在点下去没效果，还需要其他东西。
type="submit" ：提交表单，是另外一种按钮。同样没效果，直接将form表单的内容提交到form的action属性指定的url。
不过上面的input内容还无法识别，需要加上name属性：
这样就会把数据组织成一个字典的形式提交出去，name就是字典的key，你在前端文本框输入的数据就是字典的value。这样提交之后，就可以通过name属性的值也就是字典的key获取到前端文本的内容。这部分还得后面再讲了，暂时只要会以这样的形式提交，之后再学怎么获取到值以及处理。