HTML5新特性
标签:nav article footer header aside.....
表单新特性:input type取值date time week email number
表单属性required readonly disabled
表单控件标签:progress datalist ...
1.html5有哪些新增特性?
1、语义化标签:header article footer section nav 2、表单控件:number date time email url search 3、音频和视频:audio video 4、本地离线存储:localStorage sessionStorage cookies 5、画布:canvas
2.对html语义化标签或者语义化的理解
1、使页面内容结构化、便于浏览器、搜索引擎解析 2、即使没有css样式也以一种文档格式显示,并且容易阅读 3、有利于搜索引擎优化 4、便于阅读、维护和理解
3.说一下src和href有什么区别?
href是超文本引用,它是指向资源的位置,建立与目标文件的联系; src目的是把资源下载到页面中; script src='https://www.b';
在HTML5问世之前,要在网络上展示视频,音频,动画,除了使用第三方自主开发的播放器之外,使用得最多的工具就是Flash,但是需要在浏览器上安装各种插件,并且有时速度很慢。HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容,这两个标签是 <audio> <video>
媒体(音频视频)
画布
拖拽
前端存储
webSocket
data-xxx 是一类被称为自定义数据属性的属性,它赋予我们在所有HTML元素上嵌入自定义数据属性的能力和可以通过HTML和DOM进行专有数据的交换。所有的属性都可以通过HTMLElement.prototype.dataset来访问.自定义属性都可以保存到dataset中。 获取属性 • document.getAttribute • $(dom).attr() • dom.dataset
<script>
window.onload=function(){
var div=document.querySelector('#one');
console.log(div.dataset)
console.log(div.dataset.id)
console.log(div.dataset.item)
}
</script>
<div id="one" flag='two' data-id='1001' data-item='test'></div>
1.video
在video标签出现之前,如果想在网页中播放视频或者音频数据是非常困难的。H5中的video标签可以向使用img显示图片一样简单去播放视频。
video提供了很多属性和方法,我们可以通过直接设定或者通过js控制视频的显示
读写属性 src autoplay poster loop constrols width height 宽高一般不一起使用
constrols是控制条 loop是循环播放 autoplay是自动播放poster='' 封面 放封面地址 muted静音
方法 play播放 pause暂停 paused切换,是否是暂停状态 volume控制音量 currentTime当前播放秒数 playbackRate倍速播放
1.属性 1.进度条controls <video src="./音视频/1.mp4" controls> </video> 2.页面一加载是否自动播放autoplay <video src="./音视频/1.mp4" controls autoplay> </video> 3.post封面 <video src="./音视频/1.mp4" poster='./img/1.jpg'> </video> 4.是否循环播放loop <video src="./音视频/1.mp4" controls loop> </video> 5.muted静音 <video src="./音视频/1.mp4" controls loop autoplay> </video>
2.方法 1.播放 play
var video=$('video')[0];
if($(this).text() === '播放'){
video.play()
}
2.暂停 pause
if($(this).text()==='暂停'){
video.pause()
}
3.切换 paused 音视频是否是暂停状态
if($(this).text()==='切换'){
if(video.paused){
video.play()
}else{
video.pause()
}
}
4. // 控制音量+
if($(this).text()==='音量+'){
video.volume=(video.volume>0.9?0.9:video.volume )+0.1
}
5.if($(this).text()==='音量-'){
video.volume=(video.volume<0.1?0.1:video.volume)-0.1
}
6.// 快进
if($(this).text()==='快进'){
video.currentTime+=5
}
7.// 回退
if($(this).text()==='回退'){
video.currentTime-=5
}
8.// 倍数播放
if($(this).text()==='倍速播放'){
video.playbackRate=0.5
}
3.事件
video.onvolumechange=function(){
// console.log('音量改变事件监听')
if(this.volume>0.5){
alert('继续调高声音会损伤耳膜')
}
}
2.audio音频
audio元素与video类似,是用来播放音频的。其属性方法事件也几乎与video元素一致.
<!-- 不加controls相当于背景音乐 --> <audio src="./音视频/1.mp3" controls loop autoplay></audio>
1.掌握canvas元素的基本概念,学会如何在页面上放置一个canvas元素,如何使用canvas元素绘制出一个简单矩形 2.掌握使用路径的方法,能够利用路径绘制出圆形与多边形 3.掌握渐变图形的绘制方法,学会图形变形,图形缩放,图形组合,以及给图形绘制阴影的方法
1.基本用法 (1)获取canvas对象--获取画布 通过document.getElementById()等方法取得canvas对象。 (2)取得上下文(context)--获取画笔 图形上下文是一个封装了很多绘图功能的对象,参数只能是“2d” (3)定义填充样式 context.fillStyle='red'; (4)绘制填充图形 context.fillStyle(10,10,100,100)//第一个参数是x轴开始位置,第二个参数是y轴开始位置,第三个参数是绘制图形的宽,第四个位置是绘制图形的高
1.实例 --绘制填充矩形
//通过fillRect
window.onload=function(){
//1.获取画布
var canvas=document.querySelector('canvas');
// 2.获取画布上下文对象
var context=canvas.getContext('2d');
// 3.绘制填充样式
context.fillStyle='red'
// 4.绘制填充矩形
context.fillRect(10,10,100,100)
}
//绘制轮廓矩形 边框矩形
window.onload=function(){
//1.获取画布
var canvas=document.querySelector('canvas');
// 2.获取画布上下文对象
var context=canvas.getContext('2d');
// 设置轮廓样式
context.strokeStyle='red'
// 设置轮廓的线宽
context.lineWidth=4;
// 绘制边框矩形或者轮廓矩形
context.strokeRect(10,10,100,100);
// 清楚一部分区域
context.clearRect(0,0,50,50);
// 清楚全部区域
context.clearRect(0,0,400,400)
}
2.实例 --绘制圆
window.onload=function(){
// 获取画布
var canvas=document.querySelector('canvas');
// 获取画布上下文对象
var context=canvas.getContext('2d');
// 绘制圆直线曲线需要路径 开始路径
context.beginPath();
// 圆的路径 x y r 开始弧度 结束弧度 圆的方向是否是逆时针路径
// Math.PI --180度
context.arc(100,100,50,0,Math.PI,true);
// context.arc(100,100,50,0,Math.PI/2);
// 直线路径
context.lineTo(100,100);
context.lineTo(150,100);
context.arc(300,300,50,0,Math.PI*2);
// 结束路径
// context.closePath();
// 填充样式
context.fillStyle='red'
// 绘制填充圆
context.fill();
// 绘制轮廓
// context.stroke();
}
3.实例 圆的移动
window.onload=function(){
// 获取画布
var canvas=document.querySelector('canvas');
// 获取画布上下文对象
var context=canvas.getContext('2d');
var bubble={
x:100,
y:100,
r:50,
color:'red'
};
draw(bubble);
move(bubble)
setInterval(function(){
// 清除画布
context.clearRect(0,0,600,600);
move(bubble)
},200)
// 绘制方法
function draw(bubble){
context.beginPath();
context.arc(bubble.x,bubble.y,bubble.r,0,Math.PI*2);
context.fillStyle=bubble.color;
context.fill()
}
// 移动
function move(bubble){
bubble.x+=5;
bubble.y+=5;
draw(bubble);
}
}
1.线性渐变 createLinearGradient
window.onload=function(){
// 获取画布
var canvas=document.querySelector('canvas');
// 获取画笔
var context=canvas.getContext('2d');
// 声明一个渐变对象 第一个参数渐变x轴开始位置 第二个参数渐变y轴开始位置 第三个参数渐变结束x轴位置 第四个参数渐变结束y轴位置
var g=context.createLinearGradient(0,0,400,400)
// 添加渐变色
g.addColorStop(0,'red')
g.addColorStop(0.5,'cyan')
g.addColorStop(1,'yellow');
// 将渐变色给到填充样式
context.fillStyle=g;
context.fillRect(0,0,400,400);
}
2.径向渐变 createRadialGradient 同心圆渐变
window.onload=function(){
// 获取画布
var canvas=document.querySelector('canvas');
// 获取画笔
var context=canvas.getContext('2d');
// 声明一个渐变对象 前三个参数小圆心x轴开始位置 y轴开始位置 半径 后三个参数大圆心x轴开始位置 y轴开始位置 半径
var g=context.createRadialGradient(200,200,50,200,200,200)
// 添加渐变色
g.addColorStop(0,'red')
g.addColorStop(0.5,'cyan')
g.addColorStop(1,'yellow');
// 将渐变色给到填充样式
context.fillStyle=g;
context.fillRect(0,0,400,400)
}
4.绘制线段
moveTo(x,y):
x,y:线段的起点坐标
lineTo(x,y)
x,y:线段的终点坐标
cx.stroke();
//fill():不能使用
lineWidth=number;
// 绘制线段
window.onload=function(){
// 获取画布
var canvas=document.querySelector('canvas');
// 获取上下文
var context=canvas.getContext('2d');
// 绘制线段
context.lineWidth=3
context.beginPath();
context.moveTo(0,0);
context.lineTo(100,100);
context.lineTo(200,10);
context.lineTo(300,100);
context.closePath();
context.strokeStyle='red';
context.stroke();
}
5.绘制图像
window.onload=function(){
// 获取画笔
// 获取画布
var canvas=document.querySelector('canvas');
// 获取上下文
var context=canvas.getContext('2d');
// 创建img节点 绘制图片到画布中,图片dom节点,img节点绘制或者创建img节点
var img=new Image();
img.src='./2.jpg';
img.onload=function(){
// 绘制图片到画布中 从0,0点开始绘制图片,绘制一个200*200的图片
context.drawImage(img,0,0,200,200);
}
}
6. 绘制视频
window.onload=function(){
// 获取画笔
// 获取画布
var canvas=document.querySelector('canvas');
// 获取上下文
var context=canvas.getContext('2d');
var video=document.querySelector('video');
draw()
function draw(){
context.drawImage(video,0,0,200,200);
// 请求动画帧
requestAnimationFrame(draw)
//告诉浏览器你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定得回调函数更新动画
}
}
7.绘制文本
context.font = '28px blod';
context.fillText('str', 100, 100);
// context.strokeText('str', 100, 100);
文章浏览阅读1.2k次。ESP-IDF Release v2.1igrr发布了这个on 29 Jul·自此发布以来,我承诺要承诺414自v2.0以来的变化。突破变化版本v2.1旨在大大兼容为ESP-IDF v2.0编写的应用程序。但是,引入以下突破性变化:esp_bt_controller_init函数收到一个新的esp_bt_controller_config_t *参..._rmt_set_tx_thr_intr_en
文章浏览阅读297次。在学校申请做了个项目。一切都差不多准备好了,等待结题之中。这种三流学校就是差劲,做事没有规程,没有效率。到后来实在没有规章制度就自己随便搞个来限制你。虽然学校差劲,但是在做这个项目的时候还是学到了很多东西。最起码,发表了一篇论文,虽然写的不是很深奥的东西,但是自己对这个研究还是蛮满意的。今日就把论文给挂上面,来显摆显摆:操作系统IPC漏洞分析与防范朱宁武,张 宇..._ipc漏洞
文章浏览阅读280次。2019独角兽企业重金招聘Python工程师标准>>> ..._fragment切换刷新
文章浏览阅读1.5w次,点赞6次,收藏37次。Halcon算子:smallest_rectangle1()和smallest_rectangle2()_smallest_rectangle1
文章浏览阅读714次,点赞10次,收藏29次。=========| 框架名称 | 功能描述 |,使用的App有:薄荷,哔哩哔哩 || 图片裁剪,使用的App有:网易新闻,芒果TV || 图片裁剪开源框架 || Android 大图片裁剪终极解决方案 || A Library which can be used to crop images in Android similar to Facebook and Telegram,使用的App有:快手 |==========| 框架名称 | 功能描述 |
文章浏览阅读397次,点赞9次,收藏11次。本微信点餐系统小程序管理员功能有个人中心,用户管理,菜品管理,新上菜品管理,预定订单管理,活动信息管理,用户评价管理,系统管理,订单管理等。管理员功能有个人中心,用户管理,菜品管理,新上菜品管理,预定订单管理,活动信息管理,用户评价管理,系统管理,订单管理等。开发软件:微信开发者工具、后端使用IDEA/Eclipse/MyEclipse。微信小程序端:Vue+uni-app。后端:Java+SSM。
文章浏览阅读55次。============问题描述============ 被bug困扰了好久:1.白点会出现混乱,有的时候是正常的,有的时候会不动(如果界面只有一个item,白点可以正常切换,有两个item就会不动)。2.当有两个item时,如果滑动上一个item图片与下一个item一样时,下面的item的图片就会消失。本人新手,贴上代码,求各位大神..._listview 嵌套viewpager viewpager item复原
文章浏览阅读2.7k次,点赞3次,收藏14次。三次握手含义三次握手其实就是指建立一个TCP连接时,需要客户端和服务器总共发送3个包。进行三次握手的主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备。TCP报文要想弄懂三次握手,得先从TCP的报文格式入手:有32位的序号和确认序号。 ACK:置为1便是确认连接。 SYN:置为1代表发起一个新连接。 FIN:置为1代表释放一个连接。 具体过程标志位的解释前两次建立连接时._3次握手4次挥手面试怎么回答
文章浏览阅读9.5w次,点赞209次,收藏1.1k次。这里写自定义目录标题Win10 + Ubuntu 20.04——双系统安装方法 + 配置显卡 + root权限 + flash调配(保姆式教学)请同学们提前准备:第一步:**准备U盘**第二步:**确定自己电脑的类型**第三步:**安装ubuntu镜像**第四步:**为新系统,分配硬件存储空间**第五步:**用UltralSO软碟通,将 UBUNTU 的镜像写入 U盘**最后一步!胜利就在眼前!:**使用U盘,安装新系统**特殊事项root限权问题赠送一条Tip最后的最后Win10 + Ubuntu 20_双系统安装保姆教程
文章浏览阅读509次。抽象下面我们先来看Java抽象类的定义。java抽象类体现数据抽象的思想,是实现程序多态性的一种手段。也提到抽象类与抽象方法的限制,下面我们会通过一下java抽象类小示例来给你介绍抽象类的用法。希望对你有所帮助。假设我们要编写一个计算矩形、三角形和圆的面积与周长的程序,若按前面所学的方式编程,我们必须定义四个类:圆类、三角形类、矩形类和使用前三个类的公共类,它们之间没有继承关系._java抽象类可以实现多个方法吗
文章浏览阅读347次。南昌大学医学院计算机中心在全国计算机等级考试里组织集体作弊,医学院计算机中心从05年就开始以培训班为名,每人收取220元钱,报了他们的培训班,考试就可以安排在三楼机房考试,他们也知道,这个机房考试的都是交了220元钱的,教务处不是也有学生吗?你可以向学生了解情况,他们这个作弊团伙已经有五年了,是教师组织的…(2)这个事情我已经给学校党委,写信过,他们叫我找你们教育处…我现在在试图直接联系周文斌校长...
文章浏览阅读63次。微软的代号为Casablanca的C++ REST SDK已经基于Apache许可证开源。它被描述为“微软为了以原生代码支持基于云的客户端/服务器通信所做的努力,采用了现代异步C++ API设计”。该产品使用C++11实现,微软希望提供一种更简单的编写客户端HTTP代码的方法。Casablanca支持多个平台,除了Windows 7、Windows 8之外还支持Linux。微软的开发人员Art...