HTML5 Canvas

hmtl5的canvas的使用确实要方便的多,只需掌握起基本的绘画语法就可以随心所欲的进行创作了,与js的结合则更加的完美。学习了一下canvas的基本语法,绘制了一个时钟同时使用javascript的定时器将其与本地时间保持同步。
canvas基本语法:
1、getContext(“2d”);//配置绘制环境,即2d绘制
2、clearRect(x,y,width,height);//清除画布,x为画布水平坐标,y为画布垂直坐标,width与height制定画布的范围
3、moveTo(x,y)绘图起点
4、lineTo(x,y)绘图终点
5、stroke()描边
6、fill()填充
7、fillStyle区块填充颜色
8、strokeStyle边框填充颜色
9、lineWidth设置边框宽度
10、arc(水平坐标,垂直坐标,半径,弧度起点,弧度终点,false/true);//false为顺时针绘画,true为逆时针绘画
注释:arc需要重点看一下,因为里面涉及到弧度与度数之间的转换1°=2π/360
11、beginPath()与closePath()封闭绘画区域

css style代码

body{background:black;}
#c1{background:white;}

HTML代码

<canvas id="c1" width="400" height="400"></canvas>

注释:canvas直接在行内定义width、height与在style里定义是有区别的,canvas画布默认值width为300px,height为150px,如果在style里面定义canvas的width、height则是对画布里元素进行比例缩放,有点scale的味道!具体缩放的比例则看定义的值与默认值的比例关系。
javascript代码

var oC = document.getElementById("c1");
	var oGc = oC.getContext("2d");//配置绘制环境,即2d绘制
	function toDraw(){
		var x = 200;
		var y = 200;
		var r = 150;
		oGc.clearRect(0,0,oC.width,oC.height);
		//获取时间
		var oDate = new Date();
		var oHours = oDate.getHours();
		var oMin = oDate.getMinutes();
		var oSen = oDate.getSeconds();
		//时针值
		var oHoursValue = (-90 + oHours * 30 + oMin/2)*Math.PI/180;
		var oMinValue = (-90 + oMin * 6 + oSen/10)*Math.PI/180;
		var oSecValue = (-90 + oSen * 6)*Math.PI/180;
		//秒针分区
		oGc.beginPath();
		for(var i = 0;i<60;i++){
			oGc.moveTo(x,y);
			oGc.arc(x,y,r,6*i*Math.PI/180,6*(i + 1)*Math.PI/180,false);//弧度计算
		}
		oGc.closePath();
		oGc.stroke();
		//秒针遮罩
		oGc.fillStyle = "white";
		oGc.beginPath();
			oGc.moveTo(x,y);
			oGc.arc(x,y,r*19/20,0,360*Math.PI/180,false);
		oGc.closePath();
		oGc.fill();
		
		//分针分区s
		oGc.lineWidth = "2";
		oGc.beginPath();
		for(var i = 0;i<12;i++){
			oGc.moveTo(x,y);
			oGc.arc(x,y,r,30*i*Math.PI/180,30*(i + 1)*Math.PI/180,false);//弧度计算
		}
		oGc.closePath();
		oGc.stroke();	
		//分针遮罩
		oGc.fillStyle = "white";
		oGc.beginPath();
			oGc.moveTo(x,y);
			oGc.arc(x,y,r*19/20,0,360*Math.PI/180,false);
		oGc.closePath();
		oGc.fill();
		
		//时针指针
		oGc.lineWidth = "5";
		oGc.beginPath();
		oGc.moveTo(x,y);
		oGc.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
		oGc.closePath();
		oGc.stroke();
		//分针指针
		oGc.lineWidth = "3";
		oGc.beginPath();
		oGc.moveTo(x,y);
		oGc.arc(x,y,r*14/20,oMinValue,oMinValue,false);
		oGc.closePath();
		oGc.stroke();
		//秒针指针
		oGc.lineWidth = "1";
		oGc.beginPath();
		oGc.moveTo(x,y);
		oGc.arc(x,y,r*18/20,oSecValue,oSecValue,false);
		oGc.closePath();
		oGc.stroke();
		//中心圆轴
		oGc.fillStyle = "black";
		oGc.beginPath();
			oGc.moveTo(x,y);
			oGc.arc(x,y,r*0.8/20,0,360*Math.PI/180,false);
		oGc.closePath();
		oGc.fill();	
	}
	toDraw();
	setInterval(function(){
		toDraw();
	},1000);

效果

关于像素的是是非非

注:这是一篇两年前的文章,现在看来依然能给大家带来不少启发,作者做预期的方案已经开始广泛实施。文中有些地方翻译的有失准确,见谅。

我现在在研究扩浏览器手机设备的宽高方面搞的我焦头烂额,但是我可以声明这些硬件的变化,99%的和网页开发没有任何关系。

但是剩下的这1%就变得更棘手了,我希望苹果能通过增加一个中间像素层来解决这个问题。(后面John pointed out 指出这个中间层在 Android 系统下早就存在了。)

在我们开始之前我必须做一个说明:因为这些东西对网页开发人员并不是那么重要,因此我大多数情况会忽略掉正式的屏幕尺寸,同时我也没有真正的去研究关于显示、像素密度和其它负责的理念。因此我可能会使用了错误的专业术语,对此先道歉。

网页开发工程师需要啥?

我知道网页开发工程师所关心的,他们需要像素(pixels).也就是说,他们需要“pixels”让他们可以在css声明中使用 如 width: 300px or font-size: 14px.

这些像素值和实际的设备像素密度没有一点关系,甚至和传闻中的中间层也没有任何关系。对网页设计是来说,它们是一个基本的抽象的结构。

如果我们通过缩放来解析这个东西,可能会更容易理解。如果用户放大,一个有 width:300px 的元素将会在屏幕中越来越大。如果我们用设备的(物理的)像素来测量的话,它也会变的越来越大,根据需要通过放大的作用我们可以通过扩展css 像素的大小。

当缩放比例刚好是100%的时候,一个css 像素等于1个设备像素(因此传闻中的中间层的像素值将和替代设备像素值)。下面的图片描述了这种情况,我们看不到多出来的东西,因为css的一个像素刚好覆盖了一个设备像素。


(我必须提醒你的是,放大到100%在web开发中的意义并没有意义。放大级别对我们来说不重要,我们需要的仅仅是我们当前的显示器多少像素最合适。)

下面的两幅图谱阿布描述了用户使用放大功能时的情形。第一幅图像表现当用户缩小时,设备的像素点(深蓝色背景)和CSS像素(半透明的前景)。CSS中定义的像素变的更小,一个设备像素包含多个CSS像素。第二幅图像展示了当用户放大的时候,设备像素和css像素之间的关系。现在一个CSS像素覆盖在多个设备像素上面。

因此,我们用CSS定义的一个宽度为300像素的元素它的宽度任何时候都等于300像素,一个像素等于多少设备像素值取决于我们放大的程度。

(你可以通过使用 screen.width 除以 window.innerWidth 得出这个系数。 目前浏览器的不兼容还是挺普遍的;期待在不久的将来有个相对全面的报告。另外,作为网页开发人员你也不会关心放大系数,而仅仅关心多少像素(设备的或者CSS的)才能适应设备屏幕)。

这套系统并没有改变,否则,所有针对iPhone 优化过的站点将立刻变成没有优化过的,这也是苹果要不惜一切代价避免的。

因此,一个即使是放大到最大程度的网站依然显示980 CSS 像素的原因,我们也不会关注有多少设备的像素和它刚好合适,这对我们并不重要

最棘手的问题

这里有两个棘手的问题:device-width 的媒体查询技术 和 <meta name=”viewport” width=”device-width” >标签。这两个都是基于设备 像素的,而不是 CSS 像素,因为他们报告的是页面的内容,而不是CSS生效的内容。

媒体介质查询

device-width 媒体查询测量的设备宽度使用的是设备本身的像素值。width 的媒体查询技术测量的是页面中CSS定义的页面像素值,在iPhone 上面,这个值最少是980px像素,这个我将在后面给大家解释。

device-width 媒体查询技术的工作流程是下面的样子:


div.sidebar {
width: 300px;
}

@media all and (max-device-width: 320px) {
// styles assigned when device width is smaller than 320px;
div.sidebar {
width: 100px;
}

}

现在边栏(siderbar)的宽度是css定义的300像素,除非设备的宽度等于或小于320像素,在这种情况下它才能变成100 CSS像素宽度。(如果你继续看下去,这个将变得很复杂。)

顺便提一下,从理论上来说你可以通过厘米或者英尺来应用媒体查询技术(@media all and (max-device-width: 9cm)。但是不幸的是好像并不被完全的支持,甚至是iPhone 设备。原因是物理单位类似于英尺一般会被转换成(css)像素,我在所有浏览器上测试,绝大多数情况 width:1in 等于96像素。因此这些媒体查询并不可靠。

<tag>标签

通常情况下,<meta name=”viewport” width=”device-width”>更有用。这个属性,最初是苹果设备的专用属性,但是现在被越来越多的浏览器所支持,使视窗布局和设备完全匹配。

那么什么是视窗布局呢?这是一个区域(使用CSS像素),浏览器通过使用百分比的方式计算元素的尺寸,比如 div.siderbaer{width:20%}.一般情况下在iPhone设备上会比设备的屏幕980像素大一些,Opera 850像素,Android 800 像素,等。


如果你增加了 <a name=”viewport” width=”device-width”>,视窗的布局将会被限制在设备像素宽度内;在iPhone 设备下是320像素。

如果你的页面足够窄来适应屏幕。将页面CSS中的 width 声明全部去掉和不使用 <meta> 标签。这样就能将内容延伸到适应整个视窗宽度的页面。

这可能并不是你要的结果。你期望文本能完美的适应屏幕,那这就是 <meta name=”viewport” width=”device-width”> 了。当你把它加进去的时候,页面的视窗布局就会伸缩(在iPhone下到 320px),这样子文本就能适应了。


苹果的改变

当苹果分辨率变化时会对 device-width 媒体查询 和 meta 标签产生影响吗?当然我还不能确定,但是我希望对页面开发没有任何变化。

meta 标签

meta 标签方面最容易解释。Apple 专门发明它,为了让用户在iPhone 上的内容呈现更精准,并不遗余力的推广给开发者。这也意味着通过 <meta> 标签读出的设备宽度不会改变。

事实上, Nexus One 是Apple的开路先锋。它的官方屏幕宽度(在竖屏下)是480px,但是当你部署 <meta>时,它会吧屏幕宽度定义为 320px,是官方宽度的 2/3。

如果我理解的正确,这就是 John Gruber 讨论的talking about Nexus 的显示和它会丢失额外的一像素,这就导致了比实际像素数少了 1/3.这样子就使 Nexus 得到的<meta>准确。

从基本上说 Google 已经增加了一个被称为dips的层;device-independent pixels。这个层来自于官方,被称为屏幕尺寸和网站开发者使用的CSS像素。

应此我希望新的iPhone也使用 Nexus 的方法,当我们使用<meta>标签媒体查询将屏幕尺寸汇报为320px(也就说是正式分辨率的一半)。它将是一半而不是2/3,因为新iPhone的像素密度比Nexus 高更多。

媒体查询

这样就剩下 dveice-width 媒体查询成了一个唯一的问题区域。当Nexus使用480px作为屏幕宽度的时候,事实也证明320像素可能更合适。我们将会看看Apple在这方面怎么做。

另一个重要的问题是,是否把中间层(dips)也作为媒体查询的一个条件。总体上我希望是这样,事实的设备宽度对网页开发人员来说并不重要,我们希望知道我们能在屏幕上呈现多少内容,dips 中间层看起来更能适应这个要求。

不幸的是,Nexus 现在并不支持,目前媒体查询技术还仅仅关注 device-width 仍然是480px,而不是 320px。但是可能 Apple 能为网页开发者解决这个问题。

因此现在的情况对普通网站和使用 <meta>就比较明朗了;当使用媒体查询的时候,问题就变的复杂了。

让我们拭目以待。

中文原文:关于像素的是是非非
英文原文:A pixel is not a pixel is not a pixel
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

使用CSS3媒体查询技术创造响应式设计

显示器的分辨率的范围越来越宽泛了,从苹果的 320px(iphone)到 2560px(大显示器其)甚至更大。用户浏览网页的的设备也不仅仅是桌面电脑了。现在用户使用手机,上网本,平板电脑设备如iPad 或者 Playbook 等来登录网站。因此传统的固定宽度的设计的方法将不再适用。网页设计需要更广的适应性。布局需要能自动适应的分辨率和解析设备。下面的教程将会大家展示如何通过HTML5和 css3 的媒体介质查询技术 创建跨浏览器的响应式设计,

View Demo Responsive Design

Download Demo ZIP

看效果先

在我们开始之前,先让我们看看最终的效果final demo。缩放你的浏览器来看其布局的基于视窗的变化。

overview

更多的例子

If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr.

概要

页面容器的宽度为980px,这样的宽度对分辨率大于1024px的设备来说是比较合适的。媒体介质查询技术将会检测视窗是不是小于980像素的宽度,然后布局将会从固定宽度的布局转换成流动布局(fluid width)。当视窗小于650px时,将会扩展内容容器和边栏为全部宽度时期成为单独一列布局。

overview

HTML 代码

在这里我就不赘述HTML代码了。下面就是主要的布局结构。这里有一个 “pagewrap” 容器,包含 “header”,“content”,“siderbar”和“footer”。

<div id="pagewrap">

	<header id="header">

		<hgroup>
			<h1 id="site-logo">Demo</h1>
			<h2 id="site-description">Site Description</h2>
		</hgroup>

		<nav>
			<ul id="main-nav">
				<li><a href="#">Home</a></li>
			</ul>
		</nav>

		<form id="searchform">
			<input type="search">
		</form>

	</header>
	
	<div id="content">

		<article class="post">
			blog post
		</article>

	</div>
	
	<aside id="sidebar">

		<section class="widget">
			 widget
		</section>
						
	</aside>

	<footer id="footer">
		footer
	</footer>
	
</div>

HTML5.js

请注意我在例子中使用了html5标签。IE9一下的浏览器将不支持这些标签元素,比如<header;><article;><footer;><figure;>等等。包含 html5.js 文件将会是这些浏览器明白这些新元素。

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS

将新HTML5元素初始化为块元素

下面的css代码将会初始化HTML5元素为块元素(article, aside, figure, header, footer, etc.)。

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

主结构CSS

和上面一样,这里就不再赘述css的细节了。主“pagewrap”容器的宽度是980px,头部设置一个固定的高度160px。“content”容器设置为600px并且左浮动,“sidebar”容器280px宽右浮动。

#pagewrap {
	width: 980px;
	margin: 0 auto;
}

#header {
	height: 160px;
}

#content {
	width: 600px;
	float: left;
}

#sidebar {
	width: 280px;
	float: right;
}

#footer {
	clear: both;
}

Demo

下面就是设计的例子。请注意媒体查询技术还没有被使用。当你缩放浏览器窗口是,你将看不到布局的缩放。

css3 媒体查询那些事

下面就到了最有意思的地方-媒体介质查询media queries

引入媒体查询javascript库

IE8和更老的浏览器不支持css3的媒体查询。你可以通过加入css3-mediaqueries.js 让其在这些低版本的浏览器中生效。

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

加入媒体查询

为媒体查询创建一个新的样式表文件。请查看我的上一篇教程,了解如何使用媒体查询技术media queries

<link href="media-queries.css" rel="stylesheet" type="text/css">

小于980px的视窗是使用流布局(Fluid Layout)

小于980px的视窗时,下面的规则生效:

  • pagewrap = reset width to 95%
  • content = reset width to 60%
  • sidebar = reset width to 30%

技巧:使用百分比的值,让其容器自适应。

@media screen and (max-width: 980px) {

	#pagewrap {
		width: 95%;
	}

	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#sidebar {
		width: 30%;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}

}

视窗小于650px时(一列布局)

接下来,我们创建另一个css文件,应用于视窗小于650px的时候。

  • header = 将高度重置为 auto
  • searchform = 重新定位搜索表单,将其放在距顶5像素的位置。
  • main-nav = 将其位置重置为static
  • site-logo = 将其位置重置为static
  • site-description = 将其位置重置为static
  • content = 将其宽度重置为auto (这样可以将其容器扩展到整个宽度) 并且去掉浮动
  • sidebar = 将宽度重置为100%并且清除浮动。
@media screen and (max-width: 650px) {

	#header {
		height: auto;
	}

	#searchform {
		position: absolute;
		top: 5px;
		right: 0;
	}

	#main-nav {
		position: static;
	}

	#site-logo {
		margin: 15px 100px 5px 0;
		position: static;
	}

	#site-description {
		margin: 0 0 15px;
		position: static;
	}

	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

	#sidebar {
		width: 100%;
		float: none;
		margin: 0;
	}

}

视窗小于480px时

下面的样式将会应用于视窗最大为480时,这个宽度刚好是Iphone竖屏时的宽度。

  • html = 取消文字大小调整功能。通常,iPhone将会将文字变大,以便于更方便阅读。你可以将这个属性关闭通过增加-webkit-text-size-adjust: none 的方法.
  • main-nav = 将其文字的大小调整为90%
@media screen and (max-width: 480px) {

	html {
		-webkit-text-size-adjust: none;
	}

	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}

}

灵活的图像

为了使图片更灵活,我们可以简单的增加 max-width:100% 和 height:auto 属性。图像 max-width:100% 和 height:auto 在IE7中能很好的工作,但是在IE8中却不可以(这确实是IE的Bug)。为了修复这个问题,你可能需要增加 width:auto\9 来针对IE8 hack。

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

灵活的嵌入视频

为了让嵌入的视频更灵活,我们也会使用上面的技巧。因为未知的原因,max-width:100%(针对嵌入的元素)并不被Safari所支持。在这方面我们可以用 width:100% 来替代。

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}

初始化meta标签

通常,iPhone Safari 浏览器会缩放HTML页面来适应iPhone的屏幕。下面的 meta 标签将会告诉iPhone Safari 浏览器去使用设备的宽度来作为视窗的宽度,而不去初始的缩放。

<meta name="viewport" content="width=device-width; initial-scale=1.0">

最终效果

final demo

查看最终效果,然后缩放你的浏览器看效果。别忘记在iPhone,iPad,Blackberry上面查看效果,使用 Android 手机查看移动版本。

总结

1.媒体查询技术的向后兼容

css3-mediaqueries.js 能够使不支持媒体查询技术的浏览器支持这种技术。

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

媒体介质查询技术

通过使用css根据视窗宽度来覆盖布局结构,创造出响应式设计的技巧。

@media screen and (max-width: 560px) {

	#content {
		width: auto;
		float: none;
	}

	#sidebar {
		width: 100%;
		float: none;
	}

}

灵活的图片

使用 max-width:100% 和 height:auto 来使图片更灵活。

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

灵活的嵌入媒体

使用 width:100% 和 height:auto 使嵌入的视频更灵活。

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}

Webkit 浏览器文本缩放:

使用 -webkit-text-size-adjust:none 禁用iPhone 浏览器的文本缩放功能。

html {
	-webkit-text-size-adjust: none;
}
重置 iPhone 视窗 和 初始缩放

下面的meta标签将会在iPhone重置视窗和初始缩放:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

中文原文:使用CSS3媒体查询技术创造响应式设计
英文原文:Responsive Design with CSS3 Media Queries
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

details 和 summary 元素

曾几何时,我们创建可以显示/隐藏一些内容的小组件时,我们不得不使用Javascript.有时候你可能不得不为这个小功能,下载一个完整的 JS 库才能达到这个功能效果.为下面的时刻欢呼吧!HTML5提供了创建这种拖拽特点的方法,我们仅仅需要简单的几行html代码就能获得这种效果(从目前而言,这种效果还依赖于使用的浏览器,当然,在不久的将来,这可能不是问题).下面让我们一起来看看 <detail>元素.

下面就是规范中的描述

The details element represents a disclosure widget from which the user can obtain additional information or controls.

理论上我们可以用它创建那种折叠的小组件,用户可以有打开和关闭的交互.在<details>我们可以放入我们任何想放入的内容.

浏览器的支持情况

在我们开始之前,实际一点,让我们看看目前浏览器的支持情况,目前只有chrome支持 <details > 元素.Opera很快就会支持Opera will support it soon,让我们来用chrome演示这种效果吧.

<details 的使用方法

这里有两个相关的元素:<details>和可选的see this in action over at jsbin.这是一个简单的例子但是可以将效果完美展现的代码,没有任何Javascript.

OPen 属性

在上面的例子中,在页面加载的时候内容是隐藏的。我们可以将<detail>默认的视觉属性通过布尔值作修改,让其当我们加载页面的时候是展开的:

<details open>
  <summary>Show/Hide me</summary>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</details>

注意,这里并没有 closed 属性,因为只要你移除 open 属性,执行的就是 closed 属性效果。

<summary>元素
我们已经简要的看了

的作用。因为它是短语内容,我们可以使用内联 (inline)标签 <span;>。我们为什么会有这种想法呢?也许这样子能更方便的通过而外样式控制显示效果或者像 spec 建议的那样:为一个表单元素增加一个 <label>标签。如果他能生效的话,至少能让我很顺手:

<details>
  <summary><label for="name">Name:</label></summary>
  <input type="text" id="name" name="name" />
</details>

常理看,我们点击 summary 的任何位置都应该展开 <detail>元素的内容。但是在这个例子中,我们点击<summary>并没有展开内容,因为你点击的是<label>他会将焦点放到 <input>标签-即使那部分内容被隐藏在<details>标签。
很明显,在这点需要更好的声明,你认为这个地方应该发生什么事情呢?可能某个浏览器生产商能看一下这个效果。

<details>元素多层嵌套

你可以在<details>中嵌套<details>,可以完美的案例查看这个效果:

<details>
  <summary>Question 1</summary>
  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  <details>
    <summary>Related documents</summary>
    <ul>
      <li><a href="#">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit.</a></li>
      <li><a href="#">Aliquam tincidunt mauris eu  risus.</a></li>
      <li><a href="#">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit.</a></li>
      <li><a href="#">Aliquam tincidunt mauris eu  risus.</a></li>
    </ul>
  </details>
</details>

使用案例

在哪些情况时会用到 <details>?FAQ表可能是我们最先涌现的想法。大家经常使用手风琴效果是用在FAQ列表,所以 <details> 是这一效果的最佳效果。
考虑到这一系列内容,它可能被固定在某一区域,当我们滚动内容的时候。像这样子?
你也可以使用<details>来操作博客的评论内容,用户简介,下载列表,复杂的表单,或者像规范中描述下面的应用:

An example of the <details> element from the spec

实际上,只要你看看我写的wordpress,会发现有大量的使用 <details>的机会。让我们在评论中了解一下你的观点和想法。

样式格式化

你如何对这个定义样式?同时,在webkit浏览器中我们可以使用伪类样式 ::-webkit-details-marker。你可以看到这个小的案例:

details summary::-webkit-details-marker {
  background: red;
  color: #fff;
  font-size: 500%;
}

我们也可以将这个小组件定位。这里是向右浮动的这就是我们初始化效果。
我们如何将默认的组件Icon自定义呢?那就是用 属性选择器 (attribute selector),你可以用来检测 <details>元素是打开的还是关闭的,然后为其定义一个合适的背景图片。我们咋下面的例子中作了一个类似的效果,使用 :after pseudo-element元素定义成我们喜欢的背景图片:

summary::-webkit-details-marker {
  display: none
}
summary:after {
  background: red; 
  border-radius: 5px; 
  content: "+"; 
  color: #fff; 
  float: left; 
  font-size: 1.5em; 
  font-weight: bold; 
  margin: -5px 10px 0 0; 
  padding: 0; 
  text-align: center; 
  width: 20px;
}
details[open] summary:after {
  content: "-";
}

在上面的例子中,我们使用文本 “+”和“-”来定义这个组件的状态,根据你的设计需要,你可能希望使用 :before来代替 :after,这两个为类元素都可以使用 image.
details的[open]属性选择器能创造很多有意思的可能性。因为我们是好医生,下面是我们装饰后的效果,下面是截屏效果:

Details element in Chrome
Styled <details> element in Chrome

如果我们可以用过css的动画效果来修饰打开和关闭时的状态,这样设计就更完美了,但是目前为止我们还没有办法做到这点。

可访问性

不幸的是在我们写这篇文章的时候,<details>h还无法通过键盘访问,Steve Faulkner 写到

Bottom line is, currently no keyboard support and no usable information exposed to assistive technology.

自己试一下,如果你使用鼠标打开 <details> 元素,你可以使用键盘到达内容部分,但是你无法使用键盘打开和关闭区域。所以目前这并不是理想状态,不过我们相信这个小国很快会被改进。

向后兼容

在我们抱怨其在IE6中无法生效之前,感谢这些聪明的人们,我们可以提供优雅的像狗兼容。这些效果也被列在下面的网站very handy collection of cross-browser polyfills,这两个都需要 jQuery:

<script>
  if (!('open' in document.createElement('details'))) {
    alert("No details");
  }
</script>

更新:感谢的评论。上面的代码并不是100%可靠,因为他在某些chrome版本下会失败。你可以使用this Modernizr snippet

我们为何使用这种类型的交互?

言归正传,为什么会有这个效果在HTML5中?就像其它HTML5的效果,使用这种效果能够更简单。比如时间选择,Date pickers, sliders, progress indicators, 现在这种手风琴效果就可以在不使用JavaScript的情况下更方便实施。谁能想到下一个是什么?如果是 tabs 标签那就好了。

总结

在这篇文章中,我们阐述了如何去使用<details>和<summary>元素。<details>是一个新元素,通过和<summary>元素通过浏览器可以创造手风琴的交互效果。

目前,<details>只能在 Chrome 工作,不过我们期待这会在不久的将来有所改变。这里只有一个css trick我们可以使用 ::-webkit-details-marker,但是我们拥有很多的其它css。让我们在评论中知道关于<details>元素你在这方面的经验和想法。

中文原文:details 和 summary 元素
英文原文:The details and summary elements
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

在IE浏览器中打印HTML5元素 (IE Print Protector)

在IE浏览器中打印HTML5元素

IE浏览器的 6 7 8版本无法识别HTML5的新元素.IE 对待无法识别的元素将使用空的<section>和</section>空元素.这也意味着未知元素的内容也不会包含他们的内容,他们无法被定义样式和将溢出的内容包含到它本身的DOM节点中.
下面的这个例子,我们将用 article包含一个有些文字的标题和段落.

<article>
	<h1>
		Lorem ipsum
	</h1>
	<p>
		Dolor sit amet, consectetur adipisicing elit.
	</p>
</article>

因为IE浏览器将article解析成一个空元素,标题元素和段落都将溢出.

<article />
<h1>
	Lorem ipsum
</h1>
<p>
	Dolor sit amet, consectetur adipisicing elit.
</p>

IE Print Protector 的工作原理

将这些元素展现在视图里面.IE Print Protector 需要一个辅助工具,一小段 JS 代码,帮助IE浏览器支持这些HTML5标签.为了让这些标签元素能够打印出来,当打印的时候,IE Print Protector 临时的将 HTML5 元素作了替换,将其替换成可以支持的元素(比如 div 和 sapn).IE Print Protector 也会在已有样式表的基础上生成一个特殊的样式表,这也意味着你可以更保险的对他们定义样式通过 link,style和@import和 @media的方法.IE Print Protector 保存了页面的原始HTML5元素. 所有这些元素的表现和事件没有任何影响.

IE Print Protector 如何生效

未使用 IE Print Protector
IE 无法打印HTML5标签
使用 IE Print Protector
IE 打印HTML5标签的方法
下载IE Print Protector

IE Print Protector
Minified JS (1.29KB) (736 bytes gzipped)
Uncompressed JS (2.91KB)

项目地址:IE Print Protector

中文原文:如何让IE支持HTML5新元素的打印样式
项目地址:IE Print Protector
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

如何让IE支持HTML5新元素

我们使用新的HTML5元素时,在其它浏览器中能表现良好的标签(比如Section,article,header和footer)对IE浏览器是个挑战.问题的原因来在IE浏览器的解析机制,这些不能不识别的标签元素导致文档对象的错误展现.
为了说明这个问题,请看下面的简短代码:

<body>
  <section>
    <p>This is an example</p>
  </section>
</body>

奇怪的是,在IE6-IE8都无法去解析 < section >标签,导致 Dom节点看上去是下面的样子:

  • BODY
    • SECTION
    • P
      • #text: This is an example
    • /SECTION

注意IE浏览器创建了两个空元素.一个是 section,另一个是 /SECTION.确实是这样的,它将不认识的结束标签作为一个开始标签.
这里有一个方便的方法解决这个问题,最早是由a comment by Sjoerd Visscher实现的.这个方法的最基础理念就是通过使用 document.createElement(tagName) 来创建未知的元素.IE 的解析器会识别出这些元素,将他们以更合理有效的方式解析展示出来.比如我们可以使用下面的这段代码:

document.createElement("section");

这样,上面的代码解析后就是下面的样子:

  • BODY
    • section
      • P
        • #text: This is an example

这个技术可以让IE6,IE7和Ie8对未知的元素解析.

为了方便起见,Remy Sharp写了一段可以让增强HTML5新元素展示的代码,你可以很方便的下载和使用它们.published a simple script

这段代码对其它浏览器,比如:Opera 9,Firefox 3 和 Safari 3对这些新元素的解析都默认就是正确的.虽然在Firefox2中也有一些问题,但这些问题还没有找到解决的办法.但是相比IE的更新速度,火狐这个并不算是问题.

这种方法创建的标签,我们无法应用于打印样式,如果想了解如果让IE打印样式正确,请查看下面的文章在IE浏览器中打印HTML5元素 (IE Print Protector)

中文原文:如何让IE支持HTML5新元素
英文原文:Supporting New Elements in IE
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

HTML5 hgroup 元素使用概述

hgroup 是HTML5中新定义的元素,用来将标题和副标题群组。在我们已经有header标签的情况下,为什么我们还要一个<hgroup>标签?下面将是这个问题的解答

什么是 <hgroup>元素

下面是文档关于的描述 <hgroup>的描述:
hgroup一般被用作将一个或者更多的h1到h6的元素群组,比如,一个区块内的标题和它的副标题。

The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.
W3C Specification

这个表述代表着什么?

<hgroup>扮演着一个可以包含一个或者更多标题相关的容器的角色,这些标题可能在&ls;header>元素中。它只能包含从h1-h6的标题元素,这些标题可能是副标题、二选一的标题或者标记标题。

更简单的理解如何使用<hgroup>的方法,是我们通过一些例子。比如下面 Dr.Oli 的例子:

当article标签有且只有一个标题的时候:

<article>
 <h1>Article title</h1>
 <p>Content…</p>
</article>

当article标签有一个标题,并且还包含元数据的时候(meatadata)

<!-- Wrapping title and metadata in header -->
<article>
 <header>
 <h1>Article title</h1>
 <p>(<time datetime="2009-07-13">13th July, 2009</time>)</p>
 </header>
 <p>Content…</p>
</article>

当article标签有一组自我闭合标题的时候:

<!-- Title h1 and subtitle h2 in hgroup -->
<article>
 <hgroup>
 <h1>Article title</h1>
 <h2>Article subtitle</h2>
 </hgroup>
 <p>Content…</p>
</article>

一个article标签包含一个标题和副标题和元数据

<!-- A heading which uses header and hgroup -->
<article>
 <header>
 <hgroup>
 <h1>Article title</h1>
 <h2>Article subtitle</h2>
 </hgroup>
 <p>(<time datetime="2009-07-13">13th July, 2009</time>)</p>
 </header>
 <p>Content…</p>
</article>

我们为什么要使用<hgroup>?

我们用<hgroup>一切源起文档大纲(document outline).
当群组的标题在<hgroup>元素的时候,大纲的算法将会覆盖掉群组中低等级的标题,而将最高等级的标题作为大纲。下面的就是一个例子:

<header>
 <hgroup>
 <h1><a href="/">Mini Apps</a></h1>
 <h2>Web applications for iPhone, Android & other mobile platforms</h2>
 </hgroup>
</header>

<hgroup>包含h1-h2的标题元素,但是在大纲中只包含<h1>.就像下图展示的那样子。

我们可以从这个链接查看文档大纲:
http://gsnedders.html5.org/outliner/

总结:
我们刚刚讲的是如何高效的使用 <hgroup>元素。回顾一下:
.如果你只有一个标题元素(h1-h6中的一个),你并不需要<hgroup>.
.当出现一个或者一个以上的标题与元素时,适用<hgroup>来包围他们。
.当你的有一个标题有副标题或者其它的和section或者article有关系的元数据时,将<hgroup>和元数据放到一个单独的<header>元素容器中。

中文原文:HTML5 hgroup 元素使用概述
英文原文:Avoiding common HTML5 mistakes
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

如何避免 HTML5 的常见误区

在这篇文章中,我将给大家分享html5构建页面的小错误和不好的实践方法,让我们在以后的工作中避免这些错误。

不要把 <Section> 当成容器来定义样式

我们经常看到的一个错误,就是武断的将<div>标签用<section>标签来替代,特别是将作为包围容器的<div>用<section>来替换。在XHTML或者HTML4中,我们将会看到类似下面的代码:

<!-- HTML 4-style code -->
<div id="wrapper">
  <div id="header">
    <h1>My super duper page</h1>
    <!-- Header content -->
  </div>
  <div id="main">
    <!-- Page content -->
  </div>
  <div id="secondary">
    <!-- Secondary content -->
  </div>
  <div id="footer">
    <!-- Footer content -->
  </div>
</div>

现在我看到了下面的代码样子:

<!-- Don’t copy this code! It’s wrong! -->
<section id="wrapper">
  <header>
    <h1>My super duper page</h1>
    <!-- Header content -->
  </header>
  <section id="main">
    <!-- Page content -->
  </section>
  <section id="secondary">
    <!-- Secondary content -->
  </section>
  <footer>
    <!-- Footer content -->
  </footer>
</section>

直观的看,上面的例子是错误的:<section> 并不是一个容器.<section>元素是有语意的区段,帮助构建文档大纲。它应该包含标题。如果你要寻找一个可以包含页面的元素(不论是 HTML 或者 XHTML ),通常的做法是直接对<body>标签定义样式就像Kroc Camen描述的那样子,如果你还需要额外的元素来定义样式,使用<div>,就像Dr Mike 阐述的那样, div并没有灭亡,如果这里没有其它更合适的,div可能是你最合适的选择。

记住这点,这里我们重新修正了上面的例子,通过使用两个新角色。(你是否需要额外的<div>取决于你的设计。)

<body>
  <header>
    <h1>My super duper page</h1>
    <!-- Header content -->
  </header>
  <div role="main">
    <!-- Page content -->
  </div>
  <aside role="complementary">
    <!-- Secondary content -->
  </aside>
  <footer>
    <!-- Footer content -->
  </footer>
</body>

如果你还是无法确定哪一个元素更适合使用,我建议你去查看HTML5 sectioning content element flowchart来让你继续前行。

只在需要的时候使用 <hgroup>和<header>标签

使用标记的时候写入了一些并不需要的现象这是不合理的。不幸的是,经常发现大家在并不需要的地方使用<header>和<hgroup>标签。你可以跟进我们关于<header>和<hgroup>的最新进展,下面是我的简单归纳:

  • <header>元素通常是通常作为一组解释或者导航辅助工具,通常包含section的标题.
  • <hgroup>元素会将当有副标题\子标题,各类标识文字时,对<h1>到<h6>标题进行群组,将其作为section的标题.

过度使用的<header>

你肯定知道,在一个文档中,可以使用多次<header>标签,下面就是一种很受大家欢迎的模式:

<!-- Don’t copy this code! No need for header here -->
<article>
  <header>
    <h1>My best blog post</h1>
  </header>
  <!-- Article content -->
</article>

如果你的<header>标签只包含一个标题元素时,就不要使用<header>标签了.<article>标签肯定会让你的标题在文档大纲中显现出来,而且因为<header>并不包含多重内容(就像定义中描述的那样子),我们为何要增加而外的代码呢?应该像下面这样简单才可以:

<article>
  <h1>My best blog post</h1>
  <!-- Article content -->
</article>

<hgroup>不合理使用

在标题的这个主题上,经常看到使用<hgroup>的错误案例.在下面这种情况下你不能将<header>标签和<hgroup>标签一起使用:

  • 这里只有一个标题,
  • 或者<hgroup>本身就够了(比如:不需要<hgroup>)

第一种情形看上去是下面的样子:

<!-- Don’t copy this code! No need for hgroup here -->
<header>
  <hgroup>
    <h1>My best blog post</h1>
  </hgroup>
  <p>by Rich Clark</p>
</header>

这种情况下,将<hgroup>移除,只保留标题就好.

<header>
  <h1>My best blog post</h1>
  <p>by Rich Clark</p>
</header>

第二种情况也是包含了他们并不需要的标签.

<!-- Don’t copy this code! No need for header here -->
<header>
  <hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2>
  </hgroup>
</header>

当<header>标签的子元素只有<hgroup>的时候,为什么我们还需要一个额外的<header>?如果没有额外的元素放到<header>中(比如<hgroup>的兄弟元素),我们直接将<header>元素去掉就好.

<hgroup>
  <h1>My company</h1>
  <h2>Established 1893</h2>
</hgroup>

不要将所有的链接列表都放到<nav>标签

在HTML5新增的30个元素中(在我们写这篇文章的时候),我们在构建更具语义\结构化的标签的时候,我们的选择变得太丰富.也就是说我们对现在给我们提供的这些超级有语义的标签,我们可能会滥用.<nav>就是一个很悲剧的例子.在规范中的描述是这样的:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Note: Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
WHATWG HTML spec

这里面的关键词是”重要”导航.我们可能会对”重要”有不同的定义,但是我的理解是:

  • 主要导航
  • 网站搜索
  • 二级导航(这个能是有争议的)
  • 页面内链接(比如一篇很长的文章)

虽然并没有对错之分,但根据我的理解和一个民意投票让我觉得在下面这些情形下,我不会使用<nav>标签:

  • 翻页
  • 社交类的链接(虽然有些社交类的链接也是主要的链接,比如关于我About me和品味Flavours
  • 博客文章的标签
  • 博客文章的分类列表
  • 第三级导航
  • 大页脚

如果你不能确定是否使用<nav>,那就先对你问一下下面的几个问题:“者是否是一个主要链接?”,你可以根据下面的几个因素来回答你刚才的问题:

  • 如果用<section>和标题标签能够解决你的问题,那就不要去使用<nav>–Hixie on IRC
  • 你是不是为了增加可访问性而增加的一个快捷跳转链接呢?

如果上面的回答都是“不”,那可能就不适合使用<nav>.

<figure>元素的错误

<figure>和经常与它合伙作案的<figcaption>,是很难掌握的标签,下面是经常看到的一些小错误。

并不是所有的图片都是figure(注:比较难理解阿,image=图片,figure=图形)

之前,我曾经说过不要写那些不需要的标签。这个错误也是相同的。我经常看到一个网站上的每张图片都有<figure>标签。这些额外增加的标签并不会给你带来任何的益处,并且还增加了你自己的工作强度和让自己的内容变得更难理解。

在规范中关于<figure>的解释如下:“某些流内容,可以有标题,自我包含并且通常作为一个单元独立于内文档流之外。”在那里有完美的表述,就是它可以被从主内容中移除–比如放到边拦,而对文档流没有影响。
如果仅仅是一张表现类的图片而且和文档中其他的内容没有关系的话,那就不需要使用<figure>.”这张图片需要对上下文的内容作出解释吗?”,如果答案是”否”,那就可能不是<figure>(可能是<aside>),”我能把它移到附录里面吗?”,如果这两个问题的答案都是”是”,那就可能是<figure>.

你的标志不是一个<figure>

将上面的延伸开来,对你的logo也是这样。下面是两组我找到的有规律的代码片断:

<!-- Don’t copy this code! It’s wrong! -->
<header>
  <h1>
    <figure>
      <img src="/img/mylogo.png" alt="My company" class="hide" />
    </figure>
    My company name
  </h1>
</header>

<!-- Don’t copy this code! It’s wrong! -->
<header>
  <figure>
    <img src="/img/mylogo.png" alt="My company" />
  </figure>
</header>

这里就不需要说啥了,这是很明显的错误,可能你认为我们说的是不是将logo放在H1标签里面,但是我们在这里并不讨论这个问题。让我们迷惑的是<figure>元素。<figure>标签只用在当有上下文需要说明或者被<section>包围的时候。我这里要说的是你的logo可能很少会被这种情况下使用。很简单,那就不要去这样做,你需要的仅仅是下面的样子。

<header>
  <h1>My company name</h1>
  <!-- More stuff in here -->
</header>

figure只能用在标签上的误解

另一个对<figure>的误解就是我们通常认为它只能用在图片上面。事实上并不是这样子的,它可以被用在 <video><audio>, 一个图标 (比如<SVG>, ), 一个引用, 一个表格, 一段代码, 一段散文, 或者任何和这些相关的组合. 不要把你的<figure>标签仅仅局限在图片上。我们网页制作师的任务就是用标签更准确的描述内容。
这里有一篇更深入讲解 <figure>的文章I wrote about <figure>,很值得阅读的。

不要去使用那些不必要的type属性

这可能是我们最常见的一些问题,它们并不是真正的错误,但我觉得我们的最好实践还是尽量避免这种模式。
在HTML5中,我们并不需要给<script>和<script>增加 type 属性,如果这些从CMS默认添加的内容中移出是很痛苦的事情,那当你手工编码的时候还写入它们或者你能完全的控制你的模板时候你完全可以删掉它们。因为所有的浏览器都会将<script>解析成Javascript和<script>标签是CSS,你不再需要那个type属性了:

<!-- Don’t copy this code! It’s attribute overload! -->
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/scripts.js"></script>

现在我们可以写成下面的样子:

<link rel="stylesheet" href="css/styles.css" />
<script src="js/scripts.js"></script>

你也能够对编码的设置作出省略。Mark Pilgrim在Dive into HTML5的语义化一章中作出了解释。

不要包含错误的标单属性

你可能发现<html5>引入了很多新的表单属性。现在我就给大家讲讲一些不合适的使用。

布尔值属性

新引入的标签属性有几个是布尔类型的,它们的标签行为基本接近。这些属性包括:

  • autofocus
  • autocomplete
  • required

坦白的说,下面的这种情况对我来说并不常见,但我们从 required 作为例子,如下:

<!-- Don’t copy this code! It’s wrong! -->
<input type="email" name="email" required="true" />
<!-- Another bad example -->
<input type="email" name="email" required="1" />

基本上看,这段代码并不会带来危害。客户端对 HTML的解析遇到 required 标签属性时,他的功能就会生效。但是当我们将代码修改,录入 required=”false” 的情况呢?

<!-- Don’t copy this code! It’s wrong! -->
<input type="email" name="email" required="false" />

解析的时候依然会遇到 required 属性,虽然你希望加入的行为是 假,它依然会被解析成 真。
这里有三种合理的方法让布尔值生效。(第二种和第三种方案只有你在写 XHTML 解析的时候需要)

我们上面的例子可以写成下面的样子:

<input type="email" name="email" required />

总结
对我来说,我无法将所以得蹩脚的代码模式都展示在这里,但是上面说的这些都是我们经常遇到的。

中文原文:如何避免 HTML5 的常见误区

英文原文:Avoiding common HTML5 mistakes

转载请注明以上信息,以表示对作者和译者的尊重,多谢!

15个HTML5资源网站

作为一种尚未成型的技术,HTML5 对很多人来说仍然是陌生的。本文收集了 15 个非常值得收藏的 HTML5 资源,这些资源可以让你同 HTML5 的发展保持一致,并始终处于这门技术的最前沿。
1、WTF is HTML5
这是一个关于 HTML5 Infographics 的站点,包含诸如 HTML5 同 Flash 的对比,HTML5 不同浏览器支持情况,HTML5 最受欢迎的功能等资料。
wtf

2、Dive Into HTML 5
Mark Pilgrim 是知名软件开发师与博客作者,他在线编写了一本有关 HTML5 的书,侧重 HTML5 的编程方面的功能。
dive_html5

3、HTML5 Doctor
发布 HTML5 相关的文章,介绍目前我们可以借助 HTML5 实现的应用。站点中的一些文章和栏目,也是 HTML5 相应技术的最佳注解,如 dl elementarticle element 以及 Q&As 部分。这个站点由一群在 Future of Web Design 大会相遇相识的开发人员共同创办。
HTML5Doctor
4、When Can I Use…
这个简单的单页式站点是一份 HTML5 各种功能同当前主流浏览器(以及它们的不同版本)的兼容清单。
when_caniuse
5、HTML5 W3C  Specifications
这是 HTML5 的最新的草案,由 W3C 起草,如果你想对 HTML5 的方方面面有个权威的了解,这是最好的资源。
html5_specs
6、Yes,  You Can Use HTML 5 Today!
SitePoint 有一篇非常出色的文章,鼓励开发和设计者现在就开始部署使用 HTML5,还讲述了改如何编写代码,以适应那些尚不支持 HTML5 的浏览器,如 IE8。
html_today
7、Coding  A HTML 5 Layout from Scratch
这是来自 Smashing Magazine 的一篇文章,讲述了如何使用 HTML5 的新元素进行页面布局设计。
html5
8、HTML5  presentation
这是一份关于 HTML5 的演示,是一份有关 HTML5 非常超前的资料,原本是为 Google Chrome用户 设计,因此,在某些浏览器上可能无法观看。
html5_website
9、HTML5 Gallery
这是一个 HTML5 站点展示站点,定期推出一些基于 HTML5 的站点介绍,你可以藉此借鉴先行者们的技巧和经验。
html5_gallery
10、A Web Developer’s  Guide to HTML 5
这篇来自 W3C 的文章面向 Web 开发者,介绍了HTML5 的语法,API,术语以及各种开发者们关心的资源和技术。
html5_dev_guide
11、HTML5 Demos and Examples
Remy Sharp 是一位来自英国的 web 开发者,他编译了这套 HTML5 演示,包括简单的,基于浏览器的聊天程序.
html5_demos
12、Web  Designer’s Checklist: HTML5 Support Tables
一份非常全面的 HTML5 和 CSS3 浏览器兼容清单。
compatibility_tables
13、HTML  5 differences from HTML 4
HTML5 和 HTML4 到底有什么区别,这是 W3C 官方对比清单。
html4_html5_differences
14、HTML5-wikipedia
维基百科上有关 HTML5 的词条,非常权威,文章下方还提供了大量 HTML5 的权威资源。
wikipedia
15、The HTML5 test
这个站点可以帮您测试你的浏览器对 HTML5 的支持情况,并为你打出分数。
html5_score

HTML5 的新进展

HTML5为HTML增加了很多新特性,现在已经有一些浏览器开始支持这些新特性。如果你对这些特性感兴趣,你可以看一下WHATWG Wiki Implementations page 获得更多的关于浏览器支持这些特性的信息。

HTML 使用新的文档和字符编码声明
关于HTML5一个很重要的优点是它很容易去使用。HTML5的文档声明很简单和容易。
<!doctype html>

就是上面描述的那样,就两个单词”doctype”和“html”.它能如此简单是因为HTML5不在是标准通用标示语言的一部分,取而代之的是它本身的标记语言。

字符声明在HTML5中也做了升级,它使用UTF-8,你定义它只需要增加一个元数据标签:

<meta charset=”UTF-8″>

HTML5新结构
HTML5承认网页有一个结构,就像一本书一样,或者其他XML文档那样。总体上,网页有导航、主体、侧边栏和头部、页脚和其他的特点。HTML创建了新标签来支持这些页面元素。
* <section> -定义页面的节段
* <header> – 定义页面的头部
* <footer> – 定义页面的页脚
* <nav> – 定义页面的导航
* <article> – 定义文章或者其它主要的页面内容
* <aside> – 定义其它内容,例如页面的边栏
* <figure> – 定义来解释一篇文章的图片

HTML 5 新的内联元素
这些内联元素定义了一些基本的概念,让标签保持语义,大多数与时间有关:
* <mark> – 用来指出内容被一些样式标注
* <time> – 用来指出内容是时间或者日期
* <meter> – 用来指出内容是已知范围的一部分 – 就像硬盘使用量
*<progress> – 用来指出完成一个工作的步骤过程

HTML 5 动态网页的支持
HTML 5 开发的目的是帮助网站应用程序开发员,所以这里有很多新的特点让创建动态网页变的更容易:
* 上下文菜单 – HTML 5 支持在网页和应用程序创建和使用上下文菜单
* Href 不必写在标签上 – 这允许你配合脚本使用标签,在网页应用程序中不需要在某个地方添加锚点
* 异步属性 – 这会被加在脚本标签上,来告诉浏览器代码会被异步下载,因此它不会拖慢下载速度和显示页面的其它地方
* <details> – 提供一个元素的更多细节。这就像一个在没有网页请求的时候的一个工具提示
* <datagrid> – 创建来自于数据库或者动态来源的一个表格
* <menu> – 一个被重新引入的老标签并给了它新的生命,让你能够创建你网页上的导航系统
* <command> – 定义一个动作,当动态元素被激活的时候发生

HTML 5 新表单形式
HTML 5 支持所有标准的表单输入形式,但是它还增加了一些:
* datetime
* datetime-local
* date
* month
* week
* time
* number
* range
* email
* url

HTML 5 新的元素
这里有几个让人兴奋的在 HTML5 中的新元素:
*<canvas> –  一个让你能在你的网页上通过 JavaScript 画图的元素。它能让你在工具小提示上增加图片或者图形,或者就是在你的网页上创建动态的图形。
* <vidio> – 用这个简单的标签可以增加视频到你的网页
* <audio> – 用这个简单的标签可以增加音频到你的网页

HTML5 移出了一些元素
这里有一些  HTML 4 的元素 HTML 5 将不会被支持。大多数是已经不赞成使用的,所以被删掉你一点都不会奇怪,但是有一些你可能会感到有点困难:
* acronym
* applet
* basefont
* big
* center
* dir
* font
* frame
* frameset
* isindex
* noframes
* noscript
* s
* strike
* tt
* u

你准备好使用 HTML5 了吗?
HTML5增加了大量的页面和设计的新特性,当更多的浏览器支持的时候,这将是令人兴奋的事情,微软早已开始他们在IE8 中至少会部分支持新的特性。如果你想现在就开始,Opera浏览器现在已经对此有了最好的支持,紧接着就是Safari。

中文原文:HTML5 的新进展
英文原文:What’s New in HTML 5