HTML5+CSS3知识概览

H5 + CSS3 知识大纲

一、标签

表单新增的type属性：

• 验证类：
  email 要求包含 @ 和 服务器名称 eg:qq.com
  url 要求包含http
  number 要求只能输入数字
• 日期和时间
  time : --:–
  date: 年/月/日 下拉列表显示日历控件
  datetime-local : 年/月/日 --:-- 下拉列表显示日历控件
  month: ----年–月
  week : ----年第–周
  大多数浏览器不支持datetime，只有safari支持

表单新增的其他属性

• autocomplete=‘on|off’ 自动完成 on 打开 off关闭

前提：1.表单必须提交成功才能自动完成 2. 添加了自动完成属性的元素必须有一个name属性

• multiple 多选 type=‘file’ 选择多个文件； 可以输入多个邮箱地址，逗号分隔

一些其他需求

1. form表单之外还有一个表单元素，如何与表单一起提交？

• 方法： 指定form表单的id 给form表单之外的表单元素添加 form属性 form=‘id值’

2. 使下拉列表不仅可以选择还可以输入

• 方法：使用datalist 和 input 输入框 通过list属性 绑定

<input type='text' list='subject' />
<datalist id='subject'>
<!-- 创建选项值  value:具体值 lable:提示信息 辅助值 -->
	<option value="java"></option>
	<option value="c"></option>
</datalist>

注意与原始下拉列表选项option书写的区分

<select name="">
<option value="1">js</option>
	<option value="2">c</option>
</select>

其他标签

• colgroup标签—用于对表格中的列进行组合，以便进行一些格式化的设置（同时设置一列的样式,span=i设置前i列）。 只能在table元素内使用colgroup标签

<table >
	<colgroup span="2"></colgroup>
	<tr><td>Data</td><td>Data</td><td>Data</td></tr
	<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>

二、css新特性

阴影

• 盒子阴影：box-shadow
• 文字阴影：text-shadow: offsetX（水平方向偏移） offsetY blur （模糊范围） color;
• 多层阴影：写多组数据，逗号隔开。 text-shadow:0px 0px 30px #fff,0px 0px 55px red;

盒子模型

新特性box-sizing: content-box |border-box;设置盒子大小的计算方式。

1. 默认：content-box 设置的width/height高指的是content部分的宽高，
   盒子最终大小=content（width/height） + padding2+border2
2. border-box 设置的width/height高指的是盒子最终大小；盒子大小=width/height
   只能消除内边距对元素的影响，不能消除外边距对元素的影响

线性渐变

background-image: linear-gradient(方向，开始颜色，[位置1，颜色2 位置2，颜色3 位置3，……]结束颜色)

• 方向：to left 从右向左270deg | to right 从左向右90deg| to top 0deg | to bottom 180deg（默认）

background: linear-gradient（to right, red 0%,blue 50%,yellow 100%）;

颜色和位置之前用空格

镜像渐变

background: radial-gradient(形状,大小，坐标…)

• 形状：circle圆形 ellipse适配当前形状(默认)
• 大小(渐变半径)：closest-side最近的边| farthest-side最远的边| closest-corner最近的角| - farthest-corner最远的角（默认）
• 坐标（镜像渐变的中心）：at 像素值|left|right|top|bottom|center 默认镜像渐变在中心， 根据左上角的位置偏移

重复渐变：repeating- radial-gradient |  repeating- linear -gradient

过渡

transition: all 2s steps(4); // 让过渡效果分成指定的n步完成

• transition 属性添加在要发生过渡效果的元素身上
• display 显示隐藏 不能实现 过渡效果

2D/3D变换效果

动画

* animation-name: 动画名称；
* animation-duration:耗时；
* animation-iteration-count:动画执行次数；默认一次  Infinite—无限循环
* animation-direction: normal | alternate ; 交替动画 原路返回 开始->结束->开始
* animation-delay:1s; 延时
* animation-fill-mode: forwards | backwards;设置动画结束状态。forwards-保留动画结束时的状态；backwards（默认）-动画播放完毕会回到初始状态（直线返回，不是原路返回）。
* animation-timing-function:linear; 线性
* animation-play-state:running | paused;设置动画的播放状态  刷新页面自动播放；paused-暂停状态  可以通过js控制 不同的状态

三、弹性盒子-flex布局

• align-self属性：允许单个元素有与其他项目不一样的对齐方式，可覆盖align-items属性。
  默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch; 在子元素上设置

四、video 、audio

video标签

• 属性 src controls autoplayer loop width height 宽高一般只设置一个 另一个等比缩放
  poster(视频封面；视频没有加载完成或未点击播放时显示) 不设置默认显示第一帧

audio标签 插入音频

• 属性：src 文件路径 controls 显示面板（默认不显示） autoplayer 自动播放 （有浏览器兼容问题） loop 循环

全屏：兼容不同浏览器

				if(video.requestFullScreen){
					video.requestFulScreen();
				}else if(video.webkitRequestFullScreen){
					video.webkitRequestFullScreen();  //chrome safria
				}else if(video.mozRequestFullScreen){
					video.mozRequestFullScreen();  // firefox
				}else if(video.msRequestFullscreen){
					video.msRequestFullScreen();// IE
				}

五、canvas

• 新建画布 默认 300*150 白色 。canvas 是行内元素。

• 通过css改变宽高来调整画布大小 会缩放画布，图像会失真，可以在行间该宽高

bug：默认线宽1px，实际上看到的是2px
原因：canvas是从中心开始往两边延伸，物理像素如果是从整数开始会自动扩展
解决：设置物理像素从.5 画到 .5

getContext('2d'); // 获取上下文(绘图环境)	
ctx.beginPath();//开启新路径
ctx.moveTo(100,100.5); // 移动画笔 起始点坐标
ctx.lineTo(200,100.5);//画直线 结束点坐标
ctx.stroke();// 描边
ctx.strokeStyle='red'; //线的颜色默认使用上一次的  继承
ctx.lineWidth=10;
ctx.closePath();// 图形闭合。 画到起始点 不能完全闭合
ctx.fill();//填充 默认黑色
ctx,fillStyle=’red’;//设置填充色

线的端点(线帽)：ctx.lineCap=’butt | square | round’; butt 默认没有任何效果
线的拐点：ctx.lineJoin=’miter | bevel | round’; miter 默认 没有效果

绘制镂空的正方形

非0环绕-判断某一部分图形是否需要填充：从需要填充的地方拉一条线出来，顺时针+1 逆时针-1 非0填充，0不填充
环绕方向相反，中间镂空；相同，实心
注意：两个正方形之间 一定不要 开始新路径ctx.beginPath();

绘制虚线

ctx.setLineDash([5]); 参数是一个数组 小段实线的长度和间隔都是5px
ctx.setLineDash([5,10]); 实线长度5px 间隙10px
ctx.setLineDash([5,10,15]);  交替显示 5,10,15

ctx.setLineDash();//获取虚线的排列方式，不重复的一段

• 偏移：ctx.lineDashoffset = 15 正值往左移动 负值向右移动 移动之后不显示(蚂蚁 线的原理)

获取画宽高的两种方法

1. 通过canvas 的dom元素，wdith/height 属性获取
2. 通过 上下文对象 ctx.canvas ,wdith/height 属性获取

绘制矩形

ctx.rect(x,y,w,h);// 不是独立的路径 坐标点（x,y） 只是一个轨迹，需要调用stroke(); 或fill()方法
ctx.strokeRect(x,y,w,h);//绘制描边的矩形，有自己独立的路径
ctx.fillRect(x,y,w,h); //绘制填充的矩形
ctx.clearRect(x,y,宽，高)//清除矩形中的内容-橡皮擦ctx.clearRect(0,0,宽，高)//清除整个画布

绘制图片

3个参数：drawImage(image,100,100[,width,height]);// 图片对象image，坐标(image)
5个参数：drawImage(image,100,100,width,height); // 图片对象image，坐标(image)，图片大小

9个参数：drawImage(image,400,400,100,100,200,200,width,height);//图片对象，图片上的定位坐标（开始截取的坐标），图片上的截取区域，图片的坐标，图片的大小

六、requestAnimationFrame动画

• 与屏幕更新频率一致，requestAnimationFrame在页面刷新的时候才开始执行。解决setTimeout 不准确的问题

• 设置动画：requestAnimationFrame(f);//浏览器每次刷新时触发f函数

• 取消动画：cancelAnimationFrame(id);

• 兼容性写法：

window.requestAnimFrame = (function(){
	return window.requestAnimationFrame ||
	window.webkitRequestAnimationFrame ||
	window.mozRequestAnimationFrame ||
	function(callback){
		window.setTimeout(callback,100/60);
	}
})();

window.cancelAnimFrame = (function(){
	return window.cancelAnimationFrame ||
	window.webkitCancelAnimationFrame ||
	window.mozCancelAnimationFrame ||
	function(id){
		window.clearTimeout(id);
	}
})();

七、SVG

八、历史记录history

九、worker

十、地理定位

十一、客户端存储

十二、webSocket协议

持续更新中~