H5、CSS3和ES6新特性
CSS3新特性
01 新增语义化标签
<header>
:头部标签
<nav>
:导航标签
<article>
:内容标签
<section>
:定义文档某个区域
<aside>
:侧边栏区域
<footer>
:尾部标签
02 新增多媒体标签
- 音频
<audio src="文件地址" controls="controls" loop autoplay></audio>
- 视频
<video width height preload src="文件地址" controls="controls" loop autoplay></video>
03 新增input类型
type=
“email url date time month week number tel search color
”
04 新增表单属性
- 表单及表单属性
<form method="post" action="result.html"> </form>
required
placeholder
autofocus
autocomplete:基于之前输入过的值,显示出在字段中填写的选项
multiple:可以多选文件提交,用于type为file的表单
HTML5新特性
01 新增选择器
- 属性选择器
属性选择器可以根据元素的特定属性来选择元素,可以不借助于类或者id选择器。
- 结构伪类选择器
根据文档结构来选择元素,常用于根据父级选择器选择里面的子元素。
- E:first-child 父元素中第一个子元素E
- E:last-child 父元素中最后一个E元素
- E:nth-child(n) 父元素中第n个子元素E
- E:first-of-type 指定类型E的第一个
- E:last-of-type 指定类型E的最后一个
- E:nth-of-type(n) 指定类型E的第n个
对于E:nth-child(n),n可以是数字或者是关键字,公式。
关键字:even 偶数 odd 奇数
当括号中是n时,n会进行计算,从0开始一直加到最后,所以写n时就等价于选择了所有孩子。
注意必须是n不能是其他的字母。
- 伪元素选择器
伪元素选择器可以利用CSS创建新标签,不需要HTML标签,从而简化HTML结构。
伪元素清除浮动
// 1、额外标签法(隔墙法),要求新的空标签必须是块级元素
// 2、父级添加overflow属性
// 3、父级添加after伪元素
.clearfix::after {content: "";display: block;height: 0;clear: both;visibility: hidden;
}
// 4、父级添加双伪元素
.clearfix::before,.clearfix::after {content:"";display:table; /*转换为块级元素并且一行显示*/
}
.clearfix::after{clear:both;
}
02 盒子模型border-box
1. box-sizing: content-box 盒子大小为 width + padding + border (以前默认的)
2. box-sizing: border-box 盒子大小为 width
03 图片变模糊filter
filter:函数()
如:filter:blur(5px) // blur模糊处理,数值越大越模糊
04 计算盒子宽度width:calc函数
width:calc(100%-80px); // 执行一些计算
05 过渡transition
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
// 搭配 :hover 使用
属性:宽度高度 背景颜色 内外边距
运动曲线:linear、ease 、ease-in、ease-out
06 2D转换transform
转换(transform):位移变化要放在最前面
- 移动:translate
translate(50%,50%)中的百分比是相对于自身元素的。不会影响其它元素的位置。
- 旋转:rotate
rotate(45deg) 角度为正时,顺时针。
transform-origin:x y;
设置元素转换的中心点
- 缩放:scale(x,y)
07 动画animation
- 用 keyframes 定义动画
- 元素使用动画
@keyframe 动画名称 {0%{width:100px;}100%{width:200px;}
}
div {width:200px;height:200px;background-color:aqua;margin:100px auto;// 调用动画animation-name: 动画名称;// 持续时间animation-duration: 持续时间;animation-timing-function:速度曲线;animation-delay:延时;animation-iteration-count:被播放次数如infinite;animation-play-state:运行或者暂停;
}
08 3D转换
transform:translate3d(x,y,z)
perspective// 指的是眼睛与屏幕的距离,值越小,看到的就越大;写在被观察元素的父盒子中
transform:rotate3d(x,y,z,deg)
transform-style:flat // 默认的,开启立体空间使用preserve-3d,写在父元素
09 浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加。
私有前缀
-moz-:代表 firefox 浏览器私有属性
-ms-:代表 ie 浏览器私有属性
-webkit-:代表 safari、chrome 私有属性
-o-:代表 Opera 私有属性
提倡的写法
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
ES6新特性
01 let和const
ES6推荐使用let声明局部变量
- let和const不存在变量提升,只能在块级作用域里访问,同一作用域下不能声明同一变量
- var定义的变量,变量提升,没有块的概念,可以跨块访问
- const用来定义常量,使用时必须初始化,而且不能修改
02 Symbol
基本数据类型:undefined、null、Number(数值)、String(字符串)、Boolean(布尔值)、Object(对象)
Symbol是ES6中引入的一种新的基本数据类型,用于表示一个独一无二的值,不能与其他数据类型进行运算,主要用于防止第三方框架的同名属性被覆盖。
03 模板字符串&字符串新方法
模板字符串
// ES6之前,通过 \ 和 + 来构建模板
let html="<div>"+"<a>"+url+"</a>"+"</div>";
// ES6,用${}来界定,反引号 `` 搞定
let html=`<div><a>${url}</a></div>`
字符串新方法
- includes() 判断字符串是否包含参数字符串,返回Boolean值
- startsWith() 或 endsWith() 判断是否以参数字符串开头或结尾,返回Boolean值。可以有两个参数,用一个数字表示开始查找的位置。
- repeat() 按指定重复次数返回一个新的字符串
- padStart() 或 padEnd() 用参数字符串按给定长度从前面或者后面补全字符串,返回新字符串。
let arr='hel'
console.log(arr.padEnd(6,'o')) // 'helooo'
console.log(arr.padEnd(6)) // 'hel ',没有指定字符则以空格代替
console.log(arr.padStrat(5,'o')) // 'oohel'
04 (数组&对象)解构表达式
解构赋值是对赋值运算符的扩展。针对数组或者对象进行模式匹配,对变量进行赋值。
字符串、以及ES6新增的Map和Set都可以使用。
- 数组解构
let [a,b,c]=[1,2,3];
console.log(a,b,c); //1,2,3let [a,b,c]=[1,,3];
console.log(a,b,c); //1,undefined,3let [a,,c]=[1,2,3];
console.log(a,c); //1,3let [a,..b]=[1,2,3]; //...是剩余运算符,表示赋值运算符右边除第一个值外剩余的都赋值给b
console.log(a,b); //1,[2,3]
- 对象解构
let obj={name:"li",age:18
};
let {name,age}=obj;
console.log(name,age); //’li' 18
let {name:myName,age:myAge}=obj; //自定义变量名
console.log(myName,myAge); //’li' 18
05 Map和Set
Map和Set属于es6新增的对象
- Map对象用于保存键值对,任何JavaScript支持的值都可以作为键、值。
区别:1、object的键只能是字符串或者Symbol值;
2、Map对象有一个size()属性,为键值对的个数,而object没有。
let myMap=new Map([['name','li'],['age',18]]);
console.log(myMap); //{'name'=>'li','age'=>18}
myMap.set('sex','male');
console.log(myMap.size); //3
myMap.get('name');
myMap.delete('sex');
myMap.has('sex');
- Set可以理解为后端的Set集合对象,类似数组,它的每个元素都是唯一的。
let mySet=new Set([1,2,3]);
console.log(mySet); //{1,2,3}
mySet.add(4); //{1,2,3,4}
mySet.delete(1); //true
mySet.has(1); //false
数组的去重
let arr=[1,1,2,4,4];
let mySet=new Set(arr);
let newArr=Array.from(mySet);
console.log(newArr); //[1,2,4]
06 数组的新方法
- Array.from() 将可迭代对象转换为新的数组
let arr=[1,2,3];
let obj={double(n){return n*2;}
}
// Array.from()可接受3个参数(后两个可没有)
// 第一个为将被转换的可迭代对象;第二个是回调函数;第三个是回调函数内的this指向
console.log(Array.from(arr, function(n){return this.double(n);
},obj)); //[2,4,6]
- includes() 查看数组中是否存在这个元素
- map() 原数组经过运算后的数组,或者从对象数组中拿某个属性
- filter() 筛选满足条件的数据成为一个新数组,不会影响旧数组
let arr=[1,33,2,44];
let new1=arr.map((v)=>v>10); //[false,true,false,true]
let new2=arr.map((v)=>v*2); //[2,66,4,88]
let new3=arr.filter((v)=>v>10); //[33,44]
let new4=arr.filter((v)=>v*2); //[1,33,2,44]
- forEach() 循环遍历数组中的每一项,没有返回值
- find() 查找数组中符合条件的第一个元素,直接返回
- some() 找到一个符合条件的就返回true
- every() 数组所有值都符合条件才返回true
07 object的新方法
- Object.is() //判断两个值是否为同一个值
- Object.assign() //将所有可枚举的属性的值从一个或多个源对象分配到目标对象,并返回目标对象。将对象合并到第一个对象,相同的属性会覆盖
- Object.keys() //返回对象所有属性
- Object.values() //返回对象所有属性值
- Object.entries() //返回多个数组,每个数组是key-value
08 对象声明简写&…对象扩展符
- 对象声明简写
声明对象时,属性名与引用的变量名相同时就可以省略。(k,v一致省略v)
- …(对象扩展符)
// 拷贝
let obj={name:"li",age:18
};
let obj2={...obj}
console.log(obj2==obj)
console.log(obj2) //{name:"li", age:18}
// 合并对象
const p1={a:1}
const p2={b:2,a:5}
let newO={...p1,...p2}
console.log(newO); //{a:5,b:2}
09 函数参数默认值
function add(a=0,b=0){return a+b;
}
let x=add() //0
let y=add(2) //2
let z=add(3,4) //7
10 箭头函数
箭头函数实现了一种更加简洁地书写方式。箭头函数内部:
- 没有arguments(无法在函数内部获取形参)
- 也没有prototype属性
- 不能用new关键字调用箭头函数
- 其内部this永远指向其父级对象的this
let sum=(a,b) => a+b
11 class类
class关键字定义类,本质仍是一个函数。类的继承通过extends关键字实现,子类必须在constructor中调用super()
class Person {constructor(name,age){this.name=name;this.age=age;}say(){console.log(this.name+':'+this.age);}
}
class Student extends Person {constructor(name,age,sex) {super(name,age);this.sex=sex;}
}
var stu=new Student("muzi",18,"male")
12 promise&proxy
13 模块化
- 导入import
import '模块名称' from '路径'
import from '路径'
- 导出export和export default
let name='muzi',age=18;
export {name,age};
- 优点:防止命名冲突;复用性强
14 运算符
- 扩展运算符 …
- 可选链 ?.
- 函数绑定运算符 ::
H5、CSS3和ES6新特性相关推荐
- html5 跳转参数不显示_HTML5、CSS3、ES6新特性总结
前言:HTML5.CSS3.ES6新特性,可以说是基础前端的面试的必考题了,以下是关于新特性的基本总结. HTML5: 语义化的区块和段落元素:<section>,<article& ...
- html5,css3,es6新特性总结
html5新特性 语义化标签 如:header,footer,nav,dialog 增强型表单 如:date,week,url,time,email,month 视频和音频 audio和video C ...
- lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法?
国庆刚刚结束,我们开始一波新的学习进程吧. ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.作为前端必备技能,我们来快速开始吧 接 ...
- H5、C3的新特性有哪些?
H5.C3的新特性有哪些? HTML5的新增元素: 1.canvas 画布 2.用于媒介回放的video和audio元素 3.本地离线存储.localStorage长期存储数据,浏览器关闭后数据不丢失 ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
- ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- ES6新特性之了解ES6以及其发展历史
ES6 新特性 现在使用主流的前端框架中,如ReactJS.Vue.js.angularjs等,都会使用到ES6的新特性,作为一名高级工程师而言,ES6也就成为了必修课,所以本套课程先以ES6的新特性 ...
- es6 获取对象的所有值_前端开发必备 - ES6 新特性之 Set和Map数据结构
往期回顾: 前端开发必备 - ES6 新特性之 let 和 const 命令 前端开发必备 - ES6 新特性之 变量的解构赋值 前端开发必备 - ES6 新特性之 字符串的拓展 前端开发必备 - E ...
- 尚硅谷es6新特性笔记
尚硅谷es6新特性笔记 一.let与const let的变量声明以及声明特性 const的变量声明以及声明特性 const.let.var 三者之间的区别 二.变量解构赋值 三.模板字符串 四.对象的 ...
最新文章
- java反射的性能_java反射的性能问题
- java中native的用法[转]
- javascript Array方法总结
- 广州自由自在进口食品休闲消费的趋势
- kicad最小布线宽度默认是多少_你想知道建仓库时叉车通道宽度留多少吗?
- Mac安装sqlmap【亲测有用】
- springbootSecurity的使用
- ZooKeeper官方文档学习笔记01-zookeeper概述
- 【数据结构笔记08】哨兵查找、二分查找、树、儿子-兄弟表示法、二叉树的引子
- Ztree勾选节点后取消勾选其父子节点
- kafka处理大数据包
- 集成电路设计——闩锁效应
- 2015-5-5分享的pdf
- CATIA—机电产品数字化设计工具
- Java解压ZIP、RAR文件
- android计算器实训报告总结,计算机实训总结报告【三篇】
- Axure的灯箱效果说明
- 埃默里大学计算机科学排名,美国埃默里大学各专业的最新排名分析
- ubuntu安装使用redis并设置开机启动
- 怎样才算是好程序员?关于好程序员与好代码的杂谈