随笔分类 - html/css
摘要：初识运动 1.停不下来 给定时器添加timer 来判断是否需要停止 2.到目的地，还能点击移动，把移动的代码放入else中 3.重复点击按钮会加速运动 是因为点一次就会启动一次定时器，多次就会启动多次 保证只有一个定时器在启动，启动一次就关闭上一次启动定时器 运动框架: ? 1 启动就关闭定时器?
阅读全文
摘要：babel 本质上是个编译器，所以它所做的基本上就是编译器要做的事，为了避免对编译器的某些东西讲的太细，我们重点只要知道 babel 的工作流程就行了。 转换成AST 第一步可以说是是编译器的基本功能，通过解析器将原始代码转换成抽象语法树（AST），顾名思义就是描述语法的数据结构，一般在这一步编译器
阅读全文
摘要：大数据时代下，很多企业开始建立自己的网站，前期用户体验需要借助百度问答、贴吧这样的平台，后期的网站推广、seo优化同样需要，但是在过程中如果大量使用同一个IP重复操作，必然会受到限制。 今天我们来具体聊一聊seo优化专员应该具备的七种能力。 1、数据分析能力 为什么把数据分析能力放在前面来说呢?因为
阅读全文
摘要：无论你是react、Angular、vue.js，还是原生JavaScript开发者，你的代码都有可能成为黑客眼中的猎物。 作为一个前端开发者，我们可能更加关注性能、seo、UI/UX，往往会忽视安全问题。 当你了解了大型框架是如何让你对xss攻击保持开放态度时，也许你会感觉到很意外。例如，reac
阅读全文
摘要：CSS 自定义属性和 JavaScript 自定义属性在这里应该不会令人感到惊讶。自浏览器提供支持以来，他们一直在做的一件事就是与 JavaScript 协同工作以设置和操作值。 不过具体来说，我们可以通过几种方式使 JavaScript 与自定义属性一起工作。可以使用 setProperty 设置
阅读全文
摘要：页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。 1、将内容部分的底部外边距设为负数 这是个比较主流的用法，把内容部分最小高度设
阅读全文
摘要：雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件： 合成雪碧图后是这样拼在一起的一张图： 2.雪碧图的使用 首先确定要使用的图标的位置和大小（可以通过ps测量）， 如下的雪碧图大小统
阅读全文
摘要：扩展性（Extensibility）-指对现有系统影响最小的情况下，系统功能可持续扩展或者提升的能力，表现在系统基础设施稳定不需要经常变更，应用之间较少依赖和耦合，对需求变更可以敏捷响应。它是系统架构设计层面的开闭原则（对扩展开放，对修改关闭），架构设计考虑未来功能扩展，当系统增加新功能时，不需要对
阅读全文
摘要：一、先了解下overflow-wrap属性 css overflow-wrap 属性其实就是以前的 word-wrap 属性，MDN现在直接把 word-wrap 的文档页跳转到 overflow-wrap 属性的文档页了。 由于 overflow-wrap 属性IE浏览器不支持，而其他现代浏览器依
阅读全文
摘要：利用 css 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 css 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。 方法一 这个方法把一些
阅读全文
摘要：预编译 JavaScript 执行步骤 检查通篇的语法错误 -> 预编译 -> 解释执行 暗示全局变量 变量不声明直接赋值，挂载到 window 对象下 a = 1; console.log(a); // 1 function test() { var b = c = 1; } test(); co
阅读全文
摘要：基线 baseline：字符x的底部 x-height: 字母x的高度，vertical-aling设置为middle的时候，对齐的是baseline往上1/2的x-height，所以vertical-aling设置为middle不是整正的居中对齐 line-height 1.内容高度 思考：未
阅读全文
摘要：一、塌陷 1.当position设置为：absolute或者fixed时，元素的display会转换为block。（设置float也会产生这样的效应）2.正常情况下，div会被内容撑开，但是如果设置了1.的情况下，父元素就会产生塌陷，失去高度。 解决办法： 给父元素设置高度。给父元素设置overfl
阅读全文
摘要：因项目需要，需要在元素上实现动画效果，并且需要有动画间隔。坑爹的是animation-delay只有在第一次动画开始的时候才起效。 在网上找了很多方法，最终的方法基本都是改动画规则，比如 @keyframes move{ /* 此处从75%开始 */ 75%{ transform: translat
阅读全文
摘要：了解浏览器背后的运行机制 了解浏览器背后的运行机制就是了解浏览器的内核，现在市面上主流浏览器的内核名称分别如下： chrome: blink内核 Opera: blink内核 Safari: webkit内核 FireFox: Gecko内核 IE: Trident内核 ** 注：blink内核其实
阅读全文
摘要：html5从一开始就给开发者很多的期待，提供众多新的API，不用再想以前一样，为了实现某个功能写很多的代码。在以前，如果要实现图片预览会怎么做呢，因为为了安全的原因，web端的js是不能读取文件的本地真实路径的，那么只能将图片上传到服务器上，然后再拿到图片的链接，这样才能实现图片预览。而服务器呢，比
阅读全文
摘要：表单一点击提交按钮(submit)必然跳转页面，如果表单的action为空也会跳转到自己的页面，即效果为刷新当前页。 如下，可以看到一点击提交按钮，浏览器的刷新按钮闪了一下,如果想要阻止表单的默认提交事件，有以下几种方法： 1.将<input>标签内按钮类型从type="submit"修改为type
阅读全文
摘要：向网页中嵌入视频 <video> 标签可以用于定义视频，且提供了播放、暂停、音量控件来控制视频。举个例子，像我们侠课岛网站上，课程视频播放，就是通过 <video> 标签来实现的。下面我们来看一下如何向网页中嵌入一个视频。 示例： 首先我们准备一个视频，例如一个 test.mp4，然后使用 <vid
阅读全文
摘要：css为html标记语言提供了一种样式描述，定义了其中元素的显示方式。下面我们来看一下css如何设置文本超出几行显示省略号。 css设置超出几行显示省略号： 1、单行文本 使用text-overflow：ellipsis属性 text-overflow: clip|ellipsis|string;
阅读全文
摘要：功能测试： 一、链接测试 链接是web应用系统的一个很重要的特征，主要是用于页面之间切换跳转：当发现页面显示内容与用户需求不一致时，就是一个bug。 链接测试：测试所有链接是否按指示的那样确实链接到了该链接的页面； 测试所链接的页面是否存在； 只有输入正确的url地址才能访问 1.链接是否按照既定指
阅读全文
