Html5
2017-09-12 18:59:56 8 举报AI智能生成
HTML5 CSS3
作者其他创作
大纲/内容
2.新表单
input新类型
email
作用：提交表单时，进行基本验证
缺陷：验证逻辑不完整 abc@aa
search
关键字：url
作用：pc端不明显，加入删除×
在手机浏览器中右下角呈现搜索按键
URL
作用：验证是否包含http://
缺陷：验证逻辑不完整
关键字：url
tel
注意：效果只能在手机端出现
number
作用：限制输入数字
属性：min max step
范围类型
功能：允许用户选择一个范围的数值
<input type="range" min="10" max="1000" value="50">
颜色类型
功能：预定义的颜色取色控件
<input type="color">
案例1：页面配色器
日期类型
date
week
month
表单新元素
<datalist>
<datalist id="myList">
<option>请选择</option>
<option>北京</option>
<option>南京</option>
<option>天津</option>
</datalist>
<input type="text" list="myList">
定义备选项（并不显示），需要配合<input>元素使用，定义list属性，属性值等于datalist元素的id属性值
特点：数据与结构的分离
<datalist>数据
<input> 结构
优点：使用<datalist>元素定义的数据可以重复使用。
用于表单少量提示内容，如政治面貌。。。等选项
区别：autocomplete="on"
<progress>
进度条：不同浏览器中效果不一致。
属性：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:高值预警
optimum：最优值
最优值所在区间决定了颜色组合方式
黄绿黄
绿黄红
红黄绿
以最优值为中心，依次为黄，红
value：当前值
<output>
通常用于显示表单元素处理的结果值
提高代码可读性
<form action="form_action.asp" method="get" name="sumform"><output name="sum"></output>
</form>
表单新属性
之前的属性：id class title style type name value checked selected disabled readonly
placeholder
通常用于search输入类型，也可以用在文本域。
给出简单提示，用于帮助用户输入正确内容。
<input type="text" placeholder="请输入您的用户名">
区别于value
multiple
可以用在一些输入类型中（email，file等），从而支持在一个域中输入多个值，但所插入的值必须用逗号分隔。
<input type="email" multiple name="txtEmail">
autofocus
自动获取焦点
form
允许将表单元素定义在<form>元素外
<input type="password" id="pwd" form="myForm">
autocomplete
on/off
自动补全，是否自动记录之前提交的数据，以用于下一次输入建议
表单新验证
验证属性
Required
验证当前元素值是否为空
Pattern
使用正则表达式验证当前元素值是否匹配
不验证是否为空
pattern="^1[3578]\d{9}$"
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
<input type="number" step=10 min=0 max=100>
值只与step相关，-10，110都返回false，其它步长不为10的都返回true
customError
配合setCustomValidity()使用
setCustomValidity()：设置自定义错误提示内容。注意：输入正确后，需要调用改方法设置为空。
一旦调用了setCustomValidity()，则所有验证状态都被置为false
badInput
email等输入错误
验证
自定义错误消息
setCustomValidity(' **** ')
设置空字符串，则取消自定义错误消息 setCustomValidity('')
3.音视频处理
基本情况
目前主流网站使用Flash技术处理HTML页面中的视频内容
Flash存在问题
浏览器原生不支持，需要安装ActiveX插件
性能不好（不能过多的使用）
移动终端并不支持Flash技术
Iphone 从一开始不支持Flash
Android 以前支持，但体验差，现在已经放弃
Flash 的母公司公开宣布放弃，不再更新
目前用于替代Flash技术最好的选择就是 HTML5
几乎所有浏览器原生支持<video>元素
性能更高
智能移动端支持非常好
技术替换
<video>
属性
src
支持的格式
Mp4
主流
OGG
主要用于移动端
WebM格式
目前唯一支持超高清格式
高清720P，超高清1080P
在HTML页面中支持超高清格式(HTML5)
由Google公司推出的
autoplay
自动播放
controls
提供视频播放的控制面板
loop
表示循环播放
poster
在视频播放前显示一张图片
height, width
设置视频的宽高
需要按视频比例设置高宽
不等比例的情况下设置背景色 style="background:black;"
preload
预加载
auto
默认值，自动加载
视频宽，高，时长，第一桢内容，并缓冲一定长度视频
none
不允许预加载
metadata
只加载视频的基本信息（不含视频）
视频宽，高，时长，第一桢内容
muted
是否静音
volumn
音量设置
0-100%
js对象属性，不用于标签
方法
play()
播放
pause()
暂停
load()
加载
练习：使用自定义按钮，控制视频的播放和暂停
事件
play
当视频播放时被触发
pause
视频暂停时被触发
ended
视频结束时触发
error
当视频播放错误时被触发
案例：暂停加广告
存在问题：video元素（全屏时）与其他元素的定位是相对定位时，浏览器会将video设定为最前端。
可以通过video的JS库来实现
progress
表示视频加载的进度
播放属性
paused
表示判断当前视频是否暂停
ended
表示判断当前视频是否播放完毕
duration
表示当前视频的时长
currentTime
表示当前视频播放的位置
回放效果
截屏功能
包含标签
source 指定资源
<video autoplay>
<source src="data/oceans-clip.mp4">
<source src="data/oceans-clip.webm">
<source src="data/oceans-clip.ogv">
</video>
track 字幕设定
思考：如何将video作为Div的背景来播放？
http://store.niu.com/m1/
<audio>
使用方式
<audio src="">
只支持一种音频格式
<audio>
<source src="一种音频格式">
<source src="一种音频格式">
<source src="一种音频格式">
</audio>
支持多种音频格式
支持的音频格式
mp3
OGG
wav
属性
autoplay
controls
src
loop
preload
练习：为网页添加背景音乐，用户可以暂停或播放，通过按钮控制，音量由小变大
<body bgsound=""> 属性是老版本IE专有属性，也可以用于背景音乐播放，但不支持音量控制，静音等控制功能
IOS中的Safari浏览器默认不支持audio标签，只能用video标签代替
4.Canvas(画布)
基本内容
为什么要在网页中绘图
使用场景
股市走势图
报表统计数据
验证码随机图片
在线绘图
魔图网
游戏
threejs.org
Canvas在html页面中提供画布功能
类似于windows画图
绘制的内容与HTML无关
不能通过DOM获取绘制的图形
绘制的图形是不能绑定DOM事件
只能用Canvas的API
如何使用
<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/
7.拖放API
拖拽
基础
实现拖拽效果需要确定两个内容
拖拽的是什么( 源元素 )
拖拽到哪里去( 目标元素 )
实现
使用原生DOM实现
最麻烦
使用jQuery的插件
HTML5 中提供的拖拽功能
使用
源元素
源元素事件
dragstart
当鼠标开始拖放时被触发
drag
当鼠标拖动过程中触发
类似于鼠标的 onmousemove 事件
dragend
当鼠标结束拖放时被触发
目标元素
目标元素事件
dragover
当鼠标拖放进入到目标元素内被触发
dragenter
当鼠标拖放第一次进入目标元素时触发
dragleave
当鼠标拖放离开目标元素出发
drop
当拖放操作在目标元素内投放时触发
默认情况下，该事件不被触发
原因：HTML页面默认行为，不允许拖放
解决方法：阻止页面的默认行为，需要为dragover 事件增加 event.preventDefault();
dataTransfer对象
作用：类似windows操作系统中的剪切板的功能。
功用
功用
可以将源元素的信息（数据），存储在对象里
将存储在该对象中的源元素信息，提供给目标元素
8.WebWorker
Worker
new Worker("url路径")
postMessage
onmessage
terminate
案例
fibonacci
斐波那契数列：1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, ...
如果设F(n）为该数列的第n项（n∈N*），那么这句话可以写成如下形式：:F(n)=F(n-1)+F(n-2)
n>2, f(0)=0; f(1)=1
抢票模拟
判断是否支持Worker
扩展
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 描边宽度
圆形
<circle>
r 半径
cx和cy 圆心
圆形跟随鼠标
注意：
SVG提供的所有元素都可以绑定事件
SVG提供的特殊属性，并不能像HTML元素的属性来操作(Dom)
椭圆
<ellipse>
cx,cy 圆心
rx 水平半径
ry 垂直半径
直线
<line>
x1 y1 起点
x2 y2 终点
stroke 线条颜色
子主题
折线
<polyline>
points 坐标x和y之间用逗号分隔，坐标之间用空格分隔
默认将折线中的区域进行填充
绘制空心矩形，结合部要注意调整
多边形
polygon
points
特效元素
渐变
渐变元素都必须在<defs>元素内
线形渐变
<linearGradient>
基准线
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>
扇形渐变
<radialGradient>
滤镜
<filter>
高斯模糊
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库
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
2.建立容器
<div id="allMap" style="width:400px;height:400px;"></div>
3.创建对象
var map = new BMap.Map("allMap");
4.初始化
map.centerAndZoom("南京");
实例
控件
覆盖
定位
信息框
9.本地存储
2.新表单
input新类型
email
作用：提交表单时，进行基本验证
缺陷：验证逻辑不完整 abc@aa
search
关键字：url
作用：pc端不明显，加入删除×
在手机浏览器中右下角呈现搜索按键
URL
作用：验证是否包含http://
缺陷：验证逻辑不完整
关键字：url
tel
注意：效果只能在手机端出现
number
作用：限制输入数字
属性：min max step
范围类型
功能：允许用户选择一个范围的数值
<input type="range" min="10" max="1000" value="50">
颜色类型
功能：预定义的颜色取色控件
<input type="color">
案例1：页面配色器
日期类型
date
week
month
表单新元素
<datalist>
<datalist id="myList">
<option>请选择</option>
<option>北京</option>
<option>南京</option>
<option>天津</option>
</datalist>
<input type="text" list="myList">
定义备选项（并不显示），需要配合<input>元素使用，定义list属性，属性值等于datalist元素的id属性值
特点：数据与结构的分离
<datalist>数据
<input> 结构
优点：使用<datalist>元素定义的数据可以重复使用。
用于表单少量提示内容，如政治面貌。。。等选项
区别：autocomplete="on"
<progress>
进度条：不同浏览器中效果不一致。
属性：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:高值预警
optimum：最优值
最优值所在区间决定了颜色组合方式
黄绿黄
绿黄红
红黄绿
以最优值为中心，依次为黄，红
value：当前值
<output>
通常用于显示表单元素处理的结果值
提高代码可读性
<form action="form_action.asp" method="get" name="sumform"><output name="sum"></output>
</form>
表单新属性
之前的属性：id class title style type name value checked selected disabled readonly
placeholder
通常用于search输入类型，也可以用在文本域。
给出简单提示，用于帮助用户输入正确内容。
<input type="text" placeholder="请输入您的用户名">
区别于value
multiple
可以用在一些输入类型中（email，file等），从而支持在一个域中输入多个值，但所插入的值必须用逗号分隔。
<input type="email" multiple name="txtEmail">
autofocus
自动获取焦点
form
允许将表单元素定义在<form>元素外
<input type="password" id="pwd" form="myForm">
autocomplete
on/off
自动补全，是否自动记录之前提交的数据，以用于下一次输入建议
表单新验证
验证属性
Required
验证当前元素值是否为空
Pattern
使用正则表达式验证当前元素值是否匹配
不验证是否为空
pattern="^1[3578]\d{9}$"
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
<input type="number" step=10 min=0 max=100>
值只与step相关，-10，110都返回false，其它步长不为10的都返回true
customError
配合setCustomValidity()使用
setCustomValidity()：设置自定义错误提示内容。注意：输入正确后，需要调用改方法设置为空。
一旦调用了setCustomValidity()，则所有验证状态都被置为false
badInput
email等输入错误
验证
自定义错误消息
setCustomValidity(' **** ')
设置空字符串，则取消自定义错误消息 setCustomValidity('')
0 条评论
下一页
