王魏前端博客

html5 新增语义化标签

weiking — Mon, 05 Dec 2011 12:10:37 +0000

Html5与html相比，有哪些特点：

一.首先是标签部分的简洁:

1.声明部分简洁化，之前，我们分为声明又臭又长, 不知道你能敲下来不，反正我不行，这是w3school的文档。

1.声明部分简洁化，之前，我们分为声明又臭又长, 不知道你能敲下来不，反正我不行，这是w3school的文档。
a.XHTML Strict DTD 如果您需要干净的标记，免于表现层的混乱，请使用此类型。


PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

b.XHTML Transitional DTD Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 XHTML 的呈现特性时，请使用此类型：


PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

c.XHTML Frameset DTD 当您希望使用框架时，请使用此 DTD！


PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2.增加Html5语义化标签：
header: 此元素用于定义 Web 页面的某些部分的标题，可以是整个页面、article 元素或 section 元素。
footer:与 header 元素类似，此新元素定义页面的某些部分的页脚。页脚不一定是在页面、文章或区域的结尾，但是它通常是在那个位置。
nav: 这是 Web 页面上主要导航链接的容器。此元素不应用于所有链接组，而是应仅用于主要导航块。如果您有一个 footer元素包含导航链接，不需要将这些链接封装在 nav 元素中，因为 footer 元素将可以独自包括这些链接。
article: 元素用于定义页面上可以独自分布的独立项目，例如新闻项目、博客或评论。此类项目通常使用 RSS feed 来联合。
section: 此元素表示文档或应用程序的一部分，例如，文章或教程的一章或一节。例如，您现在正在阅读的章节在 HTML5 中可以使用 section 元素括起来。section 元素通常具有一个页眉，虽然严格来说是不需要的。例如，您现在正在阅读的章节的页眉将包含文本 “语义元素”。
aside: 此新元素可以用于标记边栏或一些将认为与其周围内容有点无关的内容。此项的一个例子就是广告块。
hgroup: 在某些情况下，页面、文章或区域可能需要多个标题，例如，您有一个标题和一个副标题。例如，本教程具有标题 “使用 HTML5 和 CSS3 创建现代 Web 站点” 和副标题 “在 HTML5 中实施 canvas 和 video 元素”。您可以在 hgroup 元素中封装这些标题，使用 h1 元素表示主标题，h2 元素表示副标题。

除此之外，还有 audio 和 video 元素用来替代 Web 当前对 Flash 作为一种多媒体交付平台的依赖

canvas 元素: 最初是由 Apple® 开发的，用于 Mac OS X Dashboard 部件和 Safari 中，但是后来被 Mozilla® 和 Opera® 用于它们的 Web 浏览器中。该元素已经被标准化并与一系列 2D 绘图 API 包括在 HTML5 规范中，这些 API可以用于创建该元素内的形状、文本、过渡和动画。

许多人相信 canvas 元素是 HTML5 最重要的一个方面，因为它可以促进快速创建图表、交互式游戏、绘图应用程序以及其他图形，而无需 Adobe Flash 等外部插件。
canvas 元素自身是非常基础的，定义对象的宽度、高度和惟一 ID。然后，开发人员必须使用一系列 JavaScript API 在 canvas 实际绘制对象，通常是在 Web 页面已经完成了呈现后。这些 API 允许开发人员绘制形状和线条；应用颜色、不透明性以及倾斜度；转换 canvas 对象；以及执行动画。这些 API 还允许 canvas 成为交互式的并对鼠标操作和键操作等用户输入做出响应，从而促进在 canvas 上创建游戏和 Web 应用程序。

使用 audio 和 video

使用二：这是一个标准的Html5化页面。




    
    html5
    



    
    
        Header
        Subtitle
        HTML5 Rocks
    
    
    

        
        
            Nav
            Link1
            Link2
            Link3
        

        
        
            
                Article Header
                test test test testttest test test testtest test test testtest test test testtest test test testest test test test
               test test test testttest test test testtest test test testtest test test testtest test test testest test test test
               test test test testttest test test testtest test test testtest test test testtest test test testest test test test
               Article Footer
            

            
                Article Header
                test test test testttest test test testtest test test testtest test test testtest test test testest test test test
               test test test testttest test test testtest test test testtest test test testtest test test testest test test test
               test test test testttest test test testtest test test testtest test test testtest test test testest test test test
               Article Footer
            
        

        
        
            Aside
            test test test testttest test test testtest test test testtest test test testtest test test testest test test test
        

        
        Footer

浅析JavaScript和PHP中三个等号（===）和两个等号（==）的区别

weiking — Fri, 18 Nov 2011 07:04:42 +0000

首先，先做个简单的介绍，让先有个直观的认识
== equality 等同 === identity 恒等
== 两边值类型不同的时候，要先进行类型转换，再比较。
=== 不做类型转换，类型不同的一定不等。

举例说明：

“1″ == true
类型不同，”==”将先做类型转换，把true转换为1，即为 “1″ == 1；
此时，类型仍不同，继续进行类型转换，把”1″转换为1，即为 1 == 1；
此时，”==” 左右两边的类型都为数值型，比较成功！

如果比较：”1″ === true 左侧为字符型，右侧为bool布尔型，左右两侧类型不同，结果为false；
如果比较：”1″ === 1 左侧为字符型，右侧为int数值型，左右两侧类型不同，结果为false；
如果比较： 1 === 1 左侧为int数值型，右侧为int数值型，左右两侧类型相同，数值大小也相同，结果为true；
如果比较： 1 === 2 左侧为int数值型，右侧为int数值型，左右两侧类型相同，但数值大小不同，结果为false；

简而言之就是 “==” 只要求值相等; “===” 要求值和类型都相等 ^_^

============================================================================

下面，我们对”==”和”===”的区别，做一些较为深入的剖析介绍

先说 ===，这个比较简单，具体比较规则如下：
1、如果类型不同，就[不相等]
2、如果两个都是数值，并且是同一个值，那么[相等]；(！例外)的是，如果其中至少一个是NaN，那么[不相等]。（判断一个值是否是NaN，只能用isNaN()来判断）
3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。
4、如果两个值都是true，或者都是false，那么[相等]。
5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。
6、如果两个值都是null，或者都是undefined，那么[相等]。

再说 ==，具体比较规则如下：

1、如果两个值类型相同，进行 === 比较，比较规则同上
2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：
a、如果一个是null、一个是undefined，那么[相等]。
b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
d、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。非js核心的对象，令说（比较麻烦，我也不大懂）
e、任何其他组合（array数组等），都[不相等]。

举例说明：
“1″ == true
类型不等，true会先转换成数值 1，现在变成 “1″ == 1，再把”1″转换成 1，比较 1 == 1，相等。

= 赋值运算符
== 等于
=== 严格等于
例：
var a = 3;
var b = “3″;

a==b 返回 true
a===b 返回 false

因为a,b的类型不一样 ===用来进行严格的比较判断，结果为false

=============

var priceOfApple = “3元”; // 苹果的价格
var priceOfBanana = “3.5元”; // 香蕉的价格
priceOfApple = parseInt( priceOfApple ); // 解析苹果的价格
var priceOfBanana2 = parseInt( priceOfBanana ); // 解析香蕉的价格
if( ( priceOfApple===3 ) && ( priceOfBanana2 === 3 ) // 检查解析是否成功
&& ( parseFloat( priceOfBanana ) ===3.5 ) )
{
alert( “苹果的价格:” + priceOfApple // 输出水果的价格
+ “/n香蕉的价格的整数部分:” + priceOfBanana2
+ “/n香蕉的价格:” + parseFloat( priceOfBanana ) );
}

jQuery(function(){})与(function(){})(jQuery)的区别

weiking — Fri, 18 Nov 2011 06:44:53 +0000

jQuery(function(){})与(function(){})(jQuery)的区别

开发jQuery插件时总结的一些经验分享一下。
一、先看

jQuery(function(){
//Code
});

全写为
jQuery(document).ready(function(){
//Code
});

意义为在DOM加载完毕后执行了ready()方法。

二、再看
(function(){
//Code
})(jQuery)；
其实际上是执行()(para)匿名方法,只不过是传递了jQuery对象。

三、总结

jQuery(function(){　});用于存放操作DOM对象的代码，执行其中代码时DOM对象已存在。不可用于存放开发插件的代码，因为jQuery对象没有得到传递，外部通过jQuery.method也调用不了其中的方法（函数）。
(function(){　})(jQuery)；用于存放开发插件的代码，执行其中代码时DOM不一定存在，所以直接自动执行DOM操作的代码请小心使用。

Javascript如何解析array与object

weiking — Sat, 12 Nov 2011 10:35:49 +0000

与服务器端交互过程中，经常让我们前端来处理服务端传过来的json，用几个小demo来说明一下：

1.javascript处理array数组

   //解析数组Arrays格式
	var obj = [["user", "name", "id"],["buy", "classname"]];
	alert(obj[0][2]);

2.javasript处理json

   var objs = "[{id:100, name:'wangwei_1'}, { id:221, name:'wangwei_2'}]";//服务器传回来一般都是字符串形式
   objs = eval(objs); //必须用eval来处理以下
   alert(objs[1].name);

3.eval方法的作用
eval把服务端传过来的字符串处理为我们本地可以直接操作的对象(obj.xx)的格式

什么人适合做前端工程师？

weiking — Wed, 02 Nov 2011 10:22:20 +0000

随着互联网的迅猛发展和普及，一个新型的行业和新兴的职位正在上升到技术的层面：web前端开发工程师。一些想从事、或感兴趣的人会问：我适合做前端工程师吗？什么样的人最合适？

首先，我们看一下前端新人从哪里来？相对于其他IT技术职位来说，Web前端工程师算是半个程序员，很多从事此项工作的都是非计算机相关专业出身，这当然是因为互联网行业吸引人以及HTML和CSS入门起点低，目前大学里尚能全民考C（计算机二级），全民做网页也没有什么稀奇，而且因为职位所处位置的交叉性，注定有很多Web前端开发人员是转行而来。

1）设计师转前端

这种情况最常见，究其原因与web标准在中国的推广手法有关，我们最先接触的是“禅意花园”那些漂亮的设计，另一方面中国的网页设计师通常要兼顾页面制作，所以自然也会对其样式和数据分离的特性产生兴趣。搞设计出身的前端有一个优势是能更好地把握设计稿的表现重点，对于某些视觉设计师不合规范的操作能轻松地化解，劣势也很明显，缺乏数理基础，写出的代码不够严谨，JavaScript基础也普遍较差，后期需要学习加强。

: Web前端开发新人来源 3

2）后台程序员转前端

作为与代码有关的工作，更适合程序员学习，其思维方式相似。像淘宝第一位前端工程师本身是写Java的，经常也听到有面试后台程序员结果被推到前端然后被录取的，很多后台转战前端的程序员，大多去做Web Apps，即基于Ajax和各种复杂架构的Web运用，而这一技术方向，也是Web前端的大势所趋。

3）网虫转前端

随着互联网的普及，越来越多的小孩很早便接触了互联网，玩游戏、做博客等等，想学点与互联网相关的内容，首选自然是前端，因为入门要求低，很多Twitter名人就是其中的典型，他们更懂得网民需要什么，写的程序操作简单。

4）策划、编辑、草根站长转前端

很多的网站策划和编辑不再只是复制和转帖这类重复性的工作，也需要看懂常见的代码，对于提高工作效率和质量有一定的帮助，慢慢的也开始了解这个行业，比一般性的文字工作有趣，并且经过深入的学习，如Javascript、Ajax等技术，其就业领域发生了极大的变化；还有很多在实践中成长起来的草根站长，最初就是搞几个站玩玩，在不断的建站过程中学到一些前端技术，提高了“前端修养”，开始是为了养家糊口，慢慢也变成了自己的一项事业。

总结

通过以上分析可以发现，从事web前端行业的人形形色色，或者是迫于工作需要，或者是感兴趣，但对于我们即将从事这个行业来说，首先是对于这个行业的兴趣，只有有兴趣才能更深入的学习，克服在学习过程中的枯燥和困难；如果能有可以加分的优势更好，如目前所从事的行业与其相关，或大学学的专业相关，这些都没有也没有关系，只要有兴趣和不懈的激情，也可以通过后天的努力，走上前端开发的职业道路。及时目前我们所从事的与前端一点关系也没有，但随着工作的深入，自身能力的提高，兴趣点发生转移也不是不可能。

互联网瞬息万变，前端行业发展喜人，Web 2.0网站风光无限，同时也给从业者提出很多新的要求。而你跟随时代的脚步有多紧，很大程度上决定了你将来会有多成功。目前互联网前所未有地渗入移动设备，因此可以看出手机等移动设备上的开发潜力是非常大的，淘宝已经新成立了无限事业部，联通的“iPhone拥有各种应用程序”广告铺天盖地地袭来，你还在等什么呢？

原文：伯乐在线

序列化提取表单值： serialize()用法

weiking — Wed, 02 Nov 2011 09:05:41 +0000

今天去python后台ajax方式提交时候，发现我们有个动态表单（随着用户的添加自动增加表单），这样情况下，我们就不能用传统的手动固定data：’name=abc&sex=1′这种形式来请求，必须把所有表单的值都全部自动提取出来，这样情况下，serialize()隆重登场（之前傻逼没用到过，还是其他哥们提示的，恨自己！！）。

jquery中serialize()用法：序列化表单值

<html>
<head>  
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("div").text($("form").serialize());
      });
    });
</script>
</head>
 
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
select: <select name="sel">
<option>ppp</option>
<option checked="checked">aaa</option>
</select>
<input type="radio" name="radio" value="radio1" checked="checked"/> 单选
</form>
 
<button>序列化表单值</button>
<div></div>
</body>
</html>

返回结果：FirstName=Bill&LastName=Gates&sel=ppp&radio=radio1

Javascript中有关时间的获取

weiking — Wed, 02 Nov 2011 05:31:09 +0000

Javascript中有关时间的获取，整理了下：

<script type="text/javascript" language="JavaScript">// 
var myDate = new Date();
myDate.getYear();       //获取当前年份(2位)
myDate.getFullYear();   //获取完整的年份(4位,1970-????)
myDate.getMonth();      //获取当前月份(0-11,0代表1月)
myDate.getDate();       //获取当前日(1-31)
myDate.getDay();        //获取当前星期X(0-6,0代表星期天)
myDate.getTime();       //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();      //获取当前小时数(0-23)
myDate.getMinutes();    //获取当前分钟数(0-59)
myDate.getSeconds();    //获取当前秒数(0-59)
myDate.getMilliseconds();   //获取当前毫秒数(0-999)
myDate.toLocaleDateString();    //获取当前日期
var mytime=myDate.toLocaleTimeString();    //获取当前时间
myDate.toLocaleString( );       //获取日期与时间
if (mytime<"23:30:00"){
   alert(mytime);
}
// ]]>

onmousemove与onmouseover，onmouseup与onmoseclick那点事

weiking — Sun, 30 Oct 2011 09:34:48 +0000

一：onmousemove与onmouseover的区别

时间上 onmousemove 事件触发后，再触发 onmouseover 事件。

按钮上不区分鼠标按钮。

动作上 onmouseover 只在刚进入区域时触发。 onmousemove 除了刚进入区域触发外，在区域内移动鼠标，也会触发该事件。

当鼠标移动很快时，可能不会触发这两个事件

二：onmouseup与onmoseclick区别

时间上 onmouseup 事件触发后，再触发 onclick 事件。

按钮上 onmouseup 检测鼠标任意键（包含滚轮），onclick只有在鼠标左键时触发。

动作上 onmouseup 侧重于检测鼠标弹起，而 onclick 检测鼠标按下并弹起。在文档任意区域按下鼠标，甚至用 Alt+Tab 切换任务，再 Alt+Tab 切换回来，再将指针移到控件上，放开鼠标，仍可触发 onmouseup 事件；而 onclick 必须在同一元素上按下并释放（在鼠标按下与释放之间切换任务时，IE 不再承认 onclick，NS 则仍承认）。

html邮件edm模板设计中应该注意的问题

weiking — Mon, 24 Oct 2011 06:32:44 +0000

这些天战争项目组Facebook平台中用到Email邮件发送，我们之前用的是自己的邮件系统，但是被当作垃圾邮件几率很高，由于Facebook平台也有自己邮件接口，所以我这次就尝试用Facebook自己的notifications.sendEmail接口来处理。

Facebook发送邮件接口：notifications.sendEmail

FB.api(
  {
    method: 'notifications.sendEmail',
    recipients: userId,//接收人Id，多人id，用“，”分开
    subject: subject,
    text: text,//純文本郵件發送方式
    fbml: fbml,//MIME郵件發送方式，如果與text方式發送，優先等級提高
    callback:function() {
    }
  },
    function(response) {//延迟返回值
      //alert("success");
    }
);

PS：MIME邮件方式，参考维基百科

Html模板中注意的问题：

1、全局规则之一，不要写

王魏前端博客

html5 新增语义化标签

Header

Subtitle

HTML5 Rocks

Article Header

Article Header

Related Posts

Recent Comments

浅析JavaScript和PHP中三个等号（===）和两个等号（==）的区别

Related Posts

Recent Comments

jQuery(function(){})与(function(){})(jQuery)的区别

Related Posts

Recent Comments

Javascript如何解析array与object

Related Posts

Recent Comments

什么人适合做前端工程师？

Related Posts

Recent Comments

序列化提取表单值： serialize()用法

Related Posts

Recent Comments

Javascript中有关时间的获取

Related Posts

Recent Comments

onmousemove与onmouseover，onmouseup与onmoseclick那点事

Related Posts

Recent Comments

html邮件edm模板设计中应该注意的问题

Html模板中注意的问题：