python全栈开发基础_巨蟒python全栈开发数据库前端1:HTML基础

1.HTML介绍

什么是前端?

前端就是我们打开浏览器的页面.,很多公司都有自己的浏览器的页面,这个阶段学习的就是浏览器界面

比如京东的界面:https://www.jd.com/

引子

例1

socket客户端不用写,只需要写一个服务端就可以引入了

可以这么认为,浏览器就是客户端

#py文件

importsocket

server=socket.socket()

ip_port=('127.0.0.1',8002)

server.bind(ip_port)

server.listen()

conn,addr=server.accept()

from_browser_msg=conn.recv(1024)print(from_browser_msg)

conn.send(b'hello browser')

客户端输入地址:127.0.0.1:8002端口,那么结果显示如下,

怎么办?

服务端显示如下

b'GET / HTTP/1.1\r\nHost: 127.0.0.1:8002\r\nConnection: keep-alive\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9\r\n\r\n'

整理如下:(\r\n的意思就是换行)

b'GET / HTTP/1.1

Host: 127.0.0.1:8002Connection: keep-alive

Upgrade-Insecure-Requests: 1User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8Accept-Encoding: gzip, deflate, br

Accept-Language: zh-CN,zh;q=0.9

'

OSI七层模型中的,应用层传输协议,包括HTTP&HTTPS协议

上边的就是HTTP协议,协议就是消息的格式

例二:(必须按照http协议的规则,传输消息)

importsocket

server=socket.socket()

ip_port=('127.0.0.1',8002)

server.bind(ip_port)

server.listen()

conn,addr=server.accept()

from_browser_msg=conn.recv(1024)print(from_browser_msg)#例一#conn.send(b'hello browser') #这样显示不出来#例二

conn.send(b'HTTP/1.1 200 ok \r\n\r\n hello browser')#这样就显示出来了,因为加入了协议

网站中出现了如上信息

,这样web项目成功结束了,谢谢!

当然web项目没有这么简单

例三:

importsocket

server=socket.socket()

ip_port=('127.0.0.1',8002)

server.bind(ip_port)

server.listen()

conn,addr=server.accept()

from_browser_msg=conn.recv(1024)print(from_browser_msg)#例一#conn.send(b'hello browser') #这样显示不出来#例二#conn.send(b'HTTP/1.1 200 ok \r\n\r\n hello browser')#例三

conn.send(b'HTTP/1.1 200 ok \r\n\r\n')

conn.send(b'

hello browser

')

结果:字体变大了(又黑又大)

就是需要学的,也就是html5超文本标记语言的标签,也就是一种标记.

例四:

在txt文档中输入:

how do you do!

将txt文档拖入google浏览器中,

结果显示如下:

第一阶段:

第一次用pycharm打开创建一个html5语言的页面

例一:

Title