HTTP协议:
超文本传输协议,用来规定服务端和浏览器之间的数据交互格式
四大特性:
基于请求响应
基于TCP/IP作用于应用层之上的协议
无状态:不会保存用户信息跟状态
cookie、session、token...这些出现就是为了弥补无状态这个特性,可以用来记录用户的状态
无/短链接:请求后得到响应后,就没有任何链接和关系了
请求格式:(请求首行 + 请求头 + + 请求体)
请求首行(标识http协议版本,当前请求方式)
请求头(一大推k,v键值对)
请求体(只用post请求才有,存放post请求提交的敏感数据)
注意:如果请求头没有,则要用 代替,也就是无论请求首行、请求头还是请球体缺失,都要用 补上)
响应数据格式:
响应首行 (标识http协议版本,响应状态码)
响应头 (一大推k,v键值对)
响应体 (返回给浏览器展示给用户看的数据)
请求方式:
get请求:跟服务端要数据
post请求:向服务端提交数据
响应状态码:用一串简单的数字来表示一些复杂的状态或者描述性信息,主要有五个系列
1xx:服务端已经成功接收到了你的数据正在处理,你可以继续提交额外的数据
2xx:服务端成功响应了你想要的数据
3xx:重定向(当你在访问一个需要登陆后才能看到的页面,会自动跳转到登陆页面)
4xx:请求错误
5xx:服务器内部错误。
url:统一资源定位符
HTML
HTML:超文本标记语言,是一种用于创建网页的标记语言,文件扩展名:.htm或.htm
HTML文档结构:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> #设置编码 <title>Title</title> #设置标题 </head> <body>
</body> </html>
#注释 <!--单行注释-->
<!-- 1 多行注释 2 3 -->
HTML标签分类及语法:
- 单标签:<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
- 双标签:<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
HTML三个重要属性:
- id:定义标签的唯一ID,HTML文档树中唯一
- class:css样式类名,作用于html元素
- style:规定元素的行内样式(css样式)
HTML常用标签
head内常用标签:
- <title></title> 定义网页标题
- <style>内部样式内容(css代码) </style> 定义内部样式表
Meta标签
组成:http-equiv属性和name属性组成
- http-equiv属性:相当于http的文件头作用,主要向浏览器传回一些有用的信息,以帮助正确的显示网页
- name属性:主要用于描述网页,属性值content的内容主要是便于搜索引擎机器的查找
<!--指定文档的编码类型(需要知道)--> <meta http-equiv="content-Type" charset=UTF8"> <!--2秒后跳转到对应的网址,注意引号(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <!--name属性--> <meta name="keywords" content="战争,战争片、战争电影"> <!-- 当你用浏览器搜索的时候,只要输入kwywords后面指定的关键字,比如战争等,那么该网页就有可能被百度搜索出来展示给用户 --> <meta name="description" content="NQ31">
body内常用标签
基本标签:
<h1>标题标签</h1> <!--1~6级标题--> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <!--换行--> <br> <!--水平分割线--> <hr>
特殊符号:
- 空格
- > 大于号
- < 小于号
- & &
- ¥ ¥
- $copy; ©
- ® ®(商标)
常用标签
- div标签:块儿级标签,用来定义一个块级元素,独占一行
- span标签:行内标签,用来定义内联(行内)元素
块儿级标签:独占一行(h1-h6、p、div这些都是块儿级标签)
行内标签:自身文本多大就占多大(i、u、s、b、span 这几个都是行内标签)
总结:只要是块儿级标签都可以嵌套任意块儿级标签和行内标签
但是p标签只能嵌套行内标签
块儿级标签可以修改长宽,行内标签不可以。
img标签及参数:
<img src="" alt="" title=""/>
src:图片路径,也可以是图片的url
alt: 当图片加载不出来的时候,给图片的描述性信息
title: 当鼠标悬浮在图片上之后,自动展示的提示信息
heightwidth:图片的高度和宽度
注意:当高度和宽度只修改一个的时候,另一个参数会等比例缩放
两个同时修改,没有考虑比例时,图片会失真。
a标签
<a href=""></a> href:放url,当用户点击就会跳转到该url页面 放其他a标签的id值 也叫锚点跳转 例如:<a href="#id值"></a> target: 默认a标签是在当前页面完成跳转 _self <a href="www.baidu.com" target="_self"></a> 新建页面跳转 _blank <a href="www.baidu.com" target="_blank"></a>
列表标签
1、无序列表
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul> <!--type属性:--> disc(实心圆点,默认值) circle(空心圆圈) square(实心方块) none(无样式)
2、有序列表
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol> <!-- type属性--> 1 数字列表,默认值 A 大写字母 a 小写字母 Ⅰ大写罗马 ⅰ小写罗马 <!--start属性:表示起始位置-->
3、标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格
表格的基本结构:
<table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>1</td> <td rowspan='2'>Egon</td> <td colspan='2'>杠娘</td> </tr> </tbody> </table> <!-- <thead>表示表格头,用来放表格标题也就是表格的列名 <th>表格的列名 <tbody>用来放表格数据的身体部分 <tr>表示行 <td>表示行里面的每一列 --> <!--table属性--> border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. 像素 百分比.(最好通过css来设置长宽)
<!-- td的属性--> rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列(即合并单元格)
表单标签
form 标签
<form action=""></form> 在该form标签内部书写的、获取用户的数据都会被form标签提交到后端 action属性:控制数据提交的后端路径(给哪个服务端提交数据) 1、什么都不写,默认就是朝当前页面所在的url提交数据 2、写全路径,比如:https://www.baidu.com 这样就是朝百度服务端提交数据 3、只写路径后缀 action=“/index/" 自动识别出当前服务端的ip和port拼接到前面。比如:host:port/index/
accept-charset: 规定在被提交表单中使用的字符集(默认:页面字符集)
autocomplete: 规定浏览器应该自动完成表单(默认:开启)
enctype: 规定被提交数据的编码(默认:url-encoded)。
method: 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name: 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate: 规定浏览器不验证表单。
target:规定 action 属性中地址的目标(默认:_self)
label标签
<label for="d1">第一种,直接将input写在label内 username:<input type="text" id="d1"> </label> <label fro="d2"> 第二种,通过id连接即可,不用嵌套在label内 password: </label> <input type="passwor" id="d2"> <!---注意:label和input都是行内标签,input可以不跟label关联-->
input标签
input属性:
- name:表单提交时的键,类似于参数
- value:表单提交时对应项的值
- checked:radion和checkbox默认被选中的项
- readonly:text和password设置只读
- disabled:所有input均适用。
type属性:
text:普通文本 password:密文 date:日期 submit:用来触发form表单提交数据的动作 button:一个普通按钮,没有任何功能,可以给它自定义各种功能 <!--能够触发form表单提交数据的按钮有 <input type="submit" value="注册”> <button>点击</button> --> reset:重置内容 radio: 单选 <!--默认选中要加checked="checked"--> <input type="radio" name="gender" checked="checked">男 <!--当标签的属性名跟属性值一样的时候可以简写--> <input type="radio" name="gender" checked>男 checkbox:多选 <input type="checkbox" checked>肠粉 file: 获取文件 也可以一次性获取多个文件 <input type="file" multiple>
注意:form表单提交文件需要注意
1、method必须是post
2、enctype="multipart/form-data"
enctype类似与数据提交的编码格式
默认是urlencoded 只能够提交普通的文本数据
formdata 就可以支持提交文件数据。
select 标签 默认是单选 可以mutiple参数变多选,默认选中是selected="selected"简写为selected
<select name="" id="" multiple> <option value="" selected>航母</option> <option value="" selected>战斗机</option> <option value="">坦克</option> </select>
textarea标签:获取大段文本
<p>个性签名: <textarea name="" id="" cols="30" rows="10"></textarea> </p>
name:名称
cols:列数
rows:行数
disable:禁用
注意:所有获取用户输入的标签,都应该有name属性:
name就类似于字典的关键字key
用户输入的数据就类似于字典的值value
<p>gendeer: <input type="radion" name="gender">男 <input type="radion" name="gender">女 </p>