1. html5语义化标签
头部 header
导航区 nav
主体部分 main
小模块 section
边栏框 aside
正文框 article
尾部区域 footer
优势：
- 代码结构清晰，方便阅读，有利于团队合作开发。
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
- 有利于搜索引擎优化（SEO）。
IE8不兼容h5新标签可以使用 html5shiv.js 兼容
<!-- css HACK 做条件判断 选择性引入 -->
<!-- [if lte IE 8]>
<script src="./html5shiv.js"></script>
<![endif]-->2. 自定义属性
h5新增自定义属性的界定
自定义属性前面加 data-
dataset 获取元素所有自定义属性
取值时 去掉data- 如果有多个单词 那么去掉data-和其他单词之间的- 转成驼峰命名法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="box" class="one" data-user-name="张三" data-height="160cm"
data-weight="60kg" data-gender="男"></div>
</body>
<script>
var box = document.getElementById('box');
console.log(box.dataset)
console.log(box.dataset.userName)
console.log(box.dataset.height)
// 设置自定义属性
box.dataset["userName"] = "lisi";
console.log(box.dataset.userName)
</script>
</html>
3. 新增表单类型
<!-- 颜色输入框 -->
<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">4. localStorage 本地存储
// 本地存储是以键值对的形式来存储的
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}5. sessionStorage 临时存储
用法跟localStorage 一样
sessionStorage.setItem();
sessionStorage.getItem();
sessionStorage.removeItem();
sessionStorage.clear();sessionStorage 与 localStorage 区别
生命周期不一样 localStorage是永久存储 sessionStorage是会话级存储 页面关闭就删除
6. classList 操作类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="box" class="one" data-user-name="张三"
data-height="160cm" data-weight="60kg" data-gender="男"></div>
</body>
<script>
var box = document.getElementById('box');
console.log(box.classList)
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")
</script>
</html>
7. 选择器相关
伪类选择器：
: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() 也是用来找到第几个子元素 并不要求在父元素中也是第几个子元素
8. 多媒体标签
video视频标签
可以在video标签里面设置source标签 给视频播放指定多个播放原
播放时会从第一个播放源依次往下找 不能播放就继续往下找可以播放的
后面的所有播放源忽略掉(注意 这里的source不会覆盖)
<video controls>
<source src="">
<source src="">
<!-- 对于不认识video标签的浏览器 会按照行内元素解析 可以给提示语 -->
您的浏览器版本过低 建议升级
</video>可以加属性
src 指定视频路径
以下的属性都不需要加属性 只需要属性名即可
controls 显示控件 播放暂停 进度条
autoplay 自动播放 谷歌不允许自动播放 如果需要就将视频静音
muted 静音
loop 循环播放
audio音频标签使用方法类似
