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 的使用

表单元素

1
2
3
4
5
6
7
8
9
<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 两个属性

三种媒体格式

  • mp3
  • ogg
  • wav

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*引入百度地图*/
<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>

缓存技术

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

网络监听的事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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’

具体如下：

1
2
3
4
5
<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) );

感谢您的支持！
0%