新特性:Indexed DB本地存储功能、脱离Flash 和Silverlight直接在浏览器中显示图形或动画、一个HTML5文档到另一个文档间的拖放功能

设置 CSS 的 display 属性值为 block

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

HTML5新元素

标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

<datalist>	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>	规定用于表单的密钥对生成器字段。
<output>	定义不同类型的输出，比如脚本的输出。

<article>	定义页面独立的内容区域。
<aside>	定义页面的侧边栏内容。
<bdi>	允许您设置一段文本，使其确定脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<nav>	定义运行中的进度（进程）。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

Canvas

绘制工作必须在 JavaScript 内部完成

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

在canvas中绘制圆形, 我们将使用以下方法:

arc(x,y,r,start,stop)

实际上在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill().

Canvas - 文本

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

Canvas - 渐变

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

drawImage(image,x,y)

内联 SVG（可缩放矢量图形）

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

MathML

 <math xmlns="http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
				
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>
				
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
			
      </math>

a^2+b^2=c^2

 <math xmlns="http://www.w3.org/1998/Math/MathML">	
         <mrow>			
            <mrow>	
               <msup>
                  <mi>x</mi>
                  <mn>2</mn>
               </msup>			
               <mo>+</mo>			
               <mrow>
                  <mn>4</mn>
                  <mo>⁢</mo>
                  <mi>x</mi>
               </mrow>
					
               <mo>+</mo>
               <mn>4</mn>
					
            </mrow>
				
            <mo>=</mo>
            <mn>0</mn>
				 
         </mrow>
      </math>

x^2+4x+4=0

!!!拖放（Drag 和 Drop）

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
<!--draggable="true" 设置元素为可拖放-->
</body>
</html>

'属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值

放到何处 - ondragover

无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式,调用 ondragover 事件的 event.preventDefault() 方法

进行放置 - ondrop

Geolocation（地理定位）

HTML5 新的 Input 类型

color
date:从一个日期选择器选择一个日期
datetime
datetime-local:
email
month
number
range
search
tel
time
url
week

HTML5知识补充