![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端笔记
晚风一直很温柔。
醉卧沙场君莫笑,古来征战几人回。
展开
-
day01
1 web组成html 结构 css 表现 行为 Javascript打开浏览器后台 f12 或者 fn+f12 右键打开检查2 纯文本 :只保存文字内容,为记事本文件,扩展名是.txthtml是纯文本文件,体积小3 相关名词html:超文本标记语言xhtml:可扩展的超文本标记语言w3c:万维网联盟(规定html和css语言的语法规范)ECMA:欧洲电脑网商联合会(规定js语法规范)4 编辑工具 :vs code 、hbu 、dw、nodepad++、记事本原创 2021-12-17 14:44:11 · 752 阅读 · 0 评论 -
html5 01
requires模块覆盖关系:两个没有id的模块 前面覆盖后面两个相同id模块,前面覆盖后面多个不相同id模块,共同兼容接口定义:module transpots return值 | 引用commonjs module.export接口|module exports = 值| 对象 | 函数paths 简化文件路径shim 将文件转为模块map 映射文件baseUrl 设置根目录css插件 map进行配置 {css:'文件'} css!文件本地存储loca原创 2022-03-05 16:33:37 · 438 阅读 · 0 评论 -
js进阶 09
requirejs 引入requirejs三个全局变量: require requirejs define入口文件:引入的第一个文件两种方式:data-main 根目录是属性值require['xxx'] 以index.html 所在的目录为根目录定义模块传递一个参数:不能是字符串,可以是函数, 此时函数遵循的是commonjs规范。require exports module传递两个参数:第一个可以是字符串,还可以是模块依赖集合,此时函数遵循module transport原创 2022-03-05 15:31:58 · 99 阅读 · 0 评论 -
js进阶 08
git 代码存储系统,用来托管代码linux 指令cd目录 打开目录 ls 查看当前目录文件 pwd 查看当前目录所在系统路径mkdir 文件名 创建文件夹 touch文件名 创建文件echo 内容>>文件 cat文件 查看文件内容git文件:1 未纳入缓存的文件 2 纳入缓存的文件 3 纳入版本库的文件使用gitgit init 初始化一个git仓库git add 将第二类文件纳入缓存,可通过*将所有文件纳入缓存git status 查看文件状态git原创 2022-03-05 15:15:32 · 385 阅读 · 0 评论 -
js进阶 07
内置构造函数 :Object Array Function Number String Boolean RegExp Error Date Image构造函数式继承:为了继承父类中的属性执行父类构造函数并改变this指向,传递必须的参数类式继承:继承父类中的方法子类的原型=父类的实例补回自身constructor的属性寄生式继承:定义寄生函数,函数体中定义寄生类,寄生类的原型指向父类的原型,子类的原型指向寄生类的实例,补回子类的constructor组合式继承...原创 2022-03-05 14:48:35 · 87 阅读 · 0 评论 -
js进阶 06
1 原型 :prototype 是每个函数都天生拥有的属性值是一个对象,通过constructor 判断,指向构造函数本身作用:实现共享数据2 原型拓展instanceofhaswOwnproperty不能查看原型数据in 操作符 查找原型数据3 安全类Object Array 无论在外部如何调用类,都会返回类的实例4 内置构造函数Object Array Number String Boolean RegExp Error Date Function(除了最后一个参原创 2022-03-05 12:25:10 · 75 阅读 · 0 评论 -
js进阶 05
1 面向对象 :书写代码的另一种方式2 构造函数 : 定义上与普通函数一样,首字母要大写,非语法要求目的:普通函数:实现功能构造函数:创建对象调用方式:普通函数 :直接调用构造函数: 使用new 关键字3 构造函数执行的4个步骤1 开辟新的内存空间2 改变this指向3 执行函数体中的代码 :为this赋值4 返回this4 使用return 问题返回值的类型 被忽略返回引用了类型 以返回的数据为准在构造函数体中不要出现return语句...原创 2022-02-19 21:29:50 · 251 阅读 · 0 评论 -
js进阶 04
1 touch事件:touchstart点击穿透的问题 1 延迟执行语句 2 替换为onclick事件touchendtouchmovetouchcancel2 过渡事件 transitionstart transitionend3 动画事件 animationstart animationend4 zepto:针对于移动端的js库引入之后$函数模块化:使用animate 必须下载fxtouch模块tap 触碰/点击doubleTapsingleTap原创 2022-02-19 21:18:27 · 202 阅读 · 0 评论 -
js进阶 03
1 快捷尺寸源生clientWidth clientHeightoffsetWidth offsetHeightclientLeft clientTopjquerywidth() height()innerWIdth() innerHeight()outerWidth() outerHeight()outerWidth(true) outerHeight(true)2 定位父元素 offsetParent3 定位值offsetLeft offsetTop原创 2022-02-19 19:31:21 · 156 阅读 · 0 评论 -
js进阶 02
1 更改this指向call :第一个参数改变的是this的指向 从第二个参数开始表示传递的参数apply :第一个参数改变的是this的指向 从第二个参数是数组2 事件流程捕获:事件从最顶层元素开始执行,一层一层往下执行,直到最精确的元素冒泡:事件从最精确的元素开始执行,一层一层往上执行,直到最顶层元素当一个元素处于最精确的元素的时候,是不区分捕获和冒泡的完整流程:事件捕获找到元素,触发事件,事件冒泡到最顶层元素3 dom2级:addEventListener(type,c原创 2022-02-19 16:52:26 · 141 阅读 · 0 评论 -
js进阶 01
1 javascript:dom 、 bom 、 ECMA组成dom:文档对象模型 (在代码中是document )bom: 浏览器对象模型 (在代码中是window)ECMA:核心语法,包含如何定义变量、运算符、表达式、流程控制语句、数据类型2 节点操作1 可通过dom的onclick 、onmousedown、onmouseup来添加事件2 通过dom的getElementById获取元素3 通过dom的style来设置样式3 节点类型:dom是由节点组成的,元素/标原创 2022-02-19 11:42:45 · 128 阅读 · 0 评论 -
jquery 02
animate函数:用于执行动画 animate({},time,callback) 是基于终点的动画延迟:delay方法 参数就是延迟的时间单位是ms 省略不写stop:停止动画 两个参数都是布尔值 默认是falsestop(false,false) stop(fasle,true) stop(true,true) stop(true,false)动画积累:两种策略1 通过stop(true)清空动画队列2 通过is()方法...原创 2022-02-19 09:20:28 · 146 阅读 · 0 评论 -
jquery 01
1 jquery函数:所有的语句都是以$开头,参数接收选择器2 选择器支持css2.1支持css3$(dom:first)$(dom:last)$(dom:eq(index))===(dom).eq(index)$(dom:gt(index))$(dom:lt(index))$(dom:odd)$(dom:even)3 常用方法length 属性获取长度:1 读取一个参数2 设置单个样式 :两个参数 key:value3 设置多个样式: 参数是原创 2022-02-18 21:24:18 · 167 阅读 · 0 评论 -
day29
1 正则的修饰符i 不区分大小写m 多行匹配g 全局匹配2 正则的组成 :普通字符: 数字 字母 下划线特殊字符:()分组[] 区间范围\ 转义字符/ 创建正则| 或. 除了回车和换行^ 放在[]里面是取反,放在外头是开头$ 结束* 出现0次或多次? 出现0次或1次+ 质数出现1次3 边界词^ 开头$ 结尾/b 单词边界/B 非单词边界4 分组 ()分组作用:伪类捕获,重复利用在正则的内部使用,用\编号在原创 2022-01-26 15:34:43 · 127 阅读 · 0 评论 -
day28
1 字符串:写在引号里面的都是字符串字符串中的数据是按照下标排列,下标从0开始,到length-1结束length是字符串的个数,空格也算字符串2 字符串相关方法charAt(下标):查找下标所对应的字符串。如果存在,返回对应字符,不存在返回空,不写下标默认是0 ,如果比0小或者比最大的下标大返回空charCodeAt(下标):查找下标所对应的字符串。如果存在,返回对应的编码,不存在返回NaN,不写下标默认是0 ,如果比0小或者比最大的下标大返回NaNconcat:字符串的拼接t原创 2022-01-23 21:09:03 · 394 阅读 · 0 评论 -
day27
1 闭包:可以保护数据,不会破坏全局变量闭包变量不会被垃圾回收机制回收2 数组 :盒子,存储各种数据,数据是有规律的排列,按照下标下标从0开始到length-1结束可以通过for循环遍历组数组【下标】=值 如果数组中存在这个下标是替换,不存在则是添加,如果设置下标过大,前边没有数据则用空来补充3 length代表的是数据的个数数组的常用方法pop末尾删除 push末尾添加 shift 开头删除 UNshift 开头添加 concat 数组的拼接 join 将数组转换原创 2022-01-22 15:36:35 · 166 阅读 · 0 评论 -
day26
1 函数的特殊参数 :arguments 是一个伪数组(类数组)可以看做是一个盒子,盒子里存放着我们传递进来的参数每一个参数都存在自己的下标,是按照顺序排列的,下标从0开始,到arguments.length-1结束arguments.length是参数的个数2 函数的返回值:return 关键字,return关键字之后的所有程序都不执行函数的类型:复杂数据类型复杂数据类型在赋值的时候赋值的是一个地址递归函数:函数内部调用函数本身解决一些数学问题作用域:一个变量的生效范围原创 2022-01-21 20:31:34 · 185 阅读 · 0 评论 -
day25
1 穷举法 :一次列出所有的可能性,使用for循环通过判断语句来找到需要的内容2 水仙花数 :个位的立方+十位的立方+百位的立方=该数本身3 累加器和累积器需要在外部声明一个变量在循环结束之后需要打印累加器:外部变量的初始值为0累积器:外部变量的初始值为04 循环while和do while相同点:都是循环语句,如果循环语句与循环变量改变了顺序在上或者在下,两个的结果不同不同点:while是先判断再执行,do while是先执行再判断,do while不管条件是否原创 2022-01-21 19:47:13 · 70 阅读 · 0 评论 -
day24
1 parseint的使用将其他的数据类型转换成number可以对小数进行取整操作进制数:两个参数,第一个是数字,第二个代表进制数,最多36进制,0~10都市10进制2 赋值运算符+= -= *= /= %= ++自身加1(前置:先赋值后运算,后置:先运算再赋值) --自身减1(前置:先赋值后运算,后置:先运算后赋值)3 位运算(了解)4 流程控制语句ifif() {}if() {}else{} 可以使用三元运算代替if() {}else if() {}.....原创 2022-01-19 15:49:30 · 66 阅读 · 0 评论 -
day24
1 parseint的使用将其他的数据类型转换成number可以对小数进行取整操作进制数:两个参数,第一个是数字,第二个代表进制数,最多36进制,0~10都市10进制2 赋值运算符+= -= *= /= %= ++自身加1(前置:先赋值后运算,后置:先运算再赋值) --自身减1(前置:先赋值后运算,后置:先运算后赋值)3 位运算(了解)4 流程控制语句ifif() {}if() {}else{} 可以使用三元运算代替if() {}else if() {}.....原创 2022-01-19 15:44:42 · 536 阅读 · 0 评论 -
day23
1 数据类型的转换转换成字符串 :添加引号转换成数字number(要转换的数据)1 整体转换,不能转换就是NaN2 true===1 false===0 null===03 可以识别一个小数点parseint(要转换的数据)1一位一位的转换,第一位可以转换就转换,不可以就直接NaN2 不识别小数点parsefloat(要转换的数据)1 一位一位的转换,第一位可以转换就转换,不可以就直接NaN2 识别小数点2 数学运算符1 隐式数据类型的转换:*1 /1原创 2022-01-19 15:15:18 · 158 阅读 · 0 评论 -
day21
1 JavaScript作用:页面的前后端交互,表单验证js组成:ecma:规定js的标准规则,js语法规范 dom:文档对象模型,一整套操控文档元素的方式方法 bom:浏览器对象模型,一整套操控浏览器对象的方式方法2 js的书写1 行内式:写在html标签的内部,不建议使用js弹框 alert("内容")a 标签 <a href="javascript:alert(内容)">内容</a>如果一个标签中同时存在两个href属性,一个是超链接一个是js原创 2022-01-15 20:35:22 · 186 阅读 · 0 评论 -
day20
1 列表布局float+margin实现,注意点:父元素不能存在width结构伪类选择器实现弹性盒实现多列实现:瀑布流网格实现:电子相册设置网格 display:grid/inline-grid设置列宽度 grid-templete-columns:repeat(列数,宽度)设置行高度 grid-templete-rows:repeat(行数,高度)设置单元格的间距 grid-gap划分区域 grid-templete-areas子元素指定对应区域 grid-ar原创 2022-01-15 11:37:57 · 283 阅读 · 0 评论 -
day18
1 弹性父元素的属性设置弹性盒 display:flex弹性子元素的排列方式和是否允许换行 flex-flowflex-direction 排列方式row默认 row-reverse水平翻转 column自上而下 column-reverse 自上而下翻转flex-wrap 是否允许换行nowrap 不允许,默认 wrap允许 wrap-reverse允许换行翻转弹性子元素存在换行 行的控制 align-contentflex-start flex-end center sp原创 2022-01-11 20:23:56 · 143 阅读 · 0 评论 -
day17
1 倾斜 skewskew(角度) -- skewx(角度)skew(x,y)skewx()skewy()内容会跟着倾斜2 偏移 translate在原来位置上的偏移值可以设置具体的数值,可以设置百分比(自身宽度 高度的百分比)translate(偏移值)---translatex()translate(x,y)translate3d(x,y,z)translatex 正值向右,负值向左translatey 正值向下 负值向上translatez 正值原创 2022-01-10 16:11:04 · 57 阅读 · 0 评论 -
day16
1 背景渐变 :background或background-img线性渐变 background:linear-gradient(位置,颜色。。。)background:repeating-linear-gradient(位置,颜色1 起始,颜色1 结束,颜色2 起始,颜色2 结束)颜色2的起始是颜色1的结束径向渐变 background:radial-gradient(位置,颜色。。。)background:repeating-radial-gradient(位置,颜色1起始,颜色1结原创 2022-01-10 15:01:58 · 556 阅读 · 0 评论 -
day15
1 结构伪类选择器这个结构中 : 第一个 first-child第几个 nth-child(n)倒数第几个 nth-last-child(n)最后一个 last-child只有一个 only-child这个元素类型 第一个 first-of-type第几个 nth-of-type(n)倒数第几个 nth-last-of-type(n)最后一个 last-of-type只有一个 only-of-type内容为空 empty2 否定伪类选择器 :not()3原创 2022-01-10 14:29:07 · 204 阅读 · 0 评论 -
day14
1 新增布局布局标签头部 header 导航nav 内容selection,main 底部footer侧边栏aside 文章 artical 标题组 hgroup 媒体组 figure媒体组标题 figcaption 时间time 选中mark2 其他标签details 定义详细信息 summary 更改详细信息的内容注释标签 ruby rp rt3 视频音频视频 video 支持格式MP4 ogg webm音频 audio 支持格式 MP3 MP4 ogg静音 mu原创 2022-01-09 21:47:30 · 231 阅读 · 0 评论 -
day 13
1 高度塌陷:父元素设置了高度,子元素设置了float解决方式:1 外墙法:在塌陷的父元素后边添加一个空div,设置clear:both 可以解决塌陷问题,但是父元素的高度依然没有 2 内墙法:在浮动的元素后边添加一个空div,设置clear:both 可以解决塌陷,同时让父元素存在高度 3 给父元素添加overflow属性,hidden、scroll、auto,必须要保证内容不存在溢出 4 伪元素选择器 父元素:after { content: " "; display: bloc原创 2022-01-02 12:14:57 · 131 阅读 · 0 评论 -
day12
1 html的兼容lte 小于等于 gt大于 lt小于 gte 大于等于css的兼容IE6以下不支持子代选择器属性前边添加下划线,IE6以下支持属性前边添加*,IE7以下支持\9 IE10以下支持 \0 IE8以上支持2 常见浏览器兼容问题1 图片会向下撑大3个像素 解决方式:1给图片添加vertical-align:top/middle/bottom 2 给图片添加display:block 3 给父元素添加font-size:0 2 超链接出来的图片,在ie10以原创 2022-01-01 20:38:39 · 223 阅读 · 0 评论 -
day11
1 水平垂直居中单行文本、多行文本、行内元素、行内块 水平方向居中 text-align:center垂直方向居中 高度固定、单行文本、line-height多行文本通过计算行内块 vertical-align:Middle高度不固定:单行文本、多行文本、行内块、行内元素、块级元素 padding块级元素水平方向居中:margin:0 auto利用表格可以很快实现水平垂直居中,不分元素2 定位属性static 默认值,静态的 relative 相对定位,是在原来位置上的原创 2021-12-30 17:50:06 · 145 阅读 · 0 评论 -
day10
1 背景相关属性(背景颜色和背景图片可以同时存在,背景图片会盖住背景颜色)background 复合属性:颜色、图片、图片的重复方式、图片的位置、是否固定background-color 颜色background-image 图片 url(路径)背景图片如果比元素本身大,则只显示元素本身大小的的背景图片,从背景图片的左上角开始加载,超区的不显示,背景图片如果比元素本身小,则会水平垂直平铺,直到铺满整个元素的区域。background-repeat repeat默认值,no-repea原创 2021-12-29 19:56:18 · 129 阅读 · 0 评论 -
day09
1 margin的塌陷第一个元素的margin-top与最后一个子元素的margin-bottom会传递给父元素解决办法:1给父元素添加overflow:hiddden属性 2 给父元素添加border 3 给父元素添加padding 4 给父元素添加 float 5 给元素本身添加float 6 给元素本身添加display:inline-block 7 不让他是第一个元素或者最后一个元素2 overflow:over-x 水平方向over-y 垂直方向hidden原创 2021-12-28 13:57:10 · 143 阅读 · 0 评论 -
day08
1 盒子模型1 组成: margin border padding content(width、height) 2 padding 内填充、内边距、 内补白 padding 会撑大盒子,padding区域可以出现背景颜色,(不能出现负值)在边框线里边 一个值代表上下左右,两个值代表上下、左右,三个值代表上、左右、下,四个值代表上、右、下、左(顺时针) 可以单独设置某一个方向:padding-left、right、top、bottom 3 margin 外填充、外边距、外补白 margin会撑原创 2021-12-24 20:57:02 · 370 阅读 · 0 评论 -
day 07
1 文本相关属性1 字符间距 letter-spacing (可设置负值) 2 词间距 word-spacing (可设置负值) 3 文本修饰 text-decoription:underline 下划线 overline 上划线 line-through 删除线 none 没有 4 英文字母大小写 text-transform: uppercase 大写 lowercase 小写 capitalize 首字母大写 5 首行缩进 text-indent 首行缩进2个字,值是2em,只针对第一行生原创 2021-12-23 20:55:34 · 182 阅读 · 0 评论 -
day06
1 高级选择器并集选择器(群组、集体)语法:选择器1,选择器2,.....选择器n {属性: 属性值;}关系选择器(必须存在嵌套关系)后代选择器语法:选择器1 选择器2 {属性: 属性值;}子代选择器语法:选择器1>选择器2 {属性: 属性值;}区别:后代选择器不管你是我后边的几代我都会生效子代选择器只管我后边的一代交集选择器(绑定选择器)语法:标签 选择器名(id或者class) {属性: 属性值;}2 选择器的权重继承的权重最小标签选择器:0原创 2021-12-23 16:17:28 · 176 阅读 · 0 评论 -
day05
1 css 层叠样式表(修饰html)优势:弥补html本身标签标记的不足减少冗余代码,减小文件体积,减少网络带宽占有,提高页面加载速度提高用户体验对网页的重构有很好的支持有利于SEO2 css的语法css由两不分组成 : 选择器和声明(包含属性和属性值)选择器 {属性:属性值;}注意:属性和属性值冒号连接,分号结束,必须是英文模式一个选择器可以同时存在多个属性,不分先后顺序选择器和{}之间存在空格,(从语法规范角度来说建议有)属性和冒号之间存在空格(语法规范原创 2021-12-22 16:56:13 · 64 阅读 · 0 评论 -
day04
1 表格的标题整个表格的标题 caption 默认在表格上边水平方向处于居中位置,放在末尾最终也不会显示在下边表格的列标题 将td换成th,th的内容默认水平垂直居中并且是加粗效果2 表格按照数据行分组:thead 表头 tbody表体 tfoot 表尾一个表格中thead tbody tfoot要出现就同时出现,要么就都不出现三者出现的顺序 thead tfoot tbody一个表格只能有一个thead tfoot,可以存在多个tbodyrules 表格的分割线 all 横向纵原创 2021-12-20 21:37:03 · 190 阅读 · 0 评论 -
day02
1 字符集UTF-8 国际通用的编码形式,一个字代表3个字节GB2312 中文字符集,包含了一些繁体字,一个字代表2个字节工作中的使用,如果网站涉及多个语言,用UTF-8如果网站只有中文,用UTF-8或GB2312都可以如果想要减小文件的体积,还都是英文,那么用GB2312注意点编辑器的编码格式必须与代码的编码格式要保持一致在工作中如果写的代码出来效果,不是你后台编辑的文字,那么编码格式不正确2 语法规则img标签与src必须存在空格,否则加载不出来3 常用的标题原创 2021-12-18 14:35:53 · 105 阅读 · 0 评论 -
day03
1 属性的分类必有属性 src alt可选属性 width height border通用(标准)属性 :所有的标签都可以有 title style id class事件属性 js的相关属性2 列表标签无序列表 ul li可通过type属性更改列表符号,disc默认实心圆,circle空心圆,square实心方块,none没有有序列表 ol li可通过type属性更改列表符号,1代表阿拉伯数字,a小写字幕,A大写字母,I大写罗马数字,i小写罗马数字通过start给定一原创 2021-12-18 12:29:45 · 267 阅读 · 0 评论