<header><nav></nav></header>导航

新增的h5标签

required 属性规定此处必填不能为空

<article> 标记定义一篇文章

<header> 标记定义一个页面或一个区域的头部                                  

 

 

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。

<meter value=”规定度量的当前值” low=”规定被视作低的值的范围” high=”规定被视作高的值的范围” max=”规定范围的最大值” min=”规定范围的最小值” optimum=”规定度量的优化值”></meter>定义进度条

属性

<progress value=”1” max=”10”></progress>  标签定义运行中的进度（进程）。

多媒体标签

<video src=”shi.mp4” controls muted loop></video>

controls 显示播放控件

muted 静音模式

loop 自动循环

preload=””播放之前显示的图片遮罩

autoplay 页面加载自动播放

 

 

js方法

video.play() 播放

video.pause() 暂停

video.currentTime+=20 快进

video.currentTime-=20 快退

video.volume+=0.3 声音调大 限制0-1之间

video.volume-=0.3 声音调小 限制0-1之间

video.playbackRate=3 快速播放 倍数

video.playbackRate=1/3 慢速播放 除以倍数 默认正常速度为1

 

 

重新定义的HTML标签

b 只表示粗体，不表示强调

I 只表示斜体 不表示强调

dd 定义包含文本

dt 解释文本

hr 表示主题结束

menu 定义用户界面的菜单

strong 只表示重要性

其他标签

ruby 标记定义注释或暗示

rp 对于不支持ruby元素的处理方法

rt 对ruby的注释内容文本

 

 

智能表单

type新属性

type=”email” 限制用户输入必须是email类型

type=”url”   限制用户输入类型为url类型

type=”date”  限制用户输入类型为日期类型

type=”time”  限制用户输入类型为时间类型

type=”month”限制用户输入类型为月类型

type=”week” 限制用户输入类型为周类型

type=”number” 限制用户输入类型为数值类型

type=”range” 产生一个滑动条表单

type=”color” 产生一个颜色选择表

type=”search”

datalist

 

 

canvas 画布 H5绘画基础

<canvas id=”canvas” width=”1000” height=”600”>长宽要设置在canvas的行内标签内不能使用style设置否则会出现错误</canvas>

var cxt=canvas.getContext(“2d”); 绘图开始需要启用的2D环境

cxt.beginPath();  开始路径

cxt.lineWidth=1  设置路径宽度

cxt.strokeStyle=”red” 设置路径颜色

cxt.moveTo(0,0)  设置起始坐标值

cxt.lineTo(100,100) 设置终点坐标值

cxt.stroke();      实现绘制动作

cxt.closePath();    结束路径

 

圆形

cxt.beginPath()

cxt.lineWidth=5’

cxt.strokeStyle=”red”;

cxt.arc(起点X,起点Y,半径R,角度起始,角度结束*Math.PI/180,顺时针true/逆时针false);

cxt.stroke();

cxt.closePath();

 

注意：如果继续绘制图形不新设置路径宽度和路径颜色的话新的图形会继承前一个图形设置的颜色和线宽

 

 

 

 

 

 

fillRect(0,0,100,100);  方法绘制“已填色”的矩形。默认的填充颜色是黑色。将rect()和fill()合并使用

strokeRect(0,0,100,100); 方法绘制矩形（不填色）。笔触的默认颜色是黑色。

 

createRadialGradient(x0,y0,r0,x1,y1,r1)方法创建放射状/圆形渐变对象。

createLinearGradient(x0,y0,x1,y1) 方法创建线性的渐变对象。

my_gradient.addColorStop(0,"black");

my_gradient.addColorStop(1,"white");

 

图形修饰

createLinearGradient() 线性渐变

createPattern()方法在指定的方向内重复指定的元素。

createRadialGradient()径向渐变

addColorStop() 渐变开始的颜色和结尾的颜色

fillStyle(); 填充的模式

strokeStyle(); 划线的模式

shadowColor= 阴影的颜色

shadowBlur=阴影的模糊级别

shadowOffsetX=阴影的水平偏移

shadowOffsetY=阴影的垂直偏移

 

 

clearRact() 清除;

绘图方法

fill(); 填充

stroke();划线

beginPath() 开始

moveTo() 划线的起点

closePath();闭合或结束

lineTo() 划线的终点

clip() 从原始画布剪切任意形状和尺寸的区域

quadraticCurveTo(贝塞尔控制点的 x 坐标, 贝塞尔控制点的 y 坐标, 结束点的 x 坐标, 结束点的 y 坐标) 二次贝塞尔曲线

bezierCurveTo() 三次贝塞尔曲线

arc() 绘制圆

arcTo() 创建两切线之间的弧

isPointInPath() 判断指定的点是否位于当前路径中

transform()    settransform()

 

路径修饰

lineCap 设置或返回线条结束点样式

lineJoin(bevel斜角/ round圆角/ miter默认尖角) 设置或返回两条线相交时,所创建的拐角类型

lineWidth 设置或返回当前的线条宽度

miterLimit 设置或返回最大斜接长度

 

 

font=””   font 属性设置或返回画布上文本内容的当前字体属性。

context.fillText(text,x,y,maxWidth);

ctx.strokeText("Hello World",10,50); 镂空字体

 

cxt.textAlign=”start默认文本在指定的位置开始|end文本在指定的位置结束|center文本的中心被防止在指定的位置|left文本左对齐|right本文右对齐”

 

 

 

 

 

AddType text/cache-manifest.manifest

 

 

var form=new FormDate();

模拟表单控件用于上传文件和ajax进行数据交互；可以把这个对象放在xml.send(form);

form对象下添加键值对:form.append(name,value);

 

e.dataTransfer

 

 

本地存储

1,存储量大:web存储比cookie存储量大

2,安全性高:cookie在向后会发送每一个http请求的时候都会出现在http头部,二h5

的本地存储不会,节约了宽带

 

localStorage sessionStorage的区别

 localStarage没有时间限制的数据存储,永远不会过期，除非主动删除数据,数据可跨域多个窗口

  sessionStrorage数据会因窗口的关闭而丢失，不同窗口不可以共享

  用法:localStorage.length 获得storage中的个数

   localStorage.key 获得第n个键值对的键

   localStorage.key=value; 设置

   localStorage.setltem(key,valye) 添加

   localStorage.getltem(key)

   localStorage.key

 

离线存储

1、为什么使用离线存储

   在用户没有与因特网连接时，照样可以访问站点或应用，在用户与因特网连接时，自动更新缓存数据，使我的网站的适应性和应用型更强

 

服务器：

需要在apache配置文件

     AddType  text/cache-manifest .manifest

建立 .manifest 清单文件

CACHE MANIFEST

#####

CACHE

NETWORK

FALLBACK

客户端：关联manifest文件到html文档

<html manifest="aa.manifest";>

 

 

地理定位

var map = new BMap.Map("map");    // 创建Map实例

       map.centerAndZoom(new BMap.Point(jing,wei),15);  // 初始化地图,设置中心点坐标和地图级别

       map.addControl(new BMap.MapTypeControl());   //添加地图类型控件

       map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的

       map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

       var local = new BMap.LocalSearch(map, {

                       renderOptions:{map: map, autoViewport:true}

       });

       local.searchNearby("学校", "医院");

 

 

SVG

SVG的简介

在网页中进行图形绘制

跟canvas的区别

基于xml的技术

SVG绘制的图形是矢量图；矢量图的特点是放大不会失真

 

SVG文件的使用

新建xml或svg文件

xml的版本号与encoding:

添加文档头:<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>;

建立svg跟标签:跟标签的命名空间

xmlns='http://www.w3.org/2000/svg';

 

HTML中引入SVG

1.图片

2.背景

3.框架

4.直接添加svg(最好svg的宽度和高度是100%)

 

svg的基本图形

circle

<circle cx="100" cy="100" r="100" fill="none" stroke="green" stroke-width="3"></circle>

 

rect

<rect x="20" y="20" width="100" height="100" stroke='red'</rect>

 

line

<line x1="0" y1="0" x2="300" y2="300" stroke='red'></line>

 

ellipse

<ellipse cx="300" cy="80" rx="100" ry="50"></ellipse>

 

polyline折线

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"></polyline>

 

polygon 多边形

<polygon points="220 100 300 210 170 250" stroke="red" fill="blue"></polygon>

 

五角星

<polygon points="100 10 40 180 190 60 10 60 160 180" fill="red" stroke="blue"></polygon>

 

path

path路径

d属性

命令:M(起始位置)、L(第二个点的位置)、H(水平)、V(垂直)、A(环形圆)、Z(结束，收尾自动闭合)

小写表示相对上一个的距离

A命令

x半径 y半径

角度

弧长 0小弧 1大弧

方向 0逆时针1顺时针

终点X坐标 终点Y坐标

大小写区分，大写代表绝对，小写代表相对

SVG中JS操作

SVG新建标签 createElementNS(命名空间，标签)

circle.setAttribute("cx",100);

svg.appendChild(circle);