前端自学笔记01

19年3月中旬,26岁的我开始自学前端之路,望我能坚持并顺利找到相应薪资的工作!
一、快捷键
ctrl +enter换行
ctrl ?斜线 注释
alt?shift?方向下 复制一行
open插件安装后,
cmd?alt ?o打开浏览器预览
html:5 ?tab 默认h5格式
mac下:
^ ctrl
cmd + space搜索
^ + a移动至行首
^ + e移动至行尾
option + ??向右移动一个单词
option + ??向左移动一个单词
command + ?? 光标移动至行尾
command + ?? 光标移动至行首
ctrl ?方向 光标移到到下一单词
alt?shift?鼠标左键,可以多行同时编辑
ctrl?} 让当前行,向右缩进
pre 不解析行和空格,输入什么显示什么
Ctrl ?d 选择当前的单词,如果继续按,那么会选择接下来相同的单词
alt + 方向键 调整当前行的顺序
alt +z自动换行
alt + shift + f 快速格式化代码
二、常用但是不太记得的h5标签
透明度:filter:alpha(opacity=90)(ie)
hr 水平线
br 换行
em 加强
i 斜线
strong 加黑加粗
sup上标
sub 下标
del 加删除线
ul li 无序列表
ol有序列表
dl
dt
dd
dl dt dd 自定义列表
cospan 列合并
rowspan 行合并
th 表头
tr 表行
td 单元格
a标签 target属性 _blank在新窗口打开链接 _self在当前窗口打开链接
opacity:0.9(标准浏览器)
三、CSS选择器:
1.属性选择器
li[class=“cat”]{
color:blueviolet;
}
li[class~=“cat”]{
color:blueviolet;
} ~= 表示包含该属性值
2.伪类选择器:
:active表示鼠标点击未放开时的状态
LOVE HATE a标签顺序
link visited hover active
3. a标签不继承父容器的字体颜色,可以继承字体大小
所有字相关的都可以继承,比如:color、text-系列、font-系列、line-系列、cursor
所有盒子相关的属性都不能继承:如边框、外边距、内边距、背景、定位、元素宽高属性
? < = <> = >tab自动补全标签
4.包含、子集
h3.class {}
h1>strong {}
.class h3 {}
.class ,h {}
cursor: pointer; 手势
5. 样式优先级
第一原则:就近原则
默认样式??继承样式??外部引入样式??嵌入样式??内联样式,超链接标签颜色除外
第二原则:
ID>类(伪类)>标签>继承>默认
!important优先级最高
5.css
letter-spacing:字符间距
word-spacing :单词间距
list-style:none; 去除列表前的圆点
line-through:删除线
white-space:nowrap不换行
text-indent:2em 首行缩进
border-collapse:collapse 折叠表格边框
outline-style:none:去掉输入框的蓝色线
over-flow:auto 内容超出有滚动条,不超出就没有
旋转:transform:rotate(7deg)
6.闭合浮动:
.clearfix::before,
.clearfix::after {
content: " " ;
display:table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
? BFC:触发条件
1.绝对定位,相对定位
2.float
3.display:table;
4.overflow:hidden/auto;
5.zoom:1;
BFC具有包裹性,子元素的布局不会影响其它元素,边距不会再合并;
7. background-attachment:fixed; 固定显示,相对于body固定,一般只用于body的背景设置。


8. 浮动:假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。
清除浮动:这个规则只能影响使用清除的元素本身,不能影响其他元素。
9.绝对定位div居中,先left 50%,再div自己margin left负一半像素
10.defer最后执行
? 问题01: 样式加载不出来,检查——箭头再选中该DIV,看定义的样式有没有,没有的话,看Network,有没有加载该样式资源文件,默认是all,可过滤为仅查看CSS
? 问题02:搜索框a标签和input标签间距和不对齐问题,解决的最好办法是让两个元素都浮动,并给input加margin-left:-1px;
\”转换为单引号
四、js相关基础
Math.random可以随机生成0-1之间的小数,*10 后随机生成0-10之间数字
!转布尔类型(Boolean)
—字符串转boolean,是一个!
!"false" = false!"true”=true
+转数值类型(Number)
— 字符串转数字类型 比如+"123"+4 = 127
t += i =>(t=t+i)
0 == 0null != 0undefined != 0
a.reverse() js反序方法
变量.toFixed(4) 保留几位小数
不要用for in 去循环字符串中的字符
字面量转义符
\n 换行
\t 制表
\b 空格
\r 回车
\f 进纸
\\斜杠
\’ 单引号
\’’ 双引号
【前端自学笔记01】待更新。。。

    推荐阅读