html5

1 简介

1.1 规则

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明

1.2 有趣的新特性

用于绘画的canvas画布
用于媒体回放的video和audio元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如calendar、date、time、email、url、search

2 视频

多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件，HTML5 规定了一种通过 video 元素来包含视频的标准方法。

2.1 视频格式

当前，video 元素支持三种视频格式：

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

2.2 如何工作

<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title></head><body><video width="800" height="" controls="controls" preload="auto"><source src="http://www.w3school.com.cn//i/movie.mp4" type="video/mp4"></source></video></body>
</html>

2.1 标签属性

3 视频/DOM

3.1 使用 DOM 进行控制

方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，元素开始播放、已暂停，已停止，等等。

下例中简单的方法，向我们演示了如何使用元素，读取并设置属性，以及如何调用方法。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title></head><body><div style="text-align: center;"><button onclick="playPause()">播放/暂停</button><button onclick="big()">大</button><button onclick="middle()">中</button><button onclick="small()">小</button><br><video id="myvideo"  width="420" style="margin-top: 15px;"><source src="http://www.w3school.com.cn//i/movie.mp4" type="video/mp4"></source><source src="/example/html5/mov_bbb.ogg" type="video/ogg" />Your browser does not support HTML5 video.</video></div><script type="text/javascript">var myvideo = document.getElementById("myvideo");function playPause(){if(myvideo.paused){myvideo.play();}else{myvideo.pause();}}function big(){myvideo.width=560;}function middle(){myvideo.width=420;}function small(){myvideo.width=280;}</script></body>
</html>

3.2 方法、属性和事件

3 音频

3.1 音频格式

3.2 如何工作

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><audio controls="controls" ><source src="song.ogg" type="audio/ogg"><source src="song.mp3" type="audio/mpeg">当前浏览器不支持audio</audio></body>
</html>

效果图：

3.3 标签属性

4 拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

4.1 如何进行

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box1,#box2{float: left;width: 200px;height: 100px;border: 1px solid black;margin: 10px;padding: 10px;}</style><script type="text/javascript">//放到何处 - ondragover//通过调用 ondragover 事件的 event.preventDefault() 方法：//阻止对元素的默认处理方式,默认地，无法将数据/元素放置到其他元素中。function allowDrop(ev){ev.preventDefault();}//拖动什么 - ondragstart 和 setData()function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}//进行放置 - ondrop  当放置被拖数据时，会发生 drop 事件function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script></head><body><div id="box1" ondragover="allowDrop(event)" ondrop="drop(event)"><img src="./image/logo.png" draggable="true" ondragstart="drag(event)" id="drag" style="margin: 30px 10px;"></div><div id="box2" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<!-- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中 --></body>
</html>

结果：

4.2 代码解释

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
被拖数据是被拖元素的 id (“drag1”)
把被拖元素追加到放置元素（目标元素）中

5 画布

5.1 介绍

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

5.2 使用方法

步骤示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 创建画布，通过 JavaScript 来绘制 --><canvas id="mycanvas" width="200px" height="100px"></canvas><script type="text/javascript">// JavaScript 使用 id 来寻找 canvas 元素var c = document.getElementById("mycanvas");// 创建 context 对象,//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法var cxt = c.getContext("2d");//绘制一个红色的矩形//fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸cxt.fillStyle=("#FF0000");cxt.fillRect(0,0,175,100);</script></body>
</html>

效果：

基于菜鸟教程重学HTML5部分相关推荐

一部适合有一点点lingo编程基础的人阅读的lingo入门教程——重学lingo，发现很多遗忘的小知识，并将其整理成册——运算符、数学函数、金融函数、概率密度函数、变量定界与集操作函数
一.序言 lingo是一款处理优化问题十分好用的软件. 虽然常常使用,但却许久未曾再系统的学习过,前段时间,重学MATLAB,发现了很多遗忘的知识点,今日,决定重学lingo,将易于遗忘的那些基本的语 ...
基于菜鸟教程快速入门Vue2.0
runoob:run noob 的合并,原意奔跑吧菜鸟依据个人经验: 将<style>标签放到html对应的<head>标签中 <script>标签放到< ...
html5语言基础教程,HTML5基础教程，从入门到精通，零基础学HTML5
随着互联网的快速发展,对前端开发方面的人才需求越来越大,其中Web前端领域的HTML5也受到许多人追捧 HTML5是构建Web内容的一种语言描述方式.HTML5是互联网的下一代标准,是构建以及呈现互联 ...
html5的class属性值,HTML class 属性 | 菜鸟教程
HTML class 属性实例在 HTML 文档中使用 class 属性: 菜鸟教程(runoob.com) h1.intro {color:blue;} p.important {color:g ...
Alex 的 Hadoop 菜鸟教程: 第5课 YARN 安装以及helloworld (基于centos的CDH)
原帖地址:http://blog.csdn.net/nsrainbow/article/details/36627675 新老MapReduce的比较说到YARN肯定要先说下老的MapReduce ...
HTML5菜鸟教程在线编译特效,菜鸟教程在线工具
菜鸟教程(runoob.com) $.validator.setDefaults({ submitHandler: function() { alert("提交事件!"); } } ...
菜鸟教程之 JavaScript 教程
From:菜鸟教程 JavaScript:https://www.runoob.com/ W3School JavaScript 教程:http://www.w3school.com.cn/js/in ...
菜鸟教程python3-Python数据分析，学习路径拆解及资源推荐
原标题:Python数据分析,学习路径拆解及资源推荐关于Python数据分析,其实网上能够找到的学习资源很多,主要分为两类: 一类是提供各种资源的推荐,比如书单.教程.以及学习的先后顺序: 另一类是 ...
python爬虫菜鸟教程-Python数据分析，学习路径拆解及资源推荐
原标题:Python数据分析,学习路径拆解及资源推荐关于Python数据分析,其实网上能够找到的学习资源很多,主要分为两类: 一类是提供各种资源的推荐,比如书单.教程.以及学习的先后顺序: 另一类是 ...

基于菜鸟教程重学HTML5部分