学习任务来自：百度ife前端技术学院
任务二 # trim # 正确的实现：
问题：应该用字符来代替 ，chrome下\s可以匹配全角空格，但是考虑兼容的话，需要加上\uFEFF\xA0，去掉BOM头和全角空格。
function trim(str) { // 此处 \\s 等是为了去除带转义字符的字符串，如 ' \s 19 ' var re = new RegExp('(^[\\s\\t\\xa0\\u3000]+)|([\\u3000\\xa0\\s\\t]+\x24)', 'g'); return String.prototype.trim ? str.trim() : str.replace(re, ''); // MDN 的做法 // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/Trim // return String.prototype.trim ? str.trim() : str.replace(/^\s+|\s+$/g,''); } 注意：
\xa0 表示不换行的空格 \u3000 表示中文全角空格 \x24 表示$ isEmail # 我的实现：
·238 字·2 分钟
等高布局 # 容器高度随着左右两边的增高而变化 通过padding-bottom: 10000px;和margin-bottom: -10000px;互相挤压，外容器隐藏溢出，形成自适应高度 <div class="wrap"> <div class="left"> 页面内容<br/> 页面内容<br/> </div> <div class="center"> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> </div> <div class="right"> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> </div> </div> .wrap { width:100%; margin:0 auto; overflow:hidden; } .wrap:after { content:""; display:block; clear:both; } .left { width:20%; background:Red; float:left; padding-bottom:10000px; margin-bottom:-10000px; } .center { float: left; padding-bottom: 10000px; margin-bottom: -10000px; background-color: yellow; width: 60%; } .right { width:20%; background:blue; float:right; padding-bottom:10000px; margin-bottom:-10000px; } 效果如下：
注意：如果要支持ie6，请加上针对ie6的清除浮动hack_zoom: 1;
·208 字·1 分钟
看完之后很多还是似懂非懂，估计等到有相应的项目做的时候，遇到某些点就会恍然大悟吧！
规则1——减少HTTP请求（Minimize HTTP Requests） # 只有10%～20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%～90%时间都花在HTML文档所引用的所有组件（图片、脚本、样式表、Flash等）进行的HTTP请求上。因此，改善响应时间最简单的办法就是减少组件数量并由此减少HTTP请求数。减少组件数量通常会和产品设计的初衷相矛盾，因此，此处给出了一些技术：
图片地图（Image Maps）联合多个图片到一个单独的图片中。下载图片大小的总和保持不变，但是，通过减少HTTP请求数的方式加速了页面。图片地图适用于导航栏或其他超链接中使用多个图片的情形。但是，在定义图片地图上的区域坐标时，如果采用手工方式很难完成且容易出错，而且除了矩形外几乎无法定义其他形状。 CSS Sprites使用CSS background-image和background-position属性将多个图片联合成一个独立的图片来显示。它通过合并图片减少了HTTP请求，并且比图片地图更加灵活，同时也降低了图片的下载量。如果在页面中需要为背景、按钮、导航栏、链接等提供大量图片，CSS Sprites是一种优秀的解决方案。 内联图片（Inline images）使用data: URL scheme模式将图片嵌入到HTML文档中。通过此模式嵌入图片，不需要任何额外的HTTP请求开销。但是，目前的主流浏览器（主要是IE）不支持此种方式。 合并文件（Combined files）通过将所有JavaScript脚本合并到一个文件，所有CSS样式表合并到另一个文件的方式来减少HTTP请求的数量。但是简单的合并通常会遇到模块化、页面变化等问题，需要根据页面引用脚本和样式表来具体分析以确定具体的组合方式。 规则2——使用内容发布网络(CDN)（Use a Content Delivery Network） # 用户同Web服务器的距离会对页面响应时间产生影响。网站最初通常将其所有服务器放在同一个地方，当用户群增加时，公司必须面对服务器放置地点不再合适的事实。因此，有必要在多个地理位置不同的服务器上部署内容。
作为实现地理位置分离的第一步，不应当首先尝试使用分布式架构重新设计Web应用程序。这样的应用程序决定了重新设计将带来如同步会话状态、在服务器放置地点间复制数据库事务等复杂问题。重新设计会推迟甚至根本无法实现缩短用户和网站内容距离的愿望。
如果应用程序Web服务器里用户更近，则一个HTTP请求的响应时间将被缩短；如果组件Web服务器离用户更近，则多个HTTP请求的响应时间将缩短。因此，与其重新开始设计应用程序，以便将应用程序Web服务器分散开，不如首先将组件Web服务器分散开。这不仅能达到响应时间大幅减少的目的，还很容易实现。
内容发布网络（CDN）是一组分布在多个不同地理位置的Web服务器，用于更加有效的向用户发布内容。向特定用户发布内容的服务器基于对网络可用度的测量，例如，CDN可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器。
除了缩短响应时间外，CDN还可以带来其他优势，包括备份、扩展存储能力和进行缓存；同时，CDN还有助于缓和Web流量峰值的压力，如在获取天气或股市新闻、浏览体育或娱乐事件时。依赖CDN的一个缺点是网站的响应时间会受到其他网站——甚至可能是竞争对手流量的影响；另一个缺点是无法直接控制组件服务器所带来的问题。
CDN用于发布静态内容（如图片、脚本、样式表、Flash）。提供动态HTML页面会引入特殊的存储要求——数据库连接、状态管理、验证、硬件和OS优化等，这些复杂性超过了CDN的范围。另一方面，静态文件更容易存储并具有较少的依赖。
规则3——添加Expires头（Add an Expires or a Cache-Control Header） # Web页面包含大量组件，并且数量在不断增长。页面的初访者会进行很多的HTTP请求，但通过一个长久的Expires头，可以使这些组件被缓存下来，可以在后续的页面浏览中避免不必要的HTTP请求。长久的Expires头最长用于图片，但应该将其用于所有组件上，包括脚本、样式表和Flash。
1. border-style : dotted的’dotted’属性不兼容ie6
2. 不同元素的上下外边距margin会叠压，父子级包含的时候子级的margin-top会传递给父级；（内边距替代外边距）
3. word-spacing : 30px 单词间距（以空格为解析单位）
4. 样式优先级 tag(1) < class(10) < id(100) < style行间样式(1000) < js
5. IE6不支持a以外其它任何标签的伪类；IE6以上的浏览器支持所有标签的hover伪类。
6. 行内样式 inline 的特点：
默认同行可以继续跟同类型标签； 内容撑开宽度 不支持宽高 不支持上下的margin和padding 代码换行被解析 7.1 inline-block的特点:
块在一行显示； 行内属性标签支持宽高； 没有宽度的时候内容撑开宽度 7.2 inline-block存在的问题:
代码换行被解析；(代码换行的时候样式会有空隙) ie6 ie7 不支持块属性标签的inline-block; 8. img的默认属性为inline-block，img自带边框（经常在css reset中重置边框为 none）
9. cursor : url(我的鼠标.jpg),pointer;cursor也可以自带图片来模拟鼠标样式，但后面需要附上的默认样式
10. 谨慎使用通配符*，会影响性能
11. clear left/right/both/none 是指元素的某个方向不能有浮动元素
12. 在ie6下高度小于19px的元素，高度会被当做19px来处理,解决办法:给该元素设置overflow:hidden
13. ie6,7的hasLayout属性使得具有宽度的父级子元素不需要清除浮动
14. ie6,7下元素浮动，要并在同一行的元素都要加浮动
15. IE6下的双边距BUG
在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍 解决办法: display:inline 16. IE6，7下li的间隙
本文涉及的代码要放在IE 6，IE 7和IE 8下运行，与标准浏览器进行对比 推荐使用IE浏览器测试程序 IE tester
常见问题 # 1. 在IE6元素浮动，如果宽度需要将内容撑开，就给里边的块元素都加浮动
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .box{ width:400px;} .left{background:red;float:left;} .right{float:right; background:blue;} h3{margin:0;height:30px; float:left;}/*如果不加浮动，ie6下元素不会撑开*/ </style> </head> <body> <div class="box"> <div class="left"> <h3>左侧</h3> </div> <div class="right"> <h3>右侧</h3> </div> </div> </body> </html> 2. 在IE6，7下元素要通过浮动并在同一行，就给这行元素都加浮动
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> /* 由于.right没有加浮动，ie6下就会出现间隙啦 */ .left{width:100px;height:100px;background:Red; float:left;} .right{width:200px;height:100px;background:blue;margin-left:100px;} </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"></div> </div> </body> </html> 3. 注意标签的嵌套规范
·106 字·1 分钟
SEO的基础知识 # SEO的类别
黑帽 SEO（欺骗） 白帽 SEO（正规） 黑帽SEO # 通过罗列与网站无关的关键字，或者不良关键字，来欺骗搜索引擎来增加网站的访问率
白帽SEO # 网站标题、关键字、描述。 网站内容优化。增加长尾关键字，增加关键字密度。 Robot.txt 文件。 网站地图。 增加外链引用。到各个网站上宣传。 网站地图 一个网站所有链接的容器。很多网站的连接层次比较深，蜘蛛很难抓取到 ，网站地图可以方便搜索引擎蜘蛛抓取网站页面，通过抓取网站页面，清晰了解网站的 架构，网站地图一般存放在根目录下并命名为sitemap，为搜索引擎蜘蛛指路，增加网站 重要内容页面的收录。网站地图就是根据网站的结构、框架、内容，生成的导航网页文 网站地图网站地图件。大多数人都知道网站地图对于提高用户体验有好处：它们为网站 访问者指明方向，并帮助迷失的访问者找到他们想看的页面。
网站结构布局优化 # 控制首页链接数量（中小型网站建议一百个左右） 扁平化的目录层次（使内容的跳跃尽量不超过三次，尽量三次就能到达目的地） 导航的SEO优化（主导航，副导航，加入面包屑导航（导航尽量用文字表示，图片也要加上alt和title等属性）） 不可忽略的细节：LOGO，导航条，分页目录，页面大小 面包屑导航
一直觉得自己在人际交往方面有很大的缺点，嘴笨的人总是容易说错话，经常会有因为不善于表达而造成一些不必要的误会，也因为不善于交际，而错失很多让自己变得更加优秀的机会。
很大的缺点，也就表示还有很大的提升空间。这些年一直在这方面做着努力，虽然性格决定，收效甚微，但还是看到了一点点变化。从以前或是愣愣的发呆看着别人聊天，或是不经思考开口时的结结巴巴，或是交流结束后对自己言语的后悔，逐渐转变为在思考后去行动的模式。开始尝试在脑海里去琢磨自己的一言一行，然后在尝试着去组织自己的言论；开始在说错话后思考为什么会有后悔的心理，后悔的原因是什么。
今天恰好看到一篇文章，谈论的是人在有基本的礼貌和社交礼仪的情况下，当一个内向的人并不是不可取的。豁然开窍~ 一个标榜自己不善于交际的人，如果不具备做人所应有的基本的礼貌，那这个人是否不是一个内向的人，而是一个缺乏自信的人？
在承认自己是否为内向的人的时候，只有先看清自己的本质，才能对症下药吧！
基本的礼仪，或者说基本的礼貌是什么，知乎（感觉怎么变成搜索引擎了……）上面有一些很好的回答，贴在此，以警示自己，努力成为一个彬彬有礼亦不卑不亢的人~
知乎推荐：哪些礼仪是一个人必备的？
从大二下学期偶然的机会，一个朋友推荐我知乎这个软件后，就导致了现在的三天一小窥，五天一沉沦。那些博学多才，见多识广的大牛们，总是让你佩服得五体投地。不管是什么领域上都会有那么个独特的人能够交出自己的满腹经纶，大到国际局势，小到街边琐事，即使是一句不经意的调侃，也会让你由衷地崇拜~
逛多了知乎，自卑多了心。于是乎，我也开始向往着能够成为那么一个有才识又风趣幽默的人。在获取知识的路上屡屡碰壁，才发现才识对于我这个普通本科院校的低智商高等动物来说实在难于上青天~ 于是乎，我开始努力地，使劲吃……吃奶的力气把自己往幽默风趣的地盘上扔，才发现，幽默风趣居然也一脚把我踹到了门外边，而且连门都懒得关。才明了，即使是低俗不堪的黄段子，也需要有一嘴铁齿铜牙来驾驭。
小人物的故事都是平平凡凡的，可当一个小人物开始去思考，我是谁，我从哪里来，我要到哪里去时，那么这个小人物呢，也还是一个小人物……可小人物有了思考之后，就变身成了一个高效率的小人物，而高效率的小人物是什么呢，那就要问问屎壳郎推粪球的速度提升了一倍是怎么样的体验~
·44 字·1 分钟
创建仓库与初始化 # 创建新的文件夹，进入文件夹
$ git init 检出远程仓库 # $ git clone /path/to/repository $ git clone username@host:/path/to/repository 添加与提交 # $ git add <filename> $ git add * $ git commit -m "代码提交信息" 推送到服务器 # $ git push origin master $ git remote add origin <server>
·381 字·2 分钟
Markdown只是一种适用于网络的书写语言，而不是编程语言
兼容 # 在HTML区块标签间的Markdown格式语法将不会被处理，而在Markdown格式语法里的HTML区段标签是有效的
区块元素 # 段落 # 普通段落：
这是一个普通的段落 啦啦啦，将会被转换为p标签 连续的 不连续的\(^o^)/~ 标题 # # h1 ## h2 ### h3 ... ###### h6 区块引用 blockquote # > Proin eget tortor risus. > Curabitur aliquet quam id dui posuere blandit. 连续区块引用：
·18 字·1 分钟
博客 1.0 # 哈哈，历经千幸万苦（其实也就是花了几天的时间……），我的博客的第一个版本终于完成了！！！（其实也就是一个十分简易，简陋的小博客……）
这几天各种google资料，真的是累得够呛，其实总结了下也不是很难，只是英文不行，一堆的英文资料看着头就大了，加上断断续续的家里总有一些事发生，没能够在连续的时间段里（感觉有程序猿的调调）完成博客的基本功能，所以才拖了这么久~
现在！总结一下这个博客完成的过程……
Github账号是必不可少的 学习Git相关知识 在Github提供的主机上搭建jekyll模板 学习Markdown语言 学习Liquid语言模板 完成博客的基本主题 加入disqus评论功能 加入代码高亮 搞定啦！！！！！！！（原来这个过程这么短的啊……为何我搞了那么多天）
辛苦总是有回报的T T
先说到这里吧~（我也不知道说点啥好啊我去，等这一刻等得那么艰苦……）