文章目录

语义标签
新添元素
删除的标签
添加的其他属性
自定义属性
多媒体播放
- 1. 嵌入视/音频：
- 2. source,指定不同媒体来源
canvas元素（画图）
js-cookie
数据存储
拖放操作
WebMessage
websocket
地图API

语义标签

<nav>网站导航块
<section>表示页面中的一个内容块
<article>表示页面中的一块与上下文不相关的内容块
<aside>元素表示当前页面或文章的附属信息部分
<header>表示页面中一个标题区域
<footer>底部标签
<hgroup>用于页面中与标题区域组合
<figure>一段独立的流内容
<address>用来在文档中呈现联系信息

新添元素

带标题的组合元素< figure>< figcaption>强调标签< mark>软换行< wbr> 对中文无效，仅当浏览器不够显示内容时生效进度条< progress min="0" max="100" value=""  >进度条< meter  min="0" max="100" value="" >属性（度量）：low最低 high最高 optimun最优细节信息< details>配合< summary>标题注音注释< ruby>配合< rt>

删除的标签

< font >   < center> < basefont>   < big>
< s>      < strike> < tt>     < u>
< bgsound>    < marquee>    < applet> < rb>
< acronym>    < dir>    < isiindex>   < xmp>
< nextid> < plaintext>
HTML5以后也不再支持框架了

添加的其他属性

在< ol>中添加了reversed属性，指定列表倒序显示为< style>元素新添属性scoped,使这个style局部有效（火狐有效）为< script>元素添加属性async，使js代码异步传输注意：async只有使用src引入文件时有效全局属性（所有标签有效）：
contentEditable是否可以编辑
hidden隐藏元素
spellcheck拼写检查（false/true）

自定义属性

在HTML中，允许为HTML元素自定义属性：data-，可以通过JS进行获取或者操作

多媒体播放

注意：需要使用流媒体文件格式（如mp4、webm、ogg等）
在HTML5问世之前，要在网络上展示视频，音频，动画，除了使用第三方自主开发的播放器之外，使用得最多的工具就是Flash,但是需要在浏览器上安装各种插件，并且有时速度很慢。HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是 < audio> < video>

1. 嵌入视/音频：

<video src="" id="" width="640" height="360">视频播放器无法使用</video>
<audio src="" id="">音频播放器无法使用</audio>
标签之间的元素表示后备内容，在浏览器不支持这两个媒体元素的情况下显示。

2. source,指定不同媒体来源

并不是所有的浏览器都支持所有媒体格式，可以指定多个不同的媒体来源。由于不同的浏览器支持不同的编解码器，一般要指定多种格式的媒体来源。src  指播放媒体的URL地址type     媒体类型，属性值为播放文件的MIME类型，该属性值中的codes参数表示所使用的媒体的编码格式。
属性：src:播放文件的路径width,height:播放控件的宽度和高度controls:默认播放控制条是否显示autoplay:自动播放preload:预加载（缓冲）auto - 当页面加载后载入整个视频meta - 当页面加载后只载入元数据none - 当页面加载后不载入视频poster:视频预览图（视频不用或者不可用时）loop:循环播放currentTime:当前播放时间 00:00/30:00duration:文件总的播放时间palyed:是否播放中paused:是否暂停ended:是否播放完毕defaultPlaybackRate:设置视频的默认播放速度 1playbackRate:设置视频的播放速度 1volume:音量 0-1muted:静音  ture/false
方法：play();播放pause();暂停

canvas元素（画图）

canvas元素属性 width height兼容性元素内容canvas配套API获取canvas元素var Mycanvas = document.getElementById('Mycanvas');获取canvas元素操作上下文getContext对象var c = Mycanvas.getContext("2d");

用实例学习canvas的基本使用

 开始绘制：beginPath();结束绘制：closePath();//闭合路径清除画布：clearRect(x,y,width,height);1.绘制线段涉及属性：strokeStyle线条颜色lineWidth线条粗细设计方法：moveTo(x,y)lineTo(x,y)stroke()//绘制动作2.绘制矩形涉及属性：fillStyle涉及方法fillRect(x,y,width,height)实心矩形strokeRect(x,y,width,height)空心矩形fill();3.绘制圆形涉及方法：arc(x,y,r,beginAngle,endAngle,anticlockwise)圆心、半径、弧度、顺逆时针。0*Math.PI/180,180*Math.PI/180stroke()空心圆fill()实心圆           4.绘制文字涉及属性：font="50px Arial"涉及方法：strokeText(str,x,y);空心字fillText(str,x,y);实心字5.图像翻转设计方法：save();//产生一个与原图相同的一个异次元空间translate(x,y);设置旋转点rotate(angle);设置弧度restore();//把旋转后的异次元空间映入原图6.绘制渐变图形涉及方法：         var color = c.createLinearGradient(0,0,0,500);//创建渐变color.addColorStop(0,"blue");color.addColorStop(1,"yellow");//追加颜色c.fillStyle=color;c.fillRect(0,0,500,500);

7.canvas存储

function down(){
//流的方式
//window.location=mymc.toDataURL("image/png").replace("image/png","image/octet-stream");
//A标签模拟的方式
var data = mymc.toDataURL("image/png")
var link = document.createElement('a');
link.href = data;
link.download = '1.png';
link.click();
}

js-cookie

//创建简单的cookie
Cookies.set('name', 'value');
//创建有效期为7天的cookie
Cookies.set('name', 'value', { expires: 7 });
//为当前页创建有效期7天的cookie
Cookies.set('name', 'value', { expires: 7, path: '' });
//取值
Cookies.get('name'); // => 'value'
//获取所有cookie Cookies.get(); // => { name: 'value' }
//删除
Cookies.remove('name');
//如果值设置了路径，那么不能用简单的delete方法删除值，需要在delete时指定路径
Cookies.remove('name', { path: '' });
//json
Cookies.set('name', { foo: 'bar' });//'{"foo":"bar"}'//第三个参数{}
expires
定义有效期。如果传入Number，那么单位为天，你也可以传入一个Date对象，表示有效期至Date指定时间。默认情况下cookie有效期截止至用户退出浏览器。
path
string，表示此cookie对哪个地址可见。默认为”/”。
domain
string，表示此cookie对哪个域名可见。设置后cookie会对所有子域名可见。默认为对创建此cookie的域名和子域名可见。
secure
true或false，表示cookie传输是否仅支持https。默认为不要求协议必须为https。

数据存储

随着Web应用的出现，也产生了对于能够直接在客户端上存储用户信息能力的要求。由于cookie与IE中提供的持久化用户数据的容量限制以及数据安全问题，不能大量存储数据和安全数据，H5中提供了Web Storage
学习内容：

 掌握Web Storage的基本概念，了解sessionStorage和localStorage使用方法以及区别掌握使用sessionStorage和localStorage进行数据存储，对象存储的方法掌握本地数据库的基本概念。掌握SQLLite本地数据库的基本概念以及其使用方法掌握IndexedDB数据库的基本概念以及其使用方法

Web Storage
Web Storage最早在Web超文本应用技术工作组（WHAT-WG）的Web应用1.0规范中描述的，这个规范的最初的工作最终成为了HTML5的一部分，WebStorage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续将数据发回服务器。

 1) 使用cookie的限制1. cookies的大小被限制在4KB2. cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽3. 要正确操纵cookies是很困难的2) WebStorage的两个目标是：提供一种在cookie之外存储会话数据的途径提供一种存储大量可以跨会话存在的数据的机制3) Storage类型Storage类型提供了大量的存储空间来存储键值对，Storage实例与其他对象类似，Storage类型只能存储字符串，非字符串的数据在存储之前会被转换成字符串。Storage对象提供的方法setItem(name,value)    为指定的name设置一个对应的值getItem(name)       根据指定的名字name获取对应的值removeItem(name)   删除由name指定的键值对clear()            删除所有值;key(index)            获得index位置处的值的名字length               Storage对象中，键值对的数量

Web Storage分为两种：

    1. sessionStorage对象将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要保存的任何数据。(仅限当前选项卡)2. localStorage将数据保存在客户端本地的硬盘设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

拖放操作

在HTML4.01中超链接和图片默认可以被拖动

第一步：设置可拖放属性draggable为true
第二部：根据需求选择拖放的事件进行处理（与click、change等事件用法相同）新添事件dragstart:开始拖放drag:拖放中dragenter:拖放中进入本元素dragover:拖放中再本元素移动dragleave:拖放中离开本元素drop:放开移动元素dragend:拖放结束

注意：如果你想实现拖放过程，无论是否需要都要取消dragover事件的默认行为

document.ondragover =function(e){e.preventDefault();}
事件数据处理对象:dataTransferdataTransfer对象有两个主要的方法：getData()方法和setData()方法。从这两个方法的英文字面意思上就能大概猜出来其用途。getData()方法可以取得由setData()方法保存的值。setData()方法的第一个参数，也是getData()方法唯一的一个参数，是用来保存数据类型的字符串，取值是”text”或”URL”。

IE只定义了”text”或”URL”两种有效的数据类型，而HTML5则对此加以扩展，允许指定各种MIME类型。考虑到向后兼容，HTML5也支持”text”或”URL”，但这两种类型会被映射为”text/plain”或”text/url-list”。

        setData(mime_type,data);存储数据getdata(mime_type);取出数据属性：effectAllowed  控制特效effectAllowed  用来指定当元素被拖放式所允许的视觉效果，其值如下：uninitialized：没有给被拖动元素设置任何放置行为。none：被拖动的元素不能有任何行为。copy：只允许值为”copy”的dropEffect。link：只允许值为”link”的dropEffect。move：只允许值为”move”的dropEffect。copyLink：允许值为”copy”和”link”的dropEffect。copyMove：允许值为”copy”和”move”的dropEffect。linkMove：允许值为”link”和”move”的dropEffect。all：允许任意dropEffect。dropEffect     控制特效dropEffect   表示拖放操作的视觉效果这个属性的四个值如下：none：不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。move：应该把拖动的元素移动到放置目标。copy：应该把拖动的元素复制到放置目标。link：放置目标会打开拖动的元素(但拖动的元素必须是个链接，有URL地址)。

WebMessage

当我们的需求为在HTML中内嵌的一个iframe框架，我们想要将主页面中的某个数据传递给iframe时，我们可以使用webMessage进行传递。

//a.html
//1.以 HTML 对象来返回 iframe 中的文档
//2.通过postMessage方法进行数据的传递
//3.需要通过window调用postMessage方法
iframe.contentWindow.postMessage(info.value,"http://127.0.0.1:5500");
//b.html
//添加一个事件监听器，检测是否有数据进行传递
window.addEventListener('message', function receiveMsg(e) {console.log(e)//传递的数据
}, false);

websocket

当我们的需求为一个聊天室的应用，我们需要时刻知道是否有人发布了新的消息，一般情况下的解决方案：轮询和长连接。
       轮询：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。
       缺点：因为轮询需要在项目的使用过程中，每个一段时间就发送一个请求到后台（比如用户并没有发送新的消息，而轮询是一直在进行的），这样就导致了请求中有大半是无用，浪费带宽和服务器资源。
       长连接：客户端项服务器端发起一个请求，服务器和客户端会保持连接。当有新的消息产生时，会将新的消息推送的给连接池（聊天室的所有用户）中的客户，而无消息的情况下，服务器端是不会有其它动作的。
       缺点：因为一直保持连接的状态，也造成一部分的资源浪费

//创建链接
var socket = new WebSocket("ws://127.0.0.1:7788/imserver/1001");
//接收消息socket.onmessage = function (msg) {$("#message").text("接收到后端消息:"+msg.data);
};
//发送数据
socket.send(str);
//关闭链接
socket.close();
//打开链接触发
socket.onopen = function () {
$("#message").text("websocket已打开");
};
//关闭事件触发
socket.onclose = function () {$("#message").text("websocket已关闭");
};
//发生了错误事件触发
socket.onerror = function () {$("#message").text("websocket发生了错误");
}

地图API

浏览器对定位的支持(火狐有效，谷歌需要https)

if (navigator.geolocation){   //检测是否支持地理定位navigator.geolocation.getCurrentPosition(function(e){console.log(e)//定位信息});
} else{console.log('error');
}

百度地图

<script type="text/javascript">
// 创建地图实例
var map = new BMapGL.Map("container");
// 创建点坐标
var point = new BMapGL.Point(116.404, 39.915);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
//滚轮缩放
map.enableScrollWheelZoom(true);
//地球模式
map.setMapType(BMAP_EARTH_MAP);
// 添加比例尺控件
var scaleCtrl = new BMapGL.ScaleControl();
map.addControl(scaleCtrl);
// 添加缩放控件
var zoomCtrl = new BMapGL.ZoomControl();
map.addControl(zoomCtrl);
// 添加城市列表控件
var cityCtrl = new BMapGL.CityListControl();
map.addControl(cityCtrl);
//定位功能
var loCtrl = new BMapGL.LocationControl();
map.addControl(loCtrl);</script>

学习笔记之-----H5API相关推荐

PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解发布: 2017年8月4日 7,195阅读 ...
容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
2020年Yann Lecun深度学习笔记（下）
2020年Yann Lecun深度学习笔记(下)
2020年Yann Lecun深度学习笔记（上）
2020年Yann Lecun深度学习笔记(上)
知识图谱学习笔记（1）
知识图谱学习笔记第一部分,包含RDF介绍,以及Jena RDF API使用知识图谱的基石:RDF RDF(Resource Description Framework),即资源描述框架,其本质是一个 ...
计算机基础知识第十讲,计算机文化基础（第十讲）学习笔记
计算机文化基础(第十讲)学习笔记采样和量化PictureElement Pixel(像素)(链接: 采样的实质就是要用多少点(这个点我们叫像素)来描述一张图像,比如,一幅420x570的图像,就表示 ...
Go 学习推荐 —（Go by example 中文版、Go 构建 Web 应用、Go 学习笔记、Golang常见错误、Go 语言四十二章经、Go 语言高级编程）
Go by example 中文版 Go 构建 Web 应用 Go 学习笔记:无痕 Go 标准库中文文档 Golang开发新手常犯的50个错误 50 Shades of Go: Traps, Gotc ...
MongoDB学习笔记(入门)
MongoDB学习笔记(入门) 一.文档的注意事项: 1. 键值对是有序的,如:{ "name" : "stephen", "genda" ...

学习笔记之-----H5API