前端

前端简介

1.前端与后端的区别
1.1前端
前端是指用户可见界面，与用户直接交互的操作界面都可以称为前端
1.2.后端
后端是用户看不见的，不直接与用户交互的内部执行核心业务逻辑的代码程序

2.前端核心基础
2.1HTML
全称为超文本标记语言(网页的骨架)
2.2CSS
全称为层叠样式表，可以把网页外观做得更加美观(网页的样式)
2.3JS
全称JavaScript，是一款编程语言(网页的动态)

超文本传输协议

1.先写一个服务端程序
2.使用浏览器充当客户端
3.浏览器端无法直接展示服务端的响应数据
4.由于浏览器需要兼容很多服务端软件，为了无障碍沟通交流，规定了一些协议
HTTP协议、FTP协议、HTTPS
5.浏览器发送的请求数据格式肯定没有问题，因为别人早就封装好了是我们写的服务端不符合浏览器的数据格式

import socket

server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
sock, address = server.accept()
data = sock.recv(1024)
print(data)
sock.send(b'HTTP/1.1 200 OK\r\n\r\n')
sock.send(b'hello')

HTTP超文本传输协议

1.四大特性
1.1基于请求响应
1.2基于TCP/IP之上作用于应用层的协议
1.3无状态
不保存请求和响应之间的通信状态
1.4无/短连接
请求一次处理一次，之后断开

2.数据格式
2.1请求数据格式
请求首行(请求方式:有很多种协议名称及版本)
请求头(一大堆K:V键值对)
换行
请求体(携带一些敏感的数据，不是所有请求都有请求体)
2.2响应数据格式
响应首行(响应状态码)
响应头(一大堆K:V键值对)
换行
响应体(大多数情况下就是浏览器要展示给用户看的数据)

3.响应状态码
3.1利用数字来表示一些复杂的情况说明
1XX:服务端已经接收到你的情况正在处理，你可以继续提交或等待
2XX:200 OK服务端给出了相应响应
3XX:通常用来重定向(通过各种方法将各种网络请求重新定个方向转到其它位置)
4XX:403请求不符合条件(禁止)	404请求资源不存在
5XX:服务端内部错误
3.2我们在工作中还会自己定义更多的状态码，一般从10000开始

HTML

HTML简介

head内常见标签

1.title
控制标签页小标题
2.style
内部支持编写CSS
3.link
引入外部CSS文件
4.script
内部支持编写JS代码，还可以通过src属性引入外部JS文件
5.meta
通过内部属性的不同可以有很多功能

6.<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
7.<meta name="description" content="填写一些网页的简介">

body内部基本标签

块儿级标签与行内标签

1.块儿级标签
h1~h6、p、hr、br
一个标签独占一行

2.行内标签
u、i、s、b
内部文本多大自身就占多大

body内基本符号

 		空格
>		大于号
⁢		小于号
&		&
¥		￥
®		注册
©		版权

body内布局标签

1.div
块儿级标签

2.span
行内标签

3.块儿级标签可以通过CSS调整为不独占一行

4.标签之间可以嵌套
4.1块儿级标签可以嵌套任何类型的标签
4.2p标签虽然是块儿级标签，但是不能嵌套块儿级标签
4.3行内标签只能嵌套行内标签

body内常见标签

1.a标签
1.1链接标签
href	可以填写网址，点击自动跳转网址页面，还可以填写其他标签的id值，实现锚点	   功能
target	可以控制是否新建页面跳转
_self
_blank

2.img标签
图片标签
src		填写图片地址(网络地址、本地地址)
title	鼠标悬浮在图片上就会有提示信息
alt		图片加载失败提示信息
height	调整图片的高度
width	调整图片的宽度
上述两个调整一个另一个会等比例缩放

标签两大重要属性

'下面两个属性都是用来快速定位需要操作的标签'
1.id属性(一对一管理)
类似于身份证，在同一个html页面上，id值不能重复

2.class属性(批量管理)
类似于分组，多个标签可以拥有相同的class值

列表标签

1.无序列表
<ul>
	<li>小标题</li>
	<li>随便写点</li>
</ul>
'页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表'

2.有序列表
<ol>
<ol type="1" start="4">  # 数字列表，从4开始
	<li>第一项</li>
	<li>第二项</li>
</ol>

3.标题列表
<dl>
	<dt>标题</dt>
	<dd>内容</dd>
</dl>

表格标签

    <table>  # 内部是表格
        <thead>  # 表头
            <tr>  # 一行
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>  # 表单
            <tr>
                <td>barry</td>
                <td>123</td>
            </tr>
        </tbody>
    </table>

表单标签

1.获取用户输入的(输入、选择、上传)的数据并发送给后端服务器
<form action="" method=""></form>
1.1action属性
用于控制数据的提交地址，不写的话就是朝当前页面所在的地址提交
1.2method属性
用于控制请求的方式(get\post)
<form action="" method="post">
    <p>name:<input type="text"></p><!--可见内容的input标签-->
    <p>pwd:<input type="password"></p><!--不可见内容的input标签-->
    <p>birthday:<input type="date"></p><!--选择生日-->
    <p>email:<input type="email"></p><!--获取用户邮箱-->
    <p>gender:
        <input type="radio" name="gender">男<!--选择一项-->
        <input type="radio" name="gender">女
    </p>
    <p>hobby:
        <input type="checkbox" name="hobby">唱<!--选择多项-->
        <input type="checkbox" name="hobby">跳
        <input type="checkbox" name="hobby">rap
        <input type="checkbox" name="hobby">篮球
    </p>
    <p>file:
        <input type="file"><!--上传一个文件-->
    </p>
    <p>flies:
        <input type="file" multiple><!--上传多个文件-->
    </p>
    <p>province:
        <select name="" id="">
            <option value="">北京</option><!--单选下拉框-->
            <option value="">上海</option>
            <option value="">广州</option>
        </select>
    </p>
    <p>GF:
        <select name="" id="" multiple><!--多选下拉框-->
            <option value="">小黑子</option>
            <option value="">坤坤</option>
        </select>
    </p>
    <p>info:
        <textarea name="" id="" cols="30" rows="10"></textarea><!--获取大段文本-->
    </p>
    <input type="submit" value="用户注册"><!--将数据发给服务端-->
    <input type="reset" value="重置内容"><!--将以输入内容清空-->
    <input type="button" value="普通按钮"><!--没有功能-->
</form>