table of Contents
Handwritten server, enabled browser (client connection server)
server.py 文件 #服务端
import socket
server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
while True:
conn,addr = server.accept()
data = conn.recv(1024)
print(data)
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
with open('a.txt','rb') as f:
res = f.read()
conn.send(res)
conn.close()
a.txt 文件 # 与server文件在同一个盘符
<h1>welcome to web!</h1>
<a href="https://pro.jd.com">click me</a>
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1567501575&di=657a542ad90db39e70cf56a98f3c510a&src=http://img1.cache.netease.com/catchpic/1/13/13FA5A6A2B6601644B841F2B482372A5.png"/>
<img src="https://ss3.baidu.com/-rVXeDTa2gU2
在浏览器窗口输入本机回环地址（127.0.0.1:8080）并回车会将a.txt中的代码对应的内容渲染到网页上
The nature of Web services:
Enter the browser URL knockin transmitted several things?
The browser sends a request towards the server
2. The server receives the request
3. The server returns a corresponding response
4. According to a particular browser receives the response the rules render the page displayed to the user to see
HTTP协议（HyperText Transfer Protocol）
Hypertext Transfer Protocol
specifies the data format of the message transmission between the browser and the server
四大特性:
1.基于请求响应
2.基于TCP/IP之上的作用于应用层的协议
3.无状态(服务端无法保存用户的状态,)
4.无连接(请求一次响应一次 之后立马断开连接)
websocket 相当于是HTTP协议的一个大的补丁 它支持长连接
请求数据格式
请求首行(标识HTTP协议版本,当前请求方式)
请求头(一大堆k,v键值对)
请求体(携带的是一些敏感信息比如 密码,身份证号...)
响应数据格式
响应首行(标识HTTP协议版本,响应状态码)
响应头(一大堆k,v键值对)
响应体(返回给浏览器页面的数据 通常响应体都是html页面)
响应状态码
用一串简单的数字来表示一些复杂的状态或者提示信息
1XX:服务端已经成功接收到数据正在处理 可以继续提交额外的数据
2XX:服务端成功响应相应数据(请求成功200)
3XX:重定向(当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动跳到登录页面 301 302)
4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403)
5XX:服务器内部错误(500)
请求方式
1.get请求
朝服务端要资源(比如浏览器窗口输入www.baidu.com)
2.post请求
朝服务端提交数据(比如用户登录 提交用户名和密码)
URL:统一资源定位符(Uniform Resource Locator)，也被称为网页地址，是因特网上标准的资源的地址。HMTL（HyperText Mark Language）
HTML
to get your page can be displayed properly browser page you write must follow html markup syntax
means that all internal pages can be displayed in the browser are html code
浏览器只认识html css jsnature web
browser
server
file (the file extension is .html at the end, which means that they see the end of the .html file then it is a front-end page file)
file extension just does not matter because all posters computer binary data
HTML comments
Write a standard set of web pages
注释是代码之母
<!--单行注释-->
<!--
多行注释
多行注释
-->
一般情况下 html的注释都会按照下面的方式书写
<!--导航条样式开始-->
<!--导航条样式结束-->HMTL document structure
<html>
<head></head>:head内的标签 不是用来展示给用户看的 而是定义一些配置 主要是给浏览器看的
<body></body>:body内的标签 就是浏览器展示给用户看的内容
</html>html page Open
1. Locate the file browser to open the path selection
2.pycharm shortcut to directly open
Classification and labeling
标签的分类1:
1.双标签(<h1></h1> <a></a>)
2.单标签(自闭和标签 <img/>) br hr
head内常用标签:
title用来显示网页标题
style用来控制样式的 内部支持写css代码
script内部支持写js代码 也支持导入外界的js文件
link专门用来引入外部的css文件
标签的分类2
1.块儿级标签(独占浏览器一行)
div p h
1.块儿级标签可以修改长宽
2.块儿级标签内部可以嵌套任意的块级标签
但是p标签虽然是块儿级标签 但是他不能够其他块儿级标签 包括自身
可以嵌套行内标签
总结:
只要是块儿级标签 都可以嵌套行内标签
p标签只能嵌套行内 其他块儿级可以嵌套任意的块儿级标签
2.行内标签(自身文本多大就占多大)
span b s i u
div和span通常都是用来构建网页布局的Within the body commonly used tags
body内常用标签
基本标签
h标签:标题标签
p标签:段落标签
常用标签
div
span
p(段落标签)
img
src存放的是图片的路径(该路径可以是本地的也可以是网上的)
1.也可以放url(会自动请求该url获取相应数据)
2.也可以直接放图片的二进制数据 会自动转换成图片
alt当图片加载不出来的时候 显示的提示信息
title当鼠标悬浮在图片上 提示的信息
height,width 当你只指定一个参数的时候 另外一个会等比例缩放
a
href后面存放url的时候 点击跳转到该url
如果该链接没有被点过 那么默认是蓝色,只要点过依次 之后都是紫色
target 默认是_self当前页面跳转
_blank新建页面跳转
锚点功能(回到顶部)
href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签
列表标签
表格标签(*****)
<table>
<thead></thead>
<tbody></tbody>
</table>
tr表示一行
th和td都是文本
建议在thead内用th
tbody内用td
colspan表示的水平方向
rowspan表示的竖直方向Label three important properties
1.id This value is similar to a person's ID number in a html document id should ensure that only non-repeat
2.class This value is similar to the object-oriented inheritance which can be written more
3.style ( not essential) support css code is written directly in the tag belongs to the style of the highest priority within the lines
complement any label support custom properties !!!