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

常见符号

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

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 ...

随机推荐

【loguru】Python简单的日志管理模块
简介在部署一些定时运行或者长期运行的任务时,为了留存一些导致程序出现异常或错误的信息,通常会才用日志的方式来进行记录这些信息. 在 Python 中用到日志记录,那就不可避免地会用到内置的 logg ...
QT动态库的创建和使用
QT动态库的创建和使用步骤一: 创建一个库文件 Library 步骤二:进行动态库封装方法的实现注意事项:要注意共享类均需要包含导出的宏定义这个宏定义和导出向导的宏定义一致宏定义: 向导文件: ...
如何修改被编译后DLL文件 (转发)
我们平时在工作中经常会遇到一些已经被编译后的DLL,而且更加麻烦是没有源代码可以进行修改,只能针对这个DLL的文件进行修改才能得到我们想要的结果:本文将通过一个实例来演示如果完成一个简单的修改;我们将 ...
.Net 开发 web.config参数获取
System.Configuration.ConfigurationSettings.AppSettings["title"] 对应着 web.config下面的 <conf ...
关于ADB命令工具
android提供了不少命令行工具,方便我们调试和查看信息.下面是frameworks/base/cmds(android 6.0.1)中的命令. $ tree cmds -L 1 cmds am├─ ...
关于 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件的处理
关于 npm run serve 之后 'vue-cli-service' 不是内部或外部命令,也不是可运行的程序或批处理文件一.安装node.js 去官网安装Node.js(地址:https:/ ...
图模导入原理之 SVG图形基础与图形导入
一.svg图形基础 PMS图形中,图形svg文件内容一般由两部分组成: 1.<defs>标签中定义的是图元信息,即各种不同设备不同状态的图元应该如何显示: 2.各种<XXXXXX_L ...
C++11:初始化列表
在老版本的C++中,我们可以比较方便得对结构体.数组等对象利用{}进行初始化,而类变量的初始化则取决于构造函数的形式,例如: struct A { int a, b, c; }; class Foo ...
python求列表中某个值第一次出现的位置
x=[2,1,1] print(x.index(1)) 结果为1
为什么对1e9 + 7取模
在刷题的时候,很多题目答案都要求结果对1e9 + 7取模刚开始我非常不理解,为什么要取模,取模难道结果不会变吗? 答案是结果会变,但因为原本需要得出的答案可能超出int64的范围,比如他叫你计算50 ...

HTTP协议初见

HTTP协议

四大特性

数据格式

HTML基本语法结构

head内常见标签

body内基本标签

常见符号

body内布局标签

body内布局标签

列表标签

表格标签

表单标签

HTTP协议初见的更多相关文章

随机推荐

热门专题