盒子
目录
文章目录
  1. HTML5
  2. HTML5 带来了哪些新的变化
  3. Modernizr
  4. Canvas

【前端】【学习心得】初识HTML5 第十五天

文章取自我的 Github repos: Learning-JavaScript, 作者:@paddingme
原文链接:https://github.com/paddingme/Learning-JavaScript/issues/19

HTML5

前段时间 HTML5 规范已经定稿,不知道是颠覆还是昙花一现。不管怎样,建立起规范总是好事,接下来让市场来决定。

HTML5 带来了哪些新的变化

  • 在结构层中, HTML5 添加了新的标记元素,如<section><nav><menu><header><footer><article>等,更加语义化,利于SEO;
  • HTML5 还提供了更多交互与媒体元素,如 <canvas><audio><video>
  • 表单得到了增强,新增了颜色拾取器、数据选择器、滑动条和进度条等。
  • 还有很多新元素带着自己的 JavaScript 和 DOM API。
  • 在行为层,HTML5 规定了 DOM 中每个新元素的交互方式、以及新的 API。
  • 表现层,CSS3的多个模块囊括了高级选择器、渐变、变换,还有动画。
  • 新 JavaScript 模块还包括其他模块:Geolocation、Storage、Drap-and-Drop、Socket以及多线程。

Modernizr

HTML5 尚未普及,有很多浏览器不支持,我们可以使用 Modernizr, Modernizr 是一个开源的 JavaScript 库,利用其富特性检测功能。可对 HTML5 文档进行更好的控制。

Modernizr 不会给浏览器添加不支持的特性,能做的是为你提供一些不同的 CSS 类名以及特性检测(feature-detection)属性。

添加 Modernizr 之后,它会修改 <html> 的 class 属性,基于可用的 html5 特性添加额外的类名。要使用 Modernizr 编写文档,通常都要给<html> 添加一个 no-js 类,利用这个类可以在浏览器不支持 JavaScript 的情况下应用 CSS 样式:

1
2
3
.no-js selector {
style porperties
}

然后, Modernizr 会检测浏览器可能支持的各种特性,并相应地添加类名 feature 或 no-feature,例如:<html class="canvas"><html class="no-canvas">。根据这些类名, 可在 CSS 中 定义相应的增强和退化版本,改善用户体验。

1
2
3
4
5
6
7
.multiplebgs article p {
/* 为支持多背景浏览器编写的样式*/
}

.no-multiplebgs article p {
/* 为不支持多背景浏览器编写的后备样式*/
}

Modernizr 库还提供了 JavaScript 特性检测对象,可在 DOM 脚本中直接使用:

1
2
3
if (!Modernizr.inputtypes.date) {
createDatePicker(document.getElementById('birthday'));
}

Modernizr 还可以帮助旧式浏览器处理 HTML5 新元素 如 <section><nav><menu><header><footer><article> 等。为使用这些新元素,只需要指定它们为块状元素:

1
2
3
article,aside,footer,header,hgroup,nav,section {
display: block;
}

唯一的特例是 IE 必须用 JavaScript 创建未知元素:

1
document.createElement("article");

Modernizr.js 可在 http://modernizr.com/ 下载。记住一定要把此脚本放在<head> 元素中。这样可以在加载其他标记之前先加载它,以便它在文档呈现之前能够创建好新的 HTML5 元素.

Canvas

<Canvas> 元素可动态创建和操作图形推向。

1
2
3
<canvas id="draw-in-me" width="120" height="40">
<p>Powerd By HTML5 canvas</p>
</canvas>

使用 <Canvas> 画一个圆角小黑盒子,带有2像素宽的白色描边
效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function draw() {
var canvas = document.getElementById("draw-in-me");
if (canvas.getContext) {
var ctx = canvas.getContent('2d');
ctx.beginPath();
ctx.moveTo(120.0,32.0);
ctx.bezierCurveTo(120.0,36.4,116.4,40.0,112.0,40.0);
ctx.lineTo(8.0,40.0);
ctx.bezierCurveTo(3.6,40.0,0.0,36.4,0.0,32.0);
ctx.lineTo(0.0,8.0);
ctx.bezierCurveTo(0.0,3.6,3.6,0.0,8.0,0.0);
ctx.lineTo(120.0,32.0);
ctx.closePath();
ctx.fill();
ctx.lineWidth = 2.0;
ctx.strokeStyle = "rgb(255,255,255)";
ctx.stroke();
}
}

window.onload = draw;

todo 缺个彩色图像变为灰色图像的例子。

有了 <Canvas> ,就可以在浏览器窗口绘制任何对象、任何像素了。当然,还能通过它来操作图像,或者创建令人眼花缭乱的界面元素。值得注意的<Canvas>和 Flash 不具备可访问性。