HTTP协议初见
HTTP协议
四大特性
- 基于请求端响应
客户端发送请求，服务端才响应，服务端不会主动给客户端发送响应。
- 基于TCP/IP作用于应用层之上的协议
此协议属于应用层
- 无状态
服务端不会保存客户端的状态
- 无连接/短连接
无法保持长链接
数据格式
- 请求格式
请求首行（请求方式（有很多种） 协议版本）
请求头（大量K:V键值对）
换行（必须要有）
请求体
- 响应格式
响应首行（请求方式（有很多种） 协议版本）
响应头（大量K:V键值对）
换行（必须要有）
响应体
- 响应状态码
1xx 代表服务器已经收到了客户端的请求并且正在处理，客户端可以继续发送或者等待
2xx 如:200 表示请求成功，服务端发送了对请求的响应
3xx
如302（临时重定向，将访问的页面跳转到别的页面后再跳转回来）
如304（永久重定向，将访问的页面跳转到别的页面后不再跳转回原页面）
4xx
如403 无权限访问，如被防火墙拦截了
如404 访问的资源不存在
5xx
服务器内部的错误，与客户端无关
HTML基本语法结构
1. 注释语法(支持换行)
<!--我是注释语法-->
2. 文档结构
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<!--我是文档体内容-->
</body>
</html>
3. 标签分类
单标签（自闭和标签）（意思是自己闭合，内容写到标签内部）
<img/>
双标签
<h1>
内容被两个标签包起来
</h1>
head内常见标签
1. title 网页的小标题，也就是浏览器显示“新建标签页”的那个地方
2. meta 定义网页源信息，如
<head>
<meta charset="UTF-8">
<meta name="keywords" content="查询关键字"> # 百度的时候搜索的关键字
<meta name="description" content="网页简介"> # 百度搜索的结果里面每个网页都有的小介绍
<title>Hello World</title>
</head>
3. style内部支持编写css代码
<style>
h1 {
color: greenyellow;
}
</style>
4. link引入外部css文件
<link rel="stylesheet" href="mycss.css">
5. script支持内部编写js代码也可以引入外部js文件
<script>
prompt('加油，努力，为未来奋斗') # 网页弹窗
</script>
body内基本标签
1. 标题系列标签
<h1>标题</h1>
标题为 h1~h6
2. 段落标签
<p>我是段落第一行</p>
<p>我是段落行二行</p>
多行段落使用多个p
3. 其他标签
<p><u>我是u标签</u></p> # 下划线
<p><i>我是i标签</i></p> # 斜体
<p><s>我是s标签</s></p> # 删除线
<p><b>我是b标签</b></p> # 加粗
<p><b><s><i><u>我是多标签合一</u></i></s></b></p>
4. 换行与分割线
<br> 换行，可以在输入的结尾添加
<hr> 分割线
常见符号
空格
> 大于号
< 小于号
& &符号
¥ ¥符号
© 符号
® 符号
body内布局标签
div
块级标签
span
行内标签
body内布局标签
a标签
href属性功能
1. 填写网址，具备跳转功能
<a href="https://www.baidu.com/">baidu</a>
2. 填写其他标签的id值，具备锚点功能
target属性功能
1. _self为在页面跳转/_blank为创建新的页面并跳转
<a href="https://www.baidu.com/" target="_self">baidu</a>
img标签 图片标签
src
1. 填写图片地址
<img src="https://img2.baidu.com/it/u=1463809150,1385325066&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=706" alt="">
2. 更多特性未来再学
title
鼠标悬浮在图片上自动展示的文本
<img src="https://img2.baidu.com/it/u=1463809150,1385325066&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=706" alt="" title="新垣结衣">
alt
图片加载失败提示的信息
width\height
图片的尺寸，使用其中一个即可，因为是等经例缩放，两个都写的话会导致失真，单位是px
<img src="https://img2.baidu.com/it/u=1463809150,1385325066&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=706" height="100px" title="新垣结衣">
列表标签
无序列表（没有1、2、3、4这种标注的列表）(一般页面上所有规则排列的横向或者竖向的数据基本上都用的无序列表)
<ul>
<li>手机</li>
<li>衣物</li>
<li>电子</li>
</ul>
有序列表（type可以指定使用什么排序，支持的有1/a/A/i/I）
<ol type="I">
<li>手机</li>
<li>衣物</li>
<li>电子</li>
</ol>
标题列表
<dl>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
</dl>
表格标签
1. 基本框架
<table border="1"> # 整个标签需要用table包起来,border代表边框，数字越大边框越粗
<thead> # 表头使用thead包起来
<tr> # 一个tr代表表的一行
<th></th> # 一个th代表表的一列，且使用th会有字体加粗的效果
</tr>
</thead>
<tbody> # 表的内容使用tbody包起来
<tr> # 一个tr代表表的一行
<td></td> # 一个td代表表的一列，且td为普通字体
</tr>
</tbody>
</table>
正式代码如下：
<table border="1">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jack</td>
<td>18</td>
</tr>
</tbody>
</table>
表单标签
什么是表单标签：就是获取用户的信息，上传给服务端
form标签
action 控制数据的提交地址
method 控制数据的提交方法
input标签
type属性
text 普通文本框
password 输入会被加密
date 年月日
datetime-local 年月日时分秒
email 邮箱（会判定输入是否合法）
radio 单选
checkbox 多选
file 上传文件
submit 提交按钮（不同浏览器默认显示的按钮内容不同，最好自已加value）
reset 重置按钮（不同浏览器默认显示的按钮内容不同，最好自已加value）
button 文本按钮（需要搭配value使用）(未来用的最多)
代码如下：
<form action=""></form>
<label for="id1"> # 绑定一个id号，绑定后用户点用户名三个字也可以输入密码
<p>用户名<input type="text" id="id1"></p> # text表示文本
</label>
<label for="id2">
<p>密 码<input type="password" id="id2"></p> # password表示输入的东西变为密文
</label>
<p><input type="date"></p> # date表示年月日
<p><input type="datetime-local"></p> #表示日月天时分秒
<label for="id3"><p>邮箱地址<input type="email" id="id3"></p> </label> # 会自动较验邮箱输入是否合法
<p><input type="radio" name="gender">男</p> # name相当于字典中的值,两个name相同时，这俩变为多选一
<p><input type="radio" name="gender">女</p>
<p><input type="checkbox" name="hobby">basketball</p> # 多选多
<p><input type="checkbox" name="hobby">football</p>
<p><input type="file"></p> # 上传文件
<p><input type="file" multiple></p> # 加上multiple上传多个文件
select标签 下拉框
option标签 一个一个的选项
textarea标签 评论那种文本框
input标签应该有name属性
name属性相当于字典的键 input标签获取到的用户数据相当于字典的值
点击发送就会组织成字典的形式发送给服务端 这样才具有明确意义
HTTP协议初见的更多相关文章
- http协议无状态中的 "状态" 到底指的是什么？！
引子: 最近在好好了解http,发现对介绍http的第一句话[http协议是无状态的,无连接的]就无法理解了:无状态的[状态]到底指的是什么?! 找了很多资料不仅没有发现有一针见血正面回答这个问题的, ...
- http无状态协议，cookie和session详解（一）
1.HTTP无状态协议 首先看百度百科给出的定义: HTTP无状态协议,是指协议对于事务处理没有记忆能力.缺少状态意味着如果后续处理需要前面的信息,则它必须重传, 这样导致可能每次连接传送的数据量增大 ...
- Flume初见与实践
Photo by Janke Laskowski on Unsplash 参考书籍:<Flume构建高可用.可扩展的海量日志采集系统> --Hari Shreedharan 著 以下简称& ...
- [前端、HTTP协议、HTML标签]
[前端.HTTP协议.HTML标签] 什么是前端 """ 任何与用户直接打交道的操作界面都可以称之为前端 比如:电脑界面 手机界面 平板界面 什么是后端 后端类似于幕后操 ...
- 01：HTTP协议
软件开发架构 cs 客户端 服务端bs 浏览器 服务端ps:bs本质也是cs 浏览器窗口输入网址回车发生了几件事 """ 1 浏览器朝服务端发送请求 2 服务端接受请 ...
- 进程池与线程池基本使用、协程理论与实操、IO模型、前端、BS架构、HTTP协议与HTML前戏
昨日内容回顾 GIL全局解释器锁 1.在python解释器中 才有GIL的存在(只与解释器有关) 2.GIL本质上其实也是一把互斥锁(并发变串行 牺牲效率保证安全) 3.GIL的存在 是由于Cpyth ...
- 协程 & IO模型 & HTTP协议
今日内容 进程池与线程池的基本使用 协程理论与实操 IO模型 前端简介 内容详细 一.进程池与线程池的基本使用 1.进程池与线程池的作用 为了保证计算机硬件安全的前提下,提升程序的运行效率 2.回调机 ...
- 前端入门 HTTP协议 HTML简介 head内常见标签 body内常见标签 特殊符号 列表标签 表格标签 表单标签
目录 前端和后端的概念 前端前戏之B/S架构 数据交互的协议 HTTP协议 1.四大特性 1. 基于请求响应 2. 基于TCP.IP作用与应用层之上的协议 3. 无状态 4. 无\短连接 2.数据格式 ...
- 11月30日内容总结——前端简介、http协议概念、html协议概念及基础知识和部分标签的讲解
目录 一.前端与后端的概念 什么是前端开发? 什么是后端? 学习前端的目的 前端三剑客 二.前端前戏 三.HTTP协议 1.四大特性 2.报文格式 3.响应状态码 四.HTML概览 1.HTML简介 ...
- HTTP协议系列(1)
一.为什么学习Http协议 首先明白我们为什么学习HTTP协议,也就是说明白HTTP协议的作用.HTTP协议是用于客户端与服务器之间的通讯.明白了HTTP协议的作用也就知道了为什么要学习H ...
随机推荐
- js之对象处理
数据拼接一: 原始数据为对象 { 0grade: "" 0home: "萍钢四切(边部钩痕)" 0price: "3200" 0produc ...
- 当jar包执行时，内嵌的文件找不到时，可以这样解决！
1.加载是可以加载到的,但是只能是以流的形式存在. 2.如果要按文件进行加载,可以新建一个文件,然后以流的形式写入到新的文件中. 3.加载这个新的文件来进行处理.
- homework2软件方法论
什么是软件工程方法论? 1.软件工程是一个方法论,就是我们在开始一个项目时,大体框架一定要有这么一个概念,而具体实施时,必须根据公司一些特点,优化项目开发的流程,这样才是有实效而方法论只是软件工程的结 ...
- Android Studio查看指定APP日志
1.启动Android Studio 2.View->Tool Windows->Terminal 3.在底部输入monitor 4.Android Devices Monitor新窗 ...
- element ui el-date-picker format 和 value-format 格式不一致，会导致日期输入框不显示
element ui el-date-picker和value-format 不一致导致输入框不显示
- win10下Word点击链接跳转，提示“由于本机的限制，该操作已取消”
Word按住Ctrl点击链接进行跳转,提示"由于本机的限制,该操作已取消,请联系管理员" 网上很多,修改注册表 这边要说的是,修改重启word ,还不行的解决方法:点开任务管理器- ...
- [Unity框架]资源管理02：热更新
这里可以分成资源打包.资源更新下载.资源加载卸载3个部分 一.资源打包 参考链接: https://blog.uwa4d.com/archives/TechSharing_59.html https: ...
- webservice学习随笔（二）：通过cxf实现webservice
一:基本概念(可跳过) Apache CXF 是一个开放源代码框架,提供了用于方便地构建和开发 Web 服务的可靠基础架构.它允许创建高性能和可扩展的服务,您可以将这样的服务部署在 Tomcat 和基 ...
- Vue3中，如何获取在for循环中设置的ref对象
思考: for循环中,如果给每一个元素绑定一个特定的ref值(ref="xxx"),那么就要定义N多个变量来分别接受它们,显然不现实. 通过改变ref的绑定方式(:ref=&quo ...
- elementui中对样式的修改标签
/deep/ .el-drawer.rtl { -webkit-animation: rtl-drawer-out .3s; animation: rtl-drawer-out .3s; backgr ...