前端基础（HTML）
内容概要
- 前端与后端的概念
- 服务端搭建以及客户端访问
- 超文本传输协议（HTTP）
- 超文本标记语言（HTML）
前端与后端的概念
1.前端
任何与用户直接打交道的操作界面 都可以称之为前端 相当于'接待员'
2.后端
不直接与用户打交道 主要负责内部真正的业务逻辑的执行 相当于'幕后操作员'
前端三剑客：
HTML 网页的骨架
CSS 网页的样式
JavaScript 网页的动态效果
通过浏览器访问服务端
import socket
server = socket.socket()
server.bind(('127.0.0.1',9029))
server.listen(5)
while True:
sock,addr = server.accept()
data = sock.recv(1024)
print(data)
sock.send(b'HTTP/1.1 200 OK\r\n\r\n')
with open('电影排行.txt','rb') as f:
sock.send(f.read())
运行服务端后 我们打开浏览器输入 服务端绑定的Ip地址:端口号 即可获取服务端信息
HTTP协议
# 四大特性
1.基于请求相应
客户端发出请求，服务端回应相应
2.基于TCP、IP作用与应用层之上的协议
该协议属于应用层
3.无状态
服务端不会保存客户端的状态
每次客户端访问的时候都是发出一次请求然后服务端回应请求
4.无、短连接
客户端与服务端不会长久保持连接
如果想要长链接 可以使用 websocket协议 >>> QQ、VX
#数据格式
1.请求格式
请求首行(请求方式(有很多种)协议版本)
请求头(k:v键值对)
换行
请求体(存放信息，并不是所有的请求方式都有请求体)
2.响应格式
响应首行(状态码，版本协议)
相应头(k:v键值对)
换行
响应体(存放给浏览器展示的数据)
3.相应状态码
用数字来表达一些文字意义(类似于暗号)
1XX:服务端已经接收到了你的请求正在处理 客户端可以继续发送或者等待
2XX:200 OK 请求成功 服务端发送了对应的响应
3XX:302(临时) 304(永久) 重定向(想访问网页A但是自动调到了网页B)
4XX:403访问权限不够 404请求资源不存在
5XX:服务端内部错误
在公司中我们还会自定义更多的响应状态码 通常以10000起步
聚合数据
超文本标记语言（HTML）
1. HTML注释语法：
注释语法为： <!--注释内容-->
2.HTML文档结构
<html>
<head>主要方式跟浏览器交互的配置</head>
<body>主要放置给用户查看的内容</body>
</html>
3.HTML标签分类
单标签(自闭合标签)
<img />
双标签
<h1></h1>
储备知识
1.网页信息数据一般也会存放于文件中
格式为:xx.html
2.我们可以通过Pycharm支持前端所有类型的文件编写
内置有自动补全代码的功能
head内常见标签
<title>: 网页小标签
<title>标题内容</title>
<meta>:定义网页源信息(配置较多)
<meta name="keywords" content="查询关键字"> <!--百度查询时输入相应关键字即可找到该网页-->
<meta name="description" content="网页简介">
<!--百度搜索时会出现对应的网页介绍-->
<style>标签支持编写CSS代码
<!--定制颜色-->
<style>
h1 {
color: lightpink;
}
</style>
link:引入外部的css文件
p {color:red;text-align:center;}
<link rel="stylesheet" href="mycss.css">
<script>标签:支持内部编写JavaScript代码也可以从外部引入JavaScript代码
<script>prompt('姐就是女王，自信放光芒')</script>
body内基本标签
<h1>内容</h1>： 标题系列标签,总共有6个等级，h1为最大，h6最小
<p>内容</p>段落标签
标签内编写的内容独占一行
<u> u标签为给内容添加下划线
<i>i标签为给内容增添斜体效果
<s>s标签为给内容添加删除线
<b>b标签为加粗
我们需要注意不一定只有这些标签才能实现相同效果，并不是独一无二的！
如 <em>标签 也具有斜体内容的效果
<br>换行标签
<hr>分割线
'''
行内标签 u i s b
内部文本多大就占多大
块儿级标签 h系列 p
独占一行
'''
常见符号
1. 空格
2.> 大于
3.< 小于
4.& &符
5.¥ ￥符
6.© ©
7.® ®
body内布局标签
div
块级标签
sqan
行内标签
'''
标签之间可以互相嵌套 并且理论上可以无限套
块级标签内部可以嵌套块级标签和行内标签
p标签虽然是块级标签，但是它的内部也不能嵌套块级标签
行内标签只能嵌套行内标签
'''
body内常用标签
'''
标签括号内填写 xx=xx 称之为xx的标签的属性
'''
<a>标签 链接标签
<a href='www.baidu.com' target="_blank">目标网址</a>
<!--填写网址、具备跳转功能-->
target="self" 为当前页面跳转
target="_blank" 为新建页面跳转
<img> 标签 图片标签
<img src="" title="" alt="" width="" height="">
<!--
src
填写图片地址
title
鼠标悬浮在图片上自动展示的文本
alt
图片加载失败提示的信息
width\heiget
图片的尺寸，两者随意调整一个另外即可等比缩放
-->
<img src="https://img1.baidu.com/it/u=3619180079,3699937916&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="失败" title="帅气头像" width="300px">
列表标签
<ul>标签 <li>标签
<!--无序列表-->
<ul>
<li>鸡</l1>
<li>鸭</l1>
<li>猫</l1>
</ul>
页面上所有有规则排列的横向或者竖向的数据，一般都是使用的无序列表
有序列表
<ol>标签 <li>标签
ol中有type 的属性可以修改开头的排序形式
<ol type="A">
<li>鸡</li>
<li>鸭</li>
<li>猫</li>
</ol>
<dl>标题列表 <dt> 大标题 <dd>小标题
<dl>
<dt>大标题1</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dd>小标题3</dd>
<dt>大标题2</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
</dl>
表格标签
1.先写出表格基本架子
<table>
<thead></thead>
<tbody></tbody>
</table>
2.再写表头及表单数据
<tr>
<th>编号</th> th主要用于表头字段中 用来加粗显示
<th>姓名</th>
<th>年龄</th>
</tr>
<!--添加数据-->
<table>
<thead>
<tr>
<th>编号</th> <!--th主要用于表头字段中 用来加粗显示-->
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>>
<td>小明</td>>
<td>88</td>>
</tr>
</tbody>
</table>
表单标签
<!--表单是可以获取到用户的数据并发给服务端的-->
form 标签
action 控制数据的提交地址
method 控制数据的提交方法
input 标签(类似于前端的变形金刚)
type 属性
text 普通文本
password 密文展示
date 日期选项
email 邮箱格式
radio 单选
checkbox 多选
file 文件
submit 触发提交动作
reset 重置表单内容
button 暂无任何功能
select标签 下拉框
option标签 一个个选项
textarea标签 获取大段文本
input标签应该有name属性
name 属性相当于字典的键
input 标签获取到的用户数据相当于字典的值
点击发送就会组织成字典的形式发送给服务端 这样才有明确意义
表单标签补充
基于from表单发送数据
<!--
1.用于获取用户数据的标签至少应该含有name属性
name属性相当于字典的键
用户输入的数据会被保存到标签的value属性中
value属性相当于字典的值
2.如果不需要用户填写数据 只需要选择，我们需要自己填写value
<input type="radio" name="gender value="male>
没有name属性的标签 form表单会直接忽略 不会发送
3.针对input标签理论上应该配一个label标签与其绑定，不写也可以
<label for ="d1">username:>
<input type="text" id="d1">
</label>
4.标签的属性如果和属性值相等 那么可以简写
<input type="file" multiple="multiple">
<input type="file" multiple>
5.针对选择类型的标签可以提前设置默认选项
<input type="radio" name="gender" checked="checked">
<input type="radio" name="gender" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" name="gender" checked>
<option value="" selected="selected">222</option>
<option value="" selected>222</option>
6.下拉框与文件上传可以复选
<input type="file" multiple>
<select name="" id="" multiple>
-->
