一阶段复习大纲
2020-09-15 14:07:49 17 举报AI智能生成
html、css、less、github
作者其他创作
大纲/内容
html
介绍
超文本标记语言
主要用来开发网页
创建html文件
创建一个普通的文本文件，修改文件后缀
.html
.htm
主体结构
<!doctype html>
<html>
<head>
<body>
<meta>
设置字符集
网页关键字
网页的描述信息
...
<title>
常用标签
功能型标签
超链接
链接跳转
锚点
图片
引入图片
置入链接
设置宽高
表格
网页表格
数据排版
表单
获取用户输入数据
上传文件
智能表单
多媒体标签
音频
视频
iframe框架
嵌入网页
语义型标签
网页切割
div
网页结构语义
header
footer
nav
main
section
article
aside
文本段落
p
span
i
em
strong
b
del
列表
ul li
ol li
dl dt dd
标题
h1 - h6
其他
hr
br
注释
pre
核心准则
语义化
css
介绍
层叠样式表
用来美化网页
使用方式和区别
使用方式
link外联
style内嵌
style属性
区别
权重
选择器
三大基础选择器
id
class
html标签
高级选择器(组合选择器)
后代选择器
div p {}
子元素选择器
div > p{}
相邻兄弟选择器
div + p{}
普通兄弟选择器
div ~ p {}
交集选择器
div.d1 {}
并集选择器
div, p {}
通配符
*
伪类选择器
:link
:visited
:hover
:active
:focus
:first-child
:last-child
:nth-child
odd
even
:nth-of-type
:target
伪元素
::before
::after
::first-letter
::first-line
选择器权重比较
比较id、class、html标签的个数
计算数值
style属性1000
id 100
class 10
html标签 1
!important
无限权重
布局相关
标准文档流
网页的解析方式
浏览器解析网页按照从上到下从左向右的顺序解析
遇到外联的css，就会先去加载css文件，完成后继续解析html
标签等级划分
行内元素
可以和行内元素或者行内块并排显示
宽度为内容的宽度
高度为行高
只能设置颜色类的属性
块级元素
可以设置宽度、高度
独占一行
默认情况下会占满父元素宽度的百分百
行内块元素
可以和行内元素或者其他行内块元素并排显示
可以设置宽度和高度
可以设置颜色等样式
元素等级转换
display
inline
block
inline-block
元素脱离文档流的方式
float
绝对定位
固定定位
盒子模型
说明
网页中任何一个元素都相当于是一个盒子模型
整个网页都是由一个个盒子模型累计而成
包含内容
width
内容的宽度
height
内容的高度
padding
内边距
内容到边框的距离
设置
padding-left
padding-top
padding-right
padding-bottom
简写
padding: 10px
上右下左
padding: 10px 20px
上下10 左右20
padding: 10px 20px 30px
上 10 左右20 下30
padding: 10px 20px 30px 40px
上10 右20 下 30 左 40
会导致元素变大
border
边框
设置
border-width
border-style
border-color
简写
border: 1px solid red;
margin
外边距
设置值的方式和padding相同
margin塌陷
怪异盒子模型
box-sizing
border-box
浮动
属性
float
left
right
现象
元素脱离标准文档流
字围效果
元素没有脱离文本流
父元素高度塌陷
清除浮动带来的影响
.clearfix::before, .clearfix::after {
content: "";
height: 0;
visibility:hidden;
display: block;
clear:both;
}
content: "";
height: 0;
visibility:hidden;
display: block;
clear:both;
}
定位
属性
position
absolute
relative
fixed
相对定位
特点
相对定位的元素没有脱离标准文档流
相对定位的元素位移是相对于自己原来的位置进行位移
形影分离
子绝父相，可以给子元素当作参考元素
位移
top
right
bottom
left
绝对定位
特点
脱离标准文档流和文本流
位移需要参考
没有祖先元素参考就以网页参考
网页的左上角
首屏的左下角
有祖先元素作为参考，祖先元素具备
相对定位
绝对定位
固定定位
位移
top
right
bottom
left
固定定位
特点
脱离标准文档流和文本流
以网页为参考进行位移
位移
top
right
bottom
left
弹性盒子模型
基本概念
弹性容器
弹性子元素
主轴
侧轴
开启弹性盒子模型
display:inline-flex|flex
相关属性
弹性容器属性
flex-direction
row
row-reverse
column
column-reverse
flex-wrap
nowrap
wrap
wrap-reverse
justify-content
flex-start
flex-end
center
space-between
space-around
align-item
flex-start
flex-end
center
align-content
flex-start
flex-end
center
space-between
space-around
弹性子元素属性
order
number
flex-grow
int
flex-shrink
int
flex-basis
int
flex
flex-grow、flex-shrink 和 flex-basis 属性的简写属性
align-self
flex-start
flex-end
center
grid布局
基本概念
容器
项目
行和列
单元格
网格线
开启grid布局
display:grid|inline-grid
容器属性
display: grid|inline-grid
开启grid网格布局
grid-template-rows
定义每一行的行高
grid-template-columns
定义每一列的列宽
gap
设置行间距和列间距
grid-template-areas
给网格线划分的区域进行命名
grid-auto-flow
设置网格排列方式
justify-content
所有项目在容器中水平方向的位置
align-content
所有项目在容器中垂直方向的位置
place-content
align-content属性和justify-content两个属性的简写
justify-items
项目在单元格中水平方向的位置
align-items
项目在单元格中垂直方向的位置
place-items
是align-items属性和justify-items属性的简写
grid-auto-columns
针对没有在预先设定好的网格内的元素的列宽
grid-auto-rows
针对没有在预先设定好的网格内的元素的行高
项目属性
grid-row-start
设置项目起始位置的行所在的网格线
grid-row-end
设置项目结束位置的行所在的网格线
grid-column-start
设置项目起始位置的列所在的网格线
grid-column-end
设置项目结束位置的列所在的网格线
grid-row
grid-row-start和grid-row-end的简写属性
grid-column
grid-column-start和grid-column-end的简写属性
grid-area
给项目设置具体的单元格位置
justify-self
具体某个项目在所属单元格中的水平位置
align-self
具体某个项目在所属的单元格中的垂直位置
place-self
是algin-self属性和justify-self属性的简写属性
其他
repeat()函数
可以重复指定次数
fr
单位，按照比例进行划分
atuo-fill
自动填充
用在设置行和列的属性上，可以根据容器总宽度和总高度自动生成合适的列数和行数
网格线命名
grid-template-rows: [x1-start] 100px [x1-end x2-start] 100px [x2-end x3-start] 100px [x3-end];
grid-template-rows: repeat(3, [r-start] 100px [r-end]);
grid-template-rows: repeat(3, [r] 100px);
span关键字
可以设置跨越的具体单元格个数
minmax()函数
产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
auto关键字
auto关键字表示由浏览器自己决定长度。
grid-template-columns: 100px auto 100px;
响应式布局
介绍
通过媒体查询、响应式图片、弹性布局等多种手段，让网页能够适配不同的屏幕
概念
断点
媒介类型
逻辑操作符
媒体查询
@media 媒介类型 逻辑操作符 (断点) {}
响应式图片
概念
让图片能够根据屏幕的变化而变化
实现
百分比
媒体查询
弹性布局
flex布局
栅格布局
移动端布局
介绍
专门针对小屏幕开发的网页
概念介绍
视口
布局视口
视觉视口
理想视口
dpr
单位
em
rem
vw
vh
移动端网页rem开发流程
1. 测量设计图尺寸
2. 将测量出的尺寸/2
3. 将结果 / 根节点font-size
移动端网页vw开发流程
1. 将根元素font-size设置为13.33333333vw
2. 将设计图测量出来的尺寸 / 100
3. 将得到的结果单位设置为rem
样式设置
背景
background
background-attachment
background-color
background-image
background-position
background-repeat
文本
color
line-height
letter-spacing
text-align
text-decoration
text-indent
white-space
word-spacing
字体
font
font-family
font-size
font-style
font-weight
列表
list-style
list-style-image
list-style-position
list-style-type
轮廓
outline
其他
元素隐藏
display:none
opacity:0
visibility:hidden
鼠标样式
cursor
default
pointer
move
text
wait
help
不透明度
opacity
rgba
css尺寸
width
min-width
max-width
height
min-height
max-height
less
变量
@变量名: 变量值
混合
定义
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
使用
.post a {
color: red;
.bordered();
}
color: red;
.bordered();
}
嵌套
使用
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
&
在嵌套中表示父级
注释
//注释内容
/*注释内容*/
git和github
说明
Git，开源的分布式版本控制系统，可以有效的、高速的处理从很小到很大的项目版本管理。
GitHub, 是一个面向开源及私有软件项目的托管平台，因为只支持 Git 作为唯一的版本库格式进行托管，故名 GitHub。
安装
可以直接在官方网址点击下载安装： https://git-scm.com/
基本设置
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"
github账号注册
https://github.com/join?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F&source=header-homehttps://github.com/join?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F&source=header-home
SSH KEYS生成
ssh-keygen -t rsa -C "你使用的邮箱"
基础命令
git add * (或者文件名)
git commit -m "提交备注"
git remote add origin https://github.com/你的github用户名/仓库名.git
git push -u origin master
git log
git reflog
git reset --hard commit id
git restore 文件名
git rm 删除的文件名
git clone 项目仓库地址
git pull
git branch 分支的名字
git branch
git checkout 具体分支名
git merge 分支名
git branch -d 分支名
git checkout -b 分支名
git switch -c 分支名
0 条评论
下一页
