HTML版本
HTML4：strict.dtd 严格模式
loose.dtd 松散模式
XHTML：strict.dtd 严格模式
transitional 松散模式
HTML5的主要目的是在移动设备上支持多媒体
新特性：
- 取消了过时的显示效果标记 <font></font> <center></center>
- 新表单元素的引入
- 新语义标签的引入
- Canvas标签
- 本地数据库（本地存储）
- 一些API
优点：
- 跨平台
例如：开发了一款HTML5的游戏，可以移植到很多平台
缺点：
- pc端浏览器要求较高，容易造成用户体验不佳
标签语义化：
<div>没有语义化的标签</div>
<header>语义化的标签</header>
<nav>语义化的标签</nav>
<footer>语义化的标签</footer>
IE9以下不支持语义标签
解决方案一：
document.createElement("nav");
-----------------------------------
nav { display: block;}
解决方案二：
<script type="text/javascript" src="html5shiv.min.js"></script>
解决方案三：（最佳）
<!-- lt 表示“小于”的意思；当满足指定条件时就会执行其中的代码 -->
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<![endif]-->
多媒体标签：
<video src="/trailer.mp4" controls autoplay loop></video>Controls代表视频显示控件
Autoplay 自动播放
Loop 视频循环播放
兼容性写法
<video width="320" height="240" controls autoplay loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
新表单元素：
<input type="email">
email: 输入合法的邮箱地址
url： 输入合法的网址
number： 只能输入数字
range： 滑块
color： 拾色器
date： 显示日期
month： 显示月份
week ： 显示第几周
time： 显示时间表单属性：
form属性
<form action="test.php" method="get" autocomplete="on">autocomplete：on/off 自动显示以前填写内容
novalidate: true/false 取消校验
Input属性
autofocus 自动获取焦点
placeholder 提示默认信息
required 必填项
multiple 实现多选效果
list 实现绑定下拉列表
<input type="text" list="abc">
<datalist id="abc" multiple>
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
</datalist>form 规定input属于哪个表单
HTML5中的API
获取页面元素
document.querySelector("选择器") //通过该选择器只能选中第一个元素
document.querySelectorAll("选择器"); //选中所有符合选择器规则的元素改变元素class
Dom.classList.add("类名"): 给当前dom元素添加类样式
Dom.classList.remove("类名"); 给当前dom元素移除类样式
Dom.classList.contains("类名"); 检测是否包含类样式
Dom.classList.toggle("active"); 切换类样式（有就删除，没有就添加）自定义属性
在标签中以data-开头的属性，就是自定义属性
- 获取自定义属性
Dom.dataset.属性名 //属性名不包括data-- 设置自定义属性
Dom.dataset.自定义属性名=值
文件读取
var input=document.querySelector("input"); //获取文件选择输入框
input.onchange=function(){
//获取到文件
var file=this.files[0];
//创建读取器
var reader=new FileReader();
//开始读取
reader.readAsText(file);
//当文件读取完成后，才可以获取文件信息内容
reader.onload=function() {
console.log(reader.result);
}
}过大的文件不推荐这种方式，要用流的方式
获取网络状态
1.获取当前网络状态
window.navigator.onLine //返回一个布尔值2.网络状态事件
//当联网的时候触发该事件
window.ononline=function () {
alert("在线");
}
//当断网的时候触发该事件
window.onoffline=function() {
alert("断网");
}获取地理定位
//仅获取一次地理位置
window.navigator.geolocation.getCurrentPosition(success,error);
//实时获取地理位置:
window.navigator.geolocation.watchPosition(success,error);
//获取成功函数
function success (msg,position) {
console.log(msg);
console.dir(position);
}
//获取失败函数
function error (msg) {
console.log(msg);
}本地存储
localStorage
1. 永久生效
2. 多窗口共享
3. 容量大约为20M
◆window.localStorage.setItem(key,value) 设置存储内容
◆window.localStorage.getItem(key) 获取内容
◆window.localStorage.removeItem(key) 删除内容
◆window.localStorage.clear() 清空内容sessionStorage
1. 生命周期为关闭当前浏览器窗口
2. 可以在同一个窗口下访问
3. 数据大小为5M左右
◆window.sessionStorage.setItem(key,value)
◆window.sessionStorage.getItem(key)
◆window.sessionStorage.removeItem(key)
◆window.sessionStorage.clear()Canvas
画布大小必须使用内联属性方式设置，使用css样式会导致图像失真模糊
//获取画布
var canvas=document.querySelector("canvas");
//获取画布上下文对象
var ctx=canvas.getContext("2d");
ctx.moveTo(x,y) 起点
ctx.lineTo(x,y) 终点
ctx.stroke() 描边
ctx.beginPath() 开启新的图层
ctx.closePath() 关闭绘图
ctx.strokeStyle="颜色"
ctx.linewidth="粗细"
线连接方式： lineJoin: round | bevel | miter (默认)
线帽（线两端的结束方式）： lineCap: butt(默认值) | round | square canvas渐变方案
canvas线性渐变
var lgd=ctx.createLinearGradient(x0, y0, x1, y1);
lgd.addColorStop(0, "red"); //添加开始颜色
lgd.addColorStop(0.5, "yellow"); //添加中间颜色
lgd.addColorStop(1, "blue"); //添加结束颜色
ctx.strokeStyle=lgd;
ctx.stroke();
x0-->渐变开始的x坐标
y0-->渐变开始的y坐标
x1-->渐变结束的x坐标
y1-->渐变结束的y坐标 canvas径向渐变
var rgd=ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
rgd.addColorStop(0, "red"); //添加开始颜色
rgd.addColorStop(0.5, "yellow"); //添加中间颜色
rgd.addColorStop(1, "blue"); //添加结束颜色
ctx.fill();
(x0,y0)：渐变的开始圆的 x,y 坐标
r0：开始圆的半径
(x1,y1)：渐变的结束圆的 x,y 坐标
r1：结束圆的半径 ☞ 非零环绕原则：
1. 绘制的是闭合图形
2.绘制顺序有顺时针和逆时针
3.绘制顺序相反之间的区域可以通过fill填充
案例：
var canvas = document.querySelector("canvas");
var ctx=canvas.getContext("2d");
//顺时针
ctx.moveTo(150, 50);
ctx.lineTo(450, 50);
ctx.lineTo(450, 350);
ctx.lineTo(150, 350);
ctx.lineTo(150, 50);
//逆时针
ctx.moveTo(300, 100);
ctx.lineTo(200, 200);
ctx.lineTo(250, 200);
ctx.lineTo(250, 300);
ctx.lineTo(350, 300);
ctx.lineTo(350, 200);
ctx.lineTo(400, 200);
ctx.lineTo(300, 100);
ctx.fill();
效果图：
canvas绘制虚线
ctx.setLineDash(数组);
ctx.stroke();
例如： [10,5] 实线部分10px 空白部分5px
ctx.setLineDash([10,5]);
canvas绘制矩形
ctx.strokeRect(x, y, width, height); //绘制描边矩形
ctx.fillRect(x, y, width, height); //绘制填充矩形
ctx.clearRect(x, y, width, height); //清除部分矩形canvas绘制动画效果
☞ 实现动画效果：
1. 先清屏
2. 绘制图形
3. 处理变量案例：
var x=0;
var i=1; //控制方向
var x_interval = 5; //每次运动距离
setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(x,50,100,200);
x=x+x_interval*i;
if(x>=canvas.width-100){
i=-1;
}else if(x<0){
i=1;
}
},20)
canvas绘制文本
☞ 绘制填充文本 ctx.fillText(文本内容,x,y)
☞ 绘制镂空文本 ctx.strokeText(文本内容,x,y);
☞ 设置文字大小 ctx.font="20px 微软雅黑"
☞ 文字水平对齐方式 ctx.textalign="left | right | center"
☞ 文字垂直对齐方式 ctx.textBaseline="top|middle|bottom|alphabetic"
☞ 文字阴影效果
ctx.shadowColor="red"; 设置文字阴影的颜色
ctx.ShadowOffsetX=值; 设置文字阴影的水平偏移量
ctx.shadowOffsetY=值; 设置文字阴影的垂直偏移量
ctx.shadowBlur=值; 设置文字阴影的模糊度canvas绘制图片
☞ //将图片绘制到画布的指定位置
content.drawImage(图片对象,x,y);
//将图片绘制到画布的指定区域
var img=document.createElement("img");
img.src="1.jpg";
img.onload=function(){
ctx.drawImage(img, 0, 0);
}
☞ //将图片绘制到指定区域大小的位置 x,y指的是矩形区域的位置，width和height指的是矩形区域的大小
content.drawImage(图片对象,x,y,width,height);
var img=document.createElement("img");
img.src="1.jpg";
img.onload=function(){
ctx.drawImage(img, 100, 100,300,300);
}
☞ //将图片的指定区域绘制到指定矩形区域内
content.drawImage(图片象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);
sx,sy 指的是要从图片哪块区域开始绘制，swidth，sheight 是值 截取图片区域的大小
dx,dy 是指矩形区域的位置，dwidth,dheight是值矩形区域的大小
var img=document.createElement("img");
img.src="1.jpg";
img.onload=function(){
ctx.drawImage(img, 810,0,387,331,0,0,387,331);
}
☞ //解决图片绘制到某一个区域的按原比例缩放绘制：
绘制宽：绘制高==原始宽：原始高
var img=document.createElement("img");
img.src="1.jpg";
img.onload=function(){
var img_width=img.width;
var img_height=img.height;
var drowHeight=200*img_height/img_width;
ctx.drawImage(img, 100, 50, 200,drowHeight);
}canvas绘制圆弧
ctx.arc(x,y,radius,startradian,endradian[,direct]);
x,y 圆心的坐标
radius 半径
startradian 开始弧度
endradian 结束弧度
direct 方向（默认顺时针 false） true 代表逆时针
0度角在圆心水平向右的水平线
☞ 绘制圆上任意点：
公式：x=ox+r*cos( 弧度 )
y=oy+r*sin( 弧度 )
ox: 圆心的横坐标
oy: 圆心的纵坐标
r： 圆的半径Canvas平移
ctx.translate(x,y);
通过该方法可以整个画布坐标系中的原点位置发生改变Canvas旋转
ctx.rotate(弧度)Canvas缩放
ctx.scale(x,y)
备注：沿着x轴和y轴缩放
x,y 为倍数 例如： 0.5 1
扫一扫
1500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
