HTTP协议:超文本传输协议,用来规定服务端和浏览器之间的数据交互的格式。
该协议你可以不遵循,但是你写的服务端就不能被浏览器正常访问,你就自己跟自己玩,自己写客户端,用户想要使用,就下载你专门的app即可。
四大特性
(1)基于请求响应
(2)基于TCP/IP作用于应用层之上的协议
(3)无状态(不保存用户的信息)
由于HTTP协议是无状态的,所以后续出现了一些用来记录用户状态的技术,cookie、session、token...
(4)无/短链接:请求一次响应一次,之后没有任何链接与关系。
长链接:双方建立连接之后默认不断开,websocket。
请求数据格式:
请求首行(标识HTTP协议,当前请求方式)
请求头(一大堆k、v键值对)
(重要)
请求体(并不是所有的请求方式都有,get没有、post有,存放的是post请求提交的敏感数据)
响应数据格式
响应首行(标识HTTP协议,响应状态码)
响应头(一大堆k、v键值对)
(重要)
响应体(返回给浏览器展示给用户的数据)
响应状态码:用一串简单的数字来表示一些复杂的状态或者描述信息。
1xx:服务端已经成功接受到你的数据正在处理,你可以继续提交额外的数据。
2xx:服务端成功响应了你想要得数据(200 ok请求成功)。
3xx:重定向(当你在访问一个需要登录之后才能看的页面,你会发现会自动跳转到登录页面)。
4xx:请求错误。404:请求资源不存在。403:当前的请求不合法或者不符合访问资源的条件。
5xx:服务端内部错误(500)。
请求方式:
(1)get请求:朝服务端要数据
(2)post请求:朝服务端提交数据
url统一资源定位符,网址。
HTML简介:超文本标记语言。想要浏览器渲染出你的页面,就要遵循HTML语言。
浏览器看到的页面,内部其实就是HTML代码(所有的网站内部都是HTML代码)。
# 注释
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
# 由于HTML代码非常的杂乱无章并且很多,所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTML代码
<!--左侧菜单栏结束-->
HTML文档结构
<html>
<head></head>:head内的标签不是给用户看的,而是定义一些配置,主要是给浏览器看的
<body></body>:body内的标签,写什么浏览器就渲染什么,用户就能看到什么
</html>
标签的分类:双标签、单标签(自闭和标签)
head内常用标签(书写HTML代码时,只需要写标签名,然后tab自动补全)
<title>Title</title> 网页标题
<style>
h1{
color: greenyellow;
}
</style> 内部来书写css代码
<script>
alert(123)
</script> 内部来书写js代码
<script src="myjs.js"></script> 还可以引入外部js文件
<link rel="stylesheet" href="mycss.css"> 引入外部css文件
body常用标签
<h1>我是h1</h1> 标题标签,1-6级标题
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落</p>
<br> 换行
<hr> 水平分割线
标签的分类
(1)块儿级标签:独占一行。(h1-h6、p、div)
1、块儿级标签可以修改长度,行内标签不可以,修改了也不会有变化。
2、块儿级标签内部可以嵌套任意的块儿级标签和行内标签,p标签是块儿标签,但是它只能嵌套行内标签,不能嵌套块儿级标签。如果你嵌套了,问题也不大,因为浏览器会自动帮你解开(浏览器是直接面向用户的,不会轻易的报错,哪怕报错用户也基本感觉不出来)。
总结:只要是快儿级标签都可以嵌套任意的块儿级标签和行内标签。但是p标签只能嵌套行内标签。
(2)行内标签:自身文本多大就占多大。(b、i、u、s、span)
总结:行内标签不能嵌套块儿级标签,但是可以嵌套行内标签。
特殊标签
:空格
> >
<;<
&&
¥¥
©©
®®
常用标签
div:块儿级标签
span:行内标签
上述的两个标签是在构造页面最常用的,页面一般用div和span占位之后再去调整样式,尤其是div使用比较频繁。
div可以把他看做一块区域,也就意味着用div来提前规定所有的区域,之后在该区域中填写内容即可。
普通文本先用span标签。
# img标签:图片标签
<img src="" alt="" title="" height="" width="">
src:存放图片的地址,可以本地或者网站的图片地址,。
alt:当图片没有加载出来的时候,出现的描述信息。
title:当鼠标悬停在图片上之后,出现的描述信息。
height:调整图片的高度
width:调整图片的宽度
当height和width只修改了一个时,另一个也会等比例修改。当你修改了两个参数,而且没有考虑比例的话,就会出现失真。
# a标签 链接标签
<a href="" target=""></a>
当a标签指定的网址被点击后,会出现颜色的变化。(浏览器给你记忆了)
href:
(1)放的是url,用户点击就会跳转到url页端。
(2)放其他a标签的id值。点击就可以跳转到对应的标签位置。
target:
(1)默认a标签是当前页面完成跳转,target参数默认为_self,将它修改成_blank就可以在另一页面打开。
a标签的锚点功能:eg:点击一个文本标题,页面就会自动跳转到标题对应的内容区域。
标签具有的两个重要书写
(1)id值:类似于标签的身份证号,在同一个html页面上id值不能重复。
(2)class值:该值由有点类似于面对对象里面的继承,一个标签可以继承多个class值。
列表标签
无序标签(较多)
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
虽然ul标签很丑,但是在页面布局的时候,只要是排版一致的几行数据基本上用的都是ul标签。
有序列表(了解)
<ol>
<li>111</li>
<li>111</li>
<li>111</li>
</ol>
标题列表(了解)
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
表格标签
<table>
<thead> 表头
<tr>
<td></td> 加粗
<th></th> 正常
</tr>
</thead>
<tbody></tbody> 数据
</table>
<table boder="1"> 加外边宽
<td colspan="2">aa</td> 水平方向占多行
<td rowspan="2">bb</td> 垂直方向占多行
表单标签
# 能够获取前端用户的数(用户输入的、用户选择、用户上传...),基于网络发送到后端服务器
<form action=""></form> 在该from标签内部书写的获取用户的数据都会被from标签提交给后端
action:控制数据提交给后端路径(给哪个服务器提交数据)
1.什么都不写,就默认给当前的页面所在的url提交数据。
2.写全路径。
3.只写路径后缀action="/index/",自动识别出当前服务端ip和port拼接到前面
host:port/index/
<form>
<label for="d1"> 第一种,直接将input写在label内
username: <input type="text" id="d1">
</label>
<label for="d2">password</label> 第二种,直接通过id链接即可,无需嵌套。
<input type="text" id="d2">
</form>
input不跟label关联也没有关系。
label和input都是行内标签。
input标签,通过type属性进行修改。
text:普通文本。
password:密文。
date:日期。
submit:用来触发form表单提交数据的动作。
button:普通的按钮,本身没有功能,学完js可以使用自定义功能。
radio:单选。默认选中使用checked="checked"。但标签的属性名和属性值一样的时候可以简写。
<input type="radio" name="gender" checked>男
<input type="radio" name="gender" checked="checked">男
checkbox:多选。默认选中也是checked。
file:获取文件。也可以一次性获取多个。<input type="file" multiple>
hidden:隐藏当前input框。
textarea标签:获取大量文本。
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="submit" value="提交">
<input type="button" value="按钮">
<input type="reset" value="重置">
# 能够触发form表单提交数据的按钮有:
<input type="submit" value="提交">
<button>点我</button>
# 所有获取用户输入的标签,都应该有name属性。
name就是类似于字典的key
用户的数据就是类似于字典的value
p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
select标签,默认是单选,可以加multiple参数变成多选,默认选中selected
p>province:
<select name="" id="">
<option value="">广州</option>
<option value="" selected>东莞</option>
<option value="">深圳</option>
</select>
</p>
(1)form表单提交数据默认是发送get请求。数据是拼接到url后面的。
(2)可以指定发送请求的方式
<form action="http://127.0.0.1:5000/index" method="post">
(3)从form表单获取文件数据的条件
1.post请求
2.<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
enctype="multipart/form-data"。enctype类似于数据提交的编码格式,默认是urlencoded,只能提交普通的文本数据,formdata就可以提交文件数据。