HTTP协议

四大特性

  1. 基于请求端响应

​ 客户端发送请求,服务端才响应,服务端不会主动给客户端发送响应。

  1. 基于TCP/IP作用于应用层之上的协议

​ 此协议属于应用层

  1. 无状态

​ 服务端不会保存客户端的状态

  1. 无连接/短连接

​ 无法保持长链接

数据格式

  1. 请求格式

​ 请求首行(请求方式(有很多种) 协议版本)

​ 请求头(大量K:V键值对)

​ 换行(必须要有)

​ 请求体

  1. 响应格式

​ 响应首行(请求方式(有很多种) 协议版本)

​ 响应头(大量K:V键值对)

​ 换行(必须要有)

​ 响应体

  1. 响应状态码

​ 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> 分割线

常见符号

&nbsp;	空格
&gt; 大于号
&lt; 小于号
&amp; &符号
&yen; ¥符号
&copy; 符号
&reg; 符号

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>密&nbsp;&nbsp;&nbsp;码<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协议初见的更多相关文章

  1. http协议无状态中的 "状态" 到底指的是什么?!

    引子: 最近在好好了解http,发现对介绍http的第一句话[http协议是无状态的,无连接的]就无法理解了:无状态的[状态]到底指的是什么?! 找了很多资料不仅没有发现有一针见血正面回答这个问题的, ...

  2. http无状态协议,cookie和session详解(一)

    1.HTTP无状态协议 首先看百度百科给出的定义: HTTP无状态协议,是指协议对于事务处理没有记忆能力.缺少状态意味着如果后续处理需要前面的信息,则它必须重传, 这样导致可能每次连接传送的数据量增大 ...

  3. Flume初见与实践

    Photo by Janke Laskowski on Unsplash 参考书籍:<Flume构建高可用.可扩展的海量日志采集系统> --Hari Shreedharan 著 以下简称& ...

  4. [前端、HTTP协议、HTML标签]

    [前端.HTTP协议.HTML标签] 什么是前端 """ 任何与用户直接打交道的操作界面都可以称之为前端 比如:电脑界面 手机界面 平板界面 什么是后端 后端类似于幕后操 ...

  5. 01:HTTP协议

    软件开发架构 cs  客户端 服务端bs  浏览器 服务端ps:bs本质也是cs 浏览器窗口输入网址回车发生了几件事 """ 1 浏览器朝服务端发送请求 2 服务端接受请 ...

  6. 进程池与线程池基本使用、协程理论与实操、IO模型、前端、BS架构、HTTP协议与HTML前戏

    昨日内容回顾 GIL全局解释器锁 1.在python解释器中 才有GIL的存在(只与解释器有关) 2.GIL本质上其实也是一把互斥锁(并发变串行 牺牲效率保证安全) 3.GIL的存在 是由于Cpyth ...

  7. 协程 & IO模型 & HTTP协议

    今日内容 进程池与线程池的基本使用 协程理论与实操 IO模型 前端简介 内容详细 一.进程池与线程池的基本使用 1.进程池与线程池的作用 为了保证计算机硬件安全的前提下,提升程序的运行效率 2.回调机 ...

  8. 前端入门 HTTP协议 HTML简介 head内常见标签 body内常见标签 特殊符号 列表标签 表格标签 表单标签

    目录 前端和后端的概念 前端前戏之B/S架构 数据交互的协议 HTTP协议 1.四大特性 1. 基于请求响应 2. 基于TCP.IP作用与应用层之上的协议 3. 无状态 4. 无\短连接 2.数据格式 ...

  9. 11月30日内容总结——前端简介、http协议概念、html协议概念及基础知识和部分标签的讲解

    目录 一.前端与后端的概念 什么是前端开发? 什么是后端? 学习前端的目的 前端三剑客 二.前端前戏 三.HTTP协议 1.四大特性 2.报文格式 3.响应状态码 四.HTML概览 1.HTML简介 ...

  10. HTTP协议系列(1)

    一.为什么学习Http协议       首先明白我们为什么学习HTTP协议,也就是说明白HTTP协议的作用.HTTP协议是用于客户端与服务器之间的通讯.明白了HTTP协议的作用也就知道了为什么要学习H ...

随机推荐

  1. vue-cli简介

    1.定义:vue-cli(俗称:vue 脚手架)是 vue 官方提供的.快速生成 vue 工程化项目的工具,提供了终端里的 vue 命令.它可以通过 vue create 快速搭建一个新项目: 特点: ...

  2. 查看mmdetection中模型的配置信息

    方法一 可以直接打开mmdetection中的目录查看,/configs目录下都是对应的模型的配置 示例: 可以找到_base_目录下的这四个文件文件查看配置. 方法二 读取配置文件查看 在命令行中输 ...

  3. link和@import的对比

    概念的区别  @import 是css的语法规则: link 是HTML标签 用途的区别  @import 是css语法,只能用来导入样式文件: link 除了引入样式,还可引入其他资源文件 加载顺序 ...

  4. Hadoop之HDFS优缺点、设计原理、框架

    如需大数据开发整套视频(hadoop\hive\hbase\flume\sqoop\kafka\zookeeper\presto\spark):请联系QQ:1974983704  Hadoop的前世今 ...

  5. ajax的async异步执行属性

    遇到了一个ajax,看到了一个属性,async,是用来设置同步执行,或者是异步执行的 举一个例子:  $.ajax({  async: false,  type : "post", ...

  6. 转载C#加密方法

    方法一:    //须添加对System.Web的引用     using System.Web.Security;          ...          /// <summary> ...

  7. Python第七章实验报告

    一.实验名称:<零基础学Python>第7章 面向对象程序设计 二.实验环境:IDLE Shell 3.9.7 三.实验内容:5道实例.4道实战 四.实验过程: 实例01 创建大雁类并定义 ...

  8. 日常笔记-VS

    VS快捷键 按键 作用 CTRL+R,CTRL+W 以点显示空格 CTRL+L 删除当前行 CTRL+D 重复当前行 CTRL+K,D 格式化代码 CTRL+M 展开代码

  9. java生态下的后端开发都有哪些技术栈?

    前言 我08年毕业,那时(2003-2010)C#还比较时髦的,大学跟着老师进修的,毕业后就从事winform窗体应用程序开发.慢慢的web网站兴起,就转到aps.net开发,再到后来就上了另一艘船( ...

  10. 什么是RPA?

    RPA是Robotic Process Automation(机器人流程自动化)的简称,是以软件机器人及人工智能为基础的业务过程自动化科技.它让软件机器人自动处理大量重复的.基于规则的工作流程任务,能 ...