目录
HTTP协议的四大特性
- 基于TCP/IP协议
- 基于请求响应
- 无状态
- 无连接
数据格式
请求格式： 请求行(请求方式 协议版本) 请求头 \r\n 请求体
状态码
是用来反应服务器的响应情况的，最常见的如
200 OK， 404 NOT FOUND
1XX 接收到请求，继续处理 2XX 成功 3XX 重定向 4XX 客户端错误 5XX 服务端错误 301 重定向 304 Not Modified，取缓存 # 如果是POST请求，301重定向会导致数据丢失 # 用307重定向可以保持原来的数据
HTML概念
超文本标记语言
作用: 告诉浏览器接收到的数据使用什么样的数据组织形式进行显示。
互联网的三大基石：
- HTML，超文本标记语言
- URL，统一资源定位符
- HTTP，超文本传输协议
HTML的文档声明：
文件名.html,
HTML的标准文档结构
<html>
<head></head> # 主要是配置浏览器显示数据的配置信息，例如字符编码，一般给浏览器使用
<body></body> # 给用户使用的数据
<标签名 /> # 单标签
</html>
<!--
注释
-->
标签
标签分类
按是否封闭分类
- 双标签：h1, a
- 自闭合标签: img
按级别分类
块级标签，独占一行
h1~h6, p, br, hr, div
可以嵌套其他块标签和行内标签
注意：p不能嵌套任何块级标签，只能嵌套行内标签
行内标签
s, i, u, b, span
内部文本有多大，就占多大
标签属性
- id， 同一个html文档中，唯一
- class, 类属性， 可以继承类的样式
head内常用标签
title style 内部支持写css代码 link 引入外部css样式文件 script 内部可以直接写js代码 meta 定义网页源信息
body内常用标签
h1~h6 标题标签 p 段落标签 s 删除线 b 加粗 u 下划线 i 斜体 br 换行 hr 一条分割线
body内重要标签
div span
a 标签
a <a herf='' id='a1'> 跳转到id为a1的标签</a> <a herf='https://www.baidu.com'> 跳转到百度首页 </a>
img 标签
src： 1. 图片地址， 2. url alt: 图片加载不出来的时候，展示的提示信息 title: 鼠标悬停上去之后展示的提示信息 width height
ul 标签
无序列表
type参数：
dis 实心圆点
circle 空心圆
square 实心方块
ol 标签
表格标签
<table>
<thead>
<tr>
<th>column1</th>
<th>column2</th>
</tr> 一个tr是一行
</thead>
<tbody>
<tr>
<td>valu1</td>
<td>valu2</td>
</tr>
</tbody>
</table>
body内特殊符号
空格 & & ¥ > > < < © ®
form表单
参数
action: 控制提交的地址
method: 提交表单的方式， get或post
value: 默认值
disable，禁用该input
enctype
input标签
通常input要结合label一起使用
<label for="username">
用户名<input type="text" name="username" id="username">
</label>
type参数
text 普通文本
password 密码
date 日期
radio 单选圆圈
checkbox 多选框，可设置checked属性，会默认选择
hidden 隐藏
file 文件选择
button 普通按钮
reset 重置按钮
submit 提交按钮，能够自动触发form表单提交数据的动作, button标签也可实现提交
如果要提交数据必须加上enctype="multipart/form-data"
select 标签
配合option标签使用，加上multiple参数，可以变成多选
textarea标签
长文本
CSS
CSS语法结构
选择器 {属性1:属性值}
CSS三种引入方式
通过link标签引入
<link rel="stylesheet" href="xxx.css"
直接在html页面中head内通过style标签直接书写
行内式， 直接在标签内通过style属性书写
<h1 style='color:red'> xxxx </h1>
选择器
基本选择器
- 元素选择器， h1
- id选择器， #idxx
- 类选择器， .cls1
- 通用选择器, *
组合选择器
- 子孙选择器， div span
- 子选择器 div>span
- 兄弟选择器 div~span
- 毗邻选择器 div+span
属性选择器
[password] [username='xxxx'] span[username='xxx']
伪类选择器
a:link a:hover a:active a:visited input:focus span:hover
伪元素选择器
p:first-letter p:before p:after
选择器优先级
选择器相同的情况
谁最后执行，就使用谁的样式
选择器不同的情况
行内选择器 > id选择器 > 类选择器 > 元素选择器
分组
div, span, p {
color: blue;
}
文字属性
text-align
center, left, right, justify
text-decoration
underline, line-through, none
a {
text-decoration: none; # 去掉a标签默认的下划线
}
text-ident
背景属性
参数
background-color
background-image
background-repeat
repeat-x, repeat-y, repeat
不写默认铺满整个屏幕
background-position
background-position: center center
background-attachment
fixed
简写
background: url('xxx.png') red no-repeat center center
边框
border-top
border-top: 3px solid red;
border-left, border-right, border-bottom
border-radius
简写：
border-style: dot-dash; border-color: red; border: solid 10px red;
Display属性
inline: 将块级标签变为行内标签
blcok: 让行内标签独占一行，并且可以设置长宽
inline-block: 既可设置长宽，也可在行内显示
display:none标签隐藏，并且标签原来占的位置也没有了
visibility:hidden 隐藏标签，但是标签原来的位置还在
盒子模型
margin
标签与标签之间的距离
margin: 10px 20px; # 控制上下和左右 margin: 10px 20px 30px; # 控制上， 左右， 下 margin: 0m auto; 左右居中
border
边框
padding
内部文本与内边框的距离
content
文本大小
浮动
float
clearfix
去除浮动带来的影响
.clearfix: after {
content: '';
clear: both;
display: block;
}
溢出
overflow: hidden; 溢出的直接隐藏 overflow: auto;
应用，圆形头像
.c1 {height: 120px;
width: 120px;
border: 5px solid white;
border-radius: 50%;
overflow: hidden;
}
img {
width: 100%;
}
定位
相对定位
position: relative; left: 100px; top: 100px; # 其父标签必须有position: relative
绝对定位
position: absolute; top: -50px; left: 200px; # 父标签必须是定位过的标签
固定定位
position: fixed; bottom: 50px; right: 50px;
是否脱离文档流
不脱离文档流
相对定位
脱离文档流
浮动元素，绝对定位，固定定位
z-index控制z轴
z-index: xxx;
透明度
opacity: 0.6;