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

随机推荐

Python调用钉钉群机器人发送群消息
1.首先需要一个钉钉群,群才有机器人 2.群设置->智能群助手->添加机器人->自定义机器人 3.添加自定义机器人,配置如下:给机器人命名,选择加签.保存机器人的秘钥.Webhook ...
智利SUBTEL更新WiFi 6技术法规！
2022年9月6日,智利电信监管机构(SUBTEL) 发布了第2844号豁免决议,更新了1985号豁免决议,即短程设备的固定技术标准. 主要更新如下: • 2.4 GHz频段已在医疗设备目录中删除,现 ...
vue npm安装指令汇总
1.elmentui:npm i element-ui -S 2.打印插件:npm install vue-print-nb --save 3.时间转换插件Moment:npm install mom ...
ansible 详解基本篇
Ansible是一种常用的自动运维化工具,基于python开发,分布式,无需客户端,轻量级,配置语言采用YAML. 安装方式yum yum install epel-release&& ...
UI自动化之【chromedriver.exe无法删除问题】
想删掉chromedriver.exe,结果提示被打开在任务管理器中,找到Chromedriver.exe,结束进程
用JS实现一个简单的购物车小案例
该案例主要是实现的功能有:添加商品功能,将商品添加到购物车的功能还有将商品删除功能,还有就是移出购物车的功能该案例实现的难点是将商品添加到购物车列表的时候数量的增加,当购物车有该商品的时候就进行累 ...
UG二次开发-内存访问违例
在项目中修改路径参数后重算发生了内存访问违例的错误,经过调试,发现是下面这一行出的错 surfaceContourBuilder1.Commit(); 经过反复调试,发现这个东西不能随便放,不可以想当 ...
C++ 全面总结
1. 基本数据类型:没什么好说的.知道浮点数存储起来不精确.各种类型占的大小在不同平台可能不一样就行了 2. 初始化列表:能用就用.能防止潜在的类型收窄, 3. static_cast 和 dynam ...
用反证法说明List<Object>和List<String>不存在子父类关系可行吗？
看宋红康老师的Java基础视频讲解,视频中用反证法证明List
一道网红题：Java值传递，答案开始看了不太懂，是不是涉及到了匿名类的实例化？
题目如下:看起来是值传递的考察... public class Test{ public static void main(String[] args){ int a = 10; int b = 10 ...

HTTP协议初见

HTTP协议

四大特性

数据格式

HTML基本语法结构

head内常见标签

body内基本标签

常见符号

body内布局标签

body内布局标签

列表标签

表格标签

表单标签

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

随机推荐

热门专题