web服务的本质
web服务的本质
web服务为B/S架构
- 朝着指定的服务器地址发送请求
- 服务端接收请求 并处理
- 返回相应的响应
- 浏览器接收并渲染出好看的页面 给用户看
web的两种请求方式
-
get请求
朝服务器要资源
-
post请求
朝服务器提交资源
HTTP协议
HTTP协议是什么
http是超文本传输协议 , 规定了服务端与客户端 ( 浏览器 ) 数据传输的数据格式
HTTP协议的四大特性
- 基于TCP/IP作用于应用层之上的协议。
- 基于请求 响应，即请求对应 响应。
- 无状态，不保存客户端状态，但cookie、session可以解决该问题。
- 无连接，每次数据传输完成后就会断开连接。
HTTP的数据格式
请求格式
请求首行(请求方式 协议版本)
请求头(一大堆k:v键值对)
请求体(敏感信息 密码 身份证号)
响应格式
响应首行(请求方式 协议版本)
响应头(一大堆k:v键值对)
响应体(给用户看的数据)
响应状态码
用数字来表示一串文字需要表达的意思
- 1xx：服务端已成功接收到了你的请求 正在处理 你可以继续提交其他数据
- 2xx：服务端成功响应了相应的数据
- 3xx：重定向
- 4xx：客户端错误
- 5xx：服务器内部错误
HTML
HTML是一种超文本标记语言
- 超文本：文本，图片，音频，视频，超链接等
- 标记：符号，标签
标记是没有逻辑的
组成：指令、转义字符、标签
目的：完成页面的搭建
HTML页面的大致组成部分
<!doctype html>必须出现在页面的最上方，规定该文档采用的html版本类型<html>页面标签：包含所有页面内容，只有head与body两个子标签<head>头标签：样式、脚本、后勤工作：页面编码、页面标签标题图标，主放功能<body>体标签：页面现实内容存在区域、样式、脚本，主放内容
简单的一个html5搭建：
<!DOCTYPE html>
<html lang='en'><!--en会告诉浏览器内容为英文,中文为zh,若没有lang则浏览器会根据内容自己解析-->
<head>
<meta charset='UTF-8'><!--meta为body里内容得到编码方式-->
<title>Title</title> <!--网页的标题-->
</head>
<body>
</body>
</html>
指令
- 注释：
<!--注释内容-->,还有一种不常用的注释写法<!-注释内容-> - 文档类型:
<!doctype>
转义字符
语法：&内容;
常用的转义字符
<: <
>: >
空格：
版权：©©
标签
标题标签
h1~h6:里面内容相对于普通的内容会加粗,且会自动换行
段落标签
p:自带换行，有段落间距
文本类型标签
共同点都不带换行
常用的文本类型标签
- b与strong:内容加粗
- i与em:内容斜体
- sup:上角标
- sub:下角标
- span:没有什么意义,但是会用来嵌套其他文本表示共同使用
超链接标签
a标签
例如如下一句
<a href ='http://www.baidu,com' targe = '_slef'>页面中显示的文本内容</a>
-
href:里面选择超链接地址,注意如果没加
http://,https://,file://,前缀默认会在原来地址后面添加拼接成一个新的链接 -
targe:
- _self:在原本的窗口打开
- _blank:创建一个新窗口打开
- _top:覆盖上一条记录
- _parent:覆盖所有的记录
且超链接点击后会在浏览器上生成记录,显示文本颜色会变紫色
图片标签
<img title="这是二哈" alt="二哈" src="url">
- title:鼠标停留会显示,也可以用于其他标签当属性
- alt:src中的 url响应失败显示的内容
- src:图片的url
列表标签
ul>li:无序标签
ol>li:有序标签
特殊的快捷键:ul>li{第$列}*5,其中$表示显示序列的位数
显示结果:
<ul>
<li>第1列</li>
<li>第2列</li>
<li>第3列</li>
<li>第4列</li>
<li>第5列</li>
</ul>
ul>li{第$$列}*5 显示结果
<ul>
<li>第01列</li>
<li>第02列</li>
<li>第03列</li>
<li>第04列</li>
<li>第05列</li>
</ul>
表格标签
table>tr>th|td
- tr:行
- th:标题单元格
- td:普通单元格
属性
- border:边框像素
- cellspacing:单元格的间距,最小为0
- cellpadding:单元格的内边距
- rules:all处理成一条直线,但是不能与cellspacing一起用会冲突
- colspan:th与td的属性表示占几列默认为1
- rowspan:th与td的属性表示占几行默认为1
案例
<table border="1" rules="all">
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td colspan=2">2</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>