jinl's blog

上校，马孔多在下雨。

0%

JavaScript-学习笔记（9）：HTML5

发表于 分类于 阅读次数： Valine：

Image

JavaScript-笔记（9）：HTML5

HTML5 简介

HTML5 是 HTML 当前及未来的新标准。

web 设计有三个层：结构层、样式层、行为层，这三个层分别使用 HTML、CSS 和 JavaScript 三个技术。HTML5 将上面三个层装入一个小集合，也仅仅只是一个集合。
HTML5 添加了很多新的标记元素，详情 http://www.w3.org/TR/html5。
将文档“升级”到 HTML5，只需把文档类型声明改成<!DOCTYPE html>即可。

HTML5 的兼容非常强，缺斤短两的 HTML5 文档都可以完美地通过验证。

忠告

一个工具：Modernizr（https://modernizr.com/），这是一个开源 js 库，利用其富特性检测功能，对 HTML5 文档进行更好的控制。

在文档中嵌入 Modernizr 后，它会随着页面加载而变一些小戏法。

首先，它会修改 <html> 的 class 属性，要使用它编写文档，通常要给<html>属性添加一个 no-js 类：

1
<html class="no-js"></html>

利用这个类，可以浏览器不支持 JavaScript 的情况下应用 CSS 样式。

1
2
3
;.nojs selector {
    style properties;
}

然后，它还会检测浏览器可以支持的各种特性，并添加相应的类名。
实际情况是浏览器会支持部分特性，不支持另一些特性，这时，类名中就会间或出现 features 和 no-feature。

它还可以帮一些老旧浏览器处理 <section> 和 <article> 等新 HTML5 元素。

使用它非常简单，从 http://www.modernizr.com/ 下载它，然后在文档的<head>中添加该脚本：

1
<script src="modernizr-1.5.min.js"></script>

一定要把这个脚本放在元素中，因为放在文档开头，可以在加载其它标记之前先加载它，以便能更好地创建 HTML5 元素。

示例

一些有关 Canvas、视频/音频以及表单的例子，需要以下浏览器：

  • 苹果 Safari 5+
  • Chrome 6+
  • Firefox 3.6+
  • IE 9+
  • opera 10.6+
1. Canvas

浏览器一般只能显示静态图片，使用 GIF 或许可以实现一些动画，或者使用 CSS 加 JavaScript 也能变化一些样式。
但 HTML5 的<Canvas> 元素可以动态创建和操作图形图像。
支起一张“画布”：

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

在上面作画需要了解详细的绘画方法，参考<canvas>元素规范(http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function draw() {
  var canvas = document.getElementById("draw-in-me");
  if (canvas.getContext) {
    var ctx = canvas.getContext("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(112.0, 0.0);
    ctx.bezierCurveTo(116.4, 0.0, 120.0, 3.6, 120.0, 8.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;

结果：
Image

2. 音频和视频
  • HTML 的 <video>元素在文档中嵌入影片以及影片交互定义了一种标准方式，同时也把嵌入操作简化成了一个标签：
1
2
3
4
<video src="movie.mp4">
  <!-- 不支持 <video> 的替代内容  -->
  <a href="movie.mp4">Download movie.mp4</a>
</video>

同样，音频也是：

1
2
3
<audio src="audio.mp3">
  <a href="audio.mp3">Download audio.mp3</a>
</audio>

  • 自定义控件
    浏览器显示 <video>元素时，会为其添加一些与浏览器样式统一的标准播放控件，要想自定义这些控件的外观，或者添加新的控件，可以通过 DOM 属性来实现。主要有：

    • currentTime，返回当前播放的位置，以秒表示；
    • duration，返回媒体的总时长，以秒表示，对流媒体返回无穷大；
    • paused，表示是否处于暂停；
    • play，在媒体播放开始时发生；
    • pause，在媒体暂停时发生；
    • loadedata，在媒体可以从当前播放位置开始播放时发生；
    • ended，在媒体已播放完成而停止时发生。

    记住，无论创建什么控件，都别忘了在<video>元素中添加 control 控件。

    1
    <video src="movie.mp4" controls></video>

    这样才会显示控制条：
    Image

3. 表单

传统的表单可用的输入控件类型很少，文本框、单选按钮、复选框对简单的表单是够了，但需要更多交互功能的时候，仍需要 DOM 上阵。
HTML5 提供了新的输入型表单：

  • email，输入邮箱
  • url，输入 url
  • date，输入日期和时间
  • number，输入数值
  • range，用于生成滑动条
  • search，用于搜索框
  • tel，用于输入电话号码
  • color，用于选择颜色

新的属性：

  • autocomplete，用于为文本（text）输入框添加一组建议的输入项；
  • autofocus，用于让表单元素自动获得焦点；
  • form，用于对<form>标签外部的表单元素分组；
  • min、max 和 step，用在范围和数值输入框中；
  • pattern，用于定义一个正则表达式，以便验证输入的值；
  • placeholder，用于在文本输入框中显示临时性的提示信息；
  • required，表示必填

使用的时候要检测浏览器是否支持对应的控件，可以使用 inputtypes.type 属性，如：

1
2
3
if (!Modernizr.inputtypes.date) {
  // 生成日期选择器的脚本
}

检查属性，可以使用 input.attribute 属性，如：

1
2
3
if (!Modernizr.input.placeholder) {
  // 生成占位符提示信息的脚本
}

如果没有使用 Modernizr，可以使用 inputSupportType 函数来检查浏览器是否支持某种输入控件。

1
2
3
4
5
6
7
8
9
10
11
function inpurtSupportsType(type){
    if(!document.createElement) return false;
    var input = document.createElement('input');
    input.setAttribute('type', type);
    if(input.type == 'text && type != 'text'){
        return false;
    }
    else{
        return true;
    }
}

使用方式和 modernizr 一样：

1
2
if (!inputSupportType(date)) {
  // 生成日期选择器的脚本

检查特定的属性，可以使用这个 elementSupportsAttribute 函数：

1
2
3
4
5
function elementSupportsAttribute(elementName, attribute) {
  if (!document.createElement) return false;
  var temp = document.crateElement(elementName);
  return attribute in test;
}

使用方式和 modernizr 一样：

1
2
if (!elementSupportType('input', 'placeholder')) {
  // 生成提示占位符的脚本
4. HTML5 的其它特性
  • localStorage 和 sessionStorage 在客户存储大型和复杂数据集的更有效方案
  • 使用 WebSocket 与服务器端脚本进行开放的双向通信
  • 使用 Web Worker 在后台执行 JavaScript
  • 标准化的拖放实现
  • 在浏览器中实现地理位置服务
    …………

小结

了解了 HTML5 以及使用 Modernizr 等工具检测特性的重要性。

------------ 感谢你的阅读 ------------