HTML5学习笔记

@达内，看达内视频的笔记整理 

* HTML5新表单

   * input新类型

     * email类型
     * url类型
     * tel类型
     * date类型
     * number类型
     * range类型

   * 表单新元素

     * datalist元素 - 类似于select元素
       * datalist元素 - 预定义数据内容(option)
       * 使用<input>元素的list属性
     * progress元素 - 进度条
       * max - 设置最大值
       * value - 设置当前进度
     * meter元素 - 刻度
       * min - 设置最小值
       * max - 设置最大值
       * value - 设置当前值
       * low - 设置低预警值
       * high - 设置高预警值
     * output元素 - 输出

   * 表单新属性

     * placeholder - 给出默认提示
     * autofocus - 自动获取焦点
     * multiple - 允许输入多个值,多个值之间使用","
     * form - 允许表单元素定义在表单外

   * 表单新验证

     * 验证属性
       * required - 验证是否为空
       * pattern - 正则表达式是否匹配
       * min和max - 验证最大/小值
       * minlength和maxlength
         * minlength - 并不是H5的新特性
* maxlength - 不允许输入超过maxlength长度内容
     * 有效状态
       * valid - 验证是否成功
         * true - 表示验证成功
       * valueMissing - 验证是否为空(true)
       * patternMismatch - 验证正则是否匹配
       * typeMismatch - 验证类型是否匹配
       * rangeUnderflow - 验证是否小于min
       * stepMismatch - 验证是否与step匹配

       * customError - setCustomValidity()方法

 * 音视频处理

   * 视频处理

     * 基本内容
       * 目前主流HTML页面视频处理 - Flash技术
       * HTML5提供的视频处理 - <video>元素
     * 使用<video>
       * 提供一种视频格式
         <video src="引入视频文件的路径">
   不好意思,你的浏览器不支持video元素.
</video>
       * 提供多种视频格式
         <video>
   <source src="引入视频文件的路径" />
   <source src="引入视频文件的路径" />
   <source src="引入视频文件的路径" />
</video>
     * <video>元素的属性
       * src - 引入视频文件的路径
       * width和height - 设置当前视频的宽度和高度
       * autoplay - 自动播放
       * controls - 提供控制面板
       * loop - 循环播放
       * poster - 在播放视频前,显示一张图片
       * preload - 预加载
         * auto - 默认值,尽快地加载视频
* none - 不加载(缓存)
* metadata - 只加载除视频以外的基本信息
     * 高级内容
       * 事件
         * play - 当视频播放时被触发
* pause - 当视频暂停时被触发
* ended - 当视频结束播放时被触发
   * 自动播放下一个视频功能
       * 方法
         * play() - 播放视频
* pause() - 暂停视频
       * 属性
         * paused - 判断视频是否暂停
   * Boolean值,true表示暂停,否则播放
* ended - 判断视频是否结束
* duration - 返回当前视频的时长
* currentTime - 返回视频播放的当前位置

   * 音频处理

     * <audio>元素
       * 提供一种音频格式
         <audio src="" controls></audio>
       * 提供多种音频格式
         <audio>
    <source src="" />
    <source src="" />
    <source src="" />
</audio>
     * <audio>元素的属性
       * autoplay
       * loop
       * controls
     * 高级内容
       * 事件
       * 方法
       * 属性

 * Canvas画布

   * 基本内容
     * Canvas的作用 - 为HTML页面提供画布的功能
     * Canvas的效果 - 在画布中绘制图形
     * 注意 - 绘制的图形与HTML页面无关
     * 扩展内容 - 所见非所得(眼见不为实)
   * 使用canvas的步骤
     * 在HTML页面定义<canvas>元素
     * 在javascript代码中
       * 获取<canvas>元素
         * 使用width和height属性 - 没有任何问题
* 使用CSS样式
   * 通过style属性设置 - 绘制图形被拉伸
   * 通过style元素设置 - 按比例放大
       * 创建画布对象 - getContext("2d")
         * 该方法返回2D和3D效果两种画布对象
* 注意
   * 参数必须是"2d"或"3d"
   * 目前只绘制2d效果
       * 使用Canvas提供的API
   * 绘制图形
     * 绘制矩形
       * fillRect(x,y,width,height) - 实心矩形
         * x和y - 绘制矩形的左上角的坐标值
* width和height - 绘制矩形的宽度和高度
       * strokeRect(x,y,width,height) - 空心矩形
       * clearRect(x,y,width,height)
         * 清除指定区域的矩形
     * 设置颜色
       * fillStyle - 设置填充颜色
       * strokeStyle - 设置描边颜色
       * globalAlpha - 设置透明度(0-1)
     * 渐变效果
       * 线型渐变
         * createLinearGradient(x1,y1,x2,y2)
   * x1和y1 - 基准线的起点坐标值
   * x2和y2 - 基准线的终点坐标值
* 基准线
       * 扇形(射线)渐变
         * createRadialGradient(x1,y1,r1,x2,y2,r2)
   * x1,y1 - 第一个基准圆的元素坐标值
   * r1 - 第一个基准圆的半径
   * x2,y2 - 第二个基准圆的元素坐标值
   * r2 - 第二个基准圆的半径
* 两个基准圆
       * 设置渐变颜色
         * addColorStop(position,color)
   * position - 设置渐变颜色的位置(0-1)

   * color - 设置渐变颜色

 * Canvas

   * 绘制文字
     * 方法
       * fillText(text,x,y) - 绘制实心文字
         * text - 绘制的文本内容
* x和y - 绘制文字的坐标值
       * strokeText(text,x,y) - 绘制空心文字
     * 属性
       * font - 类似于CSS中的font属性的作用
       * textAlgin - 水平方向对齐(基准线)
         * left
* center
* right
       * textBaseline - 垂直方向对齐(基准线)
         * top
* middle
* bottom
   * 阴影效果
     * shadowColor - 设置阴影的颜色
     * shadowOffsetX - 设置阴影的水平方向
       * 0 - 没有阴影
       * 负值 - 阴影向左
       * 正值 - 阴影向右
     * shadowOffsetY - 设置阴影的垂直方向
       * 0 - 没有阴影
       * 负值 - 阴影向上
       * 正值 - 阴影向下
     * shadowBlur - 设置阴影的程度
   * 创建路径
     * 标识方法
       * beginPath() - 标识开始创建路径(必要)
       * closePath() - 标识结束创建路径
         * 绘制不完整的圆形时,效果不同
     * 设置方法
       * rect(x,y,width,height)
       * arc(x,y,r,startAngle,endAngle,direction)
     * 绘制方法
       * fill()
       * stroke()
     * 绘制线条(直线、折线和多边形)
       * moveTo(x,y) - 设置起点坐标值
       * lineTo(x,y) - 设置终点(折点)坐标值
   * 设置线条
     * lineWidth - 设置线条宽度,默认值为1
     * lineCap - 设置线条端点的形状
       * round - 圆角
       * butt - 默认值,平直
     * lineJoin - 设置两个线交点的形状
       * round - 圆角
       * miter - 尖角,默认值
       * bevel - 斜角
     * miterLimit - 配合lineJoin=miter使用
   * 绘制图片
     * 绘制图片
       * drawImage(img,x,y)
       * drawImage(img,x,y,width,height)
         * img - 加载的图片
* x和y - 绘制图片的坐标值
* width和height - 绘制图片的宽度和高度
       * 注意 - 加载图片后,绑定onload事件
     * 平铺图片
       var ptn = context.createPattern(img,type);
       * img - 平铺的图片
       * type - 平铺方式
         * repeat - 全方向平铺
* repeat-x - x轴平铺
* repeat-y - y轴平铺
* no-repeat - 不平铺
       context.fillStyle = ptn;
       context.fillRect();
       * 注意 - 上述代码编写onload事件内
     * 切割图片
       context.beginPath();
       context.rect()或arc()
       context.clip();
     * 画布方法
       * scale(x,y) - 缩放
         * x - 表示水平方向的缩放
* y - 表示垂直方向的缩放
       * translate(x,y) - 平移
         * x和y - 相对值(上次定位坐标值)
       * rotate(旋转角度) - 旋转画布
 * Chart.js
   * 作用 - 绘制图表
   * 6种图表
     * 柱状图
     * 饼状图
     * 曲线图
     * 环形图
     * 极地区域图

     * 雷达图

 * SVG

   * 基本内容
     * 概念 - SVG是一种使用XML技术描述二维图形的语言
     * 支持的格式
       * 矢量图
       * 图片
       * 文本
     * SVG文件的扩展名为".svg"
   * SVG与Canvas的区别
     * SVG
       * 不依赖分辨率
       * 可被搜索、压缩或脚本化
       * 适用于大型渲染区域的程序(百度地图等)
       * 不适用于网页游戏
     * Canvas
       * 依赖分辨率
       * 可以以图片形式存在(.png)
       * 适用于网页游戏
       * 不支持事件绑定
   * 设置样式
     * fill - 填充颜色
     * stroke - 描边颜色
     * stroke-width - 描边宽度
   * 绘制图形
     * 绘制矩形 - <rect />
     * 绘制圆形 - <circle />
     * 绘制椭圆 - <ellpise />
     * 绘制直线 - <line />
     * 绘制折线 - <polyline />
     * 绘制多边形 - <polygon />
   * 特效元素
     * 渐变
     * 高斯模糊
 * two.js
   * 基本内容
     * 该JS库支持三种格式
       * svg
       * canvas
       * webgl
     * 特点 - 具有SVG解释器
   * 如何使用
     * HTML页面
       * 引入two.js文件
       * 在页面中定义容器(元素)
         * <svg></svg>
* <canvas></canvas>
* <div></div>(推荐)
     * javascript代码
       * 获取页面中的容器(元素)
       * 创建Two对象,添加到容器中
         var two = new Two(params).appendTo(element);
       * 设置要绘制的图形(API)
       * 绘制方法 - update()
   * 设置样式
     * fill
     * stroke
     * linewidth
   * 绘制方法
     * 绘制矩形
     * 绘制圆形
   * 分组操作
     var group = two.makeGroup(objects);
   * 动画效果
     * update() - 更新
     * play() - 添加动画(循环)

     * pause() - 删除动画

 * 百度地图

   * HTML5中的地理定位
     * 使用Google公司的Map产品(无法使用)
   * 目前实际开发中,非常常见
   * 百度地图
     * 注册百度开发者
     * 创建应用(服务器)
       * IP白名单(0.0.0.0/0)
     * 得到应用秘钥
   * 学习目的
     * 不去学习研究百度地图的逻辑
     * 最主要的目的就是如何使用百度地图
   * 百度地图
     * 提供API帮助文档(类参考)
     * 提供Demo示例代码

 * 拖放(拖拽)API

   * 源元素事件
     * dragstart - 当鼠标开始拖放时被触发
     * drag - 类似于mousemove,表示拖放过程
     * dragend - 当鼠标结束拖放时被触发
   * 目标元素事件
     * dragenter - 第一次进入目标元素时被触发
     * dragover - 进入目标元素时被触发(反复触发效果)
       * 类似于mousemove(在目标元素中)
       * 在该事件的处理函数中,利用event事件对象的preventDefault()
     * drop - 在目标元素中投放源元素时被触发
       * 在默认情况下,该事件不会被触发
         * 原因 - HTML页面默认不允许实现拖放
* 解决 - 阻止HTML页面的默认行为
     * dragleave - 离开目标元素时被触发
   * dataTransfer对象
     * 作用 - 类似于剪切板的功能
       * 存储源元素的数据
       * 提供给目标元素
     * 方法
       * setData(type,data)方法
         * 作用 - 设置(源元素的)数据
* 该方法在源元素事件中使用
       * getData(type)方法
         * 作用 - 获取(源元素的)数据
* 该方法在目标元素事件中使用
       * clearData(type)方法
         * 作用 - 清除(源元素的)数据
* 优点 - 提高性能
   * 实现拖放效果
     * 源元素
       * dragstart事件
         * 利用dataTransfer对象,存储源元素数据
     * 目标元素
       * dragover事件
         event.preventDefault()
       * drop事件
         * 利用dataTransfer对象,获取源元素数据
* 完成拖放的效果逻辑
   * setDragImage()方法
     * 作用 - 修改鼠标拖放过程中跟随的图片