前端
- 什么是前端
- 一句话概括就是：任何与用户直接打交道的操作界面都可以称之为是一个前端。比如：电脑显示界面、手机界面等
- web服务的本质
- 浏览器窗口输入一个网址敲回车发生了哪些事
- 朝着在指定的服务端发送请求
- 服务端接收相应的请求
- 服务端返回相应的响应
- 浏览器接收响应，按照特定的规则渲染页面展示给用户看
- 浏览器窗口输入一个网址敲回车发生了哪些事
HTTP协议
- 超文本传输协议
- 规定了浏览器与服务端之间数据传输的格式
- HTTP四大特性
- 基于请求响应 （一次请求对应一次响应）
- 基于TCP/IP 作用于应用层之上的协议
- 无状态 （不保留客户端的状态）
- 无连接
- 数据格式
- 请求格式
- 请求首行（请求方式，协议版本）
- 请求头（一大堆k，v键值对）
- 请求体（携带的数据，并不是一直都有，有时候可能是空的，取决于请求方式）
- 响应格式
- 响应首行（响应状态码）
- 响应头（一大堆k，v键值对）
- 响应体（浏览器展示给用户看的数据）
- 响应状态码
- 用数字来表示一大堆提示信息
- 1XX：服务端已经成功接收到客户端的数据正在处理，可以继续提交
- 2XX：200请求成功，服务端已经返回了你想要的数据
- 3XX：重定向（原本想访问A但是内部自动给你转到了B上面）
- 4XX：404请求资源不存在，403你当前不具备请求该资源的条件
- 5XX：500服务端内部错误（机房着火了、宕机、爆炸）
- 用数字来表示一大堆提示信息
- 请求格式
- 请求方式
- get请求
- 朝服务端获取资源（类似于浏览器访问百度获取百度首页）
- post请求
- 朝服务端提交数据（类似于登录注册功能）
- get请求
HTML
- 超文本标记语言
- 浏览器能够识别的语言非常少：（HTML/XML、CSS、JS）
XML也可以书写前端页面，主要用于odoo框架中，书写企业内部管理软件
HTML注释
<!--单行注释-->
<!--
多行注释1
多行注释2
-->
由于HTML页面结构比较复杂，内容比较多，不便于后期的维护，修改，通常在写页面的时候，习惯用下面的方式来人为的划分代码区域
<!--顶部导航条样式开始-->
······
<!--顶部导航条样式结束-->
<!--左侧菜单栏样式结束-->
······
<!--左侧菜单栏样式结束-->
HTML文档结构
<html>
<head></head>：head内存放的内容不是给用户看的，是给浏览器去识别做相应的操作
<body></body>：body内存放的内容就是浏览器展示给用户看到的花里胡哨的页面
</html>
HTML文档打开方式
- pycharm自动调用浏览器打开（推荐）
- 手动查找路径之后选择浏览器打开
标签的分类
标签的分类1
1. 双标签
2. 自闭和标签
标签的分类2
1.块儿级标签
独占一行(h1-h6、p、br、hr、div)
1.块儿级标签内部可以嵌套任意的块儿级标签和行内标签
2.特例：p虽然是块儿级标签，但是它的内部只能嵌套行内标签，不能嵌套块儿级标 签，如果嵌套了，没问题，但是不符合HTML语法规范
2.行内标签
(u、s、i、b、span)
自身文本多大，就占多大
行内标签内部不能嵌套块儿级标签和行内标签
书写标签的时候，只需要写标签名字，之后tab键可以自动补全
此功能来源于---> emmet插件
head内常用标签
title：定义网页标题
style：内部支持直接写CSS代码
link：引入外部的CSS文件
script：
1.内部可以直接编写js代码
2.可以通过src属性引用外部js代码
meta：
name属性
keywords
description
URL：统一资源定位符
body内常用标签
基本标签
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>人民币 ¥10000</p>
<p>版权标识 ©</p>
<p>注册商标 ®</p>
常用标签
div 块儿级标签
span 行内标签
本身没有任何特殊意义，但是这两个使用最多，这两个标签是用来做前期的页面布局的
img 图片标签
src
1.可以写一个网站图片地址
2.还可以写本地的图片地址
3.url(自动朝该url发送get请求获取数据)
alt
当图片加载不出来的时候，默认展示的提示信息
title
当鼠标悬浮在图片上的时候，展示的提示信息
width，height
修改图片的宽高篇幅
修改一个，另外一个会自动等比例缩放
如果两个都修改，图片就会丢帧
a 链接标签
href
放一个url
点击就会跳转到该url所对应的资源
target
控制是否在当前页跳转
默认是在当前页跳转 _self
新建页面跳转 _blank
锚点功能
href不单单可以写url，也可以写另外一个a标签的id值
点击就会跳转到该id值所对应的a标签所在的位置
<a href="" id="d1">页首</a>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: green"></div>
<a href="#d1">回到顶部</a>
<a href="#d2">回到中间</a>
标签应该具备的属性
- id属性：类似于身份证号，用来唯一标识当前HTML页面中的某一个标签（同一个HTML页面中，id值不能重复）
- class属性：类似于面向对象的继承，直接引用别的类的样式
列表标签
无序列表(较多)
ul
li
只要页面上出现了比较有规则排列的文本，基本上都可以用无序列来实现
<p>无序列表</p>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
有序列表
ol
<p>有序列表</p>
<ol type="1">
<li>哈哈哈</li>
<li>嘿嘿嘿</li>
<li>呵呵呵</li>
</ol>
标题列表
dl
dt标题
dd内容
<p>标题列表</p>
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>
表格标签
展示网站数据的时候，一般情况下可以使用表格标签
<table> border="1" 加表格线
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
写表格标签，先写结构，然后写数据
一个tr就是一行
th和td之分：一个加粗，一个不加粗
通常情况下表头用th，表单内容用td
rowspan="2" /colspan="2" 合并单元格
表单标签
form标签
获取用户输入(输入，选择，上传文件...)并且将数据打包发送给后端
action参数
用来控制数据提交的路径(到底朝哪个后端服务器提交数据)
三种写法：
1.不写，默认就是朝当前页面所在的地址提交数据
2.全路径(https://www.baidu.com)
3.只写路径后缀(/index/)
获取用户输入input标签 该标签是一个行内标签
input类似于前端的变形金刚
<input type="radio" name="gender" checked>
type属性
text 普通文本
password 密文
date 日期
radio 多选一
checkbox 多选多
默认选中 checked="checked"
当标签与属性名和属性值相同的时候，可以只写属性名
reset 重置
button 普通按钮
submit 触发form表单提交动作
file 获取文件
select标签 下拉框
一个个选项就是一个个option标签
默认是单选的
可以加一个multiple改成多选
<select name="" id="" multiple>
加selected 可以让option标签默认选中
</select>
textarea标签 获取大段文本
label通常是配置input一起使用的
for用来填写对应的input标签的id值
点击label标签内的内容，会自动让对应的input标签聚焦
能够触发form表单提交数据的按钮
<input type="submit">
可以通过value属性来指定按钮文本内容
<input type="submit" value="注册">
<button>登录</button>
input获取到的用户输入就类似于是字典的value
input中name属性就类似于是字典的key