本文使用 Zhihu On VSCode 创作并发布
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 类：
<html class="no-js"></html>
利用这个类，可以浏览器不支持 JavaScript 的情况下应用 CSS 样式。
;.nojs selector {
style properties;
}
然后，它还会检测浏览器可以支持的各种特性，并添加相应的类名。 实际情况是浏览器会支持部分特性，不支持另一些特性，这时，类名中就会间或出现 features 和 no-feature。
它还可以帮一些老旧浏览器处理 <section> 和 <article> 等新 HTML5 元素。
使用它非常简单，从 http://www.modernizr.com/ 下载它，然后在文档的<head>中添加该脚本：
<script src="modernizr-1.5.min.js"></script>
一定要把这个脚本放在
元素中，因为放在文档开头，可以在加载其它标记之前先加载它，以便能更好地创建 HTML5 元素。示例
一些有关 Canvas、视频/音频以及表单的例子，需要以下浏览器：
- 苹果 Safari 5+
- Chrome 6+
- Firefox 3.6+
- IE 9+
- opera 10.6+
浏览器一般只能显示静态图片，使用 GIF 或许可以实现一些动画，或者使用 CSS 加 JavaScript 也能变化一些样式。 但 HTML5 的<Canvas> 元素可以动态创建和操作图形图像。 支起一张“画布”：
<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 像素宽的白色描边效果。
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;
结果：
- HTML 的
<video>元素在文档中嵌入影片以及影片交互定义了一种标准方式，同时也把嵌入操作简化成了一个标签：
<video src="movie.mp4">
<!-- 不支持 <video> 的替代内容 -->
<a href="movie.mp4">Download movie.mp4</a>
</video>
同样，音频也是：
<audio src="audio.mp3">
<a href="audio.mp3">Download audio.mp3</a>
</audio>
自定义控件 浏览器显示
<video>元素时，会为其添加一些与浏览器样式统一的标准播放控件，要想自定义这些控件的外观，或者添加新的控件，可以通过 DOM 属性来实现。主要有：- currentTime，返回当前播放的位置，以秒表示；
- duration，返回媒体的总时长，以秒表示，对流媒体返回无穷大；
- paused，表示是否处于暂停；
- play，在媒体播放开始时发生；
- pause，在媒体暂停时发生；
- loadedata，在媒体可以从当前播放位置开始播放时发生；
- ended，在媒体已播放完成而停止时发生。
记住，无论创建什么控件，都别忘了在
<video>元素中添加 control 控件。<video src="movie.mp4" controls></video>这样才会显示控制条：
Image
传统的表单可用的输入控件类型很少，文本框、单选按钮、复选框对简单的表单是够了，但需要更多交互功能的时候，仍需要 DOM 上阵。 HTML5 提供了新的输入型表单：
- email，输入邮箱
- url，输入 url
- date，输入日期和时间
- number，输入数值
- range，用于生成滑动条
- search，用于搜索框
- tel，用于输入电话号码
- color，用于选择颜色
新的属性：
- autocomplete，用于为文本（text）输入框添加一组建议的输入项；
- autofocus，用于让表单元素自动获得焦点；
- form，用于对
<form>标签外部的表单元素分组； - min、max 和 step，用在范围和数值输入框中；
- pattern，用于定义一个正则表达式，以便验证输入的值；
- placeholder，用于在文本输入框中显示临时性的提示信息；
- required，表示必填
使用的时候要检测浏览器是否支持对应的控件，可以使用 inputtypes.type 属性，如：
if (!Modernizr.inputtypes.date) {
// 生成日期选择器的脚本
}
检查属性，可以使用 input.attribute 属性，如：
if (!Modernizr.input.placeholder) {
// 生成占位符提示信息的脚本
}
如果没有使用 Modernizr，可以使用 inputSupportType 函数来检查浏览器是否支持某种输入控件。
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 一样：
if (!inputSupportType(date)) {
// 生成日期选择器的脚本
检查特定的属性，可以使用这个 elementSupportsAttribute 函数：
function elementSupportsAttribute(elementName, attribute) {
if (!document.createElement) return false;
var temp = document.crateElement(elementName);
return attribute in test;
}
使用方式和 modernizr 一样：
if (!elementSupportType('input', 'placeholder')) {
// 生成提示占位符的脚本
- localStorage 和 sessionStorage 在客户存储大型和复杂数据集的更有效方案
- 使用 WebSocket 与服务器端脚本进行开放的双向通信
- 使用 Web Worker 在后台执行 JavaScript
- 标准化的拖放实现
- 在浏览器中实现地理位置服务 …………
小结
了解了 HTML5 以及使用 Modernizr 等工具检测特性的重要性。
扫一扫
7309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
