前端web
文章平均质量分 74
叨唠
弘德、博学、敏行、敢先
展开
-
web端攻击类型
本文介绍了各种类型的安全攻击和缓解它们的技术。点击劫持点击劫持是一种欺骗用户点击链接、按钮等的做法,这与用户认为的不同。例如,这可以用来窃取登录凭据或让用户在不知情的情况下安装恶意软件。(点击劫持有时被称为“用户界面纠正”,尽管这是对“纠正”一词的误用。)跨站脚本 (XSS)跨站点脚本 (XSS) 是一种安全漏洞,允许攻击者将恶意客户端代码注入网站。此代码由受害者执行,让攻击者绕过访问控制并冒充用户。根据开放 Web 应用程序安全项目,XSS 是2017 年第七大最常见的 Web 应用程序漏转载 2022-04-12 00:03:53 · 421 阅读 · 0 评论 -
async await 和Promise的结合使用,Promise链解决循环异步请求,循环依次执行异步代码
需求分析当我们想依次执行多个异步请求时,或者实现setTimeout为setInterval时,可以使用Promise对象和async await关键字来实现该功能。尤其是,我们在使用node做网络爬虫时,需要进行大量的依次进行的异步请求。波及到的知识点如下:1、数组的reduce方法reduce()方法对数组中的每个元素执行一次处理函数,将其结果汇总为单个返回值。reduce详情:https://developer.mozilla.org/zh-CN/docs/Web/JavaS.原创 2021-04-25 19:58:42 · 1260 阅读 · 2 评论 -
爬取项目中的中文
前沿爬取项目中的中文核心思想在于通过脚本对项目文件进行遍历,通过文件名对文件进行筛选,读取筛选出的文件内容,查看文件内容中是否有符合的片段。其实重点在于正则表达式的使用,如何巧妙的使用正则表达式来获取文件中复杂的中文内容。Node请安装node,下载项目后,执行node install安装相关依赖项目源码地址:https://github.com/zhuyuzhu/getHanzi执行命令爬取内容并生成Excel文件:node 脚本查找HTML中的文字:var fs = r原创 2021-02-24 11:21:14 · 518 阅读 · 0 评论 -
jquery.i18n.properties国际化实例
前沿先来理解jquery.i18n实现中英文版本切换的原理,再来看具体实现的实例。首先将中文汉字以变量的形式存入以zh_CN.properties结尾的文件中。将同样变量名值为英文的数据存入到en_GB.properties结尾的文件中。也可以是en_US.properties文件,总之是properties文件,文件名字与语言对应,已达到语义化的目的。语言资源文件:strings_zh_CN.properties文件内容string_prop=今天是{0},我们可以出去{1}st原创 2021-02-24 10:11:01 · 1239 阅读 · 0 评论 -
Invalid or unexpected token “\u200b“
今天遇到了一个问题,运行程序的时候,Chrome浏览器报了这样的一个错误控制台:未捕获的异常,无效或意外的标记 !Uncaught SyntaxError: Invalid or unexpected token报错的位置:实际上此处有一个意外的标记"\u200b",我们在代码中是看不到的,需要手动删除该符号。产生这个符号的原因:我在CSDN上复制代码的时候,使用的是代码片段 右上角的那个“复制”按钮,结果就产生了这个符号。...原创 2021-01-06 09:42:13 · 1177 阅读 · 0 评论 -
绝对路径、相对路径、根路径
今天探讨一下浏览器和服务器中的绝对路径、相对路径和根路径浏览器中对于浏览器而言,是无法知道服务器中,文件目录路径的。因为浏览器获取的文件资源,很可能跟服务器中文件资源目录不对应。而服务器是知道每个文件和资源在具体的哪个位置存放。浏览器中的相对路径:下面代码中的reset.css header.css index.css是相对路径。你以为是相对当前的html文件index.html吗?不是!而是相对于当前浏览器的url路径。<!-- index.html -->&..原创 2020-12-21 20:22:02 · 7067 阅读 · 0 评论 -
URLSearchParams和url-search-params-polyfill
URLSearchParams对象URLSearchParams接口定义了与URL的查询字符串一起使用的实用程序方法。处理url的查询字符串的。兼容性:Edge17,Chrome49,Firefox29,Safari10.1构造函数:URLSearchParams() 返回一个URLSearchParams对象实例。使用:URLSearchParams构造函数接收一个url的查询字符串部分,返回一个URLSearchParams对象。可以通过URLSearchParams对象上的方法,对查.原创 2020-12-05 15:05:13 · 2209 阅读 · 0 评论 -
Fetch的理解和使用
Abstract摘要:1、Fetch的官方规范文档:https://fetch.spec.whatwg.org/2、Fetch API提供了一个 JavaScript 接口,优化了http请求和响应的操作方式。这种功能以前是使用XMLHttpRequest(ajax)实现的。它还提供了一个全局fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。3、fetch最大的特点是与Promise对象的结合,Fetch API大多都返回一个Promise对象,使我们的编程风格...原创 2020-12-03 16:15:11 · 5407 阅读 · 0 评论 -
Request Headers 和Response Headers——请求头和响应头
前沿作为一个前端开发工程师看不懂每条请求的请求头和响应头,实在是一件很难受的事情。最近花了一些时间整理了一篇文档,一起来看看前后端交互时每个资源的信息。谷歌浏览器调试工具——查看请求资源的信息数据通过谷歌浏览器的调试工具,我们可以看到请求资源的以下信息:下面来具体聊聊每个信息代表了什么,有什么作用。根据上面的那条请求,分析里面一些重要的属性。我访问的是思否上的文章:比如:https://segmentfault.com/a/1190000017787636一、General 综合原创 2020-11-25 17:22:19 · 20142 阅读 · 0 评论 -
node.js搭建阿里云服务器contos系统
一、购买服务器选择centos系统,版本选新的;选择离你近的地区。二、服务器安装node1、设置云服务器在云服务器ECS ——》网络和安全——》安全组找到你的服务器,配置规则里,快速添加。开启对应的端口权限。尤其是80端口要开启。2、通过Xshell连接云服务器阿里云设置ssh密码:重置密码点击云服务器进入重置root密码3、安装指定版本的node4、解压node安装包tar -xvf node-v10.9.0-linux-x64..原创 2020-11-08 17:41:12 · 247 阅读 · 0 评论 -
art-template分别在前端和node中的使用
script标签内包裹jsp模板,有id作为该模板的唯一标示,type="template",区分script的类型。template模板中可以使用if语句:{if mt.portrait} <img src="{mt.portrait}" />{/if}实例:<script id="historyMixTmpl" type="template"> <li class="mix-li set-list-li no-num mt_type{mt.mt..原创 2020-09-28 09:49:54 · 378 阅读 · 0 评论 -
AMD规范、CMD规范、CommonJS
一、AMD规范AMD规范,全称是Asynchronous Module Definition,即异步模块加载机制。完整描述了模块的定义,依赖关系,引用关系以及加载机制。AMD的核心是预加载,先对依赖的全部文件进行加载,加载完了再进行处理。实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出优点:适合在浏览器环境中异步加载模块。可以并行加载多个模块。缺点:提高了开发成本,并且不能按需加载,而是必须提前加载所有的依赖。RequireJS主要解决了两...原创 2020-11-05 19:23:46 · 2322 阅读 · 2 评论 -
console.log 打印的值不准确
console.log 不服预期有些时候在使用·console.log() 打印对象的时候,打印出来的值不符合预期。这是为什么呢?有一种说法是:console.log() 是一个异步的方法,浏览器在处理的时候对于这种读取 i/o 的操作一般会放到比较靠后的位置去处理。所以有些时候打印出来的值不符合预期。还有一种说法是,当在打印一个对象的时候,由于对象中的值是引用的内存中的值,所以就会存在当打印对象的时候,当引用到对象中的值的时候,对象中的值已经发生变化了。所以才会存在打印结果与预期不一致的情况。转载 2020-10-15 20:18:24 · 1335 阅读 · 0 评论 -
ASCII码、Unicode码、UTF-8编码
标准ASCII 码也叫基础ASCII码,使用7 位二进制数(剩下的1位二进制为0)来表示所有的大写和小写字母,数字0 到9、标点符号,以及在美式英语中使用的特殊控制字符[1]。其中:0~31及127(共33个)是控制字符或通信专用字符(其余为可显示字符),如控制符:LF(换行)、CR(回车)、FF(换页)、DEL(删除)、BS(退格)、BEL(响铃)等;通信专用字符:SOH(文头)、EOT(文尾)、ACK(确认)等;ASCII值为8、9、10 和13 分别转换为退格、制表、换行和回车字符。它们...原创 2020-08-26 10:12:08 · 3079 阅读 · 0 评论 -
web前端或者微信小程序调用百度地图api,实现定位、天气功能,获取自己百度地图ak值
在百度地图api的官网上,有如下截屏:web开发拿微信小程序举例:其实百度地图api官方文档写的特别详细,还给出了具体的demo代码,这里我简单的介绍下使用流程。在官网的“开发文档”下,点击“web开发”下的“微信小程序JavaScript API”,页面左侧:第一项:读“服务介绍”,百度地图微信小程序JavaScript API 为小程序而生,帮助开发者在微信小程序中快速便捷...原创 2018-09-08 18:06:47 · 11847 阅读 · 2 评论 -
浏览器工作原理
一、浏览器的组成部分,组件每个组件的作用是什么二、输入url的时候获取到服务器数据发生了什么三、对获取的数据进行渲染原创 2020-04-22 22:34:26 · 269 阅读 · 0 评论 -
JavaScript递归例子
1. 递归的特点:找规律、找出口(1)求一个数的阶乘: function factorial(n){ if(n == 0 || n == 1){ return 1; } return n * factorial(n-1); }(2)求斐波拉数列第n项的...原创 2018-10-03 11:45:20 · 514 阅读 · 0 评论 -
DOM classList 属性
方法 描述 add(class1, class2, ...) 在元素中添加一个或多个类名。 如果指定的类名已存在,则不会添加 contains(class) 返回布尔值,判断指定的类名是否存在。 可能值: true - 元素包已经包含了该类名 false - 元素中不存在该类名 item(index) 返回类名在元素中的索引值...原创 2018-10-07 09:33:29 · 242 阅读 · 0 评论 -
css3圆角、边界图片、盒子阴影、背景大小、填充位置、定位位置、背景颜色渐变
1. css3圆角:border-radius(1)这是个复合属性:比如:border-radius:10px;== border-radius:10px 10px 10px 10px;对应的四个角:左上角,右上角,右下角,左下角== 四个值分别对应:border-top-left-radius: 10px、border-top-right-radius: 10px;、border-b...原创 2018-09-28 13:03:49 · 1027 阅读 · 0 评论 -
css3简介
1. 在编写css3样式时,不同的浏览器可能需要不同的前缀。因为css3的一些属性尚未成为w3c标准,是浏览器私有属性;虽然目前较新版本的浏览器基本上实现了css3所有功能,但是为了兼容之前的版本,最好还是要加上前缀。前缀 浏览器 -Webkit Chrome 和Safari -moz Firefox -ms IE -o Opera ...原创 2018-09-28 11:05:33 · 458 阅读 · 0 评论 -
css3的练习题
练习题:(1)css3选项卡功能、(2)钟表、(3)旋转木马1. 用css3实现选项卡功能:原理:每一个选项后紧跟着内容标签,用 + 选择器来绑定选项和内容,当选中某一个时,对应的内容display:inline-block展现出来。<!DOCTYPE html><html lang="en"><head> <meta chars...原创 2018-09-27 22:59:05 · 3153 阅读 · 0 评论 -
css3选择器
css3选择器参考手册:http://www.runoob.com/cssref/css-selectors.html,里面有css1 2 3的选择器的列表1. 属性选择器(属性+特性)属性选择器结合了正则表达式中的^开头、$结尾、*任意位置比如:a[src^="https"]:选择每一个src属性的值以"https"开头的a标签a[src$=".pdf"]:选择每一个src属...原创 2018-09-27 22:57:32 · 1212 阅读 · 0 评论 -
HTML5——读取文件FileReader对象上传文件
1. 方法:(1)abort()方法:终止读取(2)readAsText(file,[encoding])方法:将文件读取为文本(3)readAsBinaryString(file)方法:将文件读取为二进制编码(4)readAsDataURL(file)方法:将文件读取为DataURL编码(5)readAsArrayBuffer(file)方法:将文件读取为arraybuffe...原创 2018-09-21 17:13:13 · 766 阅读 · 1 评论 -
HTML5——drag拖拽
1. 给标签元素添加属性:draggable = “true”,该元素即可被拖拽,任何元素都可以被拖拽特点:拖走的是灵魂2. 事件(1)可拖拽元素的事件dragstart事件:被拖拽元素,开始被拖拽时触发dragend事件:被拖拽元素,拖拽完成时触发注意:e.target对象上,是拖拽元素的所有信息,包括属性、方法、对象等。需要了解一下:(2)目标元素事...原创 2018-09-21 11:47:09 · 1032 阅读 · 0 评论 -
纯js实现扫雷小游戏
项目地址:https://github.com/zhuyuzhu/sweep-minegit地址:https://github.com/zhuyuzhu/sweep-mine.git(1)html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g...原创 2018-10-07 10:24:28 · 4736 阅读 · 0 评论 -
css3字体@font-face
字体对该文章的理解:文章转自http://www.w3cplus.com/content/css3-font-face1、@font-face的语法规则: @font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source>...转载 2018-09-28 16:17:17 · 382 阅读 · 0 评论 -
CSS知识总结
1. css引入三种方式(1)行间样式;(2)页面内css;(3)外部css文件,用<link rel="stylesheet" href="">注意:HTML标签解析时,解析一个标签,浏览器执行一个标签;当解析link标签时,浏览器开启一个新的线程,异步的加载link标签引用的文件。2. css选择器(1)#id选择器;(2).class选择器;(3)标签选择器;(...原创 2018-09-10 14:23:03 · 263 阅读 · 0 评论 -
评分五角心的显示
方法1:五角星的图片,根据评分,上下移动一定距离,方法2:加载icon图标,设置黄色和灰色 效果:原创 2018-11-30 18:37:05 · 415 阅读 · 0 评论 -
项目开发中的样式布局实例
1. 盒子margin-left和margin-top的设置,使得背景是灰色,而灰色部分真是大盒子的背景颜色要实现的样式:应该用padding,这样颜色就和盒子颜色一样。2. 红心是个图片,通过line-height = height让红心和文在垂直居中的时候,红心还有往下,我们可以通过margin-top上下移动红心,让它和文字水平对齐。3. 让“今日预定”这个绿色的...原创 2018-11-30 16:35:39 · 294 阅读 · 0 评论 -
css3——3D动画、transform-style:preserve-3d、transform:perspective()、perspective-origin
1. transform-style:preserve-3d,该属性设置在父级元素中,它的子级元素具有3d效果注意:设置了该属性,就不能防止子级元素溢出,即不能设置overf:hidden属性;如果设置了overflow:hidden,那么transform-style:preserve-3d就无效。2. transform:perspective;景深,观察者到物体的距离;单位:px,比...原创 2018-09-30 15:59:44 · 7919 阅读 · 0 评论 -
css3——transition动画过渡(transition动画过渡可作用的属性),animation动画铺垫和@keyframes动画关键帧
css3动画优点:开启GPU加速,不会产生动画队列,即频繁点击按钮时,不会有多个动画在等待执行;1. transition: property duration timing-function delay;是个复合属性,包括:transition-property:设置过渡效果的 CSS 属性,值:all 所有变化的属性都过渡;某个css属性或某些css属性,用逗号隔开属性tran...原创 2018-09-29 21:24:53 · 1161 阅读 · 0 评论 -
css3——transform:rotate(旋转)、scale(缩放)、skew(拉伸)、translate(平移)、transform-origin
注意:transform是复合属性,拆开写会替代,先平移再旋转和先旋转再平移的结果是不同的1. CSS3 转换:transform属性可以对元素进行移动、缩放、转动、拉长或拉伸注意:Internet Explorer 9 要求前缀 -ms- 版本,Internet Explorer 10, Firefox, 和 Opera支持transform 属性,Chrome 和 Safari 要求...原创 2018-09-28 23:05:47 · 17664 阅读 · 1 评论 -
css3文本效果——文字阴影和文字换行
1. 文字阴影:text-shadowtext-shadow: h-shadow v-shadow blur color;text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。值 描述 测试 h-shadow 必需。水平阴影的位置。向左为正值,允许负值。 测...原创 2018-09-28 19:19:35 · 658 阅读 · 0 评论 -
JavaScript运算符和判断语句
1. > < 规则:数字比大小;字符串(内容是字母、数字)比的是第一位的ascll码值2. == != === !==主要比较:0 null undefined NaN结果为true:null == null , null === null ; undefined == undefined , undefined === undefined; nu...原创 2018-10-03 10:07:54 · 295 阅读 · 0 评论 -
html5的canvas知识总结(2)
1. rect()方法:画矩形rect(x, y, w, h):矩形左上角的点为起点(x, y),w,h是矩形的宽高; 效果: 问:矩形的最后的画笔在哪里? 答:还在(x, y)起始位置。rect方法结合stroke和fill方法,也可以使用:fillRect(x, y, w, h) 或 stroke...原创 2018-09-13 20:05:52 · 215 阅读 · 0 评论 -
web前端乱码问题
解决乱码问题:(1)encodeURLCompoenent():将中文,符号等进行编码(2)decodeURLComponent():将编码后的值进行解码注意:这两个方法直接调用,不是某个对象的方法...原创 2018-09-18 22:09:42 · 6380 阅读 · 0 评论 -
HTML5客户端存储Web Storage
1. Web Storage支持情况:IE8以上的主流浏览器都支持Web Storage,IOS平台和Android平台对Web Storage都有很好的支持。localStorage:存储在本地磁盘,永久存储。sessionStorage:临时存储,数据保存在浏览器内存中,当浏览器关闭,内存将被自动清除。Web Storage特点:(1)设置和读取数据方便(2)容量大,ses...原创 2018-09-18 21:05:32 · 254 阅读 · 0 评论 -
html5的canvas知识总结(1)
1. 浏览器支持Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素2. canvas基础知识:canvas是inline-block类型。(1)在css样式中,设置canva...原创 2018-09-13 17:35:11 · 315 阅读 · 0 评论 -
浏览器支持情况
1. 用来查询各种html技术,在各个平台上的支持情况:http://caniuse.com/2. http://www.w3school.com.cn/原创 2018-09-13 16:47:28 · 238 阅读 · 0 评论 -
用requestAnimationFrame和cancelAnimationFrame取代定时器setTimeout和clearTimeout
1. 浏览器的刷新时间和定时器的时间不同,会出现掉帧现象,定时器的时间越短,掉帧越严重。定时器的时间并不是非常精准,会将定时器放在执行队列中,也是要花费时间的。浏览器的刷新时间大约是16ms(电脑此时的性能等因素),所以定时器的时间过短,页面没有刷新,动画效果根本没有。理解:两条线,第一条线:浏览器每16ms刷新一次,页面将显示最新的内容;第二条线:定时器每多少ms执行一次,每一次执行定时...原创 2018-09-18 17:35:19 · 1797 阅读 · 1 评论