HTTP协议初见

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

常见符号

 	空格
>	大于号
<	小于号
&	&符号
¥	¥符号
©	符号
®	符号

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标签获取到的用户数据相当于字典的值
	点击发送就会组织成字典的形式发送给服务端 这样才具有明确意义