语义化标签
语义化标签 占HTML5
10分之一都不到 它里面大量提供了 比语义化标签更强大的功能—音视频的处理技巧;
header
标签包含引导和导航等,通常包含h1~h6
、搜索框、logo
等。footer
标签一般配合address
标签(显示地址),包含作者信息、相关链接等。nav
标签一般包含多个a
标签,构建导航组件。aside
标签主要装载广告、侧边栏。article
标签包含文章,一般内嵌header
、footer
、h1
、p
标签。section
标签可以用在以上任一一个标签中划分组件。hgroup
顾名思义是h1~h6
的集合。
新的表单元素
<input><textarea><select><option>....
<datalist>:数据列表,为input提供输入建议列表
<progress>:进度条,展示连接/下载进度
<meter>:刻度尺/度量衡,描述数据所处的阶段,红色(危险)=>黄色(警告)=>绿色(优秀)
<output>:输出内容,语义上表示此处的数据是经过计算而输出得到的
整体来说,这些标签就是div
标签的语义化转化,过去我们曾用div
来包裹某个块或者说组件,现在h5
使用这些标签实现语义化,有利于代码可读性和SEO
。语义元素在IE6-8的兼容可以使用
document.createElement('header');
document.createElement('nav');
音视频的处理技巧
音视频的处理技巧(audio
音频/video
视频)有很长一段时间 国内和国外的话很多大神都认为HTML5
本次升级最大亮点就是它的audio
音频/video
视频,新媒体解决方案代替了它的flash
解决方案,这就是HTML5里面最闪闪发光的;
视频播放:<video src=""><video>
查看视频的所有属性、方法、事件:console.log(videoBirds);
音频播放:<audio src=""></audio>
查看视频的所有属性、方法、事件:console.log(bgMusic);
WEB中可用的绘图技术:
Canvas
绘图:H5原生技术,基于网页画布绘制2D位图绘图技术,善于表现细腻颜色SVG
绘图:H5借鉴技术,基于SVG绘图空间绘制2D矢量图绘图技术,缩放不会失真WebGL
绘图:尚不是H5标准技术,基于HTML5 Canvas提供硬件3D加速渲染;有一个非常强大3D扩展库:three.js
SVG绘图
Scalable Vector Graphic
,可缩放向量图
在H5
标准之前的使用方法:SVG
标签不能直接书写在网页中,只能编写在独立的XML
文档中;
网页中使用<img src="x.svg">
进行嵌入
纳入H5
标准后的使用方法:SVG
标签可以直接书写在网页中。
Canvas与SVG的不同:
Canvas
是位图;SVG是矢量图Canvas
是JS绘图技术(不是DOM元素);SVG是标签绘图技术(是DOM元素)Canvas
内容不能使用CSS;SVG内容可以使用CSS;Canvas
内容不方便绑定事件处理;SVG内容方便进行事件绑定
常用的SVG图形:
矩形
<rect width="100" height="50" x="400" y="350" fill="#f0f" fill-opacity="0.3" stroke="#00f" stroke-width="6" stroke-opacity=".3"></rect>
圆形
<circle r="100" cx="400" cy="300" fill="#f0f" fill-opacity="0.4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></circle>
椭圆
<ellipse rx="100" ry="50" cx="400" cy="350" fill="#f0f" fill-opacity=".4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></ellipse>
直线(没有fill只有stroke)
<line x1="45" y1="350" x2="450" y2="350" stroke="#f00" stroke-width="4px" stroke-opacity=".4"></line>
折线(fill必须设置透明/stroke必须手工指定)
<polyline points="150,200 250,100 350,300 450,50" stroke="#00f" stroke-width="6" stroke-opacity=".4" fill="transparent"></polyline>
多边形
<polygon points="100,150 100,300 400,300 400,150 250,220" fill="#f0f" fill-opacity=".4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></polygon>
文本
<text alignment-baseline="before-edge" font-size="40" fill="#f0f" stroke="#00f">达内科技2018ajgy</text>
图像
<image xlink:href="img/p3.png" x="400" y="200" width="100" height="200"></image>
处理图片图形
对于处理图片图形它也提供了一些操作,通过canvas
(一种JS绘制图形的方式)/webGL
(一种3D绘制图形的方式)来完成图形的一个渲染,canvas
和webGL
现在在可视化领域里运用的较多,这也是它的一个大亮点;
使用Canvas
的步骤:
<canvas id="c2" width="400" height="300"></canvas>
Canvas自身是一个300*150的inline-block元素;
Canvas画布尺寸不能使用CSS设置
绘制矩形
ctx.fillStyle = '#000' 填充颜色/渐变色对象
ctx.strokeStyle = '#000' 描边颜色/渐变色对象
ctx.lineWidth = 1 描边线宽度
ctx.fillRect(x, y, w, h): 填充矩形
ctx.strokeRect(x, y, w, h): 描边矩形
ctx.clearRect(x, y, w, h): 描边矩形
绘制文本
ctx.font = '10px sans-serif'
ctx.textBaseline = 'alphabetic/top/bottom'
ctx.fillStyle = '#000'
ctx.strokeStyle = '#000'
ctx.fillText(txt, x, y) 填充文本
ctx.strokeText(txt, x, y) 描边文本
ctx.measureText(txt).width 测量文本基于当前字体设置的宽度
绘制图像
ctx.drawImage(img, x, y) 绘制图像(原始尺寸)
ctx.drawImage(img, x, y, w, h) 绘制图像(指定尺寸)
绘图上下文变形和状态保持
ctx.rotate() 图像旋转
ctx.translate() 图像平移
ctx.scale() 图像缩放
而说HTML5
是一个庞大的规范其实也对,也对;
Histoy API
Histoy API
,vue
和react
做单页面应用的话一定会用到路由的概念,路由概念有分为histoy
路由和hash
路由,Histoy API
也是HTML5
里常用到的东西,可能平时接触的比较少但是我们平时用到的东西它的核心原理还是基于Histoy API
来的;
本地存储
h5提供了sessionStorage
、localStorage
和indexedDB
加强本地存储。使用之前应该先判断支持情况:
if(window.sessionStorage){
//浏览器支持sessionStorage
}
if(window.localStorage){
//浏览器支持localStorage
}
localStorage
和sessionStorage
的区别在于sessionStorage
基于会话,关闭浏览器之后存储消失。localStorage
在各浏览器中上限不同,最低的是2.6MB
, 所以开发上限为2.6MB
, 当然这比cookie
强太多,如果还是不够的话只能借助indexedDB
, indexedDB
上限是250MB
。
localStorage
和cookie
另一个区别是没有过期时间,不过这个可以在localStorage
中加一个时间字段轻松解决这个问题。
存取localStorage
可能遇到的坑是跨域问题,因为localStorage
是域内安全,也就是同一个域才能对localStorage
进行存储,可以通过postMessage
来解决。以下是它的常用应用场景
var userData = {
name : 'sysuzhyupeng',
age: 24
}
localStorage.setItem('userDate', JSON.stringify(userData));
var newUserData = JSON.parse(localStorage.getItem('userData'));
浏览器提供了storage事件来监听存储:
window.addEventListener('storage', showStorageEvent, true)
requestAnimationFrame
requestAnimationFrame
:实现动画动画的方式有很多css3
动画是首选项,除了css3
动画我们还可以用JS
里面的,之前用到的JS
实现动画都是定时器动画,定时器动画它存在一个丢帧失帧的问题,帧速率跟页面当中最终渲染的速率可能不一样,导致动画的卡顿,动画的不良好的一个连贯性等问题;
flash动画已经完全告别了,HTML5
给提供了requestAnimationFrame
这是一个可以跟屏幕的赫兹比例随时保持一致的一种动画方案,这种方案实现的动画比定时器动画还要流畅一点,requestAnimationFrame
还是比较常用的,很多动画引擎,还有JS里面实现动画的类库和插件他们里面大量应用的就是requestAnimationFrame
来完成的;
地理位置
地理位置:HTML5
里面做移动端开发的时候我们经常有一种需求,打开H5页面在页面中调用一个第三方的腾讯地图百度地图或高德地图,掉完地图后我们想定位到当前地图的某个位置,或者说我们想查看当前周边又什么东西,此时我们需要传给地图.API
一个经度和纬度,H5
提供了相关的API
可以获取相关的经度纬度以及经轮度和相关信息,来进行相关操作,除此之外在移动端里面H5
还提供了相关API
来检测出横竖屏,H5
还提供了一些其它操作检测手机内部硬件和软件的一些接口,调取传感器实现摇一摇,调取重力感应器实现一些相关的操作;
h5
提供了Geolocation API
访问地理位置,即通过window.navigator.geolocation
来实现访问。这个对象有三个方法:
getCurrentPosition()
watchPosition()
clearWatch
页面第一次使用这个api
需要获得用户许可, watchPosition
可以对位置变化事件进行监听。
window.navigator.geolocation : {
watchPosition(){},
clearWatch(){},
getCurrentPosition(function(pos){
'定位成功'
定位时间:pos.timestamp
维度:pos.coords.latitude
经度:pos.coords.longitude
海拔:pos.coords.altitude
速度:pos.coods.speed
}, function(err){
'定位失败'
}){},
}
拖放API
H5之前没有拖放API,可以使用“鼠标按下 + 鼠标移动”两个事件来模拟用户拖动事件。
H5之后专门提供了七个鼠标拖动相关事件:
拖动的源对象(source
)可能触发的事件:
dragstart
:拖动开始
drag
:拖动中
dragend
:拖动结束
拖动的目标对象(target
)可能触发的事件:
dragenter
:拖动进入
dragover
:拖动悬停
drop
:松手释放
dragleave
:拖动离开
源对象:event.dataTransfer.setData(key, value)
目标对象:var value = event.dataTransfer.getData(key)
网络层的新的通讯解决方案
H5
还提供了一些关于网络层的新的通讯解决方案:web scoket
也就是所谓的 scoket IO
, scoket IO
是现在为止实现直播类型或者是实时沟通类型的非常有利的也是非常好的解决方案。 虽然也有些毛病但是相比较来说还是最好的一个方案;
HTML5
不仅仅是一个标签,主要的是在于上面说到的方面。