WEB基础
html,css,js,es6,less,sass等基础知识
小P趴菜
一张图讲清一个编程知识点。
展开
-
布局定位:relative,Float,absolute,fixed
1文档流,文本流文档流,是盒模型中的概念。块状元素的规则是从上到下排序,行内元素是从左到右排序2relativeposition : relative这个属性并没有脱离文档流的所以会根据文档流中的兄弟元素进行定位。3Floatfloat:浮动元素脱离文档流.不脱离文本流.不占据空间。浮动元素碰到包含它的边框,relative边框,浮动元素的边框停留定位。4absoluteposition : absolute这个属性并是脱离文档流和文本流的.原创 2021-08-25 13:38:27 · 227 阅读 · 0 评论 -
JS对金额的处理(保留两位小数位, 每隔三位添加‘,’)
function Money(value, num) { num = num > 0 && num <= 20 ? num : 2; value = parseFloat((value + "").replace(/[^\d\.-]/g, "")).toFixed(num) + ""; //将金额转成比如 123.45的字符串 var valueArr = value.split(".")[0].split("").reverse(...转载 2020-09-11 09:55:35 · 752 阅读 · 0 评论 -
行级元素和块级元素的区别
https://www.cnblogs.com/ljwk/p/7090320.html原创 2020-08-24 18:09:12 · 218 阅读 · 0 评论 -
web项目搭建记录
目录理解index: 模板 assetRoot: 打包后文件要存放的路径 assetsSubDirectory: 除了 index.html 之外的静态资源要存放的路径, assetsPublicPath: 代表打包后,index.html里面引用资源的的相对地址原创 2020-06-04 16:36:06 · 154 阅读 · 0 评论 -
js,jquery知识点总结
1选择器原创 2020-05-26 16:09:11 · 114 阅读 · 0 评论 -
vue知识总结
组件1注册全局注册Vue.component('my-first',{})局部注册import Child from xxvar app = new Vue({el:'#app',components:{'my-component':Child}})2data建立出来的组件是共享的,但每个页面用到的数据是不同的,所以data必须用新的函数r...原创 2020-05-09 10:22:00 · 147 阅读 · 0 评论 -
JS中的call()和apply()方法
1、方法定义call方法:语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])定义:调用一个对象的一个方法,以另一个对象替换当前对象。说明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被...转载 2020-05-06 09:20:07 · 158 阅读 · 0 评论 -
利用window.postMessage()实现跨域消息传递(JavaScript)
说明window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如,在一个页面和它生成的弹出窗口之间,或者是页面和嵌入其中的iframe之间。通常情况下,不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议,端口号和主机(也称为“同源策略”)。window.postMessage()提供了一个受控的机制来安全地规避这个限制(如果使用得当的话)。...转载 2020-05-06 08:38:28 · 1745 阅读 · 0 评论 -
js知识详解
1.对象的分类2新建一个对象,并对他.对象的分类2新建一个对象,并对他进行增删改查原创 2020-05-05 22:36:40 · 247 阅读 · 0 评论 -
DOM和BOM的区别
原创 2020-05-01 18:30:37 · 181 阅读 · 0 评论 -
html渲染流程
1浏览器输入网址从服务服务器下载网页到浏览器2浏览器解析引擎解析网页内容成为对象在浏览器对内存中3渲染引擎时时监控,一旦发现堆内存中的对象有所改变立刻修改4修改后的内容立刻呈现到浏览器上,所以会有动态效果5js作用于DOC文档用于修改html Object...原创 2020-05-01 18:19:00 · 438 阅读 · 0 评论 -
形象生动一遍记住:行内元素有哪些?块级元素有哪些? 空元素有那些?以及他们之间的区别!
行内元素有:a b span img input select strong记忆方法:记住首字母select strong (s傻) b(比)img input(爱) a(平a)一个打野的傻比爱到线上平a小兵块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…pdiv dl dt dd(d弟)ul(u又)ol(o殴)li(l理)h1 h2 h3 h4...原创 2020-04-24 10:41:43 · 158 阅读 · 0 评论 -
前端面试题总结带答案(持续更新)
Vue面试题1.什么是vue生命周期钩子?生命周期钩子有什么作用?每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。(ps:生命周期钩子就是生命周期函数)例如,如果要通过某些插件操作DOM节点,如想在页面...原创 2020-04-21 17:03:53 · 1530 阅读 · 0 评论 -
postion,float定位总结
float:浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留定位。position:relative这个属性并没有脱离文档流的,所以会根据文档流中的兄弟元素进行定位。position:absolute这个属性并是脱离文档流的,判断父元素是否为position:absolute或position:relative如果是根据他们进行定位如果不是根据body进行定位...原创 2020-04-20 11:15:31 · 158 阅读 · 0 评论 -
Doctype 作用? 严格模式与混杂模式如何区分?
<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前,告知浏览器的解析器, 用什么文档类型 规范来解析这个文档。严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。关于模式触发 浏览器根据DOCTYPE是否存在以及使用的哪种DTD(Docum...原创 2020-04-16 16:07:08 · 126 阅读 · 0 评论 -
html语义化标签
优点:1便开发人员阅读代码文档,理清代码结构2 SEO(搜索引擎优化:浏览器对网页排名搜索排名) 通用容器:div——块级通用容器;span——短语内容无语义容器。 如果语义不合适,也不要霸王硬上弓,=。。 =老实的用div吧。 < title></title>:简短、描述性、唯一(提升搜索引擎排名)。 ...原创 2018-10-28 12:13:09 · 202 阅读 · 0 评论 -
JSON
前端后端传输数据格式的要求java语言是一种强类型的语言,必须定义类型,然后生成实例,而js却不是,虽然它也是面向对象的,但是它并没有先定义类这一种概念(但是js也有类型),它是基于原型的一种模式,和java完全不同。很显然,二者的原理,机制,语法并不能兼容。二者产生的对象并不能被对方解读。再来看网络传输,通常就是http/tcp协议喽,使用的其实是请求-响应,再说白了即使字符串,不论后台传来...原创 2019-01-16 15:26:34 · 122 阅读 · 0 评论 -
前端的基础概念
content-type(formData & request payload)1Content-Type是指http/https发送信息至服务器时的内容编码类型,contentType用于表明发送数据流的类型,服务器根据编码类型使用特定的解析方式,获取数据流中的数据。2FormData和Payload是浏览器传输给接口的两种格式,这两种方式浏览器是通过Content-Type来...原创 2019-05-16 17:16:05 · 164 阅读 · 0 评论 -
vue
基础概念vue的核心是一个vue对象,在这个对象内我们一直加入别的对象进行管理。vue内部选项讲解elHtmlElement就是指定一个dom元素用来挂载vue实例的。el :'#app'data(防止数据散落在业务逻辑内难以维护)支持在外部使用变量方法声明:Data :myData ;var myData ={a:1,b:2}生命周期(vue的生命周期钩子可以...原创 2019-06-02 21:40:18 · 182 阅读 · 0 评论 -
Vue-指令详解-过滤器
{{}}(包括使用过滤器对数据的格式处理)用于输出属性的值,还可以使用一些简单的表达式进行运算,如果想要将输出的标签展示请使用v-html=' '过滤器的第一个参数是数据本身指令指令的主要作用是,当表达式(v-)的值变化时,将某些行为应用到dom元素上。数据驱动dom是vue的核心理念所以不到万不得已不要手动操作dom。vue为我们提供了大量的指令来操作dom例如循...原创 2019-06-07 17:26:37 · 142 阅读 · 0 评论 -
Jquery实战
自动创建标签(博客发表原理)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" > .my{width: ...原创 2019-06-03 10:17:12 · 122 阅读 · 0 评论 -
ES6-箭头函数-this指向问题
箭头函数的用法ES6 允许使用“箭头”(=>)定义函数。let xxx = (p1,p2)=>{ console.log(1) return 2}// 只有一个参数,可以省略括号let xxx = p1 =>{ console.log(1) return 2}// 代码块只有一句话时,可以省略花括号和returnlet x...原创 2019-06-11 14:44:39 · 310 阅读 · 0 评论 -
Vue实战篇-跨域问题解决方案(CORS)
原文http://www.cnblogs.com/loveis715/p/4592246.html名词解系同源策略:(https://segmentfault.com/a/1190000015597029)那么什么是Same-origin Policy呢?简单地说,在一个浏览器中访问的网站不能访问另一个网站中的数据,除非这两个网站具有相同的Origin,也即是拥有相同的协议、主机地址以...转载 2019-06-17 14:10:13 · 31560 阅读 · 4 评论 -
vue总结
目录slot指令过滤器filters计算属性钩子函数export || importMVVM跨域组件1基础知识2导入3通讯vue-cli(脚手架初始化项目)Axios发送post请求Victure Dom路由项目介绍目录介绍1通过构造函数Vue vue = new Vue({})创建一个根实例并且启动Vue应用,以后...原创 2019-06-25 12:57:28 · 451 阅读 · 0 评论 -
Axios发送json数据格式post请求时springMvc无法正确接受参数
基础理解编码https://www.cnblogs.com/yuansc/p/9076604.htmlContent-Type是指http/https发送信息至服务器时的内容编码类型,contentType用于表明发送数据流的类型,服务器根据编码类型使用特定的解析方式,获取数据流中的数据。application/x-www-form-unlencodedform表单中可以定义...原创 2019-07-09 11:19:11 · 2901 阅读 · 0 评论 -
Js总结
BOMwindows:是浏览器的一个实例对象,即是js访问浏览器窗口的一个接口,又是ES的一个Global对象。所以说每增加一个方法或者对象都是为windows对象添加一个属性。frame(框架)每个frame都是一个新的窗口,都有自己相对应的windows对象。top指向最外层的frame,frames集合里保存着每个ifame可以通过top.frame[index]访问或...原创 2019-07-24 11:22:10 · 149 阅读 · 0 评论 -
css3总结
flexible box弹性布局https://www.jianshu.com/p/5856c4ae91f2https://www.jianshu.com/p/7707b710b365flexible box弹性布局使用目的:在不同的设备里可以保证元素具有恰当的行为来适应屏幕,占据合适的位置以及留出空白声明弹性布局display:flex;inline-flex弹性盒子(F...原创 2019-07-24 11:22:46 · 72 阅读 · 0 评论 -
深入理解 CSS 中的行高与基线
深入理解 CSS 中的行高与基线1、基本概念1. 基线、底线、顶线、中线注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。2. 内容区内容区是指底线和顶线包裹的区域(行内元素display:inline可以通过background-color属性显示出来),实际中不一定看得到,但确实存在。内容区的大小依据font-size的值和字数进行变...转载 2019-08-05 19:03:12 · 269 阅读 · 0 评论 -
h5总结
关于基线,行高(text-height),行距,顶线,底线的理解行高和内容区直接关联https://www.jianshu.com/p/7707b710b365页面的结构原创 2019-08-05 20:10:33 · 204 阅读 · 0 评论 -
自动创建标签(博客发表原理)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" > .my{width: 200px; height:...原创 2019-08-19 15:11:44 · 410 阅读 · 1 评论 -
java中的转义字符,html中的转义字符
形象理解在java中转义字符都有一定的含义,编译程序的时候会展现出来(就像人的名片一样,一个转义字符都有一个实际的含义)!" "在java中代表里面包含了一个字符串编译后只剩下字符串,\"则会被编译成 "保留下来参考资料https://zhidao.baidu.com/question/428983006.html概念:通过 \ 来转变后面字母或符号的含义。举一些例子:...原创 2018-10-28 12:10:00 · 1326 阅读 · 0 评论