前端学习资料工具整理

WEB
WEB

教程类网站：

菜鸟教程：http://www.runoob.com/
CSS88:http://www.css88.com/
前端网：http://www.w3cfuns.com/
前端导航网：http://jsdig.com/
W3CPLUS:http://www.w3cplus.com/
码农网：http://www.codeceo.com/
开源中国：http://www.oschina.net/
WP菜鸟教程：http://www.wpnoob.cn/
网络技术：http://googlo.me/web
Mozilla开发者网络：https://developer.mozilla.org/zh-CN/

视频学习类网站：

慕课网：http://www.imooc.com/
极客学院：http://www.jikexueyuan.com/
极客标签：http://www.gbtags.com/

阅读更多

移动WEB前端开发资源整合

WEB
WEB

meta篇

视窗宽度

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

其中 width=device-width 是设置视窗宽度为设备视窗宽度，还可以设置固定宽度，例如： width=640 则是设置640px的固定宽度
initial-scale=1.0：设置初始缩放比例为1.0
minimum-scale=1.0 和 maximum-scale=1.0 ：最小缩放比例和最大缩放比例
user-scalable=no ：禁止用户自由缩放，user-scalable 默认值为yes
提示：上面那个是带全部参数的，一般设置了user-scalable=no就不需要再使用minimum-scale=1.0和maximum-scale=1.0来强制禁止缩放了

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

自动识别格式

1
<meta name="format-detection" content="telephone=no"/>

content里面的参数:
telephone=no:禁止浏览器自动识别手机号码
email=no:禁止浏览器自动识别Email
address=no:禁止浏览器自动识别地址
date=no:禁止浏览器自动识别日期

阅读更多

JavaScript 开发的45个经典技巧

JS
JS

JavaScript是一个绝冠全球的编程语言，可用于Web开发、移动应用开发（PhoneGap、Appcelerator）、服务器端开发（Node.js、Wakanda）等等。JavaScript还是很多新手踏入编程世界的第一个语言。既可以用来显示浏览器中的简单提示框，也可以通过nodebot或nodruino来控制机器人。能够编写结构清晰、性能高效的JavaScript代码的开发人员，现如今已成了招聘市场最受追捧的人
在这篇文章里，我将分享一些JavaScript的技巧、秘诀和最佳实践，除了少数几个外，不管是浏览器的JavaScript引擎，还是服务器端JavaScript解释器，均适用
本文中的示例代码，通过了在Google Chrome最新版上的测试

首次为变量赋值时务必使用var关键字

变量没有声明而直接赋值的话，默认会作为一个新的全局变量，要尽量避免使用全局变量

使用===取代==

==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会，它们会同时比较值和数据类型，这也使得它们要比==和!=快。

1
2
3
4
5
6
7
8
[10] === 10    // is false
[10]  == 10    // is true
'10' == 10     // is true
'10' === 10    // is false
 []   == 0     // is true
 [] ===  0     // is false
 '' == false   // is true but true == "a" is false
 '' === false  // is false

underfined、null、0、false、NaN、空字符串的逻辑结果均为false

行尾使用分号

实践中最好还是使用分号，忘了写也没事，大部分情况下JavaScript解释器都会自动添加

使用对象构造器

1
2
3
4
5
function Person(firstName, lastName){
    this.firstName =  firstName;
    this.lastName = lastName;
}
var Saad = new Person("Saad", "Mousliki");

阅读更多

前端开发面试题集锦

WEB
WEB

你如何理解HTML结构的语意化?

1、去掉或样式丢失的时候能让页面呈现清晰的结构
2、屏幕阅读器（如果访客有视障）会完全根据你的标记来”读”你的网页
3、PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）
4、搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重
5、你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记，而只注重语义标记
6、便于团队开发和维护

Doctype文档声明的严格模式和混杂模式，如何触发这两种模式，区分它们有何意义?

1、如何触发两种模式
加入xml头部声明，可以触发IE浏览器的Quirks mode(怪异模式)，触发之后，浏览器解析方式就和IE5.5一样，拥有IE5.5一样的bug和其他问题，行为（Javascript）也是如此。
2、IE6的触发：在XHTML的DOCTYPE前加入XML声明

1
2
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3、IE7的触发：在XML声明和XHTML的DOCTYPE之间，加入HTML注释

1
2
3
<?xml version="1.0" encoding="utf-8"?>
<!-- ... and keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4、IE6和IE7都可以触发的：在HTML4.01的DOCTYPE文档头部，加入HTML注释

1
<!-- quirks mode -->  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

阅读更多

前端面试题总结HTML——CSS部分

CSS
CSS

对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性

XHTML和HTML有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：

XHTML元素必须被正确地嵌套
XHTML元素必须被关闭
XHTML文档必须拥有根元素
标签名必须用小写字母

阅读更多

圣杯布局

CSS
CSS

CSS布局终极方案之–圣杯布局（兼容IE6+，现代浏览器）

经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：

  1. 三列布局，中间宽度自适应，两边定宽
  2. 中间栏要在浏览器中优先展示渲染
  3. 允许任意列的高度最高
  4. 要求只用一个额外的DIV标签
  5. 要求用最简单的CSS、最少的HACK语句

效果图：

阅读更多

行内元素与块级元素

DOM
DOM

块级元素列表

元素名 含义
address 定义地址
caption 定义表格标题
dd 定义列表中定义条目
div 定义文档中的分区或节
dl 定义列表
dt 定义列表中的项目
fieldset 定义一个框架集
form 创建HTML表单
h1 定义最大的标题
h2 定义副标题
h3 定义标题
h4 定义标题
h5 定义标题
h6 定义最小的标题
hr 创建一条水平线
legend 元素为fieldset元素定义标题
li 标签定义列表项目
noframes 为那些不支持框架的浏览器显示文本，于 frameset 元素内部
noscript 定义在脚本未被执行时的替代内容
ol 定义有序列表
ul 定义无序列表
p 标签定义段落
pre 定义预格式化的文本
table 标签定义HTML表格
tbody 标签表格主体（正文）
td 表格中的标准单元格
tfoot 定义表格的页脚（脚注或表注）
th 定义表头单元格
thead 标签定义表格的表头
tr 定义表格中的行

阅读更多

Js学习总结

JS
JS

js变量名

js严格区分大小写
创建合法变量名应注意：不能以数字开头，后面可以是任意字符包括字母、数字或下划线，但不能是空格，且一定不能是js保留字

js数据类型

3种主要(基本)数据类型、2种复合(引用)数据类型和2种特殊数据类型,分别是

字符串(String)、数字(Number)、布尔(Boolean)
对象(Object)、数组(Array)
Null、Undefined

null和undefined的区别

null表示尚未存在的对象
undefined表示对象属性不存在或声明了变量但未赋值

1
2
3
4
5
alert(typeof undefined); //"undefined"
alert(typeof null); //"object"
alert(null == undefined); //"true"
alert(null === undefined); //"false"
alert(typeof null == typeof undefined); //"false"

阅读更多

12个非常实用的JavaScript小技巧

JS
JS

使用!!操作符转换布尔值

有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值，如果存在就返回true。为了做这样的验证，我们可以使用!!操作符来实现是非常的方便与简单。对于变量可以使用!!variable做检测，只要变量的值为:0、null、” “、undefined或者NaN都将返回的是false，反之返回的是true，比如下面的示例：

1
2
3
4
5
6
7
8
9
10
11
function Account(cash) {
    this.cash = cash;
    this.hasMoney = !!cash;
}
var account = new Account(100.50);
console.log(account.cash); // 100.50
console.log(account.hasMoney); // true
var emptyAccount = new Account(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // false

在这个示例中，只要account.cash的值大于0，那么account.hasMoney返回的值就是true。

使用+将字符串转换成数字

这个技巧非常有用，其非常简单，可以将字符串数据转换成数字，不过其只适合用于字符串数据，否则将返回NaN，比如下面的示例：

1
2
3
4
5
function toNumber(strNumber) {
    return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN

这个也适用于Date，在本例中，它将返回的是时间戳数字:

1
console.log(+new Date()) // 1461288164385

阅读更多

理解DOM中的事件流

WEB
WEB

当浏览器发展到第四代时（IE4和Netscape Communicator 4）,浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件？想象下在一张纸上有一组同心圆，如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是一组圆。两家公司的开发团队在看待浏览器事件方面还是一致的，如果你单击了某个按钮，那么同时你也单击了按钮的容器元素，甚至整个页面
事件流描述的是从页面中接受事件的顺序。但有意思的是，IE和Netscape开发团队居然提出了两个截然相反的事件流概念:IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流

事件冒泡

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点。看下面的例子

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
</head>
<body>
<div id="wrapDiv">
    <input type="button" id="btn" value="按钮">
</div>
</body>
</html>

点击按钮，那么这个click事件会按照这样传播：

  1. <input>
  2. <div>
  3. <body>
  4. <html>
  5. document

阅读更多