H5学习笔记

最新推荐文章于 2022-06-01 22:32:41 发布

oNightfall

最新推荐文章于 2022-06-01 22:32:41 发布

阅读量340

点赞数

分类专栏： front-end 文章标签： html5

本文链接：https://blog.csdn.net/oNightfall/article/details/113799387

版权

front-end 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

H5概念

狭义上

可以认为是html4的升级

广义上

是一套前端技术的统称，包括了html5、css3以及h5提供的各种新API

H5语法特性

单标签可以省略关闭符号

<br>

双标签可以省略结束标签
<ul>
   <li>
   <li>
</ul>
骨架标签全部都可以省略

<html><head><body>这三个标签都可以省略

H5新增的语义标签

header、nav、footer、aside、section、article等

可以理解为是多了层语义的div盒子

IE条件注释：解决IE678不兼容问题

引入插件 html5shiv.js
除了IE，其他浏览器并不需要此插件，所以可以使用IE浏览器的条件注释的方式进行引入，这种注释只有IE能识别，其他浏览器只会当做一个普通注解

H5新增的表单类型

<form action="#">
    邮箱：<input type="email" name="email"/><br/>
    手机号：<input type="tel" name="tel"><br>
    URL：<input type="url" name="url"><br>
    数字：<input type="number" name="number"><br>
    搜索框：<input type="search" name="search"><br/>
    滑块：<input type="range" name="range"><br/>
    拾色器：<input type="color" name="color"><br/>
    时间：<input type="time" name="time"><br/>
    日期：<input type="date" name="date"><br/>
    时间日期：<input type="datetime-local"><br/>
    月份：<input type="month" name="month"><br/>
    星期：<input type="week" name="week"><br/>
</form>

input[email]

用于输入邮箱，并自带邮箱格式校验

input[tel]

用于输入手机号码

input[url]

用于输入url，并自带url格式校验

input[number]

用于输入数字

input[search]

搜索框，体现语义化

input[range]

自由拖动滑块，可用于音量、进度等的调控

input[color]

拾色器，可以用来实现换肤功能

input[time]

用来选择时间

input[date]

用来选择日期

input[datetime-local]

用来选择本地时区的日期和时间

input[month]

用来选择月份

input[week]

用来选择星期

新增的表单属性

placeholder：占位符
autofocus：自动获取焦点
multiple：多文件上传
autocomplete：自动完成，即保存历史词，默认为on开启
required：必填

H5新增的音视频标签

在此之前，音视频的播放都是通过如flash、快播等插件实现的

<audio src="./text.mp3" controls></audio>
音频标签：audio，行内块元素
视频标签：video，行内块元素
属性

controls：显示控件
autoplay：自动播放
loop：循环播放

兼容性处理

<audio controls>
    <!--罗列所有的格式，浏览器会在判断不支持后继续选择后面的格式-->
    <source src="music.mp3">
    <source src="music.wav">
    <source src="music.ogg">
    <a href="浏览器下载地址">请更新浏览器</a>
</audio>

音视频相关的js方法、属性以及事件

方法

load()
重新加载音视频
play()
播放
pause()
暂停
andTextTrack()
向音视频添加新的文本轨道
canPlayType()
检测浏览能否播放指定的音视频
requestFullscreen()
进入全屏（此方法不限于音视频，可应用所有的元素）

属性

paused
设置或返回当前是否处于暂停
currentTime
设置或返回当前播放位置，单位秒
duration
返回当前音视频总时长，单位秒
volume
设置或返回音量

事件

onplay
当音视频播放时触发
onpause
当音视频暂停时触发
ontimeupdate
当音视频事件变化时触发，常用于设置进度条

forEach方法的两点说明

forEach方法时数组原型上的方法，伪数组是无法使用的
querySelectorAll返回的伪数组的原型上也有forEach方法

classList属性

该属性将元素所有的类名以伪数组的方式进行存储
可以使用forEach方法
添加类名

div.classList.add('className')

移除类名

div.classList.remove('className')

判断包含类名

div.classList.contains('className')

切换类名，有则删、无则加

div.classList.toggle('className')

自定义属性

自定义属性指用户设置的以 data- 开头的属性

dataset属性
存放着所有的以 data- 开头的自定义属性
获取自定义属性
如设置的元素的自定义属性为：data-name，则获取代码为：元素对象.dataset.name
设置自定义属性
设置代码为：元素对象.dataset.name = "值"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="data" data-name="name" data-age="12">自定义属性</div>
<script>
    let data = document.getElementById("data");
    console.log(data.dataset); //{name: "name", age: "12"}
    console.log(data.dataset.name, ": ", data.dataset.age); //name :  12
    data.dataset.age = 22;
    console.log(data.dataset.age) //22
</script>
</body>
</html>

H5新增的动画相关事件

transitionend
过渡结束时触发，需要使用addEventListener进行注册
animationend
动画结束时触发，需要使用addEventListener进行注册

拖拽

理论上所有的元素都可以进行拖拽，但是默认情况下只有图片和链接可以进行拖拽

拖拽属性（全局属性）

draggable='true'

拖拽事件

拖拽元素事件（被拖拽的元素）

ondragstart
拖拽开始时触发
ondrag
拖拽中触发
ondragend
拖拽结束（鼠标松开）时触发

目标元素事件（拖到哪个元素中）

ondragover
处于ondrag的被拖拽的元素进入目标元素时触发
ondrop
被拖拽的元素在目标元素上执行了拖拽结束动作时触发

事件生效

由于浏览器默认禁止将数据或元素放置到其他元素中，所以默认情况下此事件是不会生效的，此时就需要提前解除该默认禁止，具体实现方式：在ondragover事件中执行event.preventDefault()方法去除浏览器的默认行为

接收被拖拽元素

在ondrop事件中实现接收被拖拽元素，可以先在事件外部定义一个变量，然后在开始的ondragstart事件或者ondragover事件中对变量进行赋值：变量 = this;，最后在ondrag事件中进行appendChild该变量即可

网络状态事件

ononline事件：当联网时触发
onoffline事件：当断网时触发

本地存储容器

cookie

容量小，只有4k左右；操作不方便，且存放的数据总是会自动发送给服务器

H5新增的全局存储属性

localStorage：本地存储

除非手动删除，否则可以永久存储；只能存储字符串，容量可以达到5M左右

sessionStorage：会话存储

只是临时存储，当当前页面关闭时将自动删除；一样只能存储字符串，容量5M左右

localStorage 和 sessionStorage 一样

设置数据：setItem(key, value)
获取数据：getItem(key)
删除数据：removeItem(key)
清空数据：clear()

读取本地文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="file" name="file" id="read">
    <div class="show"></div>
</div>
<script>
    let read = document.querySelector('#read');
    let show = document.querySelector('.show');
    read.addEventListener('change', function () {
        let file = read.files[0];
        let fr = new FileReader();
        fr.readAsText(file, 'utf-8'); //以字符串形式读取文件，并设置字符编码
        fr.onload = function () { //当文件读取完成时触发
            show.innerHTML = '<pre>' + fr.result + '</pre>';
        }
    });
</script>
</body>
</html>

地理位置

H5新增了获取地理位置的API，但是设计隐私，在获取地理位置之前，会询问用户，只有在获得用户认可之后才会去获取位置信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    } else {
        alert("浏览器版本过低，无法获取地理位置")
    }
    function success(position) { //获取成功时的回调函数
        console.log(position.coords.latitude); //维度
        console.log(position.coords.longitude); //经度
        console.log(position.coords.accuracy); //精度
        console.log(position.coords.altitude); //海拔高度
    }
    function error(error) { //获取失败时的回调函数
        console.log(error)
    }
</script>
</body>
</html>

oNightfall

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
H5学习笔记

H5概念狭义上可以认为是html4的升级广义上是一套前端技术的统称，包括了html5、css3以及h5提供的各种新APIH5语法特性单标签可以省略关闭符号<br>双标签可以省略结束标签<ul> <li> <li></ul>骨架标签全部都可以省略<html><head><body>这三个标签都可以省略H5新增的语义标签hea
复制链接

扫一扫