本次效果展示主要是通过伪类来实现,效果还不错,感兴趣的同学可以尝试一下
css部分
主体部分很简单
|
|
xiao Yin
本次效果展示主要是通过伪类来实现,效果还不错,感兴趣的同学可以尝试一下
css部分
主体部分很简单
|
|
之前在网上看过一个烟花效果的展示,觉得非常不错,然后自己也想搞一个,虽然那个效果是随机出现烟花,但是我非要搞出自己的,本次效果的展示通过点击文档,然后释放烟花
|
|
我喜欢完整的代码呈现,以便于后期的温习
http://www.360doc.com/content/14/0325/14/15727046_363598248.shtml
前端css兼容性问题总结
https://technet.microsoft.com/zh-cn/library/z3ks45k7
运算符优先级
清除浮动的方法
HTML5新增特性
【链接】原生,类库,框架,模式傻傻分不清楚
http://www.toutiao.com/i6351588327761641986/?tt_from=mobile_qq&utm_campaign=client_share&app=explore_article&utm_source=mobile_qq&iid=6648143445&utm_medium=toutiao_ios
【链接】原生,类库,框架,模式傻傻分不清楚
http://www.toutiao.com/i6351588327761641986/?tt_from=mobile_qq&utm_campaign=client_share&app=explore_article&utm_source=mobile_qq&iid=6648143445&utm_medium=toutiao_ios
原生,类库,框架,模式
什么是reflow、repaint 回流 重绘
阿里、百度、搜狐、优土等互联网公司面试经验总结
那些年H5页面上面踩过的坑
HTTP和HTTPS的区别?
【链接】资深HR教你如何面试&H5行家告诉你面试考
http://www.toutiao.com/a6284365671108165889/?tt_from=mobile_qq&utm_campaign=client_share&app=explore_article&utm_source=mobile_qq&iid=6648143445&utm_medium=toutiao_ios
资深HR教你如何面试 & H5行家告诉你面试考题
【链接】实用技巧助你成功应对web前端面试
http://url.cn/42THkXN
实用技巧 助你成功应对web前端面试
【链接】面试你之前,我希望在简历上看到这些!
http://www.jianshu.com/p/84b0dd277f13?from=timeline&isappinstalled=0
面试你之前,我希望在简历上看到这些!
【链接】五个典型的JavaScript面试题
五个典型的 JavaScript 面试题
【链接】【第766期】你不懂JS:对象
http://url.cn/42SxVdl
JS对象
【链接】【第772期】你不懂JS:原型(Prototype)
http://url.cn/42SxUy6
JS原型
+Es6 类
【链接】【第786期】深入了解JavaScript中的for循环
http://url.cn/42SxTtj
for循环
【链接】魔法哥2013前端笔试题曝光(附完整解答)
http://url.cn/42SwmJ7
魔法哥 2013 前端笔试题曝光(附完整解答)
【链接】一道关于Promise应用的面试题
http://url.cn/42TJ84q
一道关于Promise应用的面试题
【链接】也谈面试必备问题之JavaScript数组去重
http://url.cn/42TJ9Gd
也谈面试必备问题之 JavaScript 数组去重
前端工程师面试题汇总
【链接】前端工程师面试题汇总
http://url.cn/42TJuhk
【链接】详解JavaScript闭包
http://url.cn/42SwZIu
闭包
JavaScript 操作 DOM 的那些坑
【链接】从输入URL到页面加载完成的过程中都发生了
http://url.cn/42SxnH8
从输入 URL 到页面加载完成的过程中都发生了什么事情?(上)
【链接】从输入URL到页面加载完成的过程中都发生了
http://url.cn/42SxAXJ
从输入 URL 到页面加载完成的过程中都发生了什么事情?(下)
【链接】实现一个简单的模板引擎
http://url.cn/42SwSZT
实现一个简单的模板引擎
ES6 核心功能一览
【链接】ES6的12个核心功能一览
http://url.cn/42SwRlK
【链接】一道JS面试题引发的思考
http://url.cn/42SwQrD
一道 JS 面试题引发的思考
【链接】44个Javascript变态题解析(上)
http://url.cn/42TJUEE
44 个 Javascript 变态题解析 (上)
【链接】44个Javascript变态题解析(下)
http://url.cn/42TKDHZ
44个 Javascript 变态题解析 (下)
【链接】我理想中的前端工作流
http://url.cn/42TKQAH
JavaScript 操作 DOM 的那些坑
http://url.cn/42SwZsw
来自:微信
整理总结的一些前端面试题
http://url.cn/42SxGWU
来自:微信
十大经典排序算法的 JS 版
http://url.cn/42SwbC6
来自:微信
你不可不知的 HTML 优化技巧
http://url.cn/42Swbz9
来自:微信
总结移动开发实践中遇到的坑
http://url.cn/42SxvDJ
来自:微信
【链接】10问10答|网易前端技术总监帮你解决
http://url.cn/42TKM0N
10问10答|网易前端技术总监帮你解决
构建一个类jq的函数库
http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651551134&idx=2&sn=24de91a0afae421d4bfebcd433a22b22&mpshare=1&scene=23&srcid=1213fWkaOAF7Ewi5n7z0ZoGk#rd
来自:微信
家 11:56:26
从零开始,DIY一个jQuery(2)
http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651551123&idx=2&sn=26ddfeb73928eded3a63f05ca5273d66&mpshare=1&scene=23&srcid=1213H9jR1FvycxFB6l9J4Pna#rd
来自:微信
|
|
【链接】CSS3UILib
http://css3lib.alloyteam.com css3案例库
【链接】一种动态样式语言.
http://www.bootcss.com/p/lesscss/
【链接】Less中文网
http://lesscss.cn/
【链接】函数手册
http://lesscss.cn/functions/#color-operations
【链接】html53D超炫元素周期表三维图片墙效果代码
http://www.17sucai.com/pins/demoshow/5685(重)
【链接】字体下载
http://www.psjia.com/pssc/fontxz/
【链接】animate.css动画库
http://daneden.github.io/animate.css/
【链接】Less中文网
http://lesscss.cn/
【链接】一种动态样式语言.
http://www.bootcss.com/p/lesscss/
【链接】Bootstrap中文网
http://www.bootcss.com/
http://v3.bootcss.com/components/学习的 bootstrap一些组件教程
查看所有图标名称:http://getbootstrap.com/components/#glyphicons
阿里巴巴矢量图标库(bootstrap)
【链接】Iconfont-阿里巴巴矢量图标库
http://iconfont.cn/
https://www.zhihu.com/question/25952487阿里巴巴矢量图标库使用
http://edu.51cto.com/学习网站
【链接】李炎恢老师移动开发之Bootstrap视频教程
http://edu.51cto.com/course/course_id-3237.html
http://www.runoob.com/bootstrap/bootstrap-tables.html (使用bootstrap讲解)
http://www.cnblogs.com/mzwr1982/archive/2012/05/20/2509295.html 闭包
www.jikexueyuan.com 极客学院会员
https://tinypng.com/ 压缩图片的网站
tongjibaidu.com /安智市场 /开发者联盟 /花瓣网 input.onfocus/input.onblur(伪类、伪元素)
http://touch.code.baidu.com/ touch.js库(移动端)
http://www.swiper.com.cn/ swiper.js库
【链接】Flex布局教程:语法篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
【链接】Regexper
https://regexper.com/#%5B0-9%5D.b(ddda)%2B%0A 正则网站
http://www.css88.com/ WEB前端开发
http://www.css88.com/jqapi-1.9/ jq使用手册
【链接】jQueryAPI中文文档(适用jQuery1.0-jQuery3.0)
http://www.css88.com/jqapi-1.9/
【链接】jQueryAPI中文文档–jQuery中文网
http://www.jquery123.com/
【链接】Shining
http://www.shiningcg.com/ pc端
http://www.codefans.net/jscss/code/5025.shtml# 源码爱好者
【链接】原生JavaScript事件详解
http://www.cnblogs.com/iyangyuan/p/4190773.html
http://ued.fanxing.com/qian-xi-yi-dong-duan-ye-mian-kuan-du-she-zhi/
这是jquery手册,http://www.php100.com/manual/jquery/index.html如果不清楚的知识点可以进行查看
http://gold.xitu.io/
SH-王文文-教学 10:48:46
这是一款手机app
【链接】【IT题库】笔试练习_C++Java前端笔试面试题 (牛课网)
http://www.nowcoder.com/contestRoom?mutiTagIds=644
https://www.douban.com/note/296018037/
想想怎么如何用canvas写时钟以及预习贝塞尔曲线http://cubic-bezier.com/#.18,.77,1,0
http://lbsyun.baidu.com/ 百度地图平台
链接】高德开放平台|高德地图API
http://lbs.amap.com/
【链接】WebStorm2016.2最新版-破解+汉化教程(20160714)
http://www.w3cfuns.com/notes/20813/7578421300687384e71cd6282c9da3b7.html
密匙:下最新的用这个 注册码 http://idea.imsxm.com/
http://www.w3school.com.cn/js/js_loop_for_in.asp
【链接】for/in循环遍历对象的属性
http://wangjingyi.iteye.com/blog/2038264
https://www.zhihu.com/question/25952487 阿里巴巴引入矢量图标文件夹
gulp的安装
http://www.cnblogs.com/520lin/p/5868924.html
【链接】sass十分钟入门
http://www.w3cplus.com/sassguide/
【链接】gulp.js-基于流的自动化构建工具。|gulp.js中文
http://www.gulpjs.com.cn/
1.创建项目文件夹
2.进入项目文件夹
3.运行 npm init 产出package.json的文件
4.新建gulpfile.js
5.运行 npm install gulp gulp-jade gulp-sass
6.创建sass文件目录,jade文件目录
7.在gulpfile.js 引入插件
// 引入 require(“引入的插件名称”);
var jade = require(“gulp-jade”);
var sass = require(“gulp-sass”);
var gulp = require(“gulp”);
8.定制任务
gulp.task(“任务名”,function(){
gulp.src(“文件路径”)
.pipe(插件方法)
.pipe(gulp.desk(“输出路径”))
})
你想显示的那个图片 一定要是.ico格式的然后就是需要这个代码写在
之间,其中/dir/favicon.ico改成你的图标所在的地址就可以了。http://www.html-kit.com/favicon/ 这个网站可以制作图标~~https://www.npmjs.com/package/gulp-jade/
http://blog.chinaunix.net/uid-26833883-id-3627644.html TCP、UDP、IP 协议分析
懒人之家 js
慕课网
阿里大鱼,做第三方验证
【链接】我所认识的JavaScript正则表达式
http://www.php100.com/html/it/biancheng/2015/0320/8825.html
【链接】jaywcjlove/validator.js
https://github.com/jaywcjlove/validator.js 一个轻量级的表单校验库
https://github.com/jaywcjlove/validator.js/blob/master/dist/validator.js
【链接】javascript中那些折磨人的面试题
https://segmentfault.com/a/1190000006129337
【链接】JavaScriptDOM编程之API总结篇 掘金
http://www.jianshu.com/p/1e638b7da640
http://www.cnblogs.com/EricaMIN1987_IT/p/3593431.html document.document.Element||document.body
https://hanmingyang2016.github.io/
deploy:
type: git
repo: https://github.com/yinxiaoqiang11/yinxiaoqiang11.github.io.git
【链接】有哪些好看的Hexo主题?
http://www.zhihu.com/question/24422335/answer/46357100
Mou
【链接】ECMAScript6入门
http://es6.ruanyifeng.com/#docs/symbol
http://reactnative.cn/
【链接】vue.js
http://vuefe.cn/
【链接】ReactNative中文网
http://reactnative.cn/docs/0.30/getting-started.html
npm install react-native-vector-icons –save
npm install rnpm -g
rnpm link (回车)
var Icon = require(‘react-native-vector-icons/FontAwesome’); (可引用字体和图标)
npm i mockjs –save
let Mock= require(‘mockjs’);
【链接】淘宝NPM镜像
https://npm.taobao.org/
npm install -g cnpm –registry=https://registry.npm.taobao.org
完成后重启
安装swiper
https://github.com/leecade/react-native-swiper
npm i react-native-swiper –save
【链接】facebook/react-native
https://github.com/facebook/react-native
下载 react-native文件,打开终端运行 npm install
npm config set loglevel=http
【链接】attentiveness/reading
https://github.com/attentiveness/reading
http://makeappicon.com/download/097d41383aba4cd3a555861dc6c2eeae
https://github.com/fbsamples/f8app/blob/master/ios/F8v2/Base.lproj/LaunchScreen.xib
【链接】AppleDeveloper
https://developer.apple.com/
【链接】蒲公英
http://www.pgyer.com
react-native 发布流程
准备工作
1.苹果开发者帐号一枚
https://developer.apple.com/
2.蒲公英应用测试号一枚
https://www.pgyer.com/
开发者中心
1.登陆
点击 Certificates,IDs & Profiles
2.Devices -> ALL->添加设备UDID
3.Identifiers -> App IDs -> 添加APP ID也就是bounld ID
4.最下面 Provisioning Profiles -> Distribution->添加描述文件->点击添加->Ad Hoc->继续->选中之前添加的App ID->继续->选中证书->继续->选择设备->继续->添加描述文件名称-进入到下载描述文件页,点击下载
打包
1.蒲公英账号 https://www.pgyer.com/
2.开发者账号(苹果手机UDID)
3.进入 https://developer.apple.com/
3288703197@qq.com
H59reactnative
http://blog.csdn.net/pcaxb/article/details/52046438安卓安装,WebStorm安装,破解
账号:641037548@qq.com
密码:Se7eN521
【链接】react-native-vector-icons的简单使用,图片,按钮,标
http://www.cnblogs.com/moxiaoyan33/p/5482024.html
【链接】欢迎使用RAP
http://rap.taobao.org/
http://stackoverflow.com/questions/31502990/react-native-connection-errors
【链接】地图控件
http://lbs.amap.com/api/javascript-api/reference/map-control/
【链接】JavaScriptAPI|高德开放平台|高德地图API
http://lbs.amap.com/api/javascript-api/example/weather-forecast/weather-forecast/
http://www.hewebgl.com/ Three.js
http://blog.csdn.net/pcaxb/article/details/52046438 【链接】React—native+Android环境搭建和开发配置(Mac)
配置手机适配
【链接】amfe/lib-flexible
https://github.com/amfe/lib-flexible
【链接】flashlizi/cssrem
https://github.com/flashlizi/cssrem
https://github.com/tweenjs/tween.js
【链接】移动端折腾国外分享(facebook、twitter、linked
http://www.wtoutiao.com/a/1634345.html
【链接】个人无法注册微信小程序,教你如何真机测试
http://weappdev.com/t/topic/242
【链接】纯JavaScript实现HTML5Canvas六种特效滤镜
http://blog.csdn.net/jia20003/article/details/9195915
【链接】Node.js手册查询-1-核心模块方法
https://cnodejs.org/topic/548e53f157fd3ae46b2334fd
【链接】node.js之fs模块
http://www.jianshu.com/p/5683c8a93511
http://www.runoob.com/nodejs/nodejs-http-server.html
file:///Users/lanou/Desktop/%E6%94%B6%E8%97%8F%E6%89%80%E6%9C%89/js%E4%B8%ADsubstr,substring,indexOf,lastIndexOf%EF%BC%8Csplit%20%E7%9A%84%E7%94%A8%E6%B3%95%20-%20Carina_zy%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD.html
MongoDB 安装
先将文件下载
终端输入,注意版本号和路径 mv -n ~/Downloads/mongodb-osx-x86_64-3.2.9 ~/Applications/mongodb/,
注意2. 3. 是(cd ../../../)在根目录App下执行,而4. 路径不一样
sudo mkdir -p /data/db
sudo chown -R lanou /data (注意用户名和/之间有空格)
cd Users/yinxiaoqiang/Applications/mongodb/bin 找到Applications/mongodb/bin/mongod,输入./mongod
新打开一个终端 cd Users/yinxiaoqiang/Applications/mongodb/bin,输入 ./mongo
接下来可在 >后面输入命令:
show dbs意为例举下面可用的数据库,但空数据库不显示,
db 查看当前连接的DB
use hahaha 创建hahaha单元,并且切换到hahaha数据库下面,一个数据库可以创建多个集合。
db.user.insert({name:”user”,age:18,height:180}) 创建一个集合user,并插入数据,
db.user.find() 查询
安装mongoose ,npm install mongoose -—save
http://www.tuicool.com/articles/jueARjE MONGOLDB+EXPRESS
https://wanwang.aliyun.com/help/price.html?spm=5176.8006371.1006.7.LIJaGH 阿里云(域名)
【链接】ReactNative第一课 详
http://html-js.com/article/2783
【链接】Mock.js
http://mockjs.com/examples.html
【链接】整理了一份React-Native学习指南
http://www.tuicool.com/articles/zaInUbA
.div{
font-size: 12px;
width: 4.048583rem;
height: 4.048583rem;
background: red;
}
[data-dpr=”2”] .div{
font-size: 24px;
}
[data-dpr=”3”] .div{
font-size: 36px;
}
.div{
font-size: 12px;
width: 4.048583rem;
height: 4.048583rem;
background: red;
}
【链接】Node.js创建第一个应用
http://www.runoob.com/nodejs/nodejs-http-server.html
【链接】怎样使用GitHub?
https://www.zhihu.com/question/20070065
【链接】githubDesktop上传项目
http://www.cnblogs.com/rosej/p/6056467.html
【链接】删除github账号
http://blog.csdn.net/python_tty/article/details/50352326
【链接】Clouda目录结构
http://cloudajs.org/docs/step3_overview
https://vuefe.cn/v2/guide/installation.html
【链接】chromejsonView插件安装
http://www.cnblogs.com/exmyth/p/5983009.html
http://vuejssellapp.t.imooc.io/#!/ratings
【链接】CSS秘密花园:Stickyfooters
http://www.w3cplus.com/css3/css-secrets/sticky-footers.html
(1)、<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
(2)、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);
而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。
(1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;
(2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
(3)import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;
主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则:解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。
在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。
离线的情况下,浏览器就直接使用离线存储的资源。
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
存储大小:
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
有期时间:
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。
给不想要提示的 form 或某个 input 设置为 autocomplete=off。
WebSocket、SharedWorker;
也可以调用localstorge、cookies等本地存储方式;
localstorge另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,
我们通过监听事件,控制它的值来进行页面信息通信;
注意quirks:Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常;
通过 visibilityState 的值检测页面当前是否可见,以及打开网页的时间等;
在页面被切换到其他后台进程的时候,自动暂停音乐或视频的播放;
水平居中:给div设置一个宽度,然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
让绝对定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; / 方便看效果 /
}
水平垂直居中一
确定容器的宽高 宽500 高 300 的层
设置层的外边距
div {
position: relative; / 相对定位或绝对定位均可 /
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; / 外边距为自身宽高的一半 /
background-color: pink; / 方便看效果 /
}
水平垂直居中二
未知容器的宽高,利用 transform
属性
div {
position: absolute; / 相对定位或绝对定位均可 /
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; / 方便看效果 /
}
水平垂直居中三
利用 flex 布局
实际使用时应考虑兼容性
.container {
display: flex;
align-items: center; / 垂直居中 /
justify-content: center; / 水平居中 /
}
.container div {
width: 100px;
height: 100px;
background-color: pink; / 方便看效果 /
}
block 块类型。默认宽度为父元素宽度,可设置宽高,换行显示。
none 缺省值。象行内元素类型一样显示。
inline 行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。
inline-block 默认宽度为内容宽度,可以设置宽高,同行显示。
list-item 象块类型元素一样显示,并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承 display 属性的值。
把上、左、右三条边隐藏掉(颜色设为 transparent)
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离,解决方案是在float的标签样式控制中加入 ——display:inline;将其转化为行内属性。(这个符号只有ie6会识别)
渐进识别的方式,从总体中逐渐排除局部。
首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。
接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
css
|
|
IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性。
IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,而高度的塌陷使我们页面后面的布局不能正常显示。
1、父级div定义height;
2、父级div 也一起浮动;
3、常规的使用一个class;
|
|
4、SASS编译的时候,浮动元素的父级div定义伪类:after
|
|
解析原理:
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互;
4)通过 content:”.”生成内容作为最后一个元素,至于content里面是点还是其他都是可以的,例如oocss里面就有经典的 content:”.”,有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”” 仍然会产生额外的空隙;
5)zoom:1 触发IE hasLayout。
通过分析发现,除了clear:both用来闭合浮动的,其他代码无非都是为了隐藏掉content生成的内容,这也就是其他版本的闭合浮动为什么会有font-size:0,line-height:0。
单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。(伪元素由双冒号和伪元素名称组成)
双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法,
比如:first-line、:first-letter、:before、:after等,
而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
想让插入的内容出现在其它内容前,使用::before,否者,使用::after;
在代码顺序上,::after生成的内容也比::before生成的内容靠后。
如果按堆栈视角,::after生成的内容会在::before生成的内容之上
-webkit-font-smoothing: antialiased;
fixed的元素是相对整个页面固定位置的,你在屏幕上滑动只是在移动这个所谓的viewport,
原来的网页还好好的在那,fixed的内容也没有变过位置,
所以说并不是iOS不支持fixed,只是fixed的元素不是相对手机屏幕固定的。
null 表示一个对象是“没有值”的值,也就是值为“空”;
undefined 表示一个变量声明了没有初始化(赋值);
undefined不是一个有效的JSON,而null是;
undefined的类型(typeof)是undefined;
null的类型(typeof)是object;
Javascript将未赋值的变量默认值设为undefined;
Javascript从来不会将变量设为null。它是用来让程序员表明某个用var声明的变量时没有值的。
typeof undefined
//“undefined”
undefined :是一个表示”无”的原始值或者说表示”缺少值”,就是此处应该有一个值,但是还没有定义。当尝试读取时会返回 undefined;
例如变量被声明了,但没有赋值时,就等于undefined
typeof null
//“object”
null : 是一个对象(空对象, 没有任何属性和方法);
例如作为函数的参数,表示该函数的参数不是对象;
注意:
在验证null时,一定要使用 === ,因为 == 无法分别 null 和 undefined
null == undefined // true
null === undefined // false
再来一个例子:
null
Q:有张三这个人么?
A:有!
Q:张三有房子么?
A:没有!
undefined
Q:有张三这个人么?
A:有!
Q: 张三有多少岁?
A: 不知道(没有被告诉)
parseInt() 函数能解析一个字符串,并返回一个整数,需要两个参数 (val, radix),
其中 radix 表示要解析的数字的基数。【该值介于 2 ~ 36 之间,并且字符串中的数字不能大于radix才能正确返回数字结果值】;
但此处 map 传了 3 个 (element, index, array),我们重写parseInt函数测试一下是否符合上面的规则。
function parseInt(str, radix) {
return str+’-‘+radix;
};
var a=[“1”, “2”, “3”];
a.map(parseInt); // [“1-0”, “2-1”, “3-2”] 不能大于radix
因为二进制里面,没有数字3,导致出现超范围的radix赋值和不合法的进制解析,才会返回NaN
所以[“1”, “2”, “3”].map(parseInt) 答案也就是:[1, NaN, NaN]
详细解析:http://blog.csdn.net/justjavac/article/details/19473199
闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域,将函数内部的变量和方法传递到外部。
闭包的特性:
1.函数内再嵌套函数
2.内部函数可以引用外层的参数和变量
3.参数和变量不会被垃圾回收机制回收
//li节点的onclick事件都能正确的弹出当前被点击的li索引
执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在
使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源
因为say667()的内部函数的执行需要依赖say667()中的变量
这是对闭包作用的非常直白的描述
function say667() {
// Local variable that ends up within closure
var num = 666;
var sayAlert = function() {
alert(num);
}
num++;
return sayAlert;
}
var sayAlert = say667();
sayAlert()//执行结果应该弹出的667
使用instanceof (待完善)
if(a instanceof Person){
alert(‘yes’);
}
1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。
var obj = {};
obj.proto = Base.prototype;
Base.call(obj);
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
如:{“age”:”12”, “name”:”back”}
JSON字符串转换为JSON对象:
var obj =eval(‘(‘+ str +’)’);
var obj = str.parseJSON();
var obj = JSON.parse(str);
JSON对象转换为JSON字符串:
var last=obj.toJSONString();
var last=JSON.stringify(obj);
ajax的全称:Asynchronous Javascript And XML。
异步传输+js+xml。
所谓异步,在这里简单地解释就是:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果它自己会根据设定进行后续操作,与此同时,页面是不会发生整页刷新的,提高了用户体验。
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新
1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,”0”)。
2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,”no-cache”)。
3、在URL后面加上一个随机数: “fresh=” + Math.random();。
4、在URL后面加上时间搓:”nowtime=” + new Date().getTime();。
5、如果是使用jQuery,直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。
jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面
(1) defer,只支持IE
(2) async:
(3) 创建script,插入到DOM中,加载完毕后callBack
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
(2)添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
(3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)
getElementById() //通过元素Id,唯一性
简单版
[
100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求,但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向,且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后,请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。
]
完整版
1**(信息类):表示接收到请求并且继续处理
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
2**(响应成功):表示动作被成功接收、理解和接受
200——表明该请求被成功地完成,所请求的资源发送回客户端
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到,但返回信息为空
205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
3**(重定向类):为了完成指定的动作,必须接受进一步处理
300——请求的资源可在多处得到
301——本网页被永久性转移到另一个URL
302——请求的网页被转移到一个新的地址,但客户访问仍继续通过原始URL地址,重定向,新的URL会在response中的Location中返回,浏览器将会使用新的URL发出新的Request。
303——建议客户访问其他URL或访问方式
304——自从上次请求后,请求的网页未修改过,服务器返回此响应时,不会返回网页内容,代表上次的文档已经被缓存了,还可以继续使用
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码,现行版本中不再使用
307——申明请求的资源临时性删除
4**(客户端错误类):请求包含错误语法或不能正确执行
400——客户端请求有语法错误,不能被服务器所理解
401——请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用
HTTP 401.1 - 未授权:登录失败
HTTP 401.2 - 未授权:服务器配置问题导致登录失败
HTTP 401.3 - ACL 禁止访问资源
HTTP 401.4 - 未授权:授权被筛选器拒绝
HTTP 401.5 - 未授权:ISAPI 或 CGI 授权失败
402——保留有效ChargeTo头响应
403——禁止访问,服务器收到请求,但是拒绝提供服务
HTTP 403.1 禁止访问:禁止可执行访问
HTTP 403.2 - 禁止访问:禁止读访问
HTTP 403.3 - 禁止访问:禁止写访问
HTTP 403.4 - 禁止访问:要求 SSL
HTTP 403.5 - 禁止访问:要求 SSL 128
HTTP 403.6 - 禁止访问:IP 地址被拒绝
HTTP 403.7 - 禁止访问:要求客户证书
HTTP 403.8 - 禁止访问:禁止站点访问
HTTP 403.9 - 禁止访问:连接的用户过多
HTTP 403.10 - 禁止访问:配置无效
HTTP 403.11 - 禁止访问:密码更改
HTTP 403.12 - 禁止访问:映射器拒绝访问
HTTP 403.13 - 禁止访问:客户证书已被吊销
HTTP 403.15 - 禁止访问:客户访问许可过多
HTTP 403.16 - 禁止访问:客户证书不可信或者无效
HTTP 403.17 - 禁止访问:客户证书已经到期或者尚未生效
404——一个404错误表明可连接服务器,但服务器无法取得所请求的网页,请求资源不存在。eg:输入了错误的URL
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖,请求资源不可访问
407——类似401,用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态,请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求长。
5**(服务端错误类):服务器不能正确执行一个正确的请求
HTTP 500 - 服务器遇到错误,无法完成请求
HTTP 500.100 - 内部服务器错误 - ASP 错误
HTTP 500-11 服务器关闭
HTTP 500-12 应用程序重新启动
HTTP 500-13 - 服务器太忙
HTTP 500-14 - 应用程序无效
HTTP 500-15 - 不允许请求 global.asa
Error 501 - 未实现
HTTP 502 - 网关错误
HTTP 503:由于超载或停机维护,服务器目前无法使用,一段时间后可能恢复正常
```
#### 对前端工程师这个职位是怎么样理解的?它的前景会怎么样?
前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。
1、实现界面交互
2、提升用户体验
3、有了Node.js,前端可以实现服务端的一些事情
前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好,
参与项目,快速高质量完成实现效果图,精确到1px;
与团队成员,UI设计,产品经理的沟通;
做好的页面结构,页面重构和用户体验;
处理hack,兼容、写出优美的代码格式;
针对服务器的优化、拥抱最新前端技术。
#### 平时如何管理你的项目?
先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等;
编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);
标注样式编写人,各模块都及时标注(标注关键样式调用的地方);
页面进行标注(例如 页面 模块 开始和结束);
CSS跟HTML 分文件夹并行存放,命名都得统一(例如style.css);
JS 分文件夹存放 命名以该JS功能为准的英文翻译。
图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理
#### 前端学习网站推荐
1. 极客标签: http://www.gbtags.com/
2. 码农周刊: http://weekly.manong.io/issues/
3. 前端周刊: http://www.feweekly.com/issues
4. 慕课网: http://www.imooc.com/
5. div.io: http://div.io
6. Hacker News: https://news.ycombinator.com/news
7. InfoQ: http://www.infoq.com/
8. w3cplus: http://www.w3cplus.com/
9. Stack Overflow: http://stackoverflow.com/
10.w3school: http://www.w3school.com.cn/
11.mozilla: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
首先我们可以参考网址,然后一步一步来
|
|
|
|
|
|
|
|
在头部引入jquery.js
|
|
样式表
|
|
html
|
|
JS部分
|
|
这个效果感觉还可以啊,如果觉得喜欢的话,记得点赞哦
fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
我个人是去cdnjs官网,在线引入,你们也可以下载到本地,操作很简单,只需在官网搜索你想要的东西即可
|
|
|
|
|
|
|
|
要想知道更多信息,请参考文档
我们可以在线上引入以下代码
|
|
话不多说直接上代码
|
|
要实现更多效果请参考官方文档bootstrap
在html里面写<img lazy-src="xx.jpg"/>
,然后用js去判断这个节点是否出现在屏幕中,如果是,则取出lazy-src属性,赋值成<img lazy-src="xx.jpg" src="xx.jpg"/>
,触发此节点onload,这就实现最简单的滚屏加载了。
特殊状态有两种:加载中与加载失败。这两种情况的处理逻辑相类似,拿加载中的逻辑做例子。
图片触发加载,到图片加载完成(或失败)之间,肯定会有一段时间。不做处理的话,用户在等待的过程中,就只能看到空白的区域,非常的奇怪。在低网速,以及用户非常快的拉滚动条的情形下,这种现象将更加明显。
那么在触发onload之前,就需要补一些逻辑,展示对应的loading图。
将需要处理的img节点作为参数,调用tempImg函数,克隆一个节点强行插在img之前,用于loading中的展示。
|
|
这一步在大型前端项目中非常重要,也是经常被忽略的地方。尽管需要简易的后台配合,但不算麻烦的上报监控,能让产品更加稳定和健壮。
我在两个地方用到了上报。其一是图片加载失败,触发onerror时,这样一来我们能知道每天图片拉取失败的量;其二是图片加载的时间,能够帮助我们分析cdn服务是否异常,分析全国慢速用户比例等等。
而所谓的上报其实就是一个http请求,我会大概把这些信息带上
|
|
这是前端无可避免的一个问题,先来说下此问题的背景。
由于我们是先用一个空白的img标签占位,再去加载图片,如果图片的高度特别长(比如新浪长微博),加载完成时就会撑开节点,引起滚动条的跳动。由于移动端屏幕较PC窄,一个跳动就可能让你找不到前一秒正在浏览的内容,这种体验尤其严重。在移动端的web设计中,可以看到许多知名互联网公司的产品,也经常忽略这一点。
因此我们可以限定占位区域的size,以此区域来做居中截取。当占位区域与图片最终展示同宽同高时,就不会引起跳动,而且也保持了视觉的一致性。
其原理如下,先判断是竖向长型图,还是横向长型图,根据不同的情况,优先让宽或高填充满占位区域,然后通过不同的负margin去实现居中。
|
|
webp格式图片是google开发的一种旨在加快图片加载速度的图片格式,压缩提交大概只有jpg的2/3。随chrome的比例越来越多,其实让更多用户体验到webp也是一件好事。
那么问题来了,怎么去判断用户的浏览器是否支持webp呢?
根据ua去判断是个好方法,但不太靠谱,因为chrome中其实也有设置,让它不能去支持webp,而且webkit本身就开源,会衍生出很多你不知道名字的浏览器。
最终我使用的是特性检测:
|
|
我们会让浏览器试着加载一张非常小的base64格式的webp图片,如果能够正常加载,说明是支持webp的。
并且,会把测试记录在cookie里,所以第二次直接从cookie里读结果,基本不会影响性能。完成了最重要的检查,我们就可以放心让服务器返回不同格式的图片了。
本文转载自litten