HTML5新增属性参考文档

最新推荐文章于 2022-12-04 22:35:55 发布

究极狗剩

最新推荐文章于 2022-12-04 22:35:55 发布

阅读量268

点赞数

文章标签： HTML5 H5 前端

本文链接：https://blog.csdn.net/weixin_44260420/article/details/90546213

版权

什么是html5

1.H5并不是新的语言，而是html语言的第五次重大修改–版本

2.支持：所有的主流浏览器都支持h5.（chrome,firefox,safari。。。）。IE9及以上支持h5(有选择的支持，并不会全部支持),但是ie8及以下不支持h5.

3.改变了用户与文档的交互方式：多媒体：video audio canvas

4.增加了其它的新特性：语义特性，本地存储特性，网页多媒体，以及动画

5.相对于h4:

1.进步：抛弃了一些不合理不常用的标记和属性

2.新增了一些标记和属性--表单

3.从代码角度而言，h5的网页结构代码更简洁。

什么是语义化标签

语义化标签：很直观的清楚这个标签的作用

header: 页眉头部
nav：导航
main：主体内容
article：文章
aside：侧边栏
footer：页脚，底部

语义标签兼容处理

ie9 及以下: 变成行内元素，手动变成块元素

ie8以下：根本不识别html5,手动创建html5标签或者引入html5shiv.min.js

表单新增的type属性

email：对邮箱可以进行验证
tel：不会进行验证，会在手机端会切换成数字键盘
url：会对输入的网址进行验证
number：可以进行数字的输入，不是数字类型
search：会携带清除的X
range：范围限制的拉动杆
color: 颜色的选择
time: 时分的选择
date：年月日的选择
datetime-local：年月日时分的完整时间选择
month：月份的选择
week: 最终显示的格式为周

表单新增的属性

placeholder：默认占位符，当输入文本的时候，会自动将默认的占位清除
autofocus：自动获取焦点
autocomplete：会有提示之前填过的内容，前提条件：1.必须提交过，必须要有name属性
required：为必填项，输入框不能为空，如果为空，会有提示
pattern：正则表达式验证
multiple：如果input类型为file，提交多个文件，如果类型email，可以输入多个邮箱
form：值form表单的id名，这样的话就会将当前输入框和id对应的表单进行关联，提交的时候会一起提交

表单新增事件

oninput：只要内容发生变化，即触发事件
onkeyup：键盘弹起时触发
oninvalid：代表当前输入框验证没有通过即可触发
setCustomValidity：修改默认的提示内容

媒体标签

audio：播放音频文件的

src：音频文件的地址
controls：控制面板
autoplay：自动播放
loop：循环播放

video

src：视频的文件地址
controls：控制面板
autoplay：自动播放
muted：静音
loop：循环播放
poster：定义视频封面图，如果不设置，视频画面的第一帧
width：视频的width
height：视频height
设置width不设置height,设置height，不设置width
source标签：可以设置多个资源文件，浏览器在加载的时候，从上到下加载，如果不支持该文件类型，继续加载，一直到找到兼容该浏览器的资源文件

DOM 获取元素

querySelector：该方法可以传递任何选择器，但是只会查抄到满足条件的第一个
querySelectorAll：该方法可以传递任何选择器。会查找到满足条件的所有的元素，最终返回的是伪数组，如果想设置样式，遍历该数组，拿到每一个元素，设置样式即可

类名的操作

所有关于类样式操作的都在classList，classList属于dom元素上的的

add：为当前元素添加类名，如果想添加多个用，进行分割
remove：移除某一个类名
toggle：进行类名的切换
contains：判断是否包含某一个类名，如果包含，返回true，不包含返回false

DOM 自定义属性

如何自定义一个属性？
凡是以data-开头的都是一个自定义属性
如何获取自定义属性的值？
所有的自定义属性都在dom元素下面的dataset里面以属性的形式进行存储
如何修改自定义属性？
给dataset里面对应的属性重新赋值，即修改完成

网络接口

online：网络连通时触发
offline：网络断开时触发

全屏接口

requestFullScreen： msRequestFullscreen(ie全屏)
cancelFullScreen：取消全屏，这个方法属于 document
fullscreenElement：判断当前状态，是否处于全屏，如果是全屏可以拿到全屏的元素，如果不是返回的就是null
通过不同的前缀来解决兼容问题

FileReader上传图片的使用

FileReader是一个构造函数

所以就可以new FileReader 可以得到一个实例对象

readAsText：读取txt文件

readAsBinaryString：读取任意类型文件

readAsDataURL：这个方法url资源读取到的文件会获取到data开头的一段字符串

result：会将读取成功之后的内容存到result上

onload：读取成功

逻辑分析：

我们什么时候要读取图片？
当我们选择图片上传之后要读取，所以注册onchange事件
既然要读图片，就应该要拿到要读取的图片，拿到之后进行读取
var fileImg = document.querySelector(“input”).files[0]
在onchange事件函数内部读取图片，但是什么方法可以读取图片？
readAsDataURL()这个方法用来读取图片
既然这个方法可以读取图片，怎么拿到这个方法?
new FileReader() 得到实例对象，通过实例对象可以调用readAsDataURL(fileImg )
最终读取成功之后的结果存到了实例对象的result上，那么我们什么时候可以拿到result，也就是读取成功之后
所以在onload（代表图片读取成功）方法里，拿到result的结果
最终将读取的结果设置到页面上img的的src

百度地图使用

找到你想要的效果，复制代码
申请秘钥，并且使用秘钥
开发文档》工具支持》坐标拾取器
利用百度工具生成地图名片

sessionStorage和localStorage的使用

sessionStorage作用：将数据保存到本地，存储的容量5mb左右

sessionStorage.setItem():像本地存储数据，第一个参数：key（name），第二个参数：value（值）

sessionStorage.getItem():获取本地sessionStorage的数据，参数为key

sessionStorage.removeItem()：移除本地sessionStorage的某一个数据，参数为key

sessionStorage的特性：

关闭浏览器，数据就会自动清除
数据不可以多页面共享

localStorage.setItem,localStorage.getItem,localStorage.removeItem用法和sessionStorage一模一样

存储的内容大概20mb
但是在同一个浏览器的不同窗口中可以共享数据
永久存储，只有卸载浏览器或者手动清除浏览器缓存才能清除

在开发中，使用localStorage更多一些

播放器案例

多媒体：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

常用方法： play() 播放、 pause() 暂停、paused

Jq没有提供对视频播放控件的方式，也就意味着如果要操作视频播放，必须使用原生的js方法—dom元素

常用属性：

a) currentTime 视频播放的当前时间、

b) duration:视频的总时间 100000/60

c) paused:视频播放的状态.

常用事件：

a) oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。

b) ontimeupdate: 视频时间发生变化就会触发

c) onended:播放完时触发—重置

准备工作：因为我们要大量操作video，我们可以在全局声明一个变量，来存储video元素

var video = $('video')[0]

播放和暂停功能
1. 给暂停播放按钮注册点击事件
2. 在事件函数内部写逻辑：判断，如果当前状态为暂停，那么就播放，如果当前状态为播放，那么就暂停
3. video.paused 判断当前状态是否为暂停是暂停 true 播放状态 false
  if(video.paused){
  video.play();
  /移除暂停样式，添加播放样式/
  }
  else{
  video.pause();
  /移除播放样式，添加暂停样式/
  }
4. toggleClass(“fa-play fa-pause”)；进行类名的切换
全屏功能
1. 利用$拿到全屏按钮，给注册点击事件
2. 在事件函数内部：video.requestFullScreen该方法可以让视频全屏，有兼容性，加前缀
  if(video.requestFullScreen){
  video.requestFullScreen();
  }
  else if(video.webkitRequestFullScreen){
  video.webkitRequestFullScreen();
  }
  else if(video.mozRequestFullScreen){
  video.mozRequestFullScreen();
  }
  else if(video.msRequestFullscreen){
  video.msRequestFullscreen();
  }
视频显示和总时长处理
视频什么时候可以显示？
video.oncanplay = function(){
// 视频显示
video.style.display=“block”;
}
怎么拿到视频的总时长？
var total = video.duration // 3680
1. 问题：首先秒数，并且还有小数
2. 格式化时分秒
  var hour = Math.floor(total/3600);
  hour = hour<10? ‘0’+hour:hour
```
var minute = Math.floor(total%3600/60)
minute=minute<10?"0"+minute:minute;

var second=Math.floor(total%60);
second=second<10?"0"+second:second;

var str = hour+':'+minute+':'+'second'
$('.totalTime').html(str)
```
播放时，时间跟随变化，进度条跟随变化
1. 视频播放的时候设置时间跟随变化
  ontimeupdate：时间发生变化会触发
  在ontimeupdate事件函数中拿到当前的时间currentTime ，将当前时间格式化成时分秒
  video.ontimeupdate = function(){
  var current = video.currentTime
  var result = time(current) // 00:00:01
  $(’.currentTime’).html(result)
  }
  封装格式化时分秒的函数
  function time(total){
  var hour = Math.floor(total/3600);
  hour = hour<10? ‘0’+hour:hour
```
  var minute = Math.floor(total%3600/60)
  minute=minute<10?"0"+minute:minute;

  var second=Math.floor(total%60);
  second=second<10?"0"+second:second;
  return hour+':'+minute+':'+second
}
```
2. 让进度条跟随变化，其实就是视频播放的时候设置进度条的当前进度，实际进度条的进度=视频的当前播放进度
  求：视频的当前播放进度 = 当前视频播放的时间/视频总时间
  var percent = video.currentTime/video.duration
  将进度转化为百分比 percent = percent *100+‘%’
  最终将得到的百分比设置给进度条的宽度
  $(".elapse").css(“width”,percent);
实现视频的跳播和播放之后的设置

究极狗剩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增属性参考文档

什么是html51.H5并不是新的语言，而是html语言的第五次重大修改–版本2.支持：所有的主流浏览器都支持h5.（chrome,firefox,safari。。。）。IE9及以上支持h5(有选择的支持，并不会全部支持),但是ie8及以下不支持h5.3.改变了用户与文档的交互方式：多媒体：video audio canvas4.增加了其它的新特性：语义特性，本地存储特性，网页多媒体，以...
复制链接

扫一扫