Html5 思维导图模板_ProcessOn思维导图、流程图

2.新表单

input新类型

email

作用：提交表单时，进行基本验证

缺陷：验证逻辑不完整 abc@aa

search

关键字：url

作用：pc端不明显，加入删除×

URL

作用：验证是否包含http://

缺陷：验证逻辑不完整

关键字：url

tel

注意：效果只能在手机端出现

number

作用：限制输入数字

属性：min max step

范围类型

功能：允许用户选择一个范围的数值

颜色类型

功能：预定义的颜色取色控件

案例1：页面配色器

日期类型

date

week

month

表单新元素

<datalist id="myList">
    <option>请选择</option>
    <option>北京</option>
    <option>南京</option>
    <option>天津</option>
</datalist>
<input type="text" list="myList">

定义备选项（并不显示），需要配合<input>元素使用，定义list属性，属性值等于datalist元素的id属性值

特点：数据与结构的分离

<datalist>数据

<input> 结构

优点：使用<datalist>元素定义的数据可以重复使用。

进度条：不同浏览器中效果不一致。

属性：max 设置进度条的最大值，没有min属性，最小值为0

属性：value 表示当前进度值

<script>
    var t;
    function mychange(){
        var progress = document.getElementById("myProgress");
        var value = progress.value;
        value++;
        if(value>100){
            clearTimeout(t);
            return;
        }else{
            progress.value = value;
            t = setTimeout("mychange()",100);
        }
    }
    mychange();
</script>

<meter>

<meter min="0" max="100" value="90" low="10" high="80"></meter>

low:低值预警

high:高值预警

通常用于显示表单元素处理的结果值

提高代码可读性

<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>

表单新属性

placeholder

通常用于search输入类型，也可以用在文本域。

给出简单提示，用于帮助用户输入正确内容。

<input type="text" placeholder="请输入您的用户名">

multiple

可以用在一些输入类型中（email，file等），从而支持在一个域中输入多个值，但所插入的值必须用逗号分隔。

<input type="email" multiple name="txtEmail">

autofocus

自动获取焦点

form

允许将表单元素定义在<form>元素外

<input type="password" id="pwd" form="myForm">

表单新验证

验证属性

Required

验证当前元素值是否为空

Pattern

使用正则表达式验证当前元素值是否匹配

不验证是否为空

min,max,step

验证当前元素值最小值或最大值

适用于number, range等元素

minlength,maxlength

验证当前元素值的最小，最大长度

maxlength 直接限制输入值的长度

minlength 输入之后再进行验证

validity

利用ValidityState对象描述指定元素的有效状态。

验证状态

valid

执行完毕得到布尔值，它表示表单控件是否已经通过了所有验证的约束条件

true:所言约束条件都通过

false:至少一条验证没有通过

valueMissing

typeMismatch

patternMismatch

tooLong

rangeUnderflow

如果输入内容小于min属性声明的值，则返回true

stepMismatch

给定的值与min，max，step不一致，则返回true

值只与step相关，-10，110都返回false，其它步长不为10的都返回true

customError

配合setCustomValidity()使用

setCustomValidity()：设置自定义错误提示内容。注意：输入正确后，需要调用改方法设置为空。

一旦调用了setCustomValidity()，则所有验证状态都被置为false

3.音视频处理

基本情况

目前主流网站使用Flash技术处理HTML页面中的视频内容

Flash存在问题

浏览器原生不支持，需要安装ActiveX插件

性能不好（不能过多的使用）

移动终端并不支持Flash技术

Iphone 从一开始不支持Flash

Android 以前支持，但体验差，现在已经放弃

Flash 的母公司公开宣布放弃，不再更新

目前用于替代Flash技术最好的选择就是 HTML5

几乎所有浏览器原生支持<video>元素

性能更高

智能移动端支持非常好

<video>

src:视频路径

autoplay:设置自动播放

支持的格式

Mp4

主流

OGG

主要用于移动端

WebM格式

目前唯一支持超高清格式

高清720P，超高清1080P

在HTML页面中支持超高清格式(HTML5)

由Google公司推出的

<video autoplay>
    <source src="data/oceans-clip.mp4">
    <source src="data/oceans-clip.webm">
    <source src="data/oceans-clip.ogv">
</video>

属性

src

autoplay

自动播放

controls

提供视频播放的控制面板

loop

表示循环播放

poster

在视频播放前显示一张图片

height, width

设置视频的宽高

需要按视频比例设置高宽

不等比例的情况下设置背景色 style="background:black;"

preload

预加载

auto

默认值，自动加载

none

因版权等原因，不允许预加载

metadata

只加载视频的基本信息（不含视频）

方法

play()

播放

pause()

暂停

load()

加载

canPlayType()

判断浏览器是否支持指定视频格式

事件

play

当视频播放时被触发

pause

视频暂停时被触发

ended

视频结束时触发

error

当视频播放错误时被触发

案例：暂停加广告

存在问题：video元素（全屏时）与其他元素的定位是相对定位时，浏览器会将video设定为最前端。

可以通过video的JS库来实现

canplay

不考虑整体情况下，只要能播放，就播放

canplaythrough

考虑整体情况下，只要能播放，就播放

progress

表示视频加载的进度

播放属性

paused

表示判断当前视频是否暂停

ended

表示判断当前视频是否播放完毕

duration

表示当前视频的时长

currentTime

表示当前视频播放的位置

<audio>

使用方式

只支持一种音频格式

<audio>
    <source src="一种音频格式">
    <source src="一种音频格式">
    <source src="一种音频格式">
</audio>

支持多种音频格式

支持的音频格式

mp3

OGG

wav

属性

autoplay

controls

src

loop

preload

4.Canvas(画布)

基本内容

新元素<canvas>

Canvas在html页面中提供画布功能

类似于windows画图

绘制的内容与HTML无关

不能通过DOM获取绘制的图形

绘制的图形是不能绑定DOM事件

只能用Canvas的API

用途

在HTML页面中绘制图表( 例如柱状图，饼状图等 )

网页游戏

手机端页面游戏几乎全是

PC端也大量使用

如何使用

<canvas></canvas>

默认300*150

1.获取画布元素

var canvas = document.getElementById("canvas");

2.创建画布对象

getContext（）

返回值：画布对象

参数：必须是字符串，必须是"2d"或"3d" 固定写法

通过画布对象调用canvas提供的API进行图形绘制

问题：定义<canvas>元素的宽度和高度用CSS设置，将影响绘制出来图形的高宽比，需要改用<canvas>中的属性width,height

绘制图形

实心矩形

context.fillRect(10,10,100,100)

空心矩形

context.strokeRect(120,10,100,100);

清除指定区域矩形

context.clearRect(250,20,80,80);

设置颜色

填充颜色

context.fillStyle = "green";

描边颜色

context.strokeStyle = "blue";

透明度

context.globalAlpha = 0.3;

绘图案例1

/*

* 需求 - 在HTML页面中绘制空心矩形

* * 坐标值随机

* * x和y的要求 - 不能大于页面宽度和高度

* * 宽度和高度随机

* * 宽度和高度小于画布的高度和宽度

* * 颜色随机

* * rgb(red,green,blue) - 0-255

* * 每隔1秒,绘制一个空心矩形

*/

渐变

线型渐变

createLinearGradient(x1,y1,x2,y2)

具有基准线

起点

x1,y1

终点

x2,y2

createLinearGradient()返回渐变对象，通过渐变对象设置渐变颜色。

addColorStop(position,color)

position:设置渐变颜色的位置，范围 0-1

color:设置渐变的颜色

扇形渐变（射线）

createRadialGradient(x1,y1,r1,x2,y2,r2)

圆心1 x1,y1 半径r1

圆心2：x2,y2 半径：r2

具有柱形（锥形）

两个圆面积

圆心坐标和半径

扇形渐变只在上下两个圆形区域有颜色渐变效果

效果为颜色从第一个圆渐变到第二个圆

绘制文字

方法

fillText(text,x,y)

实心文字

text 要绘制的文字

x,y 文字的坐标值

strokeText(text,x,y)

空心文字

text 要绘制的文字

x,y 文字的坐标值

属性

font

类似于CSS中的font属性

textAlign

设置水平方向对齐

left,center,right

是指相对于基准线的对齐方式

textBaseline

设置文字垂直方向对齐

top,middle,bottom

hanging 悬挂基线

alphabetic 字母基线

是指相对于基准线的对齐方式

阴影

shadowColor

设置阴影颜色

shadowOffsetX

设置水平方向阴影

shadowOffsetY

设置垂直方向阴影

shadowBlur

为阴影设置模糊效果

路径

方法

（标识）方法

beginPath()

表示开始创建路径

closePath()

表示结束创建路径

绘制方法

stroke()

绘制轮廓

fill()

绘制填充

设置方法

rect(x,y,width,height)

生成一个矩形

arc(x,y,radius,startAngle,endAngle,direction)

设置圆形形状

x和y 圆心

radius 半径

direction 按顺时针或逆时针绘制

true

表示逆时针

false

默认，顺时针

startAngle 和 endAngle 设置圆形的起始位置

设置线条

lineWidth

设置线条的宽度

默认值为1(px)

lineCap

设置线条端点的形状

butt

默认，平直

round

向线条的每个末端添加圆形线帽。

square

向线条的每个末端添加正方形线帽。

lineJoin

设置两条线交点的形状

miter

尖角

和miterLimit搭配使用，限制延伸

round

圆角

bevel

创建斜角。

案例：绘制饼状图，柱状图

练习：八卦图

课后作业：随机圆

绘制线条(直线和折线) 多边形

moveTo(x,y)

设置起点，终点坐标值

lineTo(x,y)

设置终点（折点）坐标

设置线条

lineWidth

设置线条粗细，默认1(px)

lineCap

设置线条断点形状

butt

默认，向线条的每个末端添加平直的边缘

round

圆形

square

向线条的每个末端添加正方形线帽。

lineJoin

指定两条线之间的连接点形状

round

圆角

bevel

斜角

miter

默认，创建尖角

和miterLimit搭配使用，确定线条交接点的延伸范围

图片

绘制图片

drawImage(img,x,y)

按照图片原大小加载

img 当前加载（绘制）的图片

x,y 绘制图片的坐标值（左上角）

drawImage(img,x,y,width,height)

width 和 height 设置绘制图片的高和宽

平铺图片

设置对象

createPattern(img,type)

img 平铺的图片

type 平铺的方式

repeat 平铺

no-repeat 不平铺

repeat-x 水平平铺

repeat-y 垂直平铺

绘制

fillStyle = 设置对象

fillRect

* 注意：绘制或者平铺都必须保证图片加载完成再绘制。( onload )

切割图片

clip()

切割(先绘制路线，然后切割)

画布方法

转换方法

scale(x,y)

缩放（缩小或放大）

x:表示水平方向缩放

1：表示不缩放

<1：表示缩小

>1：表示放大

y:表示垂直方向缩放

1：表示不缩放

<1：表示缩小

>1：表示放大

translate(x,y)

重新定位(x,y),重新映射画布上的（0，0）位置

x,y 新的坐标值

相对于上次坐标系

rotate()

旋转当前画布

公式： degree * Math.PI /180

状态

save()

restore()

案例

跟随鼠标的圆圈

随机落下的小球

chart.js

介绍

Canvas的Js库

作用：提供各种图表

特点：基于HTML5 canvas技术

不依赖于任何外部工具库，轻量级

提供六种图表

柱状图

饼状图

曲线图

环型图

极地区域图

雷达图

http://www.bootcss.com/p/chart.js/docs/

分支主题

1.版本

html4

HTML 4.0——1997年12月18日，W3C推荐标准

HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准

html5

2014年10月

标签相对简单，重点 javascript

移动端支持优于PC端

版本声明

<!DOCTYPE html>

弱化了版本声明

扩展

Web前端

移动智能终端

iPhone

Android

Windows Mobile

BlackBerry

WebOS

移动跨平台

phoneGap

5.SVG

基础

SVG 不属于HTML5专有内容

HTML5中提供了SVG原生支持

定义

是一种XML技术来描述二维图形的一种语言

可以使用三种方式描述二维图形

矢量图

图片

文本

优势

可通过文本编辑器来创建和修改。

svg可被搜索引擎，索引，脚本话和压缩

svg可在任何的分辨率下被高质量的打印

svg可在图像质量不下降的情况下被放大

与Canvas区别

SVG不依赖屏幕分辨率

Canvas依赖

SVG支持事件绑定

Canvas不支持

SVG 试用大型渲染区域的程序（例如百度地图）

Canvas适合做网页游戏，SVG不适合

Canvas可以将内容保存为.jpg格式图片

区别

如何选择

https://msdn.microsoft.com/zh-cn/library/gg193983(v=vs.85).aspx

用途

网页中的小图标

天然试用响应式页面

页面中的动画特效

参考

http://www.w3school.com.cn/svg/index.asp

使用方式

使用SVG标签嵌入在HTML页面

使用embed,object和iframe等标签嵌入在HTML页面中（独立页面）

内嵌在XHTML中

SVG元素

常规图形

注意

利用svg绘制的所有图形，必须定义在<svg>元素内

利用svg绘制的所有图形都与HTML页面有关，可以绑定事件

svg绘制的图形，使用style方式来设置属性，使用的不是css属性，而是svg属性

矩形

<rect>

x,y坐标

width和height 宽和高

注意：必须使用属性方式，不能使用样式方式

fill 填充颜色

stroke 描边颜色

stroke-width 描边宽度

圆形

r 半径

cx和cy 圆心

圆形跟随鼠标

注意：

SVG提供的所有元素都可以绑定事件

SVG提供的特殊属性，并不能像HTML元素的属性来操作(Dom)

椭圆

cx,cy 圆心

rx 水平半径

ry 垂直半径

直线

<line>

x1 y1 起点

x2 y2 终点

stroke 线条颜色

子主题

折线

points 坐标x和y之间用逗号分隔，坐标之间用空格分隔

默认将折线中的区域进行填充

绘制空心矩形，结合部要注意调整

多边形

polygon

points

特效元素

渐变

渐变元素都必须在<defs>元素内

线形渐变

基准线

x1,y1 起点

x2,y2 终点

使用<stop>设置渐变的颜色

位置 offset

颜色 stop-color

透明度 stop-opacity

数值必须为百分值

通过图形元素的fill属性，设置为 url(#渐变对象ID)

<rect x="0" y="0" width="500" height="500" fill="url(#lineG)"></rect>

渐变代码

<defs>
    <linearGradient id="lineG" x1="0" y1="0" x2="100%" y2="100%">
        <stop offset="0%" stop-color="red"></stop>
        <stop offset="50%" stop-color="green"></stop>
        <stop offset="100%" stop-color="blue"></stop>
    </linearGradient>
</defs>
<rect x="0" y="0" width="500" height="500" fill="url(#lineG)"></rect>

扇形渐变

滤镜

高斯模糊

feGaussianBlur

in="SourceGraphic"

stdDeviation="100" 模糊程度

注意：是设置内容，需要定义在<defs>元素中

6.移动特性

GeoLocation

地理定位

地球的经度和纬度的相交点

实现地理定位的方式

GPS

美国的，依靠卫星定位

北斗定位

国产，惯性定位技术和卫星定位

基站定位

移动运营商创建基站（提供信号源）

基于互联网

IP地址( PC端和移动端 )

HTML5中地理定位

地理定位功能并不是属于HTML5专有内容

HTML5的地理定位技术，由Google公司提供

Google Map产品

中国国内不能使用Google公司的服务和产品

百度地图

高德地图

百度地图

http://lbsyun.baidu.com/

web开发

javascript API

功能展现

注册百度开发者账号

http://developer.baidu.com/

百度开发者中心

目标

学习百度地图的基本功能

百度地图的特点

模板实例

http://developer.baidu.com/map/jsdemo.htm#a1_2

帮助文档

http://lbsyun.baidu.com/index.php?title=jspopular

百度地图开发

1.引入百度JS库

2.建立容器

3.创建对象

var map = new BMap.Map("allMap");

4.初始化

map.centerAndZoom("南京");

实例

控件

覆盖

定位

信息框

拖拽

基础

实现拖拽效果需要确定两个内容

拖拽的是什么( 源元素 )

拖拽到哪里去( 目标元素 )

实现

使用原生DOM实现

最麻烦

使用jQuery的插件

HTML5 中提供的拖拽功能

使用

源元素

源元素事件

dragstart

当鼠标开始拖放时被触发

drag

当鼠标拖动过程中触发

类似于鼠标的 onmousemove 事件

dragend

当鼠标结束拖放时被触发

目标元素

目标元素事件

dragover

当鼠标拖放位于目标元素上时被触发

dragenter

当鼠标拖放第一次进入目标元素时触发

dragleave

当鼠标拖放离开目标元素出发

drop

当拖放操作在目标元素内投放时触发

默认情况下，该事件不被触发

原因：HTML页面默认行为，不允许拖放

解决方法：阻止页面的默认行为，需要为dragover 事件增加 event.preventDefault();

dataTransfer对象

作用：类似windows操作系统中的剪切板的功能。

功用

可以将源元素的信息（数据），存储在对象里

将存储在该对象中的源元素信息，提供给目标元素

方法

setData(type,data)

type 类型，特指标识（一般使用id）

data 设置的数据内容(string)

getData(type)

clearData(type)

setDragImage()

作用：修改拖放过程中，鼠标跟随的鼠标的效果

用法：drag,dragstart等事件中设置

属性

draggable

标签元素要设置draggable=true，否则不会有效果

7.本地存储

引入

cookie

存储空间限制

字符类型限制，不支持中文

存储形式 key : value

浏览器有存储数目限制

特点

sessionStorage

浏览器窗口关闭时，数据丢失

localStorage

当浏览器窗口关闭时，数据可继续使用

sessionStorage

setItem(key,value)

用键值对方式存储

key

作为存储数据的标识

唯一，不可重复

value

存储的数据内容

数据类型

number

string

getItem(key)

key

根据key获得对应数据

返回值

key(index)

根据索引值来获取对应的key值

removeItem(key)

clear()

将存储系统的所有数据删除（清空）

length

返回当前存储系统中的数据个数

Demo: sessionStorage实现记事本功能

localStorage

setItem(key,value)

用键值对方式存储

key

作为存储数据的标识

唯一，不可重复

value

存储的数据内容

数据类型

number

string

getItem(key)

key

根据key获得对应数据

返回值

key(index)

根据索引值来获取对应的key值

removeItem(key)

clear()

将存储系统的所有数据删除（清空）

length

返回当前存储系统中的数据个数

Demo: sessionStorage实现记事本功能

storage事件

目前仅safari支持改事件

自由主题

sss

子主题