HTML5知识

Posted 2021-04-04 uyghun科技

html5新增的常用标签

<header></header>网站头部

<nav></nav>导航

<section></section>类似于div

<aside></aside>文件侧栏

<article></article>文章/内容

<footer></footer>网站底部

<figure></figure>独立的流内容，图像...

<figcaption></figcaption>定义figure的标题

<dialog></dialog>对话框

<embed ></embed>

视频video

<video width="500" height="500" controls="controls"></video>

controls="controls"显示控制按钮，如播放按钮

autoplay立即播放

loop播放后再次播放

preload页面加载时进行视频加载，加载完后进行播放

play()播放

pause()暂停

<input type="button" id="play" />

<video width="500" height="300" >

<source type="video/mp4"></source>

<source type="video/ogg"></source>

</video>

音频audio

<audio autoplay="autoplay" controls="controls"></auido>

muted静音

loop

src

autoplay

controls

<audio autoplay="autoplay" controls="controls"></audio>

画图标签canvas

创建画布

<canvas id="canvas1" width="500" height="500"></canvas>

定义图像，javascript来完成

画矩形，定义颜色

var div1=document.getElementById("div1");

var cxt=div1.getContext('2d'); cxt.fillStyle="#003399";//定义颜色 cxt.fillRect(0,0,100,100);//定义矩行

cxt.fillStyle="rgba(0,0,255,0.5)";//定义颜色，透明度

cxt.fillRect(200,200,200,200);

画直线

var div1=document.getElementById("div1");

var cxt=div1.getContext('2d');

cxt.moveTo(10,10);//起始位置

cxt.lineTo(200,200);//终止位置

cxt.lineTo(10,200);

cxt.stroke();//结束图形

画圆

var div1=document.getElementById("div1");

var cxt=div1.getContext('2d');

cxt.beginPath();//开始画

cxt.arc(100,100,30,0,Math.PI*2,true);//X坐标，Y坐标，半径，开始，结束，顺时针|逆时针

cxt.closePath();//结束画布

cxt.fill();//结束宣染

制作画板

鼠标按下时 -> 坐标开始 -> 移动鼠标画图 -> 鼠标松开时结束

获取画布

$(function(){

var div1=document.getElementById("div1");

var cxt=div1.getContext("2d");

cxt.lineWidth=2;//线条的宽度

cxt.strokeStyle="red";//线条颜色

var fn=false;

//鼠标按下时

$("#div1").mousedown(function(e){

//获取鼠标在容器中的坐标

var mouseX=e.pageX-$(this).offset().left;//offset()元素的偏移量

var mouseY=e.pageY-$(this).offset().top;

alert(mouseX+" "+mouseY)

yn=true;

cxt.moveTo(mouseX,mouseY);

//alert(mouseX+" "+mouseY);

});

//鼠标弹起时

$("#div1").mouseup(function(){

fn=false;

});

//鼠标移动时

$("#div1").mousemove(function(e){

mouseX=e.pageX-$(this).offset().left;//offset()元素的偏移量

mouseY=e.pageY-$(this).offset().top;

//alert(mouseX+" "+mouseY)

//alert(1);

if(yn){

cxt.lineTo(mouseX,mouseY);

cxt.stroke();

}

});

});

<canvas id="div1" style="width: 500px; height: 500px; border: 1px solid #f00;"></canvas>

地理位置：能确定用户位置

navigator.geolocation//判断浏览器是否支持地理位置获取

位置定位的方法

getCurrenPosition当前位置

watchPosition监视位置

clearWatch清除监视

getCurrenPosition(成功获取位置时执行的函数,error获取出错时执行的函数,配置项)

经度：coords.longitude

纬度：coords.latitude

海拔：coords.altitude

海拔准确度：coords.altituAcuracy

方向：coords.heading

地面速度：coords.speed

window.onload=function(){

window.navigator.geolocation.getCurrentPosition(function(position){

var lat=position.coords.latitude;//获取纬度

var long_=position.coords.longitude;//获取经度

document.getElementById("div1").innerHTML='纬度：'+lat+'经度'+long_;

},function(err){

alert("报错"+err.code);

},{

timeout:5000

})

}

桌面提醒notification

requestPermission请求通迅许可

checkPermission检查通迅许可

createNotification创建通迅

Notification.permission当前通过显示的授权状态

default:默认

granted:允许

denied:拒绝

获取用户授权之后

var notification=new Notification(title,options)

title:通知的标题

options:设置选项

body:通知的内容

tag:通知的一个识别标签

icon:通知中的显示的图片 url

image:显示的图像

data:数据

requireInteraction通知保持有将，不自动关闭

if(window.Notification){

if(Notification.permission=='granted'){

var n=new Notification('提醒信息',{

body:'1条新的信息',

icon:'img/new.png',

requireInteraction:true

})

setTimeout(function(){n.close()},3000)

}else{

Notification.requestPermission()

}

//alert(1);

}else{

alert("error");

}

本地存储localStorage和sessionStorage

localStorage没有限制的存储

sessionStorage会话存储

localStorage.i='zhangsan';

localStorage['i']='sdgdfhghg';

localStorage.setItem("i","123645");

获取

localStorage.i;

localStorage['i']

localStorage.getItem("i")

拖拽事件

拖放元素

ondragstart拖拽前触发（鼠标按开并开始拖拽）

ondrag拖拽过程中触发（连接触发）

ondragend拖拽结束时触发

目标元素

ondragenter入进目标元素（拖进）

ondrop释放鼠标触发（拖后放）

ondragleave鼠标离开目标元素（拖离）

ondragover拖动经过时（拖来拖去）

上传图片

FileReader,用于将文件读入内容，并读取文件中的数数

var reader=new FilReader()

方法

readAsBinarySting(file)读取文件为二进制

readAsDataURL(file)读取文件DataURL

readAsText(file)读取文件为文本

abort(none)中断文件读取

事件

onabort读取文件中断时触发

onerror文件出错时触发

onloadstart读取文件开始时触发

onprogress读取文件时一直触发

onload读取成功时触发

onloadend读取文件结束时触发

DataTransfer对象，存放拖放时携带的数据

setData(key,value)设置被拖数据的类型和值

files获取外部拖拽文件

getData(key)获取setData保存的值

this.result读取的结果

<div style="width: 200px; height: 200px; border: 1px solid #f00;" id="div1"></div>

var div1=document.getElementById("div1");

//拖动经过时阻止默认行为

div1.ondragover=function(e){

e.preventDefault();

}

div1.ondrop=function(e){

var file_=e.dataTransfer.files;//获取拖拽的文件

var read=new FileReader();//创建一个文件实例

read.readAsDataURL(file_[0]);//读取文件

read.onload=function(){

var img=document.createElement("img");//创建元素

img.src=this.result;//设置路径为获取到的值

document.body.appendChild(img);//向body追加img

}

e.preventDefault();

}

jquery.ui插件

$("#date").datepicker({

dateFormat:'yy-mm-dd',//设置日期格式

dayNamesMin:['日','一','二','三','四','五','六'],//指定星期几的最小格式

monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],//指定月份的显示

showButtonPanel:true,//显示按钮面板

closeText:'关闭',//关闭按钮文本

currentText:'今天',//today按钮文本

showOtherMonths:true,//填充没有显示的单元格

selectOtherMonths:true,//选择上个月或下个月的日期，前提是showOtherMonths:true

changeMonth:true,//选择月份下拉菜单

monthNamesShort:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],//显示为中文

changeYear:true//选择年份的下拉菜单

});

<input type="text" name="date" id="date" />