HTML5知识体系

简介、h5语义化标签、经典布局

1
2
3

<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->

html骨架
经典网页布局
语义化标签 header、nav、main、session、article、aside、figure、footer、mark、progress、hgroup(已废弃)、time、details、bdi、command、summary、rp、rt、ruby
兼容h5标签的插件 html5shiv.min.js

表单

表单类型
- text
- password
- radio
- checkbox
- button
- submit
- reset
- image
- file
- hidden
- email
- color
- url
- number 、search、range 、tel、time、date、datetime、week、month、datetime-local
表单元素
表单属性
- placeholder 占位符
- autofocus 获取焦点
- multiple 文件上传多选或多个邮箱地址
- autocomplete 自动完成，用于form元素，也可用于部分input，默认值on
- form 指定表单项属于哪个form，处理复杂表单时会需要
- novalidate 关闭验证，可用于
  标签，（只适应用form）
- required 验证条件，必填项
- pattern 正则表达式自定义验证规则
表单事件 inp.oninput，内容改变时触发

表单元素注意 `datalist` 的使用

表单元素

<datalist>
  <input type="text" list="hobby" name="hobby">
  <datalist id="hobby">
  <option value="basketball"></option>
  <option value="basketball"></option>
  <option value="football"></option>
  <option value="pingpang"></option>
</datalist>
<keygen name="security"></keygen>加密类型

表单属性

autofocus
placeholder
multiple
autocomplete

媒体

audio标签

三种媒体格式

controls
autoplay 两个属性

三种媒体格式

video标签

三种媒体格式

controls
autoplay 两个属性

三种媒体格式

mp4
ogg
webm

DOM扩展

获取元素

document.getElementsByClassName ('class')
- 通过类名获取元素，以类数组形式存在。
document.querySelector('selector')
- 通过CSS选择器获取元素，符合匹配条件的第1个元素。
document.querySelectorAll('selector')
- 通过CSS选择器获取元素，以类数组形式存在。

css当中可用的在querySelector中都能用

querySelector querySelectorAll

类名操作(比较方便)

this.classList
- !当前元素的class!
if(this.classList.contains('active')) return false;
- !如果已经有active 不做任何操作!
this.classList.remove('active');
- !清除class!
this.classList.add('active');
- !当没有选中的时候添加class active!

Node.classList.add('class')
- 添加class
Node.classList.remove('class')
- 移除class
Node.classList.toggle('class')
- 切换class，有则移除，无则添加
Node.classList.contains('class')
- 检测是否存在class

Node指一个有效的DOM节点，是一个通称

自定义属性

在HTML5中我们可以自定义属性，其格式如下data-*=””；
如：data-info=”我是自定义属性”，通过Node.dataset[‘info’]可获取到自定义的属性值。
Node.dataset是以类数组形式存在的
当我们设置data-my-name=”itcast”，则需要以驼峰格式才能正确获取（Node.dataset[‘myName’]）

jQuery的自定义属性方法data();

操作内存
当没有设置过data的时候可以取到dom上的属性
当我们设置过data之后取的就是内存的
user-name userName
- 驼峰命名和普通的类名都可以取到值

直接操作DOM;

nav.dataset['userName'] = 'xgc';

必须是驼峰命名

全屏

webkitRequestFullScreen()

视频播放器案例

视频播放的方法、属性、事件

history

history.go();
- 正为前进，负为后退
history.back();
- 后退
history.forward();
- 前进
history.pushState({key: 'itcast'}, '标题变没变', '/test.html');
- pushState可以往历史记录添加一条记录
history.replaceState(null, 'title', './test.html');
- 替换历史记录
window.onpopstate = function (state) {console.log(state);}
- 监听历史的变化？只有在点后退前进时调用

本地存储

sessionStorage;

window.sessionStorage.setItem(key, val)
- 存一个数据
var val = window.sessionStorage.getItem(key);
- 读取一个数据
var val = window.sessionStorage.removeItem(key);
- 删除一个数据
window.sessionStorage.clear();
- 清空一个数据

localStorage

window.localStorage.setItem(key, val);
- 存一个数据
var val = window.localStorage.getItem(key);
- 读取一个数据
var val = window.localStorage.removeItem(key);
- 删除一个数据
window.localStorage.clear();
- 清空一个数据

geolocation

/*引入百度地图*/
<script src="http://api.map.baidu.com/api?v=2.0&ak= 0A5bc3c4fb543c8f9bc54b77bc155724"></script>
<script>
  /*如果存在这个属性就说明浏览器支持定位*/
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
      var latitude = position.coords.latitude; // 纬度
      var longitude = position.coords.longitude; // 经度
      console.log(position);
      /********************/
      // 这些都是写死
      var map = new BMap.Map("container"); // container表示主到哪个容器
      // 把经度纬度传给百度
      var point = new BMap.Point(longitude, latitude);
      map.centerAndZoom(point, 15);
      /****************************/
      // 只写上面三行就可出现地图了，并且会定位
      // 定义好了一个图片标记
      var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300, 157));
      // 创建标注
      var marker = new BMap.Marker(point, {icon: myIcon});
      map.addOverlay(marker);
    });
  }
</script>

缓存技术

CACHE MANIFEST
CACHE:
#此部分写需要缓存的资源 （#是注释的意思）
./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg
./images/img5.jpg
NETWORK: 
#此部分要写需要有网络才可访问的资源，无网络刚不访问
./js/main.js
*
FALLBACK:
#当访问不到某个资源的情况下，自动由另一个资源替换
./css/online.css ./css/offline.css
./online.html ./offline.html

<!DOCTYPE html>
<!--是不是做离线缓存  缓冲清单-->
<html lang="en" manifest="./study.appcache">
<head>
  <meta charset="UTF-8">
  <title>Application Cache</title>
  <link rel="stylesheet" href="./css/main.css">
  <link rel="stylesheet" href="./css/online.css">
</head>
<body>
  <img src="./images/img1.jpg">
  <img src="./images/img2.jpg">
  <img src="./images/img3.jpg">
  <img src="./images/img4.jpg">
  <img src="./images/img5.jpg">
  <script src="./js/main.js"></script>
</body>
</html>

拖拽

###关键代码

<div class="box" draggable="true"></div>

拖拽元素

drag
dragleave
dragstart
dragend

目标元素

dragover 在目标元素上移动
drop
dragleave
e.preventDefault();
- 阻止浏览器默认行为

文件上传

文件选择的一个事件file.onchange

<body>
  <input type="file" class="file" multiple>
  <script>
        /*文件对象*/
    var file = document.querySelector('.file');
        /*文件选择的一个事件*/
    file.onchange = function () {
      var reader = new FileReader();
      reader.readAsDataURL(this.files[0]);
      reader.onload = function (ev) {
        document.querySelector('#img').src = this.result;
      }
    }
  </script>
</body>

网络监听的事件

<script src="jquery.min.js"></script>
<script>
  // 网络监听的事件
  // 10 online 在线 offline 离线
  // 事件是给window绑订的
  // 通过window.navigator.onLine可以返回当前的网络状态
  window.addEventListener('online', function () {
    //alert('online');
    $('.tips').text('网络已连接').fadeIn(500).delay(1000).fadeOut();
  });
  window.addEventListener('offline', function () {
    //alert('offline');
    $('.tips').text('网络已断开').fadeIn(500).delay(1000).fadeOut();
  });
</script>

canvas

简介

使用 canvas 绘图

一定要有一个 canvas 标签. canvas 标签不能够绘图, 它只是画布, 但是它可以获得绘图工具对象.
绘图工具对象提供了各种绘图的 api( 函数, 方法 ), 需要绘制什么形状的时候就调用什么方法即可.

获得绘图工具对象 canvas.getContext('2d'); // ‘webgl’

具体如下：

<canvas width="600" height="300">
  你好, 您的浏览器不支持 Canvas, 请升级....
</canvas>
var cases = document.getElementsByTagName('canvas');
var context = cases[0].getContext("2d");

`canvas.getContext` 的 API

状态：凡是涉及到颜色, 线宽, 虚线, 线帽, 拐点, 描边, 填充等等都是绘图时的状态.

context.beginPath(); // 开启一个新的路径

实际上, 开始绘图的时候:

系统就默认的有一个 beginPath 行为
如果一个阶段绘制结束了, 需要开启一个新的 beginPath
接着绘制另一个阶段的图像.这个阶段就是状态.
这个状态就是指:线宽, 颜色, 端点状态, 线状态, 描边还是填充

在开启新路径时, 绘制工具的状态数据会被继承下来,即前面设置的状态会被后面保留, 如果需要启用原来的状态有两个方法

手动设置状态
存储恢复状态

使用场景:

如果绘制了一个图形, 但是临时要绘制另一个图形
在绘制完这个图形后, 还需要回到原来的状态中继续绘制
context.moveTo( x, y );
- 告诉计算机从什么地方开始绘制
context.lineTo( x, y );
- 告诉计算机从当前位置描点到哪里
context.stroke();
- 描边，将前面描点用线依次连接起来
context.fill();
- 填充如果描点的曲线不闭合,那么将自动将起点与终点连接起来填充
context.lineWidth = 数字;
- 设置线宽
context.strokeStyle = 表示颜色的字符串;
- 描边颜色
context.fillStyle = 表示颜色的字符串;
- 填充颜色
context.font = '50px 黑体';
- 设置字体
context.setLineDash(数组);
- 绘制虚线

数组是描述实部与虚部的长度.

为[]时表示绘制实线;
[value1,value2]表示虚线的实部和虚部;
[val1,val2,val3,…]表示虚线的实部和虚部交替取值，取完之后再循环取值。
context.save();
- 保存当前状态,那么后面可以对状态做任何修改
context.restore();
- 在想要回到原来的状态时, 调用此方法
context.closePath();
- 如果是绘制闭合的曲线, 那么最后可以使用
  - 如果绘制的折线, 那么两条线段之间会自动补全尖角
  - 如果不是连续的折线, 那么闭合的两条线段, 是不会补全尖角
应用：可以利用x，y的坐标的数学函数的关系来绘制各种曲线
context.strokeRect(x坐标,y坐标,宽,高);
- 描边矩形
context.fillRect(x坐标,y坐标,宽,高);
- 填充矩形
context.clearRect(x坐标,y坐标,宽,高);
- 擦除矩形区应用：做动画
context.arc(x坐标,y坐标,半径,起始角,终点角度);
- 角度是弧度制
context.strokeText('测试文字',100,100 );
- 描边文本
context.fillText('测试文字',300,100);
- 填充文本
绘图第一种用法,将整个图片按照本身的宽高绘制到绘布上
- context.drawImage(img,x轴坐标,y轴坐标);
绘图第二种用法, 将图绘制在指定的矩形区域内
- var img = document.createElement( 'img' );
- 绘图时首先需要准备图片
  - img.src = ‘1.jpg’;
- context.drawImage(img,x轴坐标,y轴坐标,宽,高);
  - 第三种绘制图片的方法，绘制精灵图(结合setInterval();方法做一些动画)
- context.drawImage(图片,截取精灵图的x,截取精灵图的y,截取宽度w,截取高度度h,放在画布上的x坐标,放在画布上的y坐标,图片所占画布的宽,图片所占画布的高);
- context.translate(x,y);
  - 坐标平移变换
- context.rotate(弧度);
  - 坐标旋转变换，最简单应用：旋转的正方形
- context.scale(x,y);
  - 左边伸缩变换(x或y缩放的倍数,如果是1表示不缩放)最简单应用一：椭圆

注：变换是可以累加的

非零环绕原则

在 canvas 绘图中是使用路径描线的方法绘制图形

描点时的顺序有一定的作用, 在描点时围绕起来的图形满足 “非零环绕原则” 的区域就会被镂空起来如果不满足就会被填充.

计算的值为 0 就镂空, 如果非零就是填充
从图形的内部拉一个箭头, 以箭头的起点为圆心
检查穿过箭头的线, 以箭头起点为圆心如果顺时针记为 +1
如果逆时针记为 -1, 最后求和, 如果为 0 则镂空, 如果非零则填充

圆上坐标的计算公式

1 2	x = x0 + r * Math.cos( 弧度 ); y = y0 + r * Math.sin( 弧度 );

补充

ES5 中对数组做了扩展, 引入了 forEach 和 map 等方法
ES6 中引入了箭头函数 arrow function 简化函数的书写( 还有其他特征 )
- 函数不写 function
- 参数如果只有一个不写圆括号
- 参数与函数体用 => 连接
- 函数体如果只有一句话可以省略花括号
- 如果函数体只有一句话, 且返回数据, 可以省略 return

如：var maxX = Math.max.apply( null, points.map(function (v) { return v.x; }));

简写成：var maxX = Math.max.apply( null, points.map(v=>v.x) );

简介、h5语义化标签、经典布局

表单

表单元素 注意 datalist 的使用

表单属性

媒体

audio标签

三种媒体格式

三种媒体格式

video标签

三种媒体格式

三种媒体格式

DOM扩展

获取元素

querySelector querySelectorAll

类名操作(比较方便)

自定义属性

jQuery的自定义属性方法data();

直接操作DOM;

全屏

视频播放器案例

history

本地存储

sessionStorage;

localStorage

geolocation

缓存技术

拖拽

拖拽元素

目标元素

文件上传

网络监听的事件

canvas

简介

canvas.getContext 的 API

非零环绕原则

圆上坐标的计算公式

补充

表单元素注意 `datalist` 的使用

`canvas.getContext` 的 API