css&html&javascript
文章平均质量分 56
css&html&javascript
广积粮缓称王
读书使人充实,思考使人深邃,交谈使人清醒。
展开
-
前端安全配置之Content-Security-Policy(csp)
什么是CSP CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源(这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源...转载 2021-02-04 18:41:51 · 4063 阅读 · 0 评论 -
js判断url链接是否可访问(服务可连接,可用)
electron 项目中通过loadURL() 方法加载用户输入的url服务,但是electron不管该url服务是否可用都会加载执行,所以需要在用户输入url后对该url进行可用性判断,记录一下解决方案:解决方案一: XMLHTTP方案 function getURL(url) { function getXmlHttpRequest() { if (window.XMLHttpRequest) { return new XMLHttpR.原创 2021-02-01 18:34:12 · 10336 阅读 · 1 评论 -
行内元素和块级元素的区别,为何img、input等行内元素可以设置宽高??(夯实基础)
我们习惯将html中元素分类为行内元素和块级元素,如下:·常见块级元素有:html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等;·常见行内元素有:span、a、img、textarea、button、input、br、label、selec...原创 2018-07-16 14:19:42 · 9668 阅读 · 2 评论 -
绘制扇形的多种方式,包括border-radius、clip裁剪显示、canvas原点变换等方式的详细理解及demo
对clip的理解:clip是对使用了该样式的元素进行裁剪显示。使用方法是rect (top, right, bottom, left) 其中参数top代表显示的区域上边界离该元素顶部border-top相对距离,依此分别是右边界离该元素左侧border-left相对距离。参数top和left取值auto时候代表是取值0,bottom和right取值auto时候代表取值100%;注意:clip属性只...原创 2018-07-03 10:47:10 · 4297 阅读 · 0 评论 -
关于web前端性能优化总结
1、从DOM结构和标签上来优化·使用语义化的标签,代码清晰简洁;·减少Dom节点,增加渲染速度;·使用W3C标准书写闭合小写的标签;·给图片和table指定宽高,避免缩放;·防止src和href值为空,当为空时,浏览器会把当前页面当做属性值重新加载;·css在头部位置,js在body底部位置; 2、从CSS样式上来优化·使用link加载样式而不是@import(是css2提供的一种方式,不兼容,只...原创 2018-06-18 23:03:19 · 6565 阅读 · 0 评论 -
浏览器tab标签显示网站标志图标
对于不同的浏览器,方法是有差别的1.对于IE或TT浏览器:把需要显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下,浏览器会自动检索2.这大概是所有浏览器通用的在标签页加入指定图标的方法:把favicon.ico图标放到网站根目录下,在网页的<head></head>中加入<link rel="shortcut icon" h...转载 2018-06-18 22:48:25 · 2404 阅读 · 0 评论 -
详解var、let、const关键词声明变量的区别,以及变量提升、块级作用域的认识等。
首先回顾一下JavaScript中var声明变量的基础知识:• 在使用var关键词声明变量时,变量在函数外则是全局变量,有全局作用域,全局变量在页面关闭后销毁;变量在函数内则是局部变量,作用局部作用域(变量只能在该函数内有效,函数执行完将自动销毁)• 我们使用var来创建变量,声明后未赋值的变量输出会提示 “undefined”。在方法函数外声明的变量未使用var ,会报错“x is not de...原创 2018-06-18 20:11:47 · 6277 阅读 · 0 评论 -
JS闭包的简单理解。优缺点以及垃圾回收机制
闭包是什么?·了解闭包首先了解js的‘链式作用域’结构,对象可以一级一级的向上查找父对象的变量,所以父对象的变量对子对象可见,反之不成立;所以都可以访问全局变量·为了解决函数外部无法访问函数内局部变量的问题,就在父函数中定义一个子函数并让它访问了父函数的局部变量,再通过父函数返回该子函数就实现了调用局部变量的效果;·而上面中的子函数就是闭包,所以闭包的定义是“能够读取其他函数内部变量的函数”,其实...原创 2018-06-18 13:21:19 · 3233 阅读 · 0 评论 -
理解JavaScript中this的指向详解
this的定义和理解:this是JavaScript语言的一个关键字,它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内使用。 1、this和执行环境对象有关,和函数的声明无关。 var name="Tom"; var Bob={ name:'Bob', show:function(){ console.log...原创 2018-12-12 17:14:01 · 351 阅读 · 0 评论 -
深入理解call、apply、bind(改变函数中的this指向)
在JavaScript中call、apply、bind是Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果。本文将对这三个方法进行详细的讲解,并列出几个经典应用场景。 区分:1、call(object,arg1,arg2) ,call方法的第一个参数是函数中this重新指向的对象,剩下的参数是传入该函数的形参不传...原创 2018-12-13 17:47:31 · 7881 阅读 · 0 评论 -
隐藏浏览器滚动条但内容可以滚动的3种解决方式(简单清晰)
第一种:使用纯css样式属性隐藏滚动条 :火狐浏览器的css写法不兼容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt原创 2018-12-05 10:36:29 · 18884 阅读 · 2 评论 -
null、undefined、NaN区分解析和条件判定,以及在IF条件中的判定
NaN的理解和用法:NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。Number.NaN 是一个特殊值,说明某些算术运算(如求负数的平方根)的结果不是数字。通常用于检测 parseFloat() 和 parseInt() 的结果,以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错...原创 2018-11-26 22:20:17 · 3937 阅读 · 0 评论 -
Chorme控制台console的用法;
前提:是谷歌浏览器!IE8- 不支持console.log();会报错,解决如下:(function (){ //创建空console对象,避免JS报错 if(!window.console) window.console = {}; var console = windo...原创 2018-11-24 15:45:53 · 549 阅读 · 0 评论 -
js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...
1、给对象添加属性:使用 object.prop 或object['prop'] 给对象添加属性 let obj={}; obj.name="zhangsan"; obj["age"]=23; obj["class"]="语文"; console.log(obj); //输出:{name: "zhangsan", age: 23, class: "语文"}2、删除对原创 2018-10-27 17:16:09 · 1050 阅读 · 0 评论 -
单行文字、多行文字溢出时省略号表示的多种解决方式;调整字符间距;段落首字母大写缩进效果;
文本溢出省略号表示的实现效果:1、解决单行文字溢出:解决方式:在文字容器样式中添加 overflow:hidden; text-overflow:ellipsis; white-space: nowrap; 其中overflow:hidden;是在超出元素宽度范围时候不使用滚动条,text-overflow:ellipsis;表示在文本溢出时候使用省略号表示,white-spac...原创 2018-10-09 16:24:44 · 2632 阅读 · 0 评论 -
常用html字符的转义字符串(html代码),全部转义字符备用
转义字符串,即字符实体(Character Entity)分成三部分: 第一部分是一个&符号; 第二部分是实体(Entity)名字或者是#加上实体(Entity)编号; 第三部分是一个分号(;)。注意:用实体(Entity)名字的好处是比较好理解,一看lt,大概就猜出是less than的意思,但是其劣势在于并不是所有的浏览器...原创 2018-10-08 17:14:08 · 6817 阅读 · 0 评论 -
CSS文字或元素的水平垂直居中多种方式(简单明了)
前言:水平居中,我们可以很容易想到使用text-align实现文字水平居中,使用margin:0px auto;可以实现元素水平居中;所以重点将是怎么实现文字和元素的垂直居中?? --- 本文将通过举栗子说明各种解决方式: 首先,单行文字、多行文字怎么水平垂直居中?? ① 方案一:文本水平居中使用text-align:center即可,height设置和line-height一...原创 2018-07-19 10:14:53 · 789 阅读 · 1 评论 -
nodejs 安装后 npm-v 无效,node全局环境配置
Nodejs安装后使用 npm -v 命令无效果,解决办法是需要删除C:\Users\{账户}\下的.npmrc文件....,注意不是删除安装文件下的.npmrc文件.安装nodejs后的环境配置:说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面...原创 2019-05-19 13:53:37 · 21077 阅读 · 5 评论 -
css宽高自适应布局,实现Sticky Footer的三种布局方式
宽度自适应布局:1、使用场景:一侧(左侧或者右侧)为固定的导航或者菜单栏,另一侧将会随着浏览器的缩放而自适应改变其大小。这种布局结构可用于顶层布局结构亦可用于某个局部功能块,常见于各种web系统(OA系统,ERP系统)等。常见的有两列布局或者三列布局(甚至是多列布局)。2、实现原理:以两列布局为例,一侧固定宽float浮动,另一侧不浮动并使用margin属性给浮动层留...原创 2019-04-21 15:50:17 · 1047 阅读 · 0 评论 -
flex弹性布局笔记
学习自菜鸟教程的flex布局笔记布局的传统解决方案,基于盒装模型,依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。简介:W3C提出了一种新的方案—-Flex布局,是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。可以简便、完整、响应式地实现各种页面布局。对...原创 2019-04-20 13:24:10 · 353 阅读 · 0 评论 -
笔记:区分文件头lang=”zh”和lang=”zh-cn”的使用??
单一的 zh 和 zh-CN 均属于废弃用法。zh现在不是语言code了,而是macrolang,能作为语言code的是cmn(国语)、yue(粤语)、wuu(吴语)等。zh-CN 的问题还在于,其实多数情况下标记的是简体中文,但是不恰当的使用了地区,这导致同样用简体中文的 zh-SG(新加坡)等无法匹配。更典型的是 zh-TW 和 zh-HK。所以其实应该使用 zh-Hans / zh-Ha...原创 2019-04-16 16:27:19 · 2513 阅读 · 0 评论 -
websocket 学习--简单使用,nodejs搭建websocket服务器,到模拟股票,到实现聊天室
websocket简介:WebSocket协议是HTML5 开始提供的一种基于TCP的一种新的全双工通讯的网络通讯协议。它允许服务器主动发送信息给客户端。和http协议的不同??HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起,服务端对请求做出应答处理。这种通信模型有一个弊端:HTTP 协议无法实现服务器主动向客户...原创 2019-04-16 15:59:29 · 5969 阅读 · 0 评论 -
js属性对象的hasOwnProperty方法
IE 5.5+、FireFox、Chrome、Safari、Opera等主流浏览器均支持该函数。Object的hasOwnProperty()方法返回一个布尔值,判断对象是否包含特定的自身(非继承)属性。可以用于区分自身属性和继承属性,如下function foo() { this.name = 'foo' this.sayHi = function () { co...原创 2019-04-15 10:57:58 · 547 阅读 · 0 评论 -
形参和实参是什么?? shim和polyfil是什么意思??
形参和实参是什么??实参(argument): 全称为"实际参数"是在调用时传递给函数的参数. 实参可以是常量、变量、表达式、函数等, 无论实参是何种类型的量,在进行函数调用时,它们都必须具有确定的值, 以便把这些值传送给形参。 因此应预先用赋值,输入等办法使实参获得确定值。 形参(parameter):全称为"形式参数" 由于它不是实际存在变量,所以又称虚拟变量。是在...原创 2018-12-13 23:24:07 · 1271 阅读 · 0 评论 -
mockjs语法规范、设置mockjs拦截响应时间、Mock.Random占位符生成随机数据
首先回顾vue-cli项目中使用mockjs步骤:1、安装mockjs、axios(http请求库);cnpm install mockjs axios --save2、在项目中新建一个mock.js文件,用于定义接口返回的数据;const Mock = require('mockjs') // 获取mock对象const Random = Mock.Random //...原创 2019-08-20 11:27:19 · 7397 阅读 · 0 评论 -
固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)理解和技巧归纳
关于web页面布局,首先简单了解一下固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)和相应的使用技巧?固定布局(fixed layout)固定布局,例如豆瓣网,无论如何change浏览器的宽度,页面主体区域的宽度是固定不变了,里面的内容布局也是打死不动的;利任...原创 2019-07-14 11:33:40 · 5193 阅读 · 0 评论 -
浅谈Normalize.css
转载自简书:https://www.jianshu.com/p/3d21d1932aa0Normalize.css只是一个很小的css文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的css reset,Normalize.css是一种现代的,为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap,HTML5 Boi...转载 2019-07-13 23:16:29 · 213 阅读 · 0 评论 -
CSS3 @media媒体查询 适配不同尺寸设备的响应式布局(清晰详解)
随着宽屏的不断普及,CSS3出现了@media媒体查询技术一、了解@Media 相关知识1、了解Media QueriesMedia Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果。其原理就是允许添加表达式用以媒体查询(包括媒体类型和媒体特性),以此来选择不同的样式表,从而自动适应不同的屏幕分辨率。css2里面虽然支持@medi...原创 2019-07-13 23:04:53 · 38846 阅读 · 0 评论 -
px、em、rem区别介绍
PXpx像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX特点1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位; 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。EMem是相对长度单位。相对于当前对象内文本的字体...原创 2019-07-11 17:15:41 · 186 阅读 · 1 评论 -
浏览器兼容video视频播放的多种方法
前言:在 HTML 中播放视频并不容易!因为直到现在,仍然不存在一项旨在网页上显示视频的标准。今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。 比如windows平台的IE浏览器利用Activex控件来播放flash而其它的浏览器则使用Netscape插件技术来播放flash。而在HTML5 中规定了一种通过 video 元素来包含视频的标准方法,...原创 2019-07-11 14:42:46 · 33455 阅读 · 0 评论 -
常用MIME类型,解决IIS布署后字体文件、mp4视频文件等not found 的错误
前言:项目在本地运行正常,但部署在IIS服务器后使用浏览器访问项目会报:404 not found 错误,包括mp4视频文件和woff文件找不到。。如下原因:在IIS中没有将 .mp4和 .woff 后缀的相应的MIME类型,使得 .mp4等格式文件在IIS服务器上无法识别。什么是MIME?MIME(Multipurpose Internet Mail Extensions)...原创 2019-07-02 15:59:54 · 2575 阅读 · 0 评论 -
让IE6\7\8支持Html5和CSS3的各类JS和Htc归纳(html5shiv.js、respond.js、background-size.htc、ie-css3.htc、pie.htc等)
前言:由于IE6/IE7/IE8还有很大一部分用户,为了让网站浏览者都能正常的访问HTML5网站,解决方案就有下面两个:1. 为网站创建多套模板,通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面,这样的维护成本比较高,也失去响应式设计的意义。2. 使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式(Bootcss官方例子也是...原创 2019-07-03 16:50:19 · 1151 阅读 · 0 评论 -
伪类::selection自定义文本选中时的样式(CSS3样式),CSS3的word-break单次换行
1、::selection CSS3伪类自定义文本选中时的样式有的人在浏览网页时,喜欢一边选中文本一边阅读。在windows环境下,正常的文本选中应该是深蓝色背景白色文本的样式。那么想要修改文本选中样式,可以通过css中有这样的一个伪类::selection用于自定义文本选中时的样式设置。::selection 选择器匹配被用户选取的文本内容。只能向 ::selection 选择器应...原创 2019-07-12 10:18:38 · 976 阅读 · 0 评论 -
js基础中Null、undefined、NaN、false、0、{}的理解及使用
数据类型:值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。引用数据类型:对象(Object)、数组(Array)、函数(Function)。JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。注:Symbol 是 ES6 引入了一种新的原始数据类型...原创 2019-11-12 14:02:53 · 3795 阅读 · 0 评论 -
阮一峰的JavaScript 的 this 原理
一、问题的由来学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果。var obj = { foo: function () {}};var foo = obj.foo;// 写法一obj.foo()// 写法二foo()上面代码中,虽然obj.foo和foo指向同一个函数,但是执行结果可能不一样。请看下面的例子。...转载 2019-11-01 10:53:58 · 1045 阅读 · 0 评论 -
阮一峰的学习Javascript闭包(Closure)
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。下面就是我的学习笔记,对于Javascript初学者应该是很有用的。一、变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。 v...转载 2019-11-01 10:45:23 · 723 阅读 · 0 评论 -
学习阮一峰Javascript模块化编程,requireJS使用
使用背景NOW:网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式。项目需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑,而项目业务逻辑是包含许多特定功能的模块组合而成,理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块...转载 2019-10-30 16:05:07 · 1294 阅读 · 0 评论 -
JS中的prototype、__proto__与constructor,原型和原型链
理解原型的几个关键点:1、所有的引用类型(数组、函数、对象)可以自由扩展属性(除null以外);2、所有的引用类型(对象)都有一个’_ _ proto_ _'属性(也叫隐式原型,它是一个普通的对象),指向原型对象;3、所有的函数都有一个’prototype’属性(这也叫显式原型,它也是一个普通的对象,该对象就是函数的原型对象,对象中包含所有实例对象可以共享的属性和方法)。’protot...转载 2019-09-15 10:54:59 · 256 阅读 · 1 评论 -
转:javascript方法--bind()
javascript方法--bind()bind方法,顾名思义,就是绑定的意思,到底是怎么绑定然后怎么用呢,下面就来说说我对这个方法的理解。语法fun.bind(this,arg1,arg2,...)bind()方法会创建一个新的函数,称为绑定函数,fun方法在this环境下调用该方法可传入两个参数,第一个参数作为this作用域,可以理解为让fun函数在this作用域下运...转载 2019-08-28 23:41:18 · 138 阅读 · 0 评论 -
JS中使用bignumber处理高精度小数运算
项目开发中发现精度丢失的问题,如0.1+0.2 = 0.30000000000000004的问题解决方式:引用bignumber.js用于数字精度要求较高的计算。1、安装或引用: 下载地址:https://github.com/MikeMcl/bignumber.js/releases 或 npm install bignumber.js --save 命令安装后使用import BigNumber from 'bignumber.js' 引用 ...原创 2021-01-22 13:57:49 · 13624 阅读 · 1 评论