THLM，CSS
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;
