Html5的特性和html语义化理解

0\html语义化理解

语义化的HTML就是正确的标签做正确的事情.
例如: 标题<h>, 强调<em> 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
好处:
1\增强可读性,
2\为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
3\有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

1\多了很多语义标签

<hrader></header>定义了文档的头部区域
<footer></footer> 定义了文档的尾部区域
<nav></nav> 定义文档的导航
<section></section> 定义文档中的节（section、区段）
<article></article> 定义页面独立的内容区域
<aside></aside> 定义页面的侧边栏内容
<detailes></detailes> 用于描述文档或文档某个部分的细节
<summary></summary> 标签包含 details 元素的标题
<dialog></dialog> 定义对话框，比如提示框

2\表单(input)属性和类型.

color 主要用于选取颜色
date 从一个日期选择器选择一个日期
datetime 选择一个日期（UTC 时间）
datetime-local 选择一个日期和时间 (无时区)
email 包含 e-mail 地址的输入域
month 选择一个月份
number 数值的输入域
range 一定范围内数字值的输入域
search 用于搜索域
tel 定义输入电话号码字段
time 选择一个时间
url URL地址的输入域
week 选择周和年

placehoder属性即我们常见的输入框默认提示，在用户输入后消失。
required 属性，是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性，描述了一个正则表达式用于验证 元素的值。
min 和 max 属性，设置元素最小值与最大值。
step 属性，为输入域规定合法的数字间隔。
height 和 width 属性，用于 image 类型的 标签的图像高度和宽度。
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性 ，是一个 boolean 属性。规定 元素中可选择多个值。

3\视频和音频

1\播放音频文件的标准，即使用
2\ video 元素来包含视频的标准方法。

4\Canvas绘图

标签只是图形容器，必须使用脚本来绘制图形。

**Canvas - 图形** 
<script>
　　var c=document.getElementById("myCanvas");
　　var ctx=c.getContext("2d");
　　ctx.fillStyle="#FF0000";
　　ctx.fillRect(0,0,150,75);
</script>

1\Canvas - 路径
moveTo(x,y) 定义线条开始坐标 lineTo(x,y) 定义线条结束坐标
2\Canvas - 文本
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
3\Canvas - 渐变
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with
gradient ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
4\Canvas - 图像
把一幅图像放置到画布上, 使用 drawImage(image,x,y) 方法

SVG 与 Canvas两者间的区别:
　　 SVG 是一种使用 XML 描述 2D 图形的语言。
　　 Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

5\拖放API

1\拖放的源对象(可能发生移动的)可以触发的事件——3个：

dragstart：拖动开始
drag：拖动中
dragend：拖动结束

整个拖动过程的组成： dragstart1 + dragn + dragend*1

2\拖放的目标对象(不会发生移动)可以触发的事件——4个：

    dragenter：拖动着进入
    dragover：拖动着悬停
    dragleave：拖动着离开
    drop：释放

整个拖动过程的组成1： dragenter1 + dragovern + dragleave*1

整个拖动过程的组成2： dragenter1 + dragovern + drop*1

3\dataTransfer：用于数据传递的“拖拉机”对象；

在拖动源对象事件中使用e.dataTransfer属性保存数据：

e.dataTransfer.setData( k, v )

在拖动目标对象事件中使用e.dataTransfer属性读取数据：

var value = e.dataTransfer.getData( k )

6/Web Worker

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。
如需终止 web worker，并释放浏览器/计算机资源，使用 terminate() 方法。

7/Web Storage

8\WebSocket