import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(8096)
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"<h1>Hello world!</h1>")
conn.close()
浏览器窗口输入网址敲回车发生的事:
浏览器发请求--->HTTP协议--->服务端接收请求--->服务端返回响应--->服务端把HTML文件内容发送给浏览器--->浏览器渲染页面
超文本传输协议,规定了浏览器与服务端之间数据传输的格式
1.基于请求响应:一次请求对应一次响应
2.基于TCP/IP作用于应用层之上的协议
3.无状态:不保留客户端状态(来多少次都记不住)
4.无连接:请求来一次 响应一次,之后立马断开连接,两者关系不复存在
1、请求格式:
? 请求首行(标识HTTP协议版本,当前请求方式)
? 请求头(一大堆k,v键值对)
? 请求体(携带的数据,并不是一直都有 有时候可能是空的,取决于请求方式)
2、响应格式
? 响应首行(标识HTTP协议,响应状态码)
? 响应头(一大堆k,v键值对)
? 响应体(返回给浏览器页面的数据(展示给用户看) 通常响应体都是html页面)
? 用一些简单的数字来表示一些复杂的状态或者提示信息
? 1XX:服务端已经成功接收了你的数据正在处理,你可以继续提交额外的数据
? 2XX:服务端成功响应 你想要的数据(请求成功200)
? 3XX:重定向(原本想访问A但是内部自动给你转到了B)例如在访问一个需要登录的页面,窗口会自动调整到登录页面
? 4XX:请求错误(请求资源不存在 404,请求不合法不符合内部规定权限不够 403)
? 5XX:服务器内部错误(500)
? 1.get请求:朝服务端要资源(比如在浏览器窗口输入www.baidu.com)
? 2.post请求:朝服务端提交数据 (登录注册)
超文本标记语言
要想让你的页面能够被浏览器识别并正常显示出来,你所写的页面必须遵循HTML
ps:浏览器只能识别html/xml、css、js
拓展:xml也可以写前端页面, 主要用于odoo框架 书写企业内部管理软件(erp)
注释是代码之母
单行注释:<!--单行-->
多行注释:<!--
多行注释1
多行注释2
-->
补充:由于html页面结构比较复杂,内容比较多,不便于后期的维护修改,通常在写页面的时候 习惯用如下方式来人为划分代码区域
<!--顶部导航条样式开始-->
<!--顶部导航条样式结束-->
<!--左侧菜单栏样式开始-->
<!--左侧菜单栏样式结束-->
<html>
<head></head>:head内存放的内容不是给用户看的,是给浏览器去识别做相应操作的
<body></body>:body内存放的内容是浏览器展示给用户看到的花里胡哨的页面
</html>
1.pycharm自动调用浏览器打开(推荐)
2.手动查找路径之后选择浏览器打开
1.双标签(
>)2.单标签(自闭和标签
title:用来显示网页标题
style:用来控制样式的 内部支持写css代码
script:1.内部可以直接编写js代码 2.可以通过src属性引用外部js代码
meta:name属性 keywords、description
基本标签:
h1~h6:标题标签
s:删除线
b:加粗
u:下划线
i:斜体
p:独占一行
br:换行
hr:分割线
特殊符号:
空格
<p>a大于b a > b </p>
<p>a小于b a < b </p>
<p>a&b a & b </p>
<p>人民币 ¥100000 b</p>
<p>版权标识 © </p>
<p>注册商标 ® </p>
常用标签
div 块儿级标签
span 行内标签
本身没有任何特殊意义
但是这两个用的最多,用来做前期页面的布局
img 图片标签:
-src:
1.可以写一个网站图片的地址
2.写本地的图片地址
3.url(自动朝该url发送get请求要数据) http://网址
-alt:
当图片加载不出来的时候 默认展示的提示信息
-title:
当鼠标悬浮在图片上时展示的提示信息
-width,height:
修改一个,另外一个会等比缩放
若两个都修改,图片失真
a 链接标签:
-href:
放一个url,点击就会跳转到该url所对应的资源
-target:
控制是都在当前页面跳转,默认_self 在当前页面跳转
_blank,在新建页面跳转
-锚点功能:
href不单单可以写url,还能写id值
点击id值会跳转到该id值所对应的a标签所在的位置
列表标签:
无序列表(较多)
<p>无序列表</p>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
只要页面上出现了比较有规则排列的文本 基本都可以用无序列表来实现
有序列表
<p>有序列表</p>
<ol type="i">
<li>哈哈哈</li>
<li>呵呵呵</li>
<li>嘿嘿嘿</li>
</ol>
标题列表
<p>标题列表</p>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格标签******:
展示网站数据的时候, 一般情况下可以使用表格标签
写表格标签,先写结构,再写数据
<table>
<thead>
<tr>
<th>结构</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据</td>
</tr>
</tbody>
</table>
一个tr就是一行
th和td区别:一个加粗一个不加粗
通常情况下表头用th,表单内容用td
表单标签*************:
form标签
获取用户输入(输入,选择、上传文件...)并且将数据打包发送给后端
action参数
用来控制数据提交的路径(到底朝哪个后端服务器提交数据)
三种写法:
1.不写,默认朝当前页面所在地址提交数据
2.全路径(http://www.baidu.com)
3.只写路径后缀(/index/)
input标签:获取用户输入,该标签是一个行内标签
-type属性:
-text 普通文本
-password 密文
-date 日期
-radio 多选一
-checkbox 多选多
默认选中 checked="checked" (当标签属性名与值相同时,可以只写属性名)
女<input type="radio" name="gender" checked="checked">
简写
女<input type="radio" name="gender" checked>
-reset 重置
-button 普通按钮
-submit 触发form表单提交动作
-file 获取文件
select标签 下拉框
一个个选项就是一个个option标签
默认时单选的,可以加一个multiple改为多选
<select name="" id="" multiple>
<option value="">新垣结衣</option>
<option value="">明老师</option>
<option value="">嫖老师</option>
<option value="">波老师</option>
</select>
如何让option标签默认选中
加selected="selected"
<select name="" id="" multiple>
<option value="" selected="selected">新垣结衣</option>
<option value="">明老师</option>
<option value="" selected>嫖老师</option>
<option value="">波老师</option>
</select>
textarea标签 获取大段文本
label通常配合input一起使用
-for用来填写对应的input标签的id值
点击label标签内的内容 会自动让对应的input标签聚焦
<p>
<label for="d1">用户名:<input type="text" id="d1" name="username"></label>
</p>
能触发form表单提交数据的按钮****
<p>
# 可以通过value来指定按钮文本内容
<input type="submit" value="注册">
<button>点我</button>
</p>
<input type="reset" value="重置"> #重置输入数据
<input type="button" value="按钮"> # 单纯一个按钮
#input获取到的用户输入就类似于字典的value,input中的name属性就类似于字典的key
1.块儿级标签:
独占一行 h1~h6 p br hr div
-块儿级标签内部可以嵌套任意块儿级标签和行内标签
-特例:p虽然是块儿级标签,但是它的内部只能嵌套行内标签,不能嵌套块儿级标签
若嵌套了,没有问题,只是不符合html语法规范
2.行内标签:
u s i b span
自身文本多大 就占多大
行内标签内部不能嵌套块儿级标签和行内标签
书写标签的时候,只需写标签名字,按tab可以自动补全 (emmet插件)
原文:https://www.cnblogs.com/littleb/p/12098927.html