前端相关网址

推荐书籍

  • Javascript权威指南
  • 正则表达式必知必会
  • CSS Screct

框架

  • angular
  • react
  • riotjs
  • vuejs
  • backbone
  • avalonjs

编辑器

编译工具

调试工具

  • chrome 调试
  • ietester(过时)

测试工具

其他软件

  • Markman 图片标注工具
  • 快捷键工具WinHotKey

在线空间或者WebIDE

  • sinaapp
  • c9
  • jsbin
  • jsfindle
  • coding.net
  • leancloud

WebEditor在线编辑器

  • openWYSIWYG
  • UEdtior

Web代码编辑器

  • Codiad
  • Ecoder

Web图形编辑器

  • AIE

图形绘制

  • svg
  • canvas
  • zrender

其他软件

  • gamesalad

CSS知识点

#CSS选择器

  • 类型选择器:div
  • id选择器:#id
  • 类选择器:.class
  • 后代选择:a b
  • 子代选择:a>b
  • 兄弟选择:a+b
  • 伪类选择器
    • link
    • active
    • visited
    • first-letter
    • first-line
  • 属性选择器

#CSS

  • text-decoration : none || underline下划线 || blink 闪烁 || overline上划线 || line-through贯穿线

#CSS3

  • content:添加文字内容,url(img)可添加图片
  • quotes:增加首位嵌套文字
  • text-shadow:文字阴影
  • word-break:换行处理 normal正常,keep-all只能在半角空格和连字符处换行,break-all允许在单词内换行;
  • word-wrap:长单词url换行 normal,break-word;
  • @font-face:字体

  • tansform:旋转rotate,缩放scale,倾斜:skew,移动translate

  • box-sizing:content-box,border-box;

#CSS优化

#Less

#页面底端停留的办法

  • 要求:
    • 当页面内容较少时,底部在可视区底部
    • 当页面内容较多时,底部在页面底部
  • 实现原理:
    • body大小设置为整个可视区大小,页面主题高度最低为整个可视区高度,然后使用maring-bottom为负值,让底部上移

#垂直居中

  • line-height
  • 父层div位置为50%,本节点向上移动25%;
  • 两个行内元素,都设为垂直居中(当只有一个时,我们可以为其增加一个兄弟节点)

#手机开发

  • 固定位置position:fixed,而不是absolute

chrome开发者技巧

  • 快速切换文件 Ctrl+P
  • 在源代码中搜索 Ctrl+Shift+F
  • 快速跳转到指定行 Ctrl+G
  • 选择下一个匹配项 Ctrl+D
  • 在控制台选择元素 $,$$ $0-$4
  • 多个插入符 Ctrl
  • 加载新页面不清除掉console输出内容
  • 美化代码
  • 设备模式
  • 颜色选择器,改变颜色以及颜色格式
  • 强制改变元素状态
  • 可视化的dom
  • 通过workspace来编辑本地文件
  • 监听event事件,ajax,dom修改,变量修改
  • 保存调试代码sinapt

Chrome 快捷键

Chrome 快捷键

  • Ctrl+N 打开新窗口。
  • Ctrl+T 打开新标签页。
  • Ctrl+Shift+N 在隐身模式下打开新窗口。
  • 按 Ctrl+O 键,然后选择文件。 在 Google Chrome 中打开计算机中的文件。
  • 按住 Ctrl 键的同时点击链接,或用鼠标中键(或鼠标滚轮)点击链接。 在后台的新标签页中打开链接。
  • 按住 Ctrl+Shift 的同时点击链接,或按住 Shift 键并用鼠标中键(或鼠标滚轮)点击链接。 在新标签页中打开链接并切换到刚打开的标签页。
  • 按住 Shift 键的同时点击链接。 在新窗口中打开链接。
  • Ctrl+Shift+T 重新打开上次关闭的标签页。Google Chrome 可记住最近关闭的 10 个标签页。
  • 将链接拖到标签页中。 在标签页中打开链接。
  • 将链接拖到标签栏的空白区域。 在新标签页中打开链接。
  • 将标签页拖出标签栏。 在新窗口中打开标签页。
  • 将标签页从标签栏拖到现有窗口中。 在现有窗口中打开标签页。
  • 拖动标签页时按 Esc 键。 将标签页恢复到原先的位置。
  • Ctrl+1 到 Ctrl+8 切换到标签栏中指定位置编号所对应的标签页。
  • Ctrl+9 切换到最后一个标签页。
  • Ctrl+Tab 或 Ctrl+PgDown 切换到下一个标签页。
  • Ctrl+Shift+Tab 或 Ctrl+PgUp 切换到上一个标签页。
  • Alt+F4 或 Ctrl+Shift+W 关闭当前窗口。
  • Ctrl+W 或 Ctrl+F4 关闭当前标签页或弹出式窗口。
  • 用鼠标中键(或鼠标滚轮)点击标签页。 关闭所点击的标签页。
  • 右键点击或者点击并按住浏览器工具栏中的“后退”或“前进”箭头。 在新标签页中显示浏览历史记录。
  • 按 Backspace 键,或同时按 Alt 和向左箭头键。 转到当前标签页的上一页浏览历史记录。
  • 按 Shift+Backspace,或同时按 Alt 和向右箭头键。 转到当前标签页的下一页浏览历史记录。
  • 按住 Ctrl 键的同时点击工具栏中的后退箭头、前进箭头或转到按钮。或用鼠标中键(或鼠标滚轮)点击其中任一按钮。 从后台在新标签页中打开按钮所对应的目标网页。
  • 双击标签栏的空白区域。 最大化或最小化窗口。
  • Alt+Home 在当前窗口打开主页。
    Alt+R : 开启正则表达式功能
    Alt+Enter: 找到匹配目标后全部选择
    Ctrl+R:前往 method(mac下⌘R)
    Ctrl+M:跳转到对应括号
    按Ctrl+Shift+上下键,可替换行
    Ctrl+D:选择单词,重复可增加选择下一个相同的单词
    Ctrl+L:选择行,重复可依次增加选择下一行
    Ctrl+Shift+P:打开命令面板
    Ctrl+P:搜索项目中的文件(mac下⌘P),在里面输入:
    admi@auto 可以定位到相应文件夹(admin.html)下的相应方法(auto)。
    Ctrl+G:跳转到第几行
    Ctrl+W:关闭当前打开文件
    Ctrl+Shift+W:关闭所有打开文件
    Ctrl+Shift+V:粘贴并格式化
    Ctrl+Shift+L:选择多行
    Ctrl+Shift+Enter:在当前行前插入新行
    Ctrl+X:删除当前行
    Ctrl+U:软撤销,撤销光标位置
    Ctrl+J:选择标签内容
    Ctrl+F:查找内容
    Ctrl+Shift+F:查找并替换
    Ctrl+H:替换
    Ctrl+N:新建窗口
    Ctrl+K+B:开关侧栏
    Ctrl+Shift+M:选中当前括号内容,重复可选着括号本身
    Ctrl+F2:设置/删除标记
    Ctrl+/:注释当前行
    Ctrl+Shift+/:当前位置插入注释
    Ctrl+Alt+/:块注释,并Focus到首行,写注释说明用的
    Ctrl+Shift+A:选择当前标签前后,修改标签用的
    F11:全屏
    Shift+F11:全屏免打扰模式,只编辑当前文件
    Alt+F3:选择所有相同的词
    Alt+.:闭合标签
    Alt+Shift+数字:分屏显示
    Alt+数字:切换打开第N个文件
    Shift+右键拖动:光标多不,用来更改或插入列内容
    鼠标的前进后退键可切换Tab文件
    按Ctrl,依次点击或选取,可需要编辑的多个位置
    Ctrl+shift+D: 备份多个当前行
    Ctrl+shift+T: 恢复已经关闭的标签

前端书籍

  • Javascript
    • Javascript权威指南
    • javascript高级程序设计
  • css
    图解css3
  • 安全类
    • 白帽子讲Web安全

工程类(提高类)

科普读物

  • 浪潮之巅
  • 黑客与画家

前端优化总结

  • 减少请求数目:合并文件

    • 合并js,css
    • 图片sprite技术
  • 减少文件大小:压缩文件

    • 压缩js,css
    • gzip
  • 缓存文件

  • css放在页面头部,js放在页面底部

  • 避免使用css表达式

  • 使用内容分发网络

  • 使用多个域名2-4个,同时下载多个文件

服务器环境

  • github
  • gitlab
  • gogs

ide客户端

  • sourcetree
  • git for window

代码托管

https://github.com
https://coding.net/

常用命令

git clone
git pull git fetch + git merge
git fetch 更新缓存到本地
git checkout -b local-branch origin/remote-branch

git branch -a 分支列表

git stutus 修改文件列表
git diff 查看修改内容
git log 查看提交记录

git add . 将修改文件加到提交内容列表区
git commit -m ‘msg’ 提交修改到本地缓存区

git merge

git push
git reset HEAD^ 重置,^代表恢复一次提交

git使用

  • git config –global user.name “wirelessqa”
  • git config –global user.email wirelessqa.me@gmail.com
  • push失败,failed to connect to github port 443: timed out
    删除用户名,密码,代理
    删除代理
    git config –unset (–global) http.proxy

gitignore

1
2
/dest/*
!/dest/css/ #不忽略文件
  • 假如已经有内容加入到git中,再添加到gitignore将不起作用

git errors

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
error: RPC failed; result=22, HTTP code = 411
fatal: The remote end hung up unexpectedly
fatal: The remote end hung up unexpectedly
Everything up-to-date
If you attempt to push a large set of changes to a Git repository with HTTP or HTTPS, you may get an error message such as error: RPC failed; result=22, HTTP code = 411. This is caused by a Git configuration default which limits certain HTTP operations to 1 megabyte.
To change this limit run within your local repository
git config http.postBuffer *bytes*
where bytes is the maximum number of bytes permitted. For exmaple:
git config http.postBuffer 524288000
For 500MB (thanks @Hengjie)

相关网站

概念

  • 元字符
  • 量词
  • 分组()
  • 反向引用
  • 候选(多选)
  • 非捕获性分组
  • 前瞻
  • 边界^$\b\B

标志符(元字符)和操作

. - 匹配除了换行符之外的任意字符
* - 指定前边的内容可以连续重复使用任意次
+ - 指定前边的内容可以连续重复一次或多次
? - 指定前边的内容可以连续重复一次或0次
{n} - 指定前边的内容可以连续重复n次
{n,} - 指定前边的内容可以连续重复n次或更多
{n,m} - 指定前边的内容可以连续重复n到m次
\d - 匹配一个数字
\w - 匹配字母或数字或下划线或汉字
\s - 匹配任意的空白符,包括空格,制表符(Tab),换行符,中文全角空格等
[XYZ] - 匹配中括号里面的任何一个字符
[XYZ]+ - 匹配中括号中的一个或多个字符
$ - 匹配字符串的结尾
^ - 匹配字符串的开头
[a-z] - 匹配任意小写字母
[^a-z] - 在中括号里面的^表示否,这个例子中任何非小写字母的字符都能匹配

模式修饰符

i 不区分大小写搜索
m 多行搜索
g 全局搜索

匹配模式