每日一发21

2012-12-新练习

最近比较忙，没有坚持每日一练了，但是看了不少书，理论知识长了不少发现写起东西来也比较顺畅了，以后写练习以月为一个单位汇总吧。

1.纯CSS3或JQ实现文本框动态下拉，demo

2.写了个小页面，用来记录我的IDP计划，demo

HTML8

Meta标签属性学习

META标签用来描述一个HTML网页文档的属性。

一般有三个属性：http-equiv,name,scheme.

1.http-equiv

1.1 content-type：字符集的设定，决定读取文件的形式和编码,用法：

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312” />

1.2 expires：期限，设定网页到期时间（网页到期后必须服务器重新上传），用法：

用法：＜meta http-equiv=”expires” content=”Mon, 03 Dec 2012 18:18:18 GMT”＞

1.3 refresh：定时重刷新到指定页面，用法：

＜meta http-equiv=”Refresh” content=”2”；URL=http://www.laispace.com"＞

1.4 set-cookie：网页过期，那么存盘的cookie将被删除。，用法：

＜meta http-equiv=”Set-Cookie” content=”cookievalue=xxx; expires=Monday, 03-Jan-2012 18:18:18 GMT； path=/“＞

1.5 pragma:缓存模式，禁止浏览器使用本地缓存（无法脱机浏览），用法：

＜meta http-equiv=”Pragma” content=”no-cache”＞

1.6 window-target：显示窗口设定，用法（独立页面显示，防止别人在框架里调用自己的页面。）：

＜meta http-equiv=”Window-target” content=”_top”＞

1.7 page-enter/exit：网页进出动态效果，用法：

＜meta http-equiv=”Page-Enter” content=”revealTrans(duration=５.０, transition=２０)”＞

＜meta http-equiv=”Page-Exit” content=”revealTrans(duration=５.０, transition=２０)”＞

 

2.name

2.1 revisit-after：

<meta name=”revisit-after” content=”1 days” >

2.2 author：作者

2.3 description：内容描述

2.4 keywords：关键词，keywords的content用逗号隔开

2.5 robots:机器人向导，声明需要索引的页面，content值可选all,none,index,noindex,follow,nofollow。默认是all。

2.5 generator：网页采用的技术版本版本

2.6 revised：修复

2.7 others：其他，用法：

<meta NAME=”copyright” content=”Copyright 2012 -laispace.com” />

 

3.scheme

some_text：定义与 http-equiv 或 name 属性相关的元信息，用法：

<meta scheme=”ISBN” name=”identifier” content=”0-14-043205-1” />

 

head中其他元素的用法：

1.link:链接，用法：

<link href=”URL” rel=”relationship”>如<link href=”xiaolai.ico” rel=”shortcut icon”>

2.base：基链接，将网页内的相对路径改成绝对路径，用法：

<base href=”http://www.laispace.com“ target=”_blank”>

<base href=”http://www.laispace.com“ target=”_top”>

 

 

Meta的使用方法技巧（以下为摘抄转载内容）：

Meta标签是用来描述网页属性的一种语言，标准的Meta标签可以便于搜索引擎排序，提高搜索引擎网站权重排名。要想网站做的更符合搜索引擎标准就必须了解meta标签，下面由Seoer惜缘于大家讲讲meta标签含义与使用方法：

1、META标签的keywords

写法为：<meta name=”Keywords” content=”信息参数” />

meat标签的Keywords的的信息参数，代表说明网站的关键词是什么。

2、META标签的Description

<meta name=”Description” content=”信息参数” />

meta标签的Description的信息参数，代表说明网站的主要内容，概况是什么。

3、META标签的http-equiv=Content-Type content=”text/html

http-equiv=Content-Type代表的是HTTP的头部协议，提示浏览器网页的信息，

<meta http-equiv=”Content-Type” content=”text/html; charset=信息参数” />

meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；

meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；

meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；

meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；

meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；

meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；

4、META标签的generator

<meta name=”generator” content=”信息参数” />

meta标签的generator的信息参数，代表说明网站的采用的什么软件制作。

5、META标签的author

<meta name=”author” content=”信息参数”>

meta标签的author的信息参数，代表说明网页版权作者信息。

6、META标签的http-equiv=”Refresh”

<Meta http-equiv=”Refresh” Content=”时间; Url=网址参数”>

meta标签的Refresh代表多少时间网页自动刷新，加上Url中的网址参数就代表，多长时间自动链接其他网址。

7、META标签的HTTP-EQUIV=”Pragma” CONTENT=”no-cache”

<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>代表禁止浏览器从本地计算机的缓存中访问页面内容,这样设定，访

问者将无法脱机浏览。

8、META标签的COPYRIGHT

<META NAME=”COPYRIGHT” CONTENT=”信息参数”>

meta标签的COPYRIGHT的信息参数，代表说明网站版权信息。

9、META标签的http-equiv=”imagetoolbar”

<meta http-equiv=”imagetoolbar” content=”false” />

指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。

10、META标签的Content-Script-Type

<Meta http-equiv=”Content-Script-Type” Content=”text/javascript”>

W3C网页规范，指明页面中脚本的类型。

11、META标签的revisit-after

<META name=”revisit-after” CONTENT=”7 days” >

revisit-after代表网站重访,7 days代表7天，依此类推。

12、META标签的Robots

<meta name=”Robots” contect=”信息参数”>

Robots代表告诉搜索引擎机器人抓取哪些页面

其中的属性说明如下：

信息参数为all：文件将被检索，且页面上的链接可以被查询；

信息参数为none：文件将不被检索，且页面上的链接不可以被查询；

信息参数为index：文件将被检索；

信息参数为follow：页面上的链接可以被查询；

信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；

信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；

2、英文前缀meta-前缀 pref.

1.表示”变化”,”变换”

2.表示”继”,”在…之后”

3.表示”超越”

4.表示”在…之间”,”介于”

例词：metaphysics

n.

1.形而上学；玄学

2.深奥莫测的推理；空谈；空头理论

来自希腊语，最初来源是作为亚里士多德所著《形而上学》一书的书名，意指“第一哲学”，也就是以“作为存在的存在（being as being）”为研究对象的形而上学，其意义为“在具体科学之后”

3.模板meta语言

模板meta语言由GDMO提出，采用类似于BNF的语法，因此与ASN.1相似，只要了解了它与ASN.1的不同之处就可以在ASN.1有关知识的基础上正确使用。因此，这里只将有关要点进行如下说明：

1.分号（；）用于终止结构和中止模板

2.空格，空行，注释和行尾只起分割符的作用。在需要标志一个元素结束，另一个元素开始时使用。

3.注释由双连字符（—）引导，在行尾或遇到另外的双连字符终止。可以出现在任何分隔区中，但不能出现在结构名或模板名所包含的空格之间。

4.方括号（[ ]）用于指出模板定义中的可选元素。

5.右圆括号中的星号（*）指出模板定义中的可选元素。

6.选择对象由竖线（|）分割。这个符号旨在支持件的定义中使用。

7.将由用户确定的字符串扩在尖括号(<>)中。

8.附件用一个引用标号，后接符号->>,后接一个由文本字符串和符号构成的语法定义组成。

9.分隔串出现在模板定义中自然语言文本或形式说明文本之中。他们由任意的字符串组成，字符串可以由以下任意一个分隔符引导和终止。分隔符是“$ % ^ & * ` ‘ ~ ? @ \”。如果分隔串由某个分隔符开始，则这个分隔串直到再次遇到相同的分隔符才结束。

 

 

 

 

 

 

Javascript17

web前端开发入门提高 js书籍


WEB前端研发工程师，在国内算是一个朝阳职业，这个领域没有学校的正规教育，大多数人都是靠自己自学成才。本文主要介绍一些web开发的书籍，目的是给想了解JavaScript或者是刚接触JavaScript的朋友，介绍如何通过循序渐进的看书来学习javascript。

一. 入门级 ：就是有一定的基础(比如最常见的HTML标签及其属性、事件、方法;最常见的CSS属性;基础的JavaScript编程能力)，能够完成一些简单的WEB前端需求。

　　推荐：《JavaScript dom 编程艺术》

　　理由：此书绝对是入门的好书，本人也是在接触JS一段时间后才看的这本书。此书从JS的历史 – JS基础语法知识 – DOM介绍和简单的使用。

　　评价：简洁，实用，详细，易懂，书不厚，相信很快就能看完。

下载地址:http://www.kuaipan.cn/file/id_66867997939073035.html

二.初级开发：不要苛责代码的对错严谨，毕竟每个程序员都有这样的一个过程，就是这个级别的特征。

　　推荐：《javascript高级程序设计》(第二版)

　　理由：这本书的作者是 Nicholas C.Zakas ,博客地址是 http://www.nczonline.net/ ,大家可以去多关注，雅虎的前端工程师，是YUI的代码贡献者，可想而知这本书得含金量，他出的书都广受好评。这本书已经出了第二版，而且与第一版相比内容更新很大，直接第二版就行。不要被书名的“高级”唬住，只要有JS基础语法知识和DOM基础知识就行，而且本书开始阶段还是介绍JS和DOM的语法知识。

　　评论：重点推荐一下第五章(类型),第六章(OOP),第七章(匿名),多看几遍,至少要完全看明白，能为以后进阶打好基础，个人感觉这几章是本书的精华所在。这本书在入门的时候看节奏会快了一些，所以不建议初学者看，可是相对于我一会要介绍的书又算基础一点，所以建议先阅读完这本书，对浏览器兼容和语法知识有一定了解之后再往下阅读。

下载地址:http://www.kuaipan.cn/file/id_66867997939073036.htm

　　推荐：《高性能 JavaScript》《JavaScript语言精粹》

　　理由：先看的是《高性能JS》，这本书还是 Nicholas C.Zakas 所著，经典之作，书中大量举例了各种不同写法的JavaScript在浏览器中的性能情况，对规范JavaScript代码和提升性能有很好的帮助，最后提到了很多工具和性能测试的方法，都是灰常灰常有实际作用的，看得出作者很厚道(好吧,偶承认了,偶是他的粉丝)^_^,记忆最深的一句话:”如果 JavaScript 执行了几秒钟,那么很可能是你做错了什么”;；

　　　　《语言精髓》和《高性能》有少部分关键知识都重复提到了，可是为什么要推荐这本书，因为本书对JS语言本质的描述太棒了，这是一本介绍JavaScript语言本质的权威书籍，从 “对象”，“函数”，“继承”，“数组”等等多个重要知识着手。我补一句话 – 本书需要反复阅读。

　　评论：都是好书，都很薄，而且所说的内容只要有基础都不难。相信读完之后会对JS又有新的认识，且对以后的代码规范和浏览器差异性等高级问题有了新的认识，如果读完之后会有种被灌顶的感觉，那么恭喜你，你离中级不远了。

下载地址:http://www.kuaipan.cn/file/id_66867997939073044.html

三.中级开发：“中级开发人员的标志就是在高级开发或架构师较少的指导下高质量的完成工作，并对产品或项目有自己的想法与理解”。

　　强烈推荐：《JavaScript DOM高级程序设计》

　　理由：此书灰常犀利，本人一共看了近半年的时间，已反复阅读多次。说实话，这本书的翻译一般，代码也有少许错误，可是这不影响这本书的强大，通过学习本书，可以理解一个JS的库如何产生，自己动手写一个简单的自己的JS库，如果你打算研究其他的JS库或者正在研究其他的JS库，那么这本书会使你的理解达到新的高度，进阶高级必读，写库必读。

　　评论：异常强大的一本JS巨作，此书不薄，强烈推荐。

下载地址: 收集中

　　强烈推荐：《JavaScript设计模式》

　　理由：异常生猛的一本书，看书名带“设计模式”就知道，这本书想要读明白有点困难，本人自己感觉，只要某书一带“模式”这两字，反正就简单不了。本书对JS的“模仿接口”，“封装”，“继承”，“链式调用”，“工厂模式”等各种具体的设计模式及其在JavaScript 语言中的应用进行了详细的介绍，运用设计模式使代码更模块化、更高效并且更易维护。

　　评论：书不厚，可真的是内容丰富且高深，强烈建议购买。

下载地址:http://www.kuaipan.cn/file/id_66867997939073049.html

　　推荐：《高性能网站建设指南》《高性能网站建设进阶指南》

　　理由：在读完前几本书之后我们对前端的性能和自己的代码的效率已经达到相当的高度了，然后我们在接触一些前端工程师的一些精髓。本书对HTTP请求，CDN，内容缓存和一些web开发中常见问题进行讲解。

　　评论：书都不厚，可是说的都是比较实用的东西，可是用不用的上还得看个人和项目需要了。

　　以上就是整理WEB前端开发前辈们的一些JS相关书籍，朋友会问，为什么就只介绍的中级的，那么高级看的书在哪？有木有高级的书？进阶高级程序员之路又在哪？说下我自己的看法和对年轻朋友的建议吧，说的不好或不对请原谅，其实我也才真正工作两年多：

　　　　1.主要是工作经验问题。达到一定程度以后真的合适的书很难找了，更多只有在工作中总结和积累。工作的越久碰到过的问题也就越多，^_^。所以一般说高级程序员一般都是至少都3年以上的工作经验，没办法，实践才出真理。

　　　　2.我觉得高级web前端灰常有必要总结一个自己的JS库，不管大小，总归有一套自己的东西（嘿嘿，如果认真的实践过《JS DOM高级》的内容，估计有一套JS库的原型了）。

　　　　3.前端有必要懂得和熟悉一本服务端语言，其实计算机语言很多语法大致都差不多，不同的就是内置的方法和属性，所以去熟悉一门语言并不难。

　　　　4.许多年轻人都有眼高手低的毛病，我也一样，例如，有的人认为自己编起程序来很顺手，不用查手册，说写就写，很熟练，几乎什么程序都能编出来，就认为自己对这种语言很精通了。其实对于一门语言的掌握程度是不可深测的，对于语言掌握其实是一个无止尽的过程，没有终点。编写时间的长短和编写熟练程度，仅仅是精通语言表现的一个方面。更重要的是程序员要掌握这个语言的适用范围，整体构架，语法规则、功能分类等基础理论方面的知识，并能利用这方面的知识，用最科学的方法去解决现实中各种项目的各个问题。


 

原文链接

每日一发21

2012-11-12-CSS剪贴图像的几种方法

在不改变原来图片大小的情况下，剪切有几个方法（每种方法都要把img包在一个元素内来定位）：

1.用margin给img切图

<style>
p{
width:400px;
height:300px;
margin-right:20px;
border: 5px lightblue solid;
float: left;
overflow: hidden;/设置溢出隐藏/
}
img#usemargin{
margin:-40px -40px -40px -40px;
}
</style>

demo1

2.用absolute给img切图

<style>
p{
width:400px;
height:300px;
margin-right:20px;
border: 5px lightblue solid;
float: left;
overflow: hidden;/设置溢出隐藏,必需/
position: relative;/必需！/
}
img#useabsolute{
position:absolute;/必需！/
top:-40px;
right:-50px;
}
</style>

demo2

3.用clip给img切图

<style>
p{
width:400px;
height:300px;
margin-right:20px;
border: 5px lightblue solid;
float: left;

position: relative;/必需！/
}
img#useclip{
position:absolute;/必需！/
clip: rect(20px 225px 200px 55px);

}
img#withoutclip{
opacity:0.4;
}
</style>

demo3

4.用clip给背景切图

<style>

div{
float:left;
margin-right: 20px;
}
div#noclip{
background:url(2.jpg) no-repeat;
width:400px;
height:300px;
opacity:0.5;

}
div#clip{
background:url(2.jpg);
width:400px;
height:300px;
text-align: center;
line-height: 130px;
border:1px solid white;
opacity:1;
/使用clip的条件是position:absolute，父元素则为position:relative/
position: absolute;
clip:rect(50px 250px 150px 50px);
/注意，在IE8以及其以下的版本，在使用clip属性时需要注意语法：clip (top,right,bottom,left);/
}

</style>

demo4

 

 

5.显然，最好用的就是clip方法了

每日一发21

2012-11-11-CSS3几个新属性的测试

CSS3中过渡、圆角、阴影等的测试，只在chrome下测试，没写其他浏览器下的Hack代码。

核心代码：



.ease{
-webkit-transition:all 4s ease;
}

.ease-in{
-webkit-transition:all 4s ease-in;
}

.ease-out{
-webkit-transition:all 4s ease-out;
}

.ease-in-out{
-webkit-transition:all 4s ease-in-out;
}

.linear{
-webkit-transition:all 4s linear;
}

#trs:hover .trs{
margin-left: 400px;/向右偏移/
-webkit-transform:rotate(25deg);/旋转/
color:red;/更换字体颜色/
font-size: 1.5em;/更换字体大小/
background:-webkit-gradient(linear, left bottom, left top,color-stop(0, #b6ebf7), color-stop(0.80, #fff));/背景平滑过渡/
border-radius: 25px;/增加圆角/
}

 

demo

每日一发21

2012-11-03-网页中间弹出文本框

 

核心代码是：

$(“#button”).click(function(){
var curwidth = document.body.scrollWidth;//获得当前屏幕可见部分的宽和高
var curheight = document.body.scrollHeight;//思考用了哪种高宽！
var tipswidth = $(“.tips”).width(); //获得通知栏的宽和高
var tipsheight = $(“.tips”).height();
var left = (curwidth - tipswidth) / 2 ; //计算通知栏应在的位置
var top = (curheight - tipsheight) / 2 ;
$(“.tips”).css(“left”,left);
$(“.tips”).css(“top”,top);

$(“.tips”).fadeTo(4000,1).delay(5000).fadeTo(3000,0);
});
});

 

各种宽度高度，不一一allert加上草稿纸上多加画画，还真搞不懂分不清：

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

CSS3很强大，能做出很炫的效果。

点击按钮就可以弹出像信封的提示框，见Demo.