1.语义化标签
header , nav ,section,aside,artical,footer 都是双标签
/*结构代码*/
<header>
<nav>导航栏</nav>
< /header>
< section>
aside>侧边栏< /aside>
<article>独立内容块</article>
</ section>
< footer>尾部</ footer>
/*还有一个<main>主题标签了解一下就可以了*/
2.新增表单类型
<!-- 颜色输入框 -->
<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()1.如果把数据存储在localStorage里 除非手动删除 否则他就会一直存在(关闭浏览器 电脑重启 等等 都不会删除)
2.数据的本地存储是按照不同网站来存储的(不同域名)
3.本地存储数据 只能存储字符串
sessionStorage 临时存储
用法跟localStorage 一样
sessionStorage.setItem();
sessionStorage.getItem();
sessionStorage.removeItem();
sessionStorage.clear();
sessionStorage 与 localStorage 区别
生命周期不一样 localStorage是永久存储 sessionStorage是会话级存储 页面关闭就删除
cookie
cookie是由服务器发送给客户端（浏览器）的小量信息(4kb)超出则该属性将返回空字符串。
cookie 是以文件形式存放在客户端计算机中，查看修改都很方便，这就是 cookie 不能存放重要信息的原因。
每个 cookie 的格式都是这样的：<cookie名>=<值>；名称和值都必须是合法的标示符。
cookie 是存在有效期的。在默认情况下，一个 cookie 的生命周期就是在浏览器关闭的时候结束。如果想要 cookie 能在浏览器关掉之后还可以使用，就必须要为该cookie设置有时间，也就是 cookie 的失效日期。
cookie的设置与获取
把strChkID和obj的值放到COOKIES中
document.cookie = strChkID + "=" + obj;
假设cookie中存储的内容为：name=jack;password=123则在B页面中获取变量username的值的JS代码如下：
把cookie中的值放到一个cook变量中
var cookies = document.cookie.split(";");
删除cookie（原理让他立即过期，设置个负的时间）
//获取当前时间
var date = new Date();
//将时间设置为过去的时间
date.setTime(date.getDate()-10000);
document.cookie = cookiesName+"="+cookiesValue+";expires="+date.toGMTString();
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")
音视频video、audio
video和audio元素的属性、方法、事件
参考属性方法等：
菜鸟教程：HTML 音频/视频 | 菜鸟教程
H5画布Canvas
正方形：
<html>
<head>
<title>Canvas tutorial</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d"); // 定位横向x轴 纵向y轴 长 宽
ctx.fillStyle = "rgb(200,0,0)";
//绘制矩形
ctx.fillRect(50, 50, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; //颜色 透明度
ctx.fillRect(50, 150, 55, 50); // 定位横向x轴 纵向y轴 长 宽
}
draw();
</script>
</html>定义进度条
<progress max="100" value="76">
<!--无min属性 -->
<span>76</span>%
</progress
背景控制
<style>
#box {
/* 图片 */
background-image: url(https://img13.360buyimg.com/n7/jfs/t1/15044/5/6972/166261/5c652b7bE4fcc410b/a1444d0e3919eb76.jpg);
/* 图片大小 */
background-size: 100%;
/* 图片定位 */
background-position: right bottom, left top;
/* 图片是否重复 */
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
<div id="box">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>CSS渐变 过渡 动画
如何使用form
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
/* 矩阵matrix*/
transform: matrix(2, 2, 0, 2, 45, 0);
/* 位移 */
transform: translateX(45px);
/* 倾斜skew */
transform: skew(144deg, 175deg);
/* 全体缩放 */
transform: scale(6, 6);
/* /* x轴缩放 */
transform: scaleX(6);
/* y轴缩放 */
transform: scaleY(6);
/* 缩放比例角度 */
transform: rotate(7deg);
/* Rotate div */
/* 旋转角度 */
transform: rotate(25deg);
-ms-transform: rotate(25deg);
/* IE 9 */
-webkit-transform: rotate(25deg);
/* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello</div>过渡transition
<style>
div {
width: 100px;
height: 100px;
background: red;
transition-property: width, height;
transition-duration: 2s;
/*苹果 Safari */
-webkit-transition-property: width, height;
-webkit-transition-duration: 2s;
}
div:hover {
width: 300px;
height: 300px;
}
</style>
<div></div>
<p>将鼠标移动div上查看过渡效果.</p>
动画类型 linear，ease，ease-in，ease-out，ease-in-out
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: linear;
/* 苹果 Safari */
-webkit-transition: width 2s;
-webkit-transition-timing-function: linear;
}
div:hover {
width: 300px;
}
</style>
<div></div>transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
linear：规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in：规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out：规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out：规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
动画名称name + @keyframe
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite;
/*Safari and Chrome*/
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
@-webkit-keyframes mymove
/*Safari and Chrome*/
{
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
<div></div>
扫一扫
434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
