前端简介
前端概念：与用户打交道的操作界面都可以称之为前端
前端的核心 ：HTML 内容
css 外观
java script 动作
HTTP(超文本传输)协议
pycharm手写服务端
import socket
res = socket.socket()
res.bind(('127.0.0.1',8080))
res.listen(5)
sever,address = res.accept()
sever.send(b'HTTP\1.1 ok 200 \r\n\r\n hi,qiqi')
# 必须要用HTTP协议浏览器才能展示服务端发送的数据
data = sever.recv(1024)
print(data)
浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
协议内容（很重要！！！！）
简单来说就是客户端和服务器进行数据传输的一种规则（基于TCP传输）
#四大特性：
1.基于请求响应
2.基于TCP之上作用于应用层的协议
3.无状态
4.无/短连接
# 请求的数据格式：
1.请求首行（请求方式有很多种，各种协议的版本）
2.请求头（一堆k:v键值对）
3.换行
4.请求体（携带一些敏感的数据，不是所有的请求都有请求体）
# 响应数据格式
1.请求行首（响应状态码）
2.请求头（一堆k:v键值对）
3.换行
4.请求体（一般是浏览器展示给用户的数据）
# 响应状态码 （利用数字来表示一些复杂的情况说明）
1XX：服务端已经接收到了你的请求正在处理，你可以继续发送请求或者等待
2XX：200 ok服务端给出了响应
3XX：重定向
4XX：403请求不符合条件 404请求资源不存在
5XX：服务端内部错误
ps：我们以后会自己定义更多的状态码，一般从10000开始
HTML简介
HTML是超文本标记语言，是一种用于创建网页的标记语言，网页文件的扩展名：.html或.htm
HTML文件结构
<html> # 所有的代码必须写在html标签内
<head></head> # head内的数据一般在网页的网址上展示 不是给用户看的
<body></body> #浏览器展示给用户看的数据
</html>
HTML标签的分类
html标签分为两类：
单标签 ：<img/>
双标签：<a></a>
HTML注释语法
<!--注释内容-->
常标标签
head内常见标签
titel : 控制标签页小标题
style ： 支持内部编写css
link ： 引入外部css文件
script ：内部可以编写js代码，还可以通过src属性引入外部js文件
mate ： 通过内部属性的不同可以有很多功能
ps:
<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">
body内常见标签
h系列标签
h1~h6 标记内容为1~6级的标题
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
</body>
</html>
<p>我是段落标签</p>
<hr>我是水平分割线
<br>我是换行标签
<u>我是下划线</u>
<i>我是斜体</i>
<s>我是删除线</s>
<b>我的字体会加粗</b>
img标签（全称image） 图片标签
<img src="图片地址" alt="图片加载失败时显示的内容">
ps：图片地址可以是网络地址也可以是本地地址，本地地址建议用相对地址
图片格式支持png、jpg和gif
src 填写图片地址(网络地址 本地地址)
title 鼠标悬浮在图片上就会有提示信息
alt 图片加载失败提示的信息
height 调整图片的高度
width 调整图片的宽度
ps：上述两个调整一个另外一个等比例缩放
a标签（全称anchor） 超链接标签
# 超文本文件的精髓，可以控制页面与页面之间的跳转
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>
# target="_blank"代表在新页面中打开 _self在原有页面打开
href 可以填写网址 点击自动跳转 还可以填写其他标签的id值 实现锚点功能 target 可以控制是否新建页面跳转
也可以标记图片
<a href="https://www.baidu.com"><img src="百度图标" />百度一下，你就知道</a>
# body内布局标签
div ：块级标签
span ： 行内标签
1.块级标签是可以通过css调整为不独占一行
2.标签之间很多时候可以嵌套
块级标签可以嵌套任何类型的标签
行内标签只能嵌套行内标签
标签内两大重要属性
# 用来快速定位需要操作的标签
id 属性 （一对一管理）
在同一个html里面 id值不可以重复，类似于我们的身份证号
class 属性 （批量管理）
在同一个html,多个标签可以拥有相同的class值
块儿标签和行内标签
块儿标签：一个标签独占一行
h系列标签，p标签，hr和br标签
行内标签
u，i，s，b等
body内常见符号
1.  空格符
2.> 大于号
3.< 小于号
4.& &
5.¥ ￥
6.® 注册
7.© 版权
列表标签
有序列表
<ol>
<li>哈哈哈</li>
<li>黑黑黑</li>
<li>呼呼呼</li>
</ol>
无序列表（标签中使用最多的一种）
<ul>
<li>嘻嘻</li>
<li>美好的事情即将发生</li>
<li>一起期待吧</li>
</ul>
type：列表标识的类型
disc：实心圆(默认值)
circle：空心圆
square：实心矩形
none：不显示标识
可以通过css直接去掉小圆点
<style type="text/css">
ul {
list-style: none;
}
</style>
自定义列表
自定义列表也是有组合的dl<dt<dd
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
dl:defination list，自定义列表
dt：defination title，自定义标题
dd：defination description，自定义描述
表格标签
#1、作用
表格标签是一种数据的展现形式，当数据量非常大的时候，使用表格的形式来展示被认为是最清晰的
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>summer</td>
<td>girl</td>
<td>read</td>
</tr>
</tbody>
</table>
tr代表表格的一行数据
td表一行中的一个单元格 (字体细一点)
th表一行中的一个单元格（字体粗一点）
宽度和高度：
可以给table和td/th设置width和height属性
#1、水平向上的单元格colspan
可以给td标签添加一个colspan属性，来把水平方向的单元格当做多个单元格来看待
<td colspan="2"></td>
#2、垂直向上的单元格rowspan
可以给td标签设置一个rowspan属性，来把垂直方向的的单元格当成多个去看待
form表单标签
#1、什么是表单？
表单就是专门用来接收用户输入或采集用户信息的
#2、表单的格式
<form>
<表单元素>
</form>
<form action="http://www.baidu.com">
<p>
账号：<input type="text" placeholder="请输入你的用户名" name="user">
</p>
<p>
密码：<input type="password" placeholder="请输入你的密码" name="password">
</p>
<p>
性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" checked="checked" value="none">保密
</p>
<p>
<!--注意点：单选框or复选框都需要指定相同的name值-->
爱好：
<input type="checkbox" name="sport" value="basketball">篮球
<input type="checkbox" name="sport" value="football">足球
<input type="checkbox" checked="checked" name="sport" value="badminton">羽毛球
</p>
<p>
简介：
<textarea name="" id="" cols="30" rows="10" name="desc"></textarea>
</p>
<p>
生日：
<input type="date" name="birth">
</p>
<p>
邮箱：
<input type="email" name="email">
</p>
<p>
电话：
<input type="number" name="phone">
</p>
<p>
<input type="submit" value="注册">
<input type="reset" value="清空">
</p>
</form>