html5

1. 新增的属性：

  placehlolder:

 input中type类型：

 draggle:

2.新增的标签：

 语义化标签

canvas（画板）

svg

audio  声音

video  音频

3.新增的API：

定位  重力感应 动画优化  history 控制历史         localstorage  storage有储存的功能      websocket  聊天室     filereader 读取文件      webworker  文件的异步处理      fetch 传说是要替代ajax的技术

 

进入目标元素几个对应事件

ondragenter   当拖拽元素进入区域触发   （必须是鼠标进入）

ondragover   当拖拽元素的鼠标进入区域，不断触发

 ondragleave  当拖拽元素鼠标进入区域后离开   

ondrop   松开

4.表单相关的属性

对input（type=text）、select、textarea与button指定autofocus属性。它以指定属性的方式让标签在画面打开时自动获得焦点。
对input（type=text）、textarea指定placeholder属性，它会对用户的输入进行提示，提示用户可以输入的内容。
对input、output、select、textarea、button与fieldset指定form属性。它声明属于哪个表单，然后将其放置在页面的任何位置，而不失表单之内。
对input（type=text）、textarea指定required属性。该属性表示用户提交时进行检查，检查该标签内必定要有输入内容。
为input标签增加几个新的属性：autocomplete、min、max、multiple、pattern与step。还有list属性与datalist标签配合使用；datalist标签与autocomplete属性配合使用。multiple属性允许上传时一次上传多个文件； pattern属性用于验证输入字段的模式，其实就是正则表达式。step 属性规定输入字段的合法数字间隔（假如 step="3"，则合法数字应该是 -3、0、3、6，以此类推），step 属性可以与 max 以及 min 属性配合使用，以创建合法值的范围。
为input、button标签增加formaction、formenctype、formmethod、formnovalidate与formtarget属性。用户重载form标签的action、enctype、method、novalidate与target属性。为fieldset标签增加disabled属性，可以把它的子标签设为disabled状态。
为input、button、form增加novalidate属性，可以取消提交时进行的有关检查，表单可以被无条件地提交。

 

 

5.多媒体标签及属性介绍

 

 

 1 ☞ <video></video> 视频
 2       属性：controls 显示控制栏
 3       属性：autoplay 自动播放  
 4       属性：loop  设置循环播放
 5  ☞ <audio></audio>  音频
 6       属性：controls 显示控制栏
 7       属性：autoplay 自动播放  
 8       属性：loop  设置循环播放
 9  ☞ video标签支持的格式    http://www.w3school.com.cn/html5/html_5_video.asp
10  ☞ 多媒体标签在网页中的兼容效果方式
11 
12      <video>
13         <source src="code/多媒体标签/trailer.mp4">
14         <source src="trailer.ogg">
15         <source src="trailer.WebM">
16     </video>

6.Canvas画布

 绘图工具

 

 花线绘图方法

 let canvas = document.querySelector(“canvas”);
 let ctx = canvas.getContext(“2d”);
 ctx.moveTo(100,200);
 ctx.lineTo(500,300);
 ctx.stroke();

绘制文本

 1 绘制填充文本
 2       content.fillText(文本的内容,x,y)
 3 
 4   ☞ 绘制镂空文本
 5        content.strokeText();
 6 
 7   ☞ 设置文字大小：
 8        content.font="20px 微软雅黑"
 9        备注： 该属性设置文字大小，必须按照cssfont属性的方式设置
10 
11   ☞ 文字水平对齐方式【文字在圆心点位置的对齐方式】
12         content.textalign="left | right | center"
13 
14   ☞文字垂直对齐方式
15          content.textBaseline="top | middle | bottom | alphabetic(默认)"
16 
17   ☞文字阴影效果
18          ctx.shadowColor="red";  设置文字阴影的颜色
19 
20          ctx.ShadowOffsetX=值;   设置文字阴影的水平偏移量
21 
22          ctx.shadowOffsetY=值;   设置文字阴影的垂直偏移量
23 
24          ctx.shadowBlur=值;      设置文字阴影的模糊度

绘制图片

1  //将图片绘制到画布的指定位置
2      content.drawImage(图片对象,x,y);
3 
4   ☞ 
5      //将图片绘制到指定区域大小的位置  x,y指的是矩形区域的位置，width和height指的是矩形区域的大小
6      content.drawImage(图片对象,x,y,width,height);

 

转载于:https://www.cnblogs.com/yuyuanwen/p/11124450.html