HTML5

响应式web HTML5知识梳理，包括JavaScript的基础知识、HTML5视频和音频两部分内容。

HTML5

• JavaScript的基础知识
  • JavaScript引入方式
    • 行内式 ：将单行或少量的JavaScript代码写在html标签的事件属性中
    • 内嵌式：在html文档中，通过<script>标签及其相关属性可以引入javascript代码
    • 外链式：将JavaScript代码放在一个或者多个以".js"作为文件扩展名的外部文件中，通过<script>标签的src属性引入该js文件
  • 数据类型
    • Number: 数值型 正数、负数、0，允许有小数点
    • String：字符串类型 字符串是用单引号或双引号括起来的一个或多个字符
    • Boolean：布尔类型 只有true或false两个值
    • Null：空类型 只有一个值null
    • Undefined：未定义类型 指变量被创建，但未赋值时所具有的值
  • 变量
    • var 进行局部变量的声明
    • "//" 为JavaScript的单行注释；多行注释 以"/*"开始，以"*/"结尾
  • 事件处理
    • click：当鼠标单击某个元素时触发此事件
    • blur：当前元素失去焦点时触发此事件
    • change：当前元素失去焦点并且元素内容发生改变时触发此事件
    • focus：当某个元素获得焦点时触发此事件
    • reset：当表单被重置时触发此事件
    • submit：当表单被提交时触发此事件
    • load：当页面加载完成时触发此事件
    • mouseover：鼠标移到某元素之上时触发此事件
    • mouseup：鼠标按键被松开时触发此事件
    • mousedown：鼠标按键被按下时触发此事件
  • 事件属性
    • button：返回当事件被触发时哪个鼠标按钮被单击，返回值为“0”时，则表示按下左键；为“1”表示按下滑轮；为“2"表示按下右键
    • clientX：返回当事件被触发时鼠标指针的水平坐标
    • clientY：返回当事件被触发时鼠标指针的垂直坐标
    • screenX：返回当某个事件被触发时鼠标指针的水平坐标
    • screenY：返回当某个事件被触发时鼠标指针的垂直坐标
  • DOM操作
    • 获取html元素对象的常用方法
      • getElementById() 返回对拥有指定id的第一个对象的引用
      • getElementsByName（） 返回带有指定名称的对象集合
      • getElementsByTagName（） 返回带有指定标签名的对象集合
      • getElementsByClassName（） 通过类名来获得某些元素集合
      • querySelector（） 返回指定选择器的第一个元素对象
      • querySelectorAll（）返回指定选择器的所有元素对象集合
  • Canvas 绘图的基本步骤
    • 1.创建画布 <canvas id="cavsElem" width="400" height="300"></canvas>
    • 2.准备画笔 var context=canvas.getContext('2d');
    • 3.定义坐标和起始点 Canvas的坐标系从左上角“0,0”开始，x轴向右增大，y轴向下增大
    • 4.绘制线条图案 context.moveTo(x,y)定义线条的起点坐标 context.lineTo(x,y) 定义连接端点 context.stroke()为线条描边 context.beginPath() 重置路径 context.closePath() 闭合路径 context.fill() 填充
• HTML5视频和音频
  • JavaScript 运算符
    • 算术运算符
      • + 加运算符
      • - 减运算符
      • * 乘运算符
      • / 除运算符
      • % 取余数运算符
      • ++ 递增运算符
      • -- 递减运算符
    • 比较运算符
      • > 大于
      • < 小于
      • >= 大于等于
      • <= 小于等于
      • == 等于，只根据表面值进行判断，不涉及数据类型
      • != 不等于，只根据表面值进行判断，不涉及数据类型
      • === 全等，数据类型也相同
      • !== 不全等
    • 逻辑运算符
      • && 与 a&&b 只有当a、b的值都为true时，值才为true，否则为false
      • || 或 a||b 只有当两个操作数a、b的值都为false时，值才为false，否则为true
      • ！ 非 !a 若a为false，结果为true，否则相反
    • 赋值运算符
      • = 赋值 a=3，a=3
      • += 加并赋值 a=3，a+=2 a=5
      • -= 减并赋值 a=3，a-=2 a=1
      • *= 乘并赋值 a=3，a*=2 a=6
      • /= 除并赋值 a=3，a/=2 a=1.5
      • %= 模并赋值 a=3，a%=2 a=1
      • += 连接并赋值 a=‘ab',a+='cde' a=’abcde'
    • 条件运算符
      • 三目运算符 条件表达式 ？结果1 ：结果2
  • 视频的基本使用
    • 视频标签的常用属性
      • autoplay 视频在就绪后马上播放，自动播放
      • controls 向用户显示控件，比如“播放”按钮
      • loop 当媒体文件播放完后再次开始播放
      • muted 规定视频输出应该被静音
      • preload 视频在页面加载时进行加载，并预备播放
      • src 要播放的视频的url地址
      • width 设置视频播放器的宽度
      • height 设置视频播放器的高度
    • 视频格式
      • Ogg
      • MPEG4
      • WebM
  • 音频的基本使用
    • 音频格式
      • Ogg Vorbis
      • MP3
      • WAV
  • 视频和音频对象
    • 视频和音频对象的常用方法
      • load() 加载媒体文件，为播放做准备，通常用于播放前的预加载，也用于重新加载媒体文件