新特性:Indexed DB本地存储功能、脱离Flash 和Silverlight直接在浏览器中显示图形或动画、一个HTML5文档到另一个文档间的拖放功能
设置 CSS 的 display 属性值为 block
header, section, footer, aside, nav, main, article, figure {
display: block;
}
HTML5新元素
<canvas> | 标签定义图形,比如图表和其他图像。该标签基于 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 上绘制实心的文本
扫描二维码关注公众号,回复: 2486707 查看本文章 -
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>...</math>
<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:
- month
- number
- range
- search
- tel
- time
- url
- week