目录
**day02:**
html 基础标签 语法
特性: 简易性 可扩展性 平台无关性 通用性
语法: 1.空白语法
2.字符实体
><......
3.属性
id title style class
4.注释
<!---->
基础标签
块级元素(div、h1-h6、p、html、body、h5新增标签)
特性:1.独占一行
2.宽度默认100%
3.css设置宽高
4.高度由子元素撑起
行内元素（span、a、img、em、i、b、sub、sup）
特性:
1.与其他元素共享一行
2.无法设置宽高
3.宽高由自身决定
4.不建议嵌套块级元素
单标签
img br hr meta 自结束标签
img 属性:width height alt src
a标签:
1.锚点 跳到顶部 href='#';
2.锚点 跳转到任意地方 href='#id';
3.锚点 连接到其他页面 href='其他页面路径#id'
h5新增标签
header footer article section nav
video autoplay muted loop controls ...
audio
标签使用 h p div img a video audio ...
内容:
列表标签
表格
表单
h5新增表单
http协议
**day03:**
列表标签
无序列表
ul li 块级元素
有序列表
ol li 块级元素
定义列表
dl dt dd 块级元素
表格
table width height align bgcolor border='1'
外边距cellspacing=0 border-collapase
内边距 cellpadding
thead 表头
tr>th
tbody 表体
tr>td
tfoot 表脚
tr>td
caption align 表格标题
水平对齐 table tr td caption align
垂直对齐 tr td valign
细线表格
table bgcolor='black' cellspacing='1'
tr bgcolor='white'
合并单元格
个人简历
colspan 跨列合并
rowspan 跨行合并
表单*****
name提交给服务器的键 value value提交给服务器的值
收集用户输入的信息
form action 提交到服务器地址
输入框
type='text'/password/radio(name必须一样)
checkbox 复选框
button 普通按钮
image 图像按钮
submit 提交按钮
reset 重置按钮
hidden 隐藏域
textarea 多行输入框
h5新增表单
email 邮箱
url 域名
date 日期
color 颜色
number 数字
tel 电话 pattern h5新增表单属性
dataTime-local 时间日期
progress 进度条
range 滑块
http协议 ******* 面试
http(HyperText transport protocol)协议
超文本传输协议
客户端和服务器端进行交互遵循的通信协议
请求报文:请求头 请求行 请求体
请求头: Authorization Content-Type
请求行:get url http1.1(http1.0,http1.1,http2)
请求体:get携带参数不再请求体中 在url地址栏
post 携带参数在请求体中
响应报文:响应头 响应行 响应体
响应头:Content-Type
响应行：http1.1 200 OK(状态码描述)
响应体:{status:200,message:"更新成功",data:[{name:"zhangsan"},{}]}
GET和Post方法区别? **********
GET:
1.get携带的参数携带在url地址栏 数据保密不安全
2.传输的数据大小有限制 一般不超过1024个字符
POST:
1.post携带的参数携带在请求体中,数据保密安全
2.传输的数据大小没有限制 一般可以传输大量数据
CSS 选择器
**day04:**
http协议(cs) *****
超文本传输协议
客户端和服务器端通信协议
请求报文客户端向服务器端发起的请求信号
服务器端向客户端做出响应的信息封装到响应报文
请求报文:请求头(Content-Type:application/json) 请求体(post携带参数) 请求行(get url http/1.1) 空行
响应报文:响应头(Content-Type:application/json) 响应体({data:[]}) 响应行(http/1.1 200 OK)
get post
CSS声明块
标签/其他选择器{
属性:值
}
语法:属性名和属性值之间使用:隔开
多对属性使用;隔开
最后一对属性可以不加;
注释:/**/
可读性:空白 速记写法padding margin border
三角形:width height:0 border:100px solid transparent; border-top:100px solid red
选择器:标签选择器 div{}
id标签选择器 #id{}
class选择器 .class{}
伪类选择器 div:first-child{}
动态伪类: a:link visted hover active
否定伪类: p:not(.class){}
交集并集选择器: p.p1{}(交集) #id,.class{}(并集)
后代选择器: div p{}
子代选择器:div>p{}
兄弟选择器:css2 .p1+p{} css3 .p1~p{}
git使用
个人使用
1.创建本地仓库 初始化仓库 git init
2.创建远程仓库 gitee
3.记录远程仓库地址
4.将本地的代码文件提交到远程仓库
5.git add . / git add *（.gitignore{node_modules}） 跟踪文件有无修改
5.1将本地仓库和远程仓库进行绑定
git add origin master xxx.git远程地址
6.提交文件到暂存区 git commit -m '[xxx]修改了功能'
7.提交文件到远程仓库master分支 git push origin master
git push -u origin master 强制推送
首次使用全局配置
git config --global user.name "willsonkang1"
git config --global user.email "2681091754@qq.com"
提交时候输入用户名和密码 输入错误 电脑设置 凭证管理器 git 删除 重新提交
git status 查看git提交状态 查看那些东西可以提交
git log 查看git提交日志
git reflog 查看git所有提交日志
git remote -v 查看绑定的远程仓库
团队使用
组长:提交文件到远程仓库
1.创建远程仓库
2.提交文件
git init
git add .
git remote add origin xxx.git
git commit -m '[xxx]提交了架构'
git push origin master
3.私有 --开放权限 开源
4.邀请组员 （管理界面）
**day05:**
gitee使用
1.个人使用
1.1创建本地仓库
1.2创建远程仓库
1.3初始化仓库 git init
1.4修改文件要提交 跟踪文件 git add ./git add *
1.5绑定远程仓库 git add origin master xxx.git
1.6查看提交状态 git status
1.7提交文件到暂存区 git commit -m '[xxx]xxx';
1.8推送到远程仓库master git push origin master
后续使用执行1.4 1.6 1.7 1.8即可
第一次使用git全局配置 git config --global user.name
其他git命令
git log 查看日志
git reflog 查看所有提交日志
git remote -v 查看绑定远程仓库
2.团队使用
组长：将项目提交到远程仓库
1.1 创建团队远程仓库(同一个组用到的)
1.2 创建团队组长仓库
1.3 初始化组长仓库 git init
1.4 提交项目 git add .
1.5 绑定远程团队仓库 git remote add origin xxx.git
1.6 提交项目到暂存区 git commit -m '[xxx]xx'
1.7 推送项目到团队master分支 git push origin master
2.开放权限 ---组员---添加仓库 仓库设置开源
3.组员:
git clone xxx.git 将项目克隆到本地
项目架构 cnpm i .git 不需要绑定远程
***** git pull origin master 先更新别人代码
git add .
git status
git commit -m '[xxx]xxx'
git push origin master
注意点:克隆老师的项目
git clone
项目架构 .git am-server am-ui
先删除.git （回收站也一起清空）
组长初始化仓库 提交远程仓库
git 全部记住 第一阶段
伪元素选择器 ::after ::before ::first-letter/line
属性选择器: [name=value] css2[name|=value] css3[name^=value]
通配符选择器: *{}表示选中所有标签 优先级最低
CSS三大特性
1.继承性 ****
font/text/line/color 属性可以被继承
2.层叠性
一个样式覆盖一个样式
3.优先级 *******
!important 优先级别最高
style 1000
id 100
class 10
标签 1
通配符 0
css引入方式
1.内联样式/行内样式 style属性
2.内部样式 style标签 head里面
3.外部样式 link标签 @import url()
link标签 @import url()区别?
1.link是html标签 @import属于css
2.link同时加载css和html @import优先加载html
3.link不需要考虑兼容性 @import只支持ie5+
**day06:**
文本样式和其他样式
颜色属性:
1.关键字 red blue yellow
2.rgb red green blue 三原色
3.rgba a透明度
4.十六进制 #ff00ff
文本样式:
color:颜色
打开或者关闭斜体
font-style:italic normal
粗细程度
font-weight:400 700-bold 900-bolder
字体大小
font-size:28px ....
设置字体
font-family:serif
webfont
@font-face:{}
3.字体图标
iconfont（推荐）
font-awesome
4.其他文本样式
水平对齐
text-align：left center right
text-decration：underline line-through overline none
text-indent:首行缩进 2em
text-shadow:文字阴影 5px 5px 5px red
text-transform:大小写 首字母大写
5.列表样式
list-style-type:square circle disc
list-style-position:outside inside
list-style-image:url('');
list-style:
6.行高
line-height:一行字的高度
文本水平垂直居中:text-align:center line-height:height
7.display
flex：伸缩盒
inline:行内元素
block:块级元素
inline-block:行内块元素
8.元素隐藏有哪些方法?有那些区别? *******
1.display:none block
隐藏元素 不占据页面空间
2.visibility visible hidden
隐藏元素 占据页面空间
3.opacity 透明度 0-1
隐藏元素 占据页面空间
9.px em rem ****
px是像素单位 相对于当前屏幕宽高度而言
em相对长度单位 相对于当前元素字体大小而言
rem相对长度单位 相对于html元素字体大小而言
**day07:**
1.盒子模型 *****
盒子种类:{
1.w3c盒子 内容盒子 标准盒子
width设置给内容区的
盒子的宽:width+左右padding+左右border
盒子的高:height+上下padding+上下border
盒子所占页面的宽:盒子的宽+左右margin
盒子所占页面的高:盒子的高+上下margin
2.边框盒子 怪异盒子 IE盒子
width设置给盒子本身的
盒子的宽:width=contentWidth+左右padding+左右border
盒子的高:height=contentHeight+上下padding+上下border
盒子所占页面的宽:width+左右margin
盒子所占页面的高:height+上下margin
}
box-sizing:content-box/border-box
2.盒子背景样式
background-color:背景色
background-image:背景图片
background-position:背景图片定位
background-repeat:no-repeat 设置图片平铺
background-attachment:attachment 不随着滚动条滚动而滚动
3.浮动:
特性:脱离文档流 原先位置不保留 飘在文档流上方
float left right none
清除浮动:
1.对哪一个元素造成了影响 {clear:both}
2.伪元素清除浮动
::after{
content:"",
display:block,
clear:both
}
3.空div（浮动元素之后）
{clear:both}
4.给父元素加高度
5.触发BFC overflow:auto/hidden
4.BFC
1概念:块计格式化上下文 理解为元素的一种属性
只要元素拥有了这种属性 就成为一块的独立的渲染区域
2.如何触发?
1.html
2.float
3.position
4.display
5.overflow不为visible
3.作用特性:
1.避免外边距重叠
2.清除浮动
3.避免元素被浮动元素遮盖
4.两列布局
5.三列布局
5.外边距重叠?
1.兄弟级外边距重叠
1.尽量给其中一个设置外边距
2.给其中一个包裹父元素 设置BFC
2.父子级外边距重叠
1.给父元素设置边框
2.给父元素触发BFC
**day08:**
定位 position ***CSS考点
***定位有哪些?区别?/说一说定位?
0.静态定位 static
特点:默认文档流定位
1.相对定位 relative
特点:不脱离文档流 相对于自身在浏览器中的位置定位
2.绝对定位 absolute
特点:1.脱离文档流 原先位置不保留
2.默认定位元素，无论有没有祖先元素，相对于body定位
3.祖先元素设置了定位,相对于祖先元素定位（就近原则）
3.固定定位 fixed
特点:1.脱离文档流 原先位置不保留
2.相对于浏览器视口区域
4.粘滞定位 sticky top:20px
特点:1.不脱离文档流
2.没有达到阈值前相对定位
达到阈值就是固定定位N
2.如何设置水平垂直居中?
1.给父元素设置border,给子元素设置margin:width/2;
2.给父元素设置box-sizing:border-box padding:width/2;
3.子绝父相,给子元素设置top,left,bottom,right全部为0,margin:auto;
4.子绝父相,给子元素设置top:50%,left:50%,margin-left:-width/2,margin-top:-height/2;
3.z-index
更改元素堆叠顺序
z-index:0
使用了定位元素 z-index:-1;
display:flex 伸缩盒/弹性盒
面试：你说一说flex布局 弹性盒 伸缩盒?
1.概念:Flex 布局，可以简便、完整、响应式地实现各种页面布局
只要容器设置了display：flex属性 就拥有了一个弹性盒布局 多用于移动端布局
2.容器属性：flex-dircetion flex-wrap flex-flow justify-content align-items align-content
3.弹性元素属性:order flex-grow flex-shrink flex-basis align-self flex
盒子居中方案:
1.display:flex justify-content:center align-items:center
2.display:grid justify-content:center align-items:center
3.display:flex 子元素margin:auto
800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
