H5C3
html5语义化标签
H5专门规定的布局标签
头部 header
导航区 nav
主体部分 main
小模块 section
边栏框 aside
正文框 article
尾部区域 footer
语义化的标签，旨在让标签有自己的含义。
优势：
1.代码结构清晰，方便阅读，有利于团队合作开发。
2.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
3.有利于搜索引擎优化（SEO）。
IE8不兼容h5新标签可以使用 html5shiv.js 兼容
<!-- css HACK 做条件判断 选择性引入 -->
<!-- [if lte IE 8]>
<script src="./html5shiv.js"></script>
<![endif]-->
自定义属性
h5新增自定义属性的界定
自定义属性前面加 data-
dataset 获取元素所有自定义属性
取值时 去掉data- 如果有多个单词 那么去掉data-和其他单词之间的- 转成驼峰命名法
<div id="box" class="one" data-user-name="张三" data-height="160cm" data-weight="60kg" data-gender="男"></div>
<script>
var box = document.getElementById("box")
// 获取元素所有自定义属性
console.log(box.dataset);
console.log(box.dataset.height);
console.log(box.dataset.userName);
// 如果属性不存在 undefined
// console.log(box.dataset.name); undefined
// 设置自定义属性
box.dataset["userName"] = "lisi";
console.log(box.dataset["userName"]);
// getAttribute不能直接获取h5自定义属性
// console.log(box.getAttribute("height")); // null
// console.log(box.getAttribute("weight")); // null
</script>
新增表单类型
<!-- 颜色输入框 -->
<input type="color">
<!-- 专门用来输入email 必须时email格式数据 -->
<!-- 在提交时 会自动验证 是不是email -->
<!-- 设置required 属性 就是必须填 提交时 如果为空就自动验证 进行提示 -->
<input type="email" required>
<!-- 输入网址 -->
<input type="url">
<!-- 电话号码 在移动端 会弹出九宫格数字键盘 -->
<input type="tel">
<!-- 在pc端 只是比text框多了一个x 在移动端 输入内容后 键盘右下角的换行键会变成搜索或放大镜 -->
<input type="search">
<!-- 专门输入日期的 -->
<input type="datetime-local">
<!-- 滑块 -->
<input type="range">
localStorage 本地存储
localStorage 本地存储 把数据存储在浏览器端
方法：
保存数据 localStorage.setItem(属性名字符串,属性值)
获取数据 localStorage.getItem(属性名字符串)
删除数据 localStorage.removeItem(属性名字符串)
清空数据 localStorage.clear()
// 本地存储是以键值对的形式来存储的
localStorage.setItem("name", "zhangsan");
var name = localStorage.getItem("name");
// 删除数据 一条一条删
localStorage.removeItem("name");
// 清空数据
localStorage.clear();
localStorage 存储特点：
1.如果把数据存储在localStorage里 除非手动删除 否则他就会一直存在(关闭浏览器 电脑重启 等等 都不会删除)
2.数据的本地存储是按照不同网站来存储的(不同域名)
3.本地存储数据 只能存储字符串
对于复杂数据类型 先使用JSON.stringify方法把复杂数据转换成json字符串
获取时 使用JSON.parse将其转换回来 进行还原
var obj1 = {
name : "lucy",
age : 18
}
var json = JSON.stringify(obj1) // {"name":"lucy","age":18}
JSON.parse(localStorage.getItem("obj1")) // {name: "lucy", age: 18}
sessionStorage 临时存储
用法跟localStorage 一样
sessionStorage.setItem();
sessionStorage.getItem();
sessionStorage.removeItem();
sessionStorage.clear();
sessionStorage 与 localStorage 区别
生命周期不一样 localStorage是永久存储 sessionStorage是会话级存储 页面关闭就删除
classList 操作类
获取到的classList属性是一个伪数组 可以通过下标获取
add 添加一个类
remove 删除一个类
toggle 切换类
contains 判断是否有这个类
replace 替换某一个类
box.classList.add("border");
box.classList.remove("border");
// 判断元素没有这个类 有就去掉 没有就加上
box.classList.toggle("border")
// 使用contains方法 返回时是true 或者false
var res = box.classList.contains("yellow")
//有两个参数
//参数一:是需要被替换掉的那个类名
//参数二:是需要被替换上去的类名
box.classList.replace("green","red")
H5拖拽
有些元素默认就有拖拽 但是有些没有默认拖拽
标签设置draggable = true 就可以实现强行拖拽
拖拽目标元素的事件 ：
ondragstart 拖拽开始
ondrag 拖拽中
ondragend 拖拽结束
容器的事件
ondragenter 有元素进入时触发
ondragleave 有元素离开时触发
ondrop 在容器范围内 丢下目标元素
ondragover 这个事件只是为了让ondrop事件被触发 用来阻止不允许有元素进入的默认行为
注意
如果想要触发ondrop事件 就必须先在他之前给容器加一个ondragover事件
而且还是要在ondragover事件里阻止的默认行为 这样才能保证ondrop事件被触发
container.ondragover = function(e){
// 阻止事件默认行为 ： 阻止的是不允许有外界数据拖进的这个默认事件
e.preventDefault();
}
案例:图片双向拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
display: table;
width: 500px;
height: 500px;
border: 1px solid red;
position: absolute;
left: 20px;
top: 50px;
}
.container {
width: 500px;
height: 500px;
border: 1px solid red;
position: absolute;
right: 20px;
top: 50px;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box">
<img src="img/01.jpg" alt="">
<img src="img/02.jpg" alt="">
<img src="img/03.jpg" alt="">
<img src="img/04.jpg" alt="">
<img src="img/05.jpg" alt="">
</div>
<div class="container"></div>
<script>
// 获取元素
var box = document.querySelector(".box");
var container = document.querySelector(".container");
var img = document.querySelectorAll(".box img");
var imgDrag; // 当前拖拽的图片
for (let i = 0; i < img.length; i++) {
img[i].ondragstart = function () {
imgDrag = this;
console.log(imgDrag);
}
}
container.ondragover = function (e) {
e = e || window.event;
// 阻止默认事件
e.preventDefault();
}
box.ondragover = function (e) {
e = e || window.event;
// 阻止默认事件
e.preventDefault();
}
// 右边容器
container.ondrop = function (e) {
if (imgDrag != undefined) {
container.appendChild(imgDrag);
}
}
// 左边容器
box.ondrop = function(e){
if (imgDrag != undefined) {
box.appendChild(imgDrag);
}
}
</script>
</body>
</html>
选择器相关
伪类选择器：
:link 没有访问过的链接
:hover 鼠标悬停时
:active 鼠标点击时
:visited 点击过后
四种伪类选择器都是以:开头 而且都是用于a标签
hover适用于所有元素
伪元素选择器
伪元素默认是行内元素 而且要使用伪元素 必须要有content属性
::after ::before
/* 清除浮动 */
.clearFix::after{
content: "";
display: block;
visibility: hidden;
clear: both;
height: 0;
zoom : 1; // 兼容ie8
}
:nth-child(n) 匹配第n个子元素
参数可选 even 偶数 odd 奇数
nth-child() 不是只是找到第n个子元素 还是必须满足在父元素中也是第几个子元素
nth-of-type() 也是用来找到第几个子元素 并不要求在父元素中也是第几个子元素
多媒体标签
video视频标签
可以在video标签里面设置source标签 给视频播放指定多个播放原
播放时会从第一个播放源依次往下找 不能播放就继续往下找可以播放的
后面的所有播放源忽略掉(注意 这里的source不会覆盖)
<video controls>
<source src="">
<source src="">
<!-- 对于不认识video标签的浏览器 会按照行内元素解析 可以给提示语 -->
您的浏览器版本过低 建议升级
</video>
可以加属性
src 指定视频路径
以下的属性都不需要加属性 只需要属性名即可
controls 显示控件 播放暂停 进度条
autoplay 自动播放 谷歌不允许自动播放 如果需要就将视频静音
muted 静音
loop 循环播放
audio音频标签使用方法类似
自定义播放器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/font-awesome.css">
<style>
.player {
width: 600px;
height: 400px;
border: 1px solid;
/* 弹性布局 */
display: flex;
flex-direction: column;
}
video {
width: 100%;
}
.controls {
flex: 1;
width: 100%;
display: flex;
}
.controls a {
width: 50px;
background-color: #000;
text-decoration: none;
color: #fff;
/* 设置a标签内容居中 */
display: flex;
justify-content: center;
align-items: center;
}
.controls .fa {
font-size: 25px;
}
.progress {
flex: 1;
background-color: #fff;
}
.progress .son {
width: 0%;
height: 100%;
background-color: gray;
}
/* 字体图标库 font-awesome的使用
1.先下载文件 将css文件夹和font文件夹放进项目里
2.使用时 直接加类名
*/
</style>
</head>
<body>
<div class="player">
<!-- 视频标签 -->
<video src="./video/rabbit.ogg"></video>
<!-- 视频控制器 -->
<div class="controls">
<!-- 播放暂停按钮 -->
<a id="play" href="javascript:void(0)" class="fa fa-play"></a>
<!-- 进度条 -->
<div class="progress">
<div class="son"></div>
</div>
<!-- 音量滑块 -->
<input type="range" id="range" max="10">
<!-- 全屏按钮 -->
<a id="full" href="javascript:void(0)" class="fa fa-arrows-alt"></a>
</div>
</div>
<script>
// 获取video元素
var video = document.querySelector("video")
// 需要给a标签注册点击事件
var play = document.querySelector("#play")
var son = document.querySelector(".son")
// 播放暂停切换
play.onclick = function () {
// 需要根据视频图标的样式来确定 是暂停 还是播放
// 判断类名是否包含play
if (this.classList.contains("fa-play")) {
video.play();
// 将图标换成暂停
this.classList.replace("fa-play", "fa-pause")
} else {
video.pause();
this.classList.replace("fa-pause", "fa-play")
}
}
// 全屏显示
document.querySelector("#full").onclick = function () {
video.webkitRequestFullScreen(); // 谷歌
}
// 视频播放时显示进度条
video.ontimeupdate = function () {
console.log(video.currentTime, video.duration);
son.style.width = video.currentTime / video.duration * 100 + "%";
}
// 点击进度条跳转到当前进度
document.querySelector(".progress").onclick = function(e){
// 获取事件触发点到元素自身的距离 / 父盒子的总宽度
// offsetX 直接获取到元素自身的距离
e = e || window.event
son.style.width = e.offsetX / this.offsetWidth *100 + "%";
video.currentTime = e.offsetX / this.offsetWidth * video.duration;
}
// 调音量滑块
document.getElementById("range").oninput = function(){
video.volume = this.value/10;
}
</script>
</body>
</html>
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
