前言
本文关于HTML5其中一些更新内容的介绍,希望能学到新的知识。
HTML5属于上一代HTML的新迭代语言,设计HTML5最主要的目的是为了在移动设备上支持多媒体!多了一些新的语义标签和表单元素,例如video 标签和 audio 及 canvas 标记。跨平台性非常强大,但pc端浏览器支持不是特别友好,造成用户体验不佳。
1.网页布局结构标签
<header></header> 头部。
<footer></footer> 底部。
<article></article> 装载显示一个独立的文章内容。
<aside></aside> 标签内容之外与标签内容相关的辅助信息。
<nav></nav> 显示导航链接。
<section></section> 定义文档中的节。比如章节,页眉或其他部分。
这些标签的功能和div标签都是一样的,没有任何区别,但他们能很好的帮助我们了解页面布局,让我们的页面更条理。
2.多媒体标签
多媒体标签主要包括视频和音频,video标签引入视频,audio标签引入音频。
<video> 元素支持三种视频格式: MP4, WebM, 和 Ogg。浏览器也是影响视频能否正常播放的因素,一般Chrome,Firefox这三种视频格式都支持。
嵌入视频:
<body>
<!-- src="" 中间放视频的路径,
controls 写上这个属性会在视频的下方出现进度条,像下面的图一样,要不然没办法播放,
poster=" " 这个属性中可以放图片的地址,在还没播放视频的时候加载一张图片,不然是黑的。 -->
<video src="" poster="" controls width="800"></video>
<br>
<button>播放</button>
<button>暂停</button>
<button>切换</button>
<br>
<script>
//获取视频节点
var video = document.querySelector('video');
//获取btn按钮dom节点
var btns = document.querySelectorAll('button');
//给按钮绑定事件
//类数组对象转数组
var arrList = Array.from(btns);
//遍历数组
arrList.forEach(function(item) {
//设置点击事件
item.onclick = function(event){
console.log(event.target.innerText);
//按钮的不同就是中间的字不同,事件源(按钮)dom元素中的文本内容
var text = event.target.innerText;
switch (text) {
case '播放':
//视频播放
video.play();
break;
case '暂停':
视频暂停
video.pause();
break;
case '切换':
//paused判断当前视频是否暂停 返回boolean值
if(video.paused){
//如果判断视频是暂停,则切换成播放
video.play();
}else{
//否则切换成暂停
video.pause();
}
break;
default:
break;
}
}
})
</script>
</body>
在video标签中有一些属性,有些属性是必须加的。
src="" 中间放视频的路径。
controls 写上这个属性会在视频的下方出现进度条,像下面的图一样,要不然没办法播放。
poster=" " 这个属性中可以放图片的地址,在还没播放视频的时候加载一张图片,不然是黑的,这个属性也可以不加,对视频播放没什么影响。
autoplay 代表自动播放。loop 代表循环播放。
还有一些方法:
play() 播放
pause() 暂停
currentTime 可以设置视频快进,后退
volume 调节视频音量大小
playbackRate 设置视频倍速播放
source,指定不同媒体来源:
并不是所有的浏览器都支持所有媒体格式,可以指定多个不同的媒体来源。由于不同的浏览器支持不同的编解码器,一般要指定多种格式的媒体来源。
src 指播放媒体的URL地址
type 媒体类型,属性值为播放文件的MIME类型,该属性值中的codes参数表示所使用的媒体的编码格式。
<video id="video_1">
<source src=" " type="video/ogg">
<source src=" " type="video/ogg">
</video>
3.新表单元素及属性
智能表单控件:
email: 输入合法的邮箱地址
url: 输入合法的网址
number: 只能输入数字
range: 滑块
color: 拾色器
date: 显示日期
month: 显示月份
week : 显示第几周
time: 显示时间
<body>
<input type="email" class="email">
<input type="number">
<input type="date">
</body>
表单属性:
form属性:
autocomplete=on | off 自动完成
novalidate=true | false 是否关闭校验
input属性:
autofocus:自动获取焦点。
multiple:实现多选效果。
placeholder:占位符,信息提示。
required:必填项。
4.Canvas画布
canvas是H5中最受欢迎的功能,这个元素负责在页面中,设定一个区域,然后就可以通过JS动态地在这个区域中绘制图形,canvas元素最早由苹果公司推出,当时主要用在Dashboard微件中,很快H5加入了这个元素,主要浏览器也迅速开始支持它。
使用2D上下文提供的方法,可以绘制简单的2D图形,比如矩形,弧线和路径。2D上下文的坐标开始于canvas元素的左上角,原点坐标是(0,0).
用canvas元素绘制图形时,需要经过几道步骤:
(1) 取得canvas对象
通过document.getElementById()等方法取得canvas对象。
(2) 取得上下文*(context)
图形上下文是一个封装了很多绘图功能的对象。参数只能为”2d“
var context = one.getContext("2d");
(3) 填充与绘制边框
使用canvas元素绘制图形的时候,有两种方式:填充与绘制边框。填充是指填满图形内部;绘制边框是指不填充图形的内部,只绘制图形的边框。canvas元素结合使用者两种方式来绘制图形。
(4) 设定绘图样式
在进行图形绘制的时候,首先要设定好绘图的样式,然后调用有关方法进行图形的绘制,所谓绘图的样式,主要是针对图形的颜色而言的。但不仅限于图形的颜色。
fillStyle 填充的样式
strokeStyle 图形边框的样式
(5) 指定线宽
使用图形上下文对象lineWidth属性设置图形边框的宽度。
(6) 绘制矩形
分别使用fileRect方法与strokeReck方法来填充矩形和绘制矩形边框
context.fillRect(x,y,width,height);
context.strokeRect(x,y,width,height);
<body>
<canvas id="app" width="500" height="500"></canvas>
<script>
//1 获取canvas画布
var app = document.querySelector('canvas');
//2 获取上下文对象
var context = app.getContext('2d');
//3 绘制
//3.1 设置绘制的样式
context.fillStyle = 'teal';
context.strokeStyle = 'orange';
//3.2 执行绘制 fillRect(x轴坐标,y轴坐标,width,height)
context.fillRect(10,10,100,100);
//边框矩形 四个参数也是x y轴坐标,width和height
context.strokeRect(10,120,300,100);
</script>
</body>
beginPath();开启新的图层,如果要在一个画布上画两个图形,在结束一个图形,开始另一个图形时要再一次开启新图层,否则会有一条线将两个图形连起来。
moveTo();落笔,参数为坐标。
lineTo();连线,参数为坐标。
stroke();描边。
<body>
<canvas id="app" width="500" height="500"></canvas>
<script>
//1 获取canvas画布
var app = document.querySelector('canvas');
//2 获取画笔 获取上下文对象
var context = app.getContext('2d');
//3 绘制
context.beginPath();
//落笔 连线
context.moveTo(200,100);
context.lineTo(250,200);
context.lineTo(150,200);
//边框三角形样式
context.lineStyle = 'teal';
//lineWidth设置线宽 线宽 单位是像素
context.lineWidth = '5';
context.closePath();
context.stroke();
</script>
</body>
5.获取页面元素及类名操作和自定义属性
获取页面元素:
document.querySelector("选择器");
选择器: 可以是css中的任意一种选择器,其中写id值或class值,甚至是标签名都可以,之前获取id值,class值都有不同的方法。通过该选择器只能选中第一个元素。
document.querySelectorAll("选择器");
与document.querySelector区别: querySelectorAll 可以选中所有符合选择器规则的元素,返回的是一个列表。querySelector返回的只是单独的一个元素。
Dom.classList.add("类名"): 给当前dom元素添加类样式
Dom.classList.remove("类名"); 给当前dom元素移除类样式
classList.contains("类名"); 检测是否包含类样式
classList.toggle("active"); 切换类样式(有就删除,没有就添加)
自定义属性:
data-自定义属性名
在标签中,以data-自定义名称
1. 获取自定义属性 Dom.dataset 返回的是一个对象
Dom.dataset.属性名 或者 Dom.dataset[属性名]
属性名是不包含data-
2. 设置自定义属性
Dom.dataset.自定义属性名=值 或者 Dom.dataset[自定义属性名]=值;
<body>
<button id="btn" data-id="1">删除</button>
<script>
//获取节点
var btn = document.querySelector('#btn');
//输出这个自定义属性
console.log(btn.dataset.id);
</script>
</body>
设置一个自定义属性,data-id ,值为1 ,获取节点,在控制台输出自定义属性为1。
6.Web存储
传统方式我们以document.cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便,HTML5规范则提出解决方案,使用sessionStorage和localStorage存储数据。
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js"></script>
<script>
//1 cookie 7天后过期 在代码中引入cookie的js文件才能使用
var cookie = Cookies.set('name','this is cookie',{expires:7});
//移除cookie
// Cookies.remove('name');
//获取
console.log(Cookies.get('name'));
//2 会话存储
sessionStorage.setItem('name','123456');
//移除
// sessionStorage.removeItem('name');
//获取
console.log(sessionStorage.getItem('name'));
//3 本地存储
localStorage.setItem('username', 'name');
localStorage.setItem('password', '123321');
//清除username
// localStorage.removeItem('username');
//clear()会将value值清理掉
// localStorage.clear();
console.log(localStorage.getItem('username'));
</script>
控制台输出的内容:
在浏览器的存储中也会有显示:
7.获取地理位置
获取一次当前位置
window.navigator.geolocation.getCurrentPosition(success,error);
1. coords.latitude 维度
2. coords.longitude 经度
实时获取当前位置
window.navigator.geolocation.watchPosition(success,error);
window.navigator.geolocation.getCurrentPosition((position) => {
console.log(position);
console.log('东经', position.coords.longitude);
console.log('北纬', position.coords.latitude);
})
获取地理位置坐标,固定的方法。浏览器在获取地理位置坐标时还需要授予权限。