html5（上）

html5（上）
1）语义化标签
2）增强型表单
3）视频和音频
4）canvas绘图
5）svg绘图
6）Geolocation对象 地理定位
7）拖放API
8）Web Worker
9）Web Storage

1）语义化标签

-标签 描述

定义文档头部的区域

定义文档尾部的区域

定义文档的导航

定义文档中的节（区段）

定义页面独立的内容区域

定义页面的侧边内容

详情 用于描述文档或文档某个部分的细节

被details元素包含时作为details元素的标题

定义对话框，比如提示框

2）增强型表单
拥有多个input输入类型，提供了更好的输入控制和验证
-输入类型 描述

color 用于选取颜色

date 用一个日期选择器选取日期

datetime 选择一个日期（UTC时间）

datetime-local 选择一个日期和时间（无时区）

email 包含e-mail地址的输入域

month 选择一个月份

number 数值的输入域

range 一定范围内数字值的输入域

search 用于搜索域

tel 定义输入电话号码字段

time 选择一个时间

url url地址的输入域

week 选择周和年

html5也新增以下表单元素：

-表单元素 描述

元素规定输入域的选项列表，使用 元素的list属性与

用于验证用户，标签规定用于表单的密钥对生成器字段

用于不同类型的输出，比如计算或脚本输出

html5新增的表单属性：
 -表单属性 描述

placehoder属性 输入框默认值，在用户输入值时消失

required属性 是一个boolean属性。要求填写的输入域不能为空

pattern属性 描述一个正则表达式，用于验证 元素的值

min和max属性 设置元素最小值和最大值

step属性 为输入域规定合法的数字间隔

height属性和width属性 用于image类型的 标签的图像高度和宽度

autofocus属性 是一个boolean属性。规定在页面加载时，域自动的获得焦点

3）视频和音频
html5提供了播放音频文件的标准，即使用元素

<audio controls>

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mp3">

您的浏览器不支持audio元素

</audio>

controls属性提供添加播放、暂停和音量控件

在之间你需要插入浏览器不支持audio元素的提示文本。元素允许多个元素，可以链接不同的有音频文件，浏览器将使用
第一个支持的音频文件

目前，元素支持三种音频格式文件：MP3，Wav和Ogg

html规定了播放视频文件的标准，即使用

元素

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

您的浏览器不支持video标签

</video>
 controls属性提供添加播放、暂停和音量控件，也可以使用dom操作来控制视频的播放暂停，如play()和pause()方法。

同时video元素也提供了width和height属性控制视频的尺寸。如果设置了高度和宽度，所需的视频空间会在页面加载时保
留。如果没有设置高度和宽度，浏览器不知道视频大小，那么浏览器就不能在加载时保留特定的空间，页面就会根据原始
视频的大小而改变。

video元素支持多个source元素。source元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式（MP4、
WebM和Ogg）

4）canvas绘图
标签只是图形容器，必须使用脚本来绘图

Canvas-图形

1.创建一个画布，一个画布在网页上是一个矩形框，通过

标签通常要指定一个id属性（脚本中经常要使用），width和height属性定义画布的大小，使用style属性来添加边框。你

可以在页面中使用多个

2.使用Javascript来绘制图像，canvas元素本身是没有绘图能力的。所有的绘制工作必须在Javascript内部完成。

  <script>

  var c = document.getElementById('myCanvas');
  var ctx = c.getContext("2d");

  ctx.fillstyle = "#FF0000";

  ctx.fill

  </script>

Canvas-路径

canvas之路径绘制 ： https://segmentfault.com/a/1190000010431979

非零环绕填充规则 ：https://blog.csdn.net/yellowmushroom/article/details/89430009

Canvas-文本
 使用canvas绘制文本，重要的属性和方法如下：

font - 定义字体

textAlign - 文本水平对齐方式 https://www.w3school.com.cn/tags/canvas_textalign.asp

textBaselign - 文本垂直对齐方式 https://www.w3school.com.cn/tags/canvas_textbaseline.asp

fontText（text，x，y）- 在canvas上绘制实心的文本

strokeText（text，x，y）- 在canvas上绘制空心的文本

Canvas-渐变

有两种不同的方式来设置canvas渐变：

1. createLinearGradient（x1，y1，x2，y2） 创建线性渐变

接受四个参数，分别表示渐变的起点（x1，y1）与终点（x2，y2）

2. createRadialGradient（x1，y1，r1，x2，y2，r2）创建一个径向/圆渐变

接受六个参数，以（x1，y1）为原点，r1为半径的起始圆和以（x2，y2）为原点，r2为半径的终点圆

径向渐变详解 ：https://www.cnblogs.com/-nothing-/p/5039537.html

上色：

gradient.addColorStop(offset,color)

offset参数：必须是0.0与1.0之间的数值，表示渐变中颜色所在的位置

color参数：必须是一个有效的CSS颜色值

// 可以把线性或者径向的渐变对象赋给图形的fillStyle属性和strokeStyle属性

// 渐变可以填充在矩形、圆形、线条、文本等等各种形状

// 使用渐变对象时必须使用两种或两种以上的停止颜色

Canvas-图像

把图像放置到画布上，用context.drawImage（）；

有下列三种方法(必须在图片下载后才可以使用)：

1.context.drawImage(image,x,y) 把图像绘制到指定的坐标

2.context.drawImage(image,x,y,w,h) 把图像绘制到指定的坐标并设置宽高

3.context.drawImage(image,sx,sy,sw,sh,x,y,w,h) Geolocation API存在于navigator对象中，只包含3个办法

sx:开始剪切的x坐标 sy：开始剪切的y坐标 sw：被剪切图像的宽度 sh：被剪切图像的高度

5）svg绘图

6）Geolocation对象 地理定位

https://blog.csdn.net/yexudengzhidao/article/details/55001257

地理位置定位原理介绍：

地理位置的定位目前有以下几种方式： GPS，IP地址，Wifi(国内基本不用)，GSM/CDMA基站的方式。

HTML5地理位置定位的实现：

1. 实现基于浏览器(无需后端支持)获取用户的地理位置技术。

2. 精确定位用于的地理位置(精度最高达10米之内，依赖设备)。

3. 可持续追踪用户的地理位置
 4. 与Google Map , Baidu Map 交互呈现地理位置。
检查浏览器是否支持：

if (navigator.geolocation) {

   console.log("浏览器支持!");

}
else {

   console.log("浏览器不支持!");

Geolocation API存在于navigator对象中，只包含3个办法：

getCurrentPosition //获取当前位置，只能获取一次，除非再次打开web应用。

watchPosition //实时监视位置

clearWatch //清除监视

getCurrentPosition(success,error,option)方法最多可以有三个参数：
第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数

第二个参数用于捕获获取位置信息出错的情况

第三个参数是配置项

7）拖放API

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

源对象可触发事件：

dragstart：拖动开始

drag：拖动中

dragend：拖动结束

目标对象可触发事件：

dragenter：拖动着进入

dragover：拖动着悬停

dragleave：拖动着离开

drop：释放

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

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

event.dataTransfer.setData( k, v )

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

var data = event.dataTransfer.getData( k )

8）Web Worker

为js创造多线程环境，允许主线程创造worker线程

阮一峰web worker：http://www.ruanyifeng.com/blog/2018/07/web-worker.html

限制：

1.同源限制，分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

2.DOM限制，Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无 法使用

document 、 window 、 parent 这些对象。但是，Worker 线程可以 navigator 对象和 location 对 象。

3.通信限制，Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

4.脚本限制，Worker 线程不能执行 alert() 方法和 confirm() 方法，但可以使用 XMLHttpRequest 对象发 出 AJAX 请

求。

5.文件限制，Worker 线程无法读取本地文件，即不能打开本机的文件系统（ file:// ），它所加载的脚本， 必须来自网

络。

基本用法：

检测浏览器是否支持

if(typeof(Worker)!=="undefined")

     // Yes! Web worker support!

     // Some code.....

else

     // Sorry! No Web Worker support..

}

创建web worker文件

创建web worker对象

if(typeof(w)=="undefined"){
 w = new Worker("demo_workers.js");

接受worker发送的消息

w.onmessage=function(event){
document.getElementById("result").innerHTML = event.data;

};
 关闭worker

// 主线程

worker.terminate();

// Worker 线程

self.close();

9）Web Storage

> • 使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这

些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。数据以 键/

值 对存在, web网页的数据只允许该网页访问使用。

localStorage

生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，
使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。

var storage = null;

if(window.localStorage){              //判断浏览器是否支持localStorage

   storage = window.localStorage;    

   storage.setItem("name", "Rick");    //调用setItem方法，存储数据

   alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick

   storage.removeItem("name");     //调用removeItem方法，移除数据
   alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null

sessionStorage

生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属
性。需要注意的有以下几点：

页面刷新不会消除数据;

只有在当前页面打开的链接，才可以访sessionStorage的数据；

使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据;

常用API（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);