目录
前端的三剑客
前端：任何与用户直接打交道的操作页面 都可以称之为前端
类似前台接待
三剑客 前端页面展示的组成部分
HTML 网页的骨架
CSS. 网页的样式
javascript 网页的动态
web的服务本质
如果想在网页上与服务器交流，那就必须基于HTML语言
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()
浏览器发送请求响应 请求服务端地址和端口 >>> 服务端接收请求
>>>服务端返回响应 >>> 服务端把HTML文件发给浏览器 浏览器渲染展示
HTTP协议
HTTP协议最主要的是：规定了浏览器与服务端之间的数据交互格式
http协议四大特性
1.基于请求响应
客户端发送请求 服务端回应响应
2.基于TCP IP作用于应用层之上的协议
该协议属于应用层
3.无状态
服务端不会保存客户端的状态
每个人看到的都是一样的
4.无\短连接
客户端与服务端不会长久保持连接
数据格式
1.请求格式
请求首行(请求方式 协议版本)
请求头（一大堆K:V键值对）
换行
请求体(存放敏感信息 并不是所有的请求方式都有请求体)
2.响应格式
响应首行(状态码 协议版本)
响应头 (一大堆K:V键值对)
换行
响应体 (存放给浏览器展示的数据)
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
#这里就是响应首行
3.响应状态码
用一些数字来表达一些文本意义 类似于暗号
1xx:服务端已经接收到了你的请求正在处理，客户端可以继续发送或等待
2xx:200 ok 请求成功 服务端发送了对应的响应
3xx:302(临时)304(永久) 重定向(想访问网页A但是自动跳到了网页B)
4xx:403访问权限不够 404请求资源不存在
5xx:服务端内部错误
在项目中我们也可以自定义更多响应状态码 通常以10000起步
HTML语法概括
1.HTML注释语法
<!--注释 内容-->
2.HTML文档结构
<html> 固定格式 html包裹
<head>主要放跟浏览器交互的配置</head>
<boby>主要放给与哦难怪乎查看的内容</boby>
</html>
3.HTML标签分类
单标签(自闭合标签)
<img/>
# 一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
双标签
<h1> </h1>
# HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
HTML代码一名存放于对应的文件中 文件已.html结尾 需要用浏览器打开
head内的常见标签
1.<title>定义网页小标题</title>
2.meta定义网页源信息 重要设置
<meta name='keywords' content="查询关键字，可以填写多个">
<meta name="description" content="网页简介">
3.<style> h1 { color:green } </style>
内部支持编写css代码
4.link引入外部css文件
<link rel = "stylesheet" href="mycss.css">
5.script支持内部编写js代码 也可以引入外部js文件
<script> prompt('好好学习','天天向上') </script>
boby内基本标签
1.标题系列
h1-h6 <h1>一级标题</h1>
2.段落标签
<p> 段落内容 </p>
<!--该标签自带换行-->
3.其他标签
<u>下划线</u>
<i>斜体</i>
<s>删除线</s>
<b>加粗</b>
<!--此类标签文本不换行-->
4.换行与分割线
<br> 单标签 换行
<hr> 单标签 分割线
标签分类：
1.行内标签 <u> <i> <s> <b> 不换行。文本有多大就占用多大
2.块级标签 <h1> - <h6> <p> 都是独占一行
常见符号
1. 空格
2.> 大于号
3.< 小于号
4.&； &符号
5.¥ 人民币符号
6.© 版本号
7.® 版权号
body内布局标签
div 块级标签
span 行内标签
'''
标签之间可以互相嵌套的。并且理论上可以无线套娃
快级标签内部可以嵌套块儿级标签 和行内标签
p标签虽然是块儿级标签 但是他的内部也不能嵌套块儿级标签
行内标签内部职能嵌套行内标签
'''
baby内常用标签
'''
标签括号内填写的 什么=什么 可成之为标签的 属性
1.默认属性
标签自带的 表现的时候有自动提示
2.自定义属性
用户自定义 编写不会有提示甚至会飘颜色
'''
a标签 链接标签
<a href="https://www.baidu.com/">百度地址</a>
href='url' 填写网址 点击跳转功能
href='#id' 可以跳转到指定id标签的地方 例如回到顶部 就是直接跳转到顶部标签的id处
<a href="https://www.baidu.com/" target="_blank">百度地址</a>
target 可以不设置 默认原网页跳转
_blank 设置为 新开启网页跳转
img标签 图片标签
<img src="https://www.baidu.com/img/flexible/logo/pc/index_gray.png" title="欢迎您" width="500" alt="图片加载失败">
单标签类型 src = 填写图片的地址 title = 鼠标悬停在图片上自动展示的文字
width = 控制图片宽度 height = 控制图片高度 单位为px alt=图片加载时候的提示
列表标签
无序列表
<ul> 数码产品
<li>手机</li>
<li>电脑</li>
<li>电器</li>
<li>刮胡刀</li>
</ul>
# 页面上所有的规则排序 横向或者竖向的数据都是用的无序列表
有序列表
<ol type="A">
<li>牛逼</li>
<li>哈哈哈</li>
</ol>
type 排序方法
标题排序
<dl>
<dt>大标题</dt>
<dd>小标题</dd>
<dd>小标题2</dd>
<dd>小标题3</dd>
</dl>
结果
大标题
小标题
小标题2
小标题3
表格标签
1.先写基本骨架
<table title="学生信息表">
<thead>
# thead 表头信息
<tr>
<th>编号</th>
#th主要用于表头字段中 用来加粗显示
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
# 表数据
<tr>
<td>10001</td>
#td主要用于表达数据中
<td>张无忌</td>
<td>19</td>
</tr>
</tbody>
</table>
表单标签input
可以获取到用户数据并发送给服务器
from标签
<form action="" method="" ></form>
action 控制数据的提交地址
method 控制数据的提交方法
input标签
type = 输入数据类型 name = 字段名
<p>用户名:<input type="text" name="username:"></p>
text = 普通文本
<p>密码 :<input type="password" name="password:"></p>
password = 密文展示 ***展示
<p>生日 :<input type="date"></p>
date = 日期选项
<p>邮箱 :<input type="email"></p>
email = 邮箱格式
<p>性别 :<input type="radio" name="性别" value='male'>男
<input type="radio"name="性别" value='famale'>女 </p>
radio 单选属性。注意 名字需要相同
<p>爱好 : <input type="checkbox">篮球
<input type="checkbox">水球
<input type="checkbox">大球
<input type="checkbox ">小球 </p>
checkbox 多选 同时可以选择多个
<p>上传文件：<input type="file"></p>
file 文件格式 multiple 可同时上传多个文件
<p>上传文件：<input type="file" multiple></p>
<input type="submit">
submit 可触发提交数据的按钮
<input type="reset">
reset 重置已输入的数据按钮
<input type="button" value="来点我">
button 自定义按钮 可自定义功能
<p>选择所在地：<select name="" <option>北京市中心</option>
select标签 下拉框 单选则
option 设置下拉框里面的选项
<option>上海</option> <option>广州</option>
</select> </p>
<textarea name="" id="" cols="20" rows="3"></textarea>
textarea 大段文字说明框