花生米

canvas的drawImage函数

without comments

HTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型：

drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。dx和dy是image在canvas中定位的坐标值；dw和dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值；sx和sy是image所要绘制的起始位置，sw和sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值。

测试代码:

<canvas id=”canvas” width=”300″ height=”300″>this browser does not support canvas…</canvas>
<script type=”text/javascript”>
window.onload=function(){
var ctx=document.getElementById(‘canvas’).getContext(’2d’);
var img=new Image();
img.src=’kaixin.jpg’;
img.onload=function(){
ctx.drawImage(img,0,0);
}
}
</script>

转载：http://garey.bsdart.org/2010/06/canvas%E7%9A%84drawimage%E5%87%BD%E6%95%B0/

Written by davidycx

十二月 22nd, 2011 at 4:35 上午

Posted in 转载

Tagged with html5

让你提升命令行效率的 Bash 快捷键 [完整版]

without comments

生活在 Bash shell 中，熟记以下快捷键，将极大的提高你的命令行操作效率。

编辑命令

Ctrl + a ：移到命令行首
Ctrl + e ：移到命令行尾
Ctrl + f ：按字符前移（右向）
Ctrl + b ：按字符后移（左向）
Alt + f ：按单词前移（右向）
Alt + b ：按单词后移（左向）
Ctrl + xx：在命令行首和光标之间移动
Ctrl + u ：从光标处删除至命令行首
Ctrl + k ：从光标处删除至命令行尾
Ctrl + w ：从光标处删除至字首
Alt + d ：从光标处删除至字尾
Ctrl + d ：删除光标处的字符
Ctrl + h ：删除光标前的字符
Ctrl + y ：粘贴至光标后
Alt + c ：从光标处更改为首字母大写的单词
Alt + u ：从光标处更改为全部大写的单词
Alt + l ：从光标处更改为全部小写的单词
Ctrl + t ：交换光标处和之前的字符
Alt + t ：交换光标处和之前的单词
Alt + Backspace：与 Ctrl + w 相同类似，分隔符有些差别 [感谢 rezilla 指正]

重新执行命令

Ctrl + r：逆向搜索命令历史
Ctrl + g：从历史搜索模式退出
Ctrl + p：历史中的上一条命令
Ctrl + n：历史中的下一条命令
Alt + .：使用上一条命令的最后一个参数

控制命令

Ctrl + l：清屏
Ctrl + o：执行当前命令，并选择上一条命令
Ctrl + s：阻止屏幕输出
Ctrl + q：允许屏幕输出
Ctrl + c：终止命令
Ctrl + z：挂起命令

Bang (!) 命令

!!：执行上一条命令
!blah：执行最近的以 blah 开头的命令，如 !ls
!blah:p：仅打印输出，而不执行
!$：上一条命令的最后一个参数，与 Alt + . 相同
!$:p：打印输出 !$ 的内容
!*：上一条命令的所有参数
!*:p：打印输出 !* 的内容
^blah：删除上一条命令中的 blah
^blah^foo：将上一条命令中的 blah 替换为 foo
^blah^foo^：将上一条命令中所有的 blah 都替换为 foo

友情提示：

以上介绍的大多数 Bash 快捷键仅当在 emacs 编辑模式时有效，若你将 Bash 配置为 vi 编辑模式，那将遵循 vi 的按键绑定。Bash 默认为 emacs 编辑模式。如果你的 Bash 不在 emacs 编辑模式，可通过 set -o emacs 设置。
^S、^Q、^C、^Z 是由终端设备处理的，可用 stty 命令设置。

Written by davidycx

十一月 13th, 2011 at 5:12 下午

Posted in 转载

twitter的坚持

without comments

这几天一直在穿墙上twitter和facebook，也许是人人和微博玩腻了，去找找新鲜感，虽说国内都是抄人家的，但是都做了很大的改动。
我来说说twitter，和国内的新浪微博相比，twitter好像没有以前那么火了，而且经常上新浪微博的朋友换到twitter可能有些不适应。想对于新浪微博发布的内容，twitter的显得很枯燥，在twitter的时间轴上，只显示文字和链接，而新浪微博除了显示文字之外，还有图片缩略图，视频，链接，表情，音乐，投票。种类丰富，我相信在不久的将来还会有新的东西可以显示，但twitter从诞生之日起在时间轴上显示的内容没有太大变化，只有文字和链接（确切的说链接也是文字而已），如果你的推文里面含有图片或视频，要点击推文，这条推文会在右侧展开，哪里会显示详细的推文内容和图片，还有此推文的回复等信息。

所以我在想，为什么twitter不像新浪微博一样，把图片的缩略图放到时间轴的每条推文上，这样大家看每条信息的时候就不用在点一下，而且内容看起来更丰富些。看大家在新浪微博上玩的也都不亦乐乎，但是twitter好像并没有这样，它在坚持什么呢！我一开始并没有想通，甚至简单的认为可能这就是美国和中国的文化差异吧！这TMD好像成了思维定式，凡是我们没想通的和我们不能解释的都用文化差异和中国特色一笔带过，直到今天当我反复的上twitter和新浪微博，不断的比较之后，我发现我在twitter读每条消息的时候要比新浪微博是要容易很多，而且没有其他元素的打扰（如图片之类），我一眼就能看出一条推文表达的是什么？如感兴趣点击详细的查看，不感兴趣继续看下一条。这样的阅读体验很好。而在新浪微博则有很大的不同。我截取了两站图片来说明我的观点。

新浪微博很多博文里都含有图片，新浪会把图片的缩略图放到博文下面，这使我的注意力首先在图片上面，以至于很多时候根本就不会去看博文的文字到底写了些什么, 只是扫了一眼图片就看下一条了。而且微博里的图片缩略图占用了很多屏幕的高度，如上图中，同样的高度twitter可以放6条消息，新浪微博只能放3条。所以很多时候我看微博都是在快速的往下拉滚动条，而实际上没看什么实质的内容。除了我感兴趣的和我认识的人的我会仔细的看下外，基本上刷了半天微博没有什么实质的阅读而言。

虽然新浪微博在形式上很讨好中国当前用户的习惯，但是就对用户的阅读体验来说是又背于微博的这个概念的。微博的崛起是人们越来越没有耐心坐在电脑前阅读长篇大论的文章，就好像我写的这篇，多半也是没有几个人会有耐心的看下去，而微博140个字的文字可以让人很快的读完。

在身边没有电脑的情况下，大家多半是用手机来上网，我当然也不例外，我的手机比较低端，是nokia的很便宜的一款。忘了什么型号，记得当时200多买的。虽然上网有点慢，还算勉强能上微博，这时我发现一个有趣的现象，由于手机上网慢，每条微博只能显示文字和链接，如果有图片的话，会有一个“看图”的链接，点击后才能看到图片。我经常会在睡前用手机上会网，我发现这时上微博比电脑上微博时得到的信息要多，注意力更加的集中，由于不能显示图片我只有一条条的去看每条的内容是什么，少了很多的分散注意的东西，在简单到只有文字的时候反而觉得阅读的体验很好。

看国内的微博，新浪，腾讯，搜狐，都是选择了像新浪一样的改良模式，我不清楚最早是哪家开始这样做的，但是现在已经基本上都趋同了。无疑这种方式是最讨好用户的方式。很有娱乐性，只要上面有八卦话题，有美女图片，性笑话就不愁没有用户，但是从本质上来说这是一种极其短视的行为。

但是想想如果twitter在中国的话也许活不了太长时间。因为你太有自己的思想和原则，中国是不允许人们有太有自己思想的。在这神奇的国度，没有什么是不可能的。

Written by davidycx

十一月 3rd, 2011 at 6:27 下午

Posted in 互联网

《论自由》–约翰密尔

without comments

当社会本身是暴君时，就是说，当社会作为集体而凌驾于构成它的各别个人时，它的肆虐手段并不限于通过其政治机构做出的措施，对于得势舆论和得势感想的暴虐，对于社会要借以行政处罚之外的办法来将它自己的观念当作行为准则来强加于所见不同的人，以束缚任何和它的方式不相协调的个性的发展，这种社会暴虐比许多政治压迫更可怕，因为它虽不常以极端刑罚为后盾，却使人们有更少的逃避方法，这是由于它奴役到灵魂本身——约翰密尔

Written by davidycx

十月 31st, 2011 at 12:07 下午

Posted in 杂七杂八

凡你所爱的，就让他自由。

without comments

凡你所爱的，就让他自由。

若他回来，他便是你的。

若他不回来，他便从未属于过你。

Written by davidycx

十月 23rd, 2011 at 4:45 下午

Posted in 杂七杂八

[转载]IE6下z-index经常不起作用bug的细分析

without comments

这是一个在鑫空间里转过来一篇文章，作者写的很详细，很给力，不感独享。

一、匆匆带过的概念
关于CSS中层级 z-index的定义啊什么的不是本文的重点，不会花费过多篇幅详细讲述。这里就简单带过，z-index伴随着层的概念产生的。网页中，层的概念与photoshop或是flash中层的概念是一致的。熟悉photoshop或是flash的应该知道，层级越高（图层越靠上），越在上面显示，如果层发生重叠，层级高的会覆盖层级低的，如果非透明或半透明，则会遮挡。

在photoshop中，层的高低就是靠手动调的，鼠标拖拽，或是ctrl+]或是ctrl+shift+[快捷键改变层的次序。如下图，鼠标拖移改变层次序的过程中：
photoshop改变层顺序
在flash中，类似，可以手动改变图层次序，或是使用as脚本，例如：容器对象.setChildIndex(显示对象,0)就是让对象底层显示，而容器对象.setChildIndex(显示对象,容器对象.numChildren-1)就是最上面显示。

在CSS中，显然，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。就像生孩子一样，一个人不顶用，需要配合。下为z-index的业余示意图：
z-index示意图

按照正常的思维，z-index层级越高，内容越应该在上面显示。在大部分的浏览器在大部分的情况下，确实如此，但是不绝对。尤其遇到IE6，这家伙，估计是后妈带大的，从小营养不良，结果后来健康问题一堆又一堆。z-index的问题就是其中之一，而本文就是要讲讲这个IE6下z-index不起作用的问题。

二、关于效果截图的些必要说明
下面的不是废话，是为了更容易的理解我下面唾沫横飞的内容。

以下所有结果截图的大背景如下：
1、页面上固定不动的，一成不变的，送豪宅也不会从良的是一个黑色背景，透明度40%，几乎满屏显示的层级为1的绝对定位层。HTML为：<div id="blank"></div>，对应CSS为：#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40);position:absolute; left:0; top:0; z-index:1;}

作用是为了让层级关系一目了然。看：
内容位于半透明层之下
这说明内容在z-index为1的绝对定位层之下。

内容位于层之上
这说明内容在z-index为1的绝对定位层之上。

2、页面上做对比的是美女图片，图片在半透明黑色绝对定位层的上面还是下面很容易辨别，这样，您就能够对我所说的z-index不起作用有很直观的认识了。

三、IE6的抱怨：浮动让我沉沦
现在开始真正的讲述问题的产生，原因以及解决了。首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个：1、父标签position属性为relative；2、问题标签无position属性（不包括static）；3、问题标签含有浮动(float)属性。
您可以拿下面的代码自己做个简单测试：

<div id=”blank”></div>
<div style=”position:relative; z-index:9999;”>
<img style=”float:left;” src=”http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg” />
</div>
丫的，这z-index都9999了，层级够高吧，但是，看下面的图：
IE6下的9999不管用
Firefox下图片层级正常

这一对比就知道问题了，可能有人会疑问，这会不会是IE6的relative自己感冒了，而不是浮动(float)携带了“甲流病毒”。好，我现在去掉浮动，HTML代码如下：
<div id=”blank”></div>
<div style=”position:relative; z-index:9999;”>
<img src=”http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg” />
</div>
结果IE6下：
IE6下的层级正常

您可以狠狠地点击这里：在线demo测试

我想，问题应该都清楚了，至于原因，我起初以为是haslayout搞的鬼，后来，用zoom一测试，发现不是（IE7下无此bug也证明不是haslayout的原因），似乎就是这个float会让z-index失效。由于将外部div的position:relative属性改为absolute可以解决这一问题，我就怀疑是不是浮动让relative发生了些变化，float与relative在水平定位上可以说是近亲，会不会是因为这两者搅和在一起所以什么“畸形”“体弱多病”就出现了。这仅是我的猜测而已，真正的原因还是去问IE6的后妈吧。

解决方法，解决方法有三，1、position:relative改为position:absolute；2、去除浮动；3、浮动元素添加position属性（如relative，absolute等）。

四、固执的IE6：它只认第一个爸爸
可能不少人知道，这IE6下，层级的高低不仅要看自己，还要看自己的老爸这个后台是否够硬。用术语具体描述为：
父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

有一定经验的人可能都知道上面的事实。但是，相信这里面很多人不知道IE6下，决定层级高低的不是当前的父标签，而是整个DOM tree（节点树）的第一个relative属性的父标签。有时平时我们多处理一个父标签，z-index层级多而复杂的情况不多见，所以难免会有认识上的小小偏差。

好，下面展示这个bug。

条件很简单，只要绝对定位的第一个元素的第一个爸爸，或者说是最老的那个爸爸级别的人的relative属性小于黑色半透明层的z-index层级。例如下面的HTML代码：
<div id=”blank”></div>
<div style=”position:relative;”>
<div style=”position:relative; z-index:1000;”>
<div style=”position:absolute; z-index:9999;”>
<img src=”http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg” />
</div>
</div>
</div>
可以看到，mm3图片的父标签div 是绝对定位，层级9999，比1大多了，绝对定位的父标签层级1000(10000也一样)，也比黑色半透明层的z-index:1大多了，但是，我们可怜的IE6童鞋——
IE6童鞋的层级表现

再看看以Firefox为代表的其他童鞋：
Firefox童鞋的层级表现

IE7与IE6有着同样的bug，原因很简单，虽然图片所在div当前的老爸层级很高(1000)，但是由于老爸的老爸不顶用，可怜了9999如此强势的孩子没有出头之日啊！

第一个老爸不行

知道原因解决就很轻松了，给第一任老爸添加z-index后的HTML代码如下：
<div id=”blank”></div>
<div style=”position:relative; z-index:1;“>
<div style=”position:relative; z-index:1000;”>
<div style=”position:absolute; z-index:9999;”>
<img src=”http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg” />
</div>
</div>
</div>
结果IE6童鞋喜笑颜开，春光灿烂：
IE6的第一任老爸强势后

您可以狠狠地点击这里：改变父标签层级在线demo测试

五、必要的结语
老实讲，我对z-index研究的精力其实比较有限，本文的两个bug研究都属于停留在表层的。z-index这玩意深不可测，里面所蕴含的知识不是 CSS手册上的那点东西，那只是冰山一角。这涉及到border及background的堆叠模型，涉及到同层级的显示问题，以及浏览器显示的些机制等，这是很深的一潭水。

总之，慢慢来，慢慢积累，慢慢研究，一定会一步一步揭开z-index的本质面纱的。

Written by davidycx

十月 20th, 2011 at 3:37 下午

Posted in css,转载

whocare.org复活了

without comments

whocare.org复活了

Written by davidycx

十月 20th, 2011 at 2:38 下午

Posted in 杂七杂八

win7 下配置nginx+php测试环境

without comments

（更新中.. 软件安装在D:\webserver下，网站根目录D:\webroots）

1. 安装php

下载：http://windows.php.net/download/

这里下载PHP 5.2 (5.2.13)版本的VC6 x86 Non Thread Safe (2010-Feb-24 15:38:53) ZIP [9.95MB]

(最新的版本5.3.2一些软件不支持，比如下面的Zend Optimizer)

Notes:php版本选择

a.VC6版本是使用Visual Studio 6编译器编译的，如果你的php是用Apache来架设，就选择vc6版本；VC9版本是使用Visual Studio 2008编译器编译的，如果你的php使用IIS来架设的，就选择vc9版本

b.PHP的两种执行方式：ISAPI和FastCGI。ISAPI执行方式是以DLL动态库的形式使用，可以在被用户请求后执行，在处理完一个用户请求后不会马上消失，所以需要进行线程安全检查，这样来提高程序的执行效率，所以如果是以ISAPI来执行PHP，建议选择Thread Safe版本；而FastCGI执行方式是以单一线程来执行操作，所以不需要进行线程的安全检查，除去线程安全检查的防护反而可以提高执行效率，所以，如果是以FastCGI来执行PHP，建议选择Non Thread Safe版本。

解压缩至D:\webserver\php-5.2.13\

复制一份php.ini-recommended，更名为php.ini。查找下面几项，更改php.ini配置：其中extension_dir指定扩展位置;

error_reporting = E_ALL
display_errors = On
extension_dir = "D:\webserver\php-5.2.13\ext"
doc_root =
cgi.fix_pathinfo = 1

doc_root默认为空，不要指定，否则提示”No input file specified”

最后一句解除注释，允许修正地址，nginx将php请求交与Fast CGI Server处理

（尚未开启mysql和pdo）

2. 安装nginx

下载：http://nginx.org/en/download.html

这里也下载了最新的nginx/Windows-0.8.36

解压缩至D:\webserver\nginx-0.8.36

将conf\nginx.conf配置如下：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  64;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        charset utf-8;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:\webroot;
            index  index.html index.php;
        autoindex on;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        location ~ \.php$ {
        #    root           D:/webroot;
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_param  SCRIPT_FILENAME  D:/webroot$fastcgi_script_name;
            include        fastcgi_params;
        }

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

    # HTTPS server
    #
    #server {
    #    listen       443;
    #    server_name  localhost;

    #    ssl                  on;
    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_timeout  5m;

    #    ssl_protocols  SSLv2 SSLv3 TLSv1;
    #    ssl_ciphers  ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
    #    ssl_prefer_server_ciphers   on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

其中

worker_processes 1;只默认开启一个进程

work_connections 64;测试服务器的话，一个进程允许64个最大连接数就可以了

server中listen 80;常与IIS冲突，在logs\error.log中会看到如下提示：

2010/05/03 23:22:02 [emerg] 3492#5004: bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)

解决办法最好关闭IIS或更改掉IIS开启的端口

location / 指定网站根目录

添加autoindex on;允许目录结构查看

在location ~ \.php$中修改nginx，将php请求转发给PHP FastCGI Server.

这里SCRIPT_FILENAME路径最好使用/，防止用\被解析为特殊字符，如\t是制表符

3. 开启关闭nginx

开启：

在php-5.3.2目录下新建bat如下，开始php-cgi，开启后任务管理器能看到php-cgi.exe

php-cgi -b 127.0.0.1:9000

php-cig这个dos窗口需要长开着，如果需要隐藏可以去这里下载一个小软件

http://blogbuildingu.com/files/RunHiddenConsole.zip

然后双击nginx.exe，任务管理器能看到nginx.exe

在D:\webroot目录下新建index.php

<?php
phpinfo();
?>

访问http://localhost/就可以正常使用了

关闭：

新建bat如下

taskkill /F /IM nginx.exe > nul
taskkill /F /IM php-cgi.exe > nul

Written by davidycx

九月 4th, 2011 at 6:09 下午

Posted in 转载

HTML5 中 div section article 的区别

without comments

刚刚开始接触 HTML5 时，对它的标签很不适应，甚至一度有点反感。尤其是对 div、section、article 这几个标签，实在弄不清楚应该使用在什么场合下。
HTML Spec: “The div element has no special meaning at all.”

这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义，用作布局以及样式化或脚本的钩子(hook)。

section

HTML Spec: “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”

与 div 的无语义相对，简单地说 section 就是带有语义的 div 了，但是千万不要觉得真得这么简单。section 表示一段专题性的内容，一般会带有标题。看到这里，我们也许会想到，那么一篇博客文章，或者一条单独的评论岂不是正好可以用 section 吗？接着看：

“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

当元素内容聚合起来更加言之有物时，应该使用 article 来替换 section 。

那么，section 应该什么时候用呢？再接着看：

“Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.”

section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。其实我对这里传达信息很感兴趣，因为感觉 section 和下面要介绍的 artilce 更加适用于模块化应用，这个话题以后会出篇专门的文章来讨论，这里暂时略过。

要注意，W3C 还警告说：

“The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.”

section 不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时，应该使用 div 。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>

article

HTML Spec: “The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.”

article 是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说， article 会有标题部分(通常包含在 header 内)，有时也会包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。

HTML Spec 中接着又列举了一些 article 适用的场景。 “This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”

当 article 内嵌 article 时，原则上来说，内部的 article 的内容是和外层的 article 内容是相关的。例如，一篇博客文章中，包含用户提交的评论的 article 就应该潜逃在包含博客文章 article 之中。

问题是怎么才算“完整的独立内容”？有个最简单的判断方法是看这段内容在 RSS feed 中是不是完整的。看这段内容脱离了所在的语境，是否还是完整的、独立的。

例子：

<article>
 <header>
  <h1>The Very First Rule of Life</h1>
  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <footer>
  <a href="?comments=1">Show comments...</a>
 </footer>
</article>

<article>
 <header>
  <h1>The Very First Rule of Life</h1>
  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article>
   <footer>
    <p>Posted by: George Washington</p>
    <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article>
   <footer>
    <p>Posted by: George Hammond</p>
    <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>

总结

div section article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化的钩子(hook)，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。nav 和 aside 的使用也是如此，这两个标签也是特殊的 section，在使用 nav 和 aside 更合适的情况下，也不要使用 section 了。

对于 div 和 section、 article 以及其他标签的区分比较简单。对于 section 和 article 的区分乍看比较难，其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在，这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块，但是它只能算是组成整体的一部分，article 才是一个完整的整体。

因为其实有些时候每个人都有自己的看法，所以难免有难于决断的时候，怎么办？

在 HTML5 设计原理中，有一条是专门用来解决类似情况的：

最终用户优先(Priority of Constituencies)

“In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.” 一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满。

推荐各位多读几遍 HTML5 设计原理，这才是纷繁世界背后的最终奥义。

Written by davidycx

四月 28th, 2011 at 10:59 下午

Posted in 转载