<animate>元素用于实现动画效果（动画截图比较麻烦，本文中的例子最好直接写demo看效果）

基本动画

将元素嵌入到元素内，来实现该元素的动画效果。

1
2
3
4
5
6
7
8

<rect x="10" y="10" width="200" height="20" stroke="black" fill="none">
    <animate
    attributeName="width"
    attributeType="XML"
    from="200" to="20"
    begin="0s" dur="5s"
    fill="freeze" />
</rect>

以上代码会一个20020的长方形，在5秒内渐变成一个2020的正方形，并且在动画结束时停留在正方形的状态。

可能大家会看到很多像我博客背景中有网状物的东西在漂浮，感觉很好玩，我第一次见得时候也是感觉特别有意思。今天就来说一下，当然这个炫酷的东西不是我写的，项目地址.

如果你想在你网站中使用，可以直接在</body>前加上

1

<script src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

就可以了。

源码这里也搬运一下

使用视频作为网页背景是件很酷的事情，但也是件困难的事情。CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲，我们是可以伪造出一种效果，让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面，而且要响应浏览器窗口大小的变化。

观看演示1

一、前言

最近写CSS一直会用到line-height属性，但对其一直是一知半解。在看完《CSS权威指南》后，这周末就写写line-height的相关内容。

二、 基线、行间距和行高

先说清楚一些名词概念，这是理解下文的基础,首先看一张图:

1. 基线: 一个文本行分成4格线，分别是顶线、中线、基线、底线，

   1	基线的位置与 字体font-family 有关，不同的字体基线的位置有偏差

   阅读全文 »

没有布局

如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常难受：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。试着调整下浏览器窗口大小你就明白我的意思了！

在解决这个问题之前，我们需要了解一个很重要的属性： display.

display属性

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

block

div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

inline

span是一个标准的行内元素。一个行内元素可以在段落中像这样包裹一些文字而不会打乱段落的布局。a元素是最常用的行内元素，它可以被用作链接。

none

另一个常用的display值是none。一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

目录

• this 是什么
• this 的四种绑定规则
• 绑定规则的优先级
• 绑定例外
• 扩展：箭头函数

this 是什么

理解this之前， 先纠正一个观点，this 既不指向函数自身，也不指函数的词法作用域。如果仅通过this的英文解释，太容易产生误导了。它实际是在函数被调用时才发生的绑定，也就是说this具体指向什么，取决于你是怎么调用的函数。

this 的四种绑定规则

阅读全文 »

网易云下架我伦真是在作死，不过估计这也是鹅厂为了打压网易云采取的卑劣手法吧。

不能在云村听我伦真是难受，可是又实在不想用QQ音乐。唉，真是难受啊。

不过网易云近来好像有点飘了。大家喜欢用网易云不外乎简洁的界面、贴心的日推和那些段子评论吧。可更新到5.0后，界面不再简洁，为了追短视频的热潮，把网易云硬是变成了网易快手、网易小视频，这应该违背了网易云音乐的初心了吧。本来在版权上就没什么优势，如果只是靠着情怀来拉拢用户，那估计用户也会慢慢流失吧。

这次被迫下架杰伦事件希望可以给网易云提个醒，勿忘初心，还是简简单单做回最初的网易云音乐吧，做回大家熟悉的网易云吧。

杰伦所有的歌曲我网盘里整理的有，下载到本地就能继续用网易云听杰伦了。

链接: https://pan.baidu.com/s/1XT711VsLCOMq4FckZgx4dg 密码: anbd

正则表达式，一个十分古老而又强大的文本处理工具，仅仅用一段非常简短的表达式语句，便能够快速实现一个非常复杂的业务逻辑。熟练地掌握正则表达式的话，能够使你的开发效率得到极大的提升。

正则表达式经常被用于字段或任意字符串的校验，如下面这段校验基本日期格式的JavaScript代码：

1
2
3

var reg = /^(\\d{1,4})(-|\\/)(\\d{1,2})\\2(\\d{1,2})$/; 
var r = fieldValue.match(reg);             
if(r==null)alert('Date format error!');

下面是在前端开发中经常使用到的20个正则表达式。

1 . 校验密码强度

密码的强度必须是包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间。

1

^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

2. 校验中文

字符串仅能是中文。

1

^[\\u4e00-\\u9fa5]{0,}$

Sublime Text 3 快捷键精华版

Ctrl+Shift+P：打开命令面板

Ctrl+P：搜索项目中的文件

Ctrl+G：跳转到第几行

Ctrl+W：关闭当前打开文件

Ctrl+Shift+W：关闭所有打开文件

Ctrl+Shift+V：粘贴并格式化