day50
HTTP协议
超文本传输协议
规定了服务端与浏览器数据传输的数据格式
四大特性
- 基于TCP/IP作用于应用层之上的协议
- 基于请求响应(请求对应响应)
- 无状态(不保存客户端状态)
- 无连接(长连接 使用
websocket
)
数据格式
请求格式
请求首行(请求方式,协议版本)
请求头(一大堆k:v键值对)
空行
请求体(敏感信息 密码 身份证号等)
响应格式
响应首行(请求方式 协议版本)
响应头(一大堆k:v键值对)
空行
响应体(给用户看的数据)
响应状态码
用数字来标识一串文字需要表达的意思
1XX:服务端已经成功接收到了你的请求,正在处理,可以继续提交其他数据
2XX:服务端成功响应了响应的数据(常见为 200)
3XX:重定向
4XX:(404请求资源不存在)(403不符合某一些条件,无法正常访问)
5XX:服务器内部错误(500)
HTML
超文本标记语言
注释是代码之母
HTML的注释
单行注释
<!--单行注释-->
多行注释
<!--
多行注释1
多行注释2
多行注释3
-->
HTML的文档结构
<html>
<head>
<!--不是给人看的,给浏览器看得-->
</head>
<body>
<!--body内的代码才是给人看得-->
</body>
</html>
标签的分类1:
- 双标签(h1,a)
- 自闭和标签(img)
head内常用标签:
title
:定义网页标题
style
:内部支持写css样式
link
:引入外部css样式文件
script
:内部可以直接写js代码,也可以引入外部js文件
meta
:定义网页源信息
body内常用标签:
h1~h6
:标题标签,依次变小
p
:段老标签,一个p就是一行内容
s
:删除线
b
:加粗
u
:下划线
i
:斜体
br
:换行
hr
:一条分割线
body内特殊符号:
:空格
&
:符号&
¥
:符号¥
>
:符号>
<
:符号<
©
:符号©
®
:符号®
标签的分类2:
块儿级标签
h1~h6 p br hr div
独占一行
- 块儿级标签内可以嵌套其他块儿级和行内标签
- 注意:p标签虽然是块儿级标签,但是他的内部不能嵌套任何块儿级标签,只能嵌套行内标签(***)
行内标签
s i u b span
内部文本多大 就占多大
行内不能嵌套行内和块儿级标签
标签通常应该有两个属性
id:
就类似与身份证号,每一个标签 都应该有id值,并且在同一个html文档内,标签的id不能重复
class :
类属性有点类似于面向对象的继承 class = 'c1 c2 c3'
你这个标签就会拥有c1 c2 c3的所有样式
body内重要的标签
div
:一块区域,你可以往这块区域内填写任何内容
span
:div和span都是前期构建网页的基本骨架
a
连接标签
-
跳转功能 href参数控制跳转的地址
这个地址如果在你的机器上如果没有被点击过那么默认是蓝色
只要点过一次之后 之后颜色 都是紫色
<!--<a href="https://www.sogo.com">点我点我</a>-->
a标签默认是在当前窗口跳转
你可以指定 新建窗口打开
target = "_self"
target = "_blank"
-
锚点功能
给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
- 图片地址:网上的地址也可以是你的本地图片地址
- url(网址):自动朝该网址发送get请求 获取图片资源
alt
当图片加载不出来的时候,展示的提示信息
title
鼠标悬浮上去之后展示的提示信息
width 和 height
这两个参数只需要设置一个 就可以 默认是等比例缩放
两个都调整的话,图片会失真
列表标签
无序列表
<ul>
<li></li>
</ul>
type参数
disc 实心圆点,默认值
circle 空心圆圈
square 实心方块
none 无样式
有序列表(了解)
<ol>
<li></li>
</ol>
type参数
1 数字列表,默认值
A 大写字母
a 小写字母
I 大写罗马数字
i 小写罗马数字
标题列表(了解)
<dl>
<dt></dt> 小标题
<dd></dd> 小章节
</dl>
表格标签
展示数据 一半都用到表格标签
<table>
<thead>
<tr>
<th></th>
</tr> 一个tr就标识一行
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>