目录
web服务的本质
web服务的本质
web服务为B/S架构
- 朝着指定的服务器地址发送请求
- 服务端接收请求 并处理
- 返回相应的响应
- 浏览器接收并渲染出好看的页面 给用户看
web的两种请求方式
-
get请求
朝服务器要资源
-
post请求
朝服务器提交资源
HTTP协议
HTTP协议是什么
http是超文本传输协议 , 规定了服务端与客户端 ( 浏览器 ) 数据传输的数据格式
HTTP协议的四大特性
- 基于TCP/IP作用于应用层之上的协议。
- 基于请求 响应，即请求对应 响应。
- 无状态，不保存客户端状态，但cookie、session可以解决该问题。
- 无连接，每次数据传输完成后就会断开连接。
HTTP的数据格式
请求格式
请求首行(请求方式 协议版本)
请求头(一大堆k:v键值对)
\r\n
请求体(敏感信息 密码 身份证号)
响应格式
响应首行(请求方式 协议版本)
响应头(一大堆k:v键值对)
\r\n
响应体(给用户看的数据)
响应状态码
用数字来表示一串文字需要表达的意思
1xx：服务端已成功接收到了你的请求 正在处理 你可以继续提交其他数据
- 2xx：服务端成功响应了相应的数据
- 3xx：重定向
- 4xx：客户端错误
5xx：服务器内部错误
HTML
什么是HTML
html是一个超文本标记语言
HTML文档结构
<!DOCTYPE html> # 声明文档类型
<html lang="en"> # 声明语言为英文的HTML网页
<head> # 头部开始
<meta charset="UTF-8"> # 声明编码格式
<title>HTML文档</title> # 网页标题
</head> # 头部结束
<body> # 主体开始
</body> # 主体结束
</html>HTML的注释
<!--单行注释-->
<!--
多行注释1
多行注释2
-->
<!--我们在搭建页面的时候 通常会利用注释来划分区域-->
<!--导航条开始-->
<!--导航条结束-->
<!--侧边栏开始-->
<!--侧边栏结束-->HTML标签的分类
-
标签的分类一
双标签：前后都有对应的，如h1、a
自闭合标签：只有单个标签，如img
-
标签的分类二
块级标签：独占一行的，如h1、p、hr
行内标签：内部文本多大，就占多大，如span、s
HTML- head内部常用标签
title 定义网页标题
style 内部支持写css代码
link 引入外部css样式文件
script 内部可以直接写js代码 也可以引入外部js文件
meta 定义网页源信息
meta name="keywords"
meta name="description"
HTML- body内常用标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML文档</title>
</head>
<body>
<h1>我是h1标题标签</h1>
<h2>我是h2标题标签</h2>
<h3>我是h3标题标签</h3>
<h4>我是h4标题标签</h4>
<h5>我是h5标题标签</h5>
<h6>我是h6标题标签</h6>
<p>我是段落标签,占一行</p>
<s>我是有删除线的文本标签</s>
<b>我是加粗的文本标签</b>
<u>我是有下划线的文本标签</u>
<i>我是斜体文本标签</i>
<br> <!--- 我是可以换行标签 --->
<hr> <!--- 我是分割线标签 --->
</body>
</html>HTML- body内特殊字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML文档</title>
</head>
<body>
<p> <!--- '空格' --->
& <!--- '&' and符--->
¥ <!---'￥' 人民币--->
> <!---'>' 大于号--->
< <!--- '< ' 小于号--->
© <!--- '©' 版权符--->
® <!---' ®' 注册符--->
</p>
</body>
</html>HTML- body中的重要并且常用标签
div 一块区域 你可以往这块儿区域内填写任何内容
span
div和span是前期构建网页的基本骨架
a 链接标签
1.跳转功能 href参数控制跳转的地址
这个地址如果在你的机器上如果没有被点击过那么默认是蓝色
只要点过一次之后 之后颜色 都是紫色
<!--<a href="https://www.sogo.com">点我点我</a>-->
a标签默认是在当前窗口跳转
你可以指定 新建窗口打开
target = "_self"
target = "_blank"
2.锚点功能
给a标签设置id值
然后在href中书写对应的a标签id值 点击即可跳转到对应的位置
<a href="" id="a1">文章开头</a>
<div style="background-color: red;height: 1000px"></div>
<div style="background-color: green;height: 1000px"></div>
<div style="background-color: orange;height: 1000px"></div>
<a href="" id="a2">文章中部</a>
<div style="background-color: black;height: 1000px"></div>
<div style="background-color: green;height: 1000px"></div>
<div style="background-color: orange;height: 1000px"></div>
<a href="#a1">回到顶部</a>
<a href="#a2">回到中部</a>
img 图片标签
src
1.图片地址 网上的地址也可以是你的本地图片地址
2.url(网址) 自动朝该网址发送get请求 获取图片资源
alt
当图片加载不出来的时候 展示的提示信息
title
鼠标悬浮上去之后展示的提示信息
width和height
这两个参数 你只需要设置一个 就可以 默认是等比例缩放
两个都调整的话 图片就会失真
无序列表
<ul type="disc">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
type参数：disc（实心圆点，默认值）、circle（空心圆圈）、square（实心方块）、none（无样式）
有序列表
<ol type="1">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
type参数：1 数字列表，默认值、A 大写字母、a 小写字母、Ⅰ大写罗马、ⅰ小写罗马
标题列表 会有一个缩进显示
<dl>
<dt>标题一</dt>
<dd>章节文本</dd>
<dd>章节文本</dd>
<dt>标题二</dt>
<dd>章节文本</dd>
<dd>章节文本</dd>
</dl>
表格标签 展示数据 一般都用到表格标签
<table>
<thead>
<tr>
<th>username</th>
<th>password</th>
<th>hobby</th>
</tr> 一个tr就表示一行
</thead>
<tbody>
<tr>
<td>小明</td>
<td>123</td>
<td>study</td>
</tr>
</tbody>
</table>标签通常应该有两个属性id 就类似于是身份证号 每一个标签 都应该有id值 并且在同一个html文档中 标签的id不能重复class 类属性 有点类似于面向对象的继承 class = 'c1 c2 c3' 你这个标签就会拥有c1 c2 c3的所有样式