12.13会议Html5
2016-12-13 19:59:22 0 举报AI智能生成
12.12会议记录
作者其他创作
大纲/内容
6.6S检查
input新类型
email
作用：提交表单时，进行基本验证
缺陷：验证逻辑不完整 abc@aa
search
关键字：url
作用：pc端不明显，加入删除×
URL
作用：验证是否包含http://
缺陷：验证逻辑不完整
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>元素定义的数据可以重复使用。
<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()\"span style=\"color:#cc7832;\
<meter>
<meter min=\"0\" max=\"100\" value=\"90\" low=\"10\" high=\"80\"></meter>
low:低值预警
high:高值预警
<output>
通常用于显示表单元素处理的结果值
提高代码可读性
pre style=\
表单新属性
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
使用正则表达式验证当前元素值是否匹配
不验证是否为空
验证当前元素值最小值或最大值
验证当前元素值的最小，最大长度
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
7.食堂管理，制度建立，规范化
基本情况
目前主流网站使用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
在视频播放前显示一张图片
设置视频的宽高
需要按视频比例设置高宽
不等比例的情况下设置背景色 style=\"background:black;\"
preload
预加载
auto
默认值，自动加载
none
因版权等原因，不允许预加载
metadata
只加载视频的基本信息（不含视频）
方法
play()
播放
pause()
暂停
load()
加载
canPlayType()
判断浏览器是否支持指定视频格式
事件
play
当视频播放时被触发
pause
视频暂停时被触发
ended
视频结束时触发
error
当视频播放错误时被触发
案例：暂停加广告
存在问题：video元素（全屏时）与其他元素的定位是相对定位时，浏览器会将video设定为最前端。
可以通过video的JS库来实现
canplay
不考虑整体情况下，只要能播放，就播放
canplaythrough
考虑整体情况下，只要能播放，就播放
progress
表示视频加载的进度
播放属性
paused
表示判断当前视频是否暂停
表示判断当前视频是否播放完毕
duration
表示当前视频的时长
currentTime
表示当前视频播放的位置
<audio>
使用方式
<audio src=\"\">
只支持一种音频格式
<audio> <source src=\"一种音频格式\"> <source src=\"一种音频格式\"> <source src=\"一种音频格式\"></audio>
支持多种音频格式
支持的音频格式
mp3
wav
内容
概括
开始
默认300*150
网络端
微信公众号
实心矩形
空心矩形
清除指定区域矩形
扫描关注
填充颜色
context.fillStyle = \"green\";
描边颜色
context.strokeStyle = \"blue\";
透明度
context.globalAlpha = 0.3;
子主题
招聘
发送招聘信息，通知，入职，劳动合同，员工档案等等
实体柜子申购用于整理
用于整理档案
归档
具有柱形（锥形）
两个圆面积
圆心坐标和半径
扇形渐变只在上下两个圆形区域有颜色渐变效果
效果为颜色从第一个圆渐变到第二个圆
公积金，社保转移开户
实心文字
text 要绘制的文字
空心文字
font
类似于CSS中的font属性
textAlign
设置水平方向对齐
是指相对于基准线的对齐方式
textBaseline
设置文字垂直方向对齐
hanging 悬挂基线
alphabetic 字母基线
插入链接
ISO9000环评
分类
外校，内校
设备清单
化学品管理
废品管理，医疗管理
外来人员管理
公用物品
消防，行车
记录文件，仓管，化学品管理
每周三检查6S
清扫，清洁，素养，安全，节约
成立食堂督查组
秩序维持，管控品质，出台相应处罚管理制度
质检安全，质量安全
货源，来源，出处
采购来源
lineWidth
设置线条粗细，默认1(px)
lineCap
设置线条断点形状
butt
默认，向线条的每个末端添加平直的边缘
round
圆形
square
向线条的每个末端添加正方形线帽。
lineJoin
指定两条线之间的连接点形状
圆角
bevel
斜角
miter
默认，创建尖角
和miterLimit搭配使用，确定线条交接点的延伸范围
制度确立
绘制图片
按照图片原大小加载
img 当前加载（绘制）的图片
width 和 height 设置绘制图片的高和宽
平铺图片
设置对象
img 平铺的图片
type 平铺的方式
repeat 平铺
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
绘制
fillStyle = 设置对象
fillRect
* 注意：绘制或者平铺都必须保证图片加载完成再绘制。( onload )
切割图片
clip()
切割(先绘制路线，然后切割)
画布方法
转换方法
缩放（缩小或放大）
x:表示水平方向缩放
1：表示不缩放
<1：表示缩小
>1：表示放大
y:表示垂直方向缩放
相对于上次坐标系
rotate()
旋转当前画布
公式： degree * Math.PI /180
状态
save()
restore()
案例
跟随鼠标的圆圈
随机落下的小球
补充
通知，通告
规范性，注明时间地点，抄送
12.13会议
1.文控
html4
HTML 4.0——1997年12月18日，W3C推荐标准HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
html5
2014年10月
标签相对简单，重点 javascript
移动端支持优于PC端
版本声明
<!DOCTYPE html>
弱化了版本声明
2.微信公众号
Web前端
移动智能终端
iPhone
Android
Windows Mobile
BlackBerry
WebOS
移动跨平台
phoneGap
3.社保，公积金
基础
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页面
内嵌在XHTML中
SVG元素
常规图形
注意
利用svg绘制的所有图形，必须定义在<svg>元素内
利用svg绘制的所有图形都与HTML页面有关，可以绑定事件
svg绘制的图形，使用style方式来设置属性，使用的不是css属性，而是svg属性
矩形
<rect>
width和height 宽和高
注意：必须使用属性方式，不能使用样式方式
fill 填充颜色
stroke 描边颜色
stroke-width 描边宽度
<circle>
r 半径
cx和cy 圆心
圆形跟随鼠标
注意：
SVG提供的所有元素都可以绑定事件
SVG提供的特殊属性，并不能像HTML元素的属性来操作(Dom)
椭圆
<ellipse>
rx 水平半径
ry 垂直半径
直线
<line>
x1 y1 起点
x2 y2 终点
stroke 线条颜色
折线
<polyline>
points 坐标x和y之间用逗号分隔，坐标之间用空格分隔
默认将折线中的区域进行填充
绘制空心矩形，结合部要注意调整
多边形
polygon
points
特效元素
渐变
渐变元素都必须在<defs>元素内
线形渐变
<linearGradient>
基准线
使用<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>元素中
4.超链接
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(\"南京\");
实例
控件
覆盖
定位
信息框
拖拽
实现拖拽效果需要确定两个内容
拖拽的是什么( 源元素 )
拖拽到哪里去( 目标元素 )
实现
使用原生DOM实现
最麻烦
使用jQuery的插件
HTML5 中提供的拖拽功能
使用
源元素
源元素事件
dragstart
当鼠标开始拖放时被触发
drag
当鼠标拖动过程中触发
类似于鼠标的 onmousemove 事件
dragend
当鼠标结束拖放时被触发
目标元素
目标元素事件
dragover
当鼠标拖放位于目标元素上时被触发
dragenter
当鼠标拖放第一次进入目标元素时触发
dragleave
当鼠标拖放离开目标元素出发
drop
当拖放操作在目标元素内投放时触发
默认情况下，该事件不被触发
原因：HTML页面默认行为，不允许拖放
解决方法：阻止页面的默认行为，需要为dragover 事件增加 event.preventDefault();
dataTransfer对象
作用：类似windows操作系统中的剪切板的功能。
功用
可以将源元素的信息（数据），存储在对象里
将存储在该对象中的源元素信息，提供给目标元素
type 类型，特指标识（一般使用id）
data 设置的数据内容(string)
getData(type)
clearData(type)
setDragImage()
作用：修改拖放过程中，鼠标跟随的鼠标的效果
draggable
标签元素要设置draggable=true，否则不会有效果
<div title=\"拖拽我\" draggable=\"true\">列表1</div>
5.ISo9000
引入
cookie
存储空间限制
字符类型限制，不支持中文
存储形式 key : value
浏览器有存储数目限制
特点
sessionStorage
浏览器窗口关闭时，数据丢失
localStorage
当浏览器窗口关闭时，数据可继续使用
用键值对方式存储
key
作为存储数据的标识
唯一，不可重复
value
存储的数据内容
数据类型
string
getItem(key)
根据key获得对应数据
返回值
key(index)
根据索引值来获取对应的key值
removeItem(key)
clear()
将存储系统的所有数据删除（清空）
length
返回当前存储系统中的数据个数
Demo: sessionStorage实现记事本功能
storage事件
目前仅safari支持改事件
自由主题
收藏
收藏
职业：HR
0 条评论
回复 删除
下一页
