Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
paddingme opened this issue Dec 1, 2014 · 0 comments
Open

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

paddingme opened this issue Dec 1, 2014 · 0 comments

Comments

@paddingme
Copy link
Owner

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 样式:

.no-js selector {
    style porperties
}

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

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

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

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

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

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

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

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

    document.createElement("article");

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

Canvas

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

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

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

    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 不具备可访问性。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant