一、HTML5（H5）
1.新增加(修改/删除)的语义化标签
header
footer
main 主体
section 区域
article 文章区域
aside 与内容无关的部分（例如：广告）
nav
figure 配图区域
figcaption 配图说明
mark 标记
time 时间标记
progress 进度条 ...
2.关于表单元素的新改革 [传统表单元素] input:text/password/radio/checkbox/file/hidden/button/submit/reset...
select
textarea 文本域
button
form
label ...
[新增一些表单元素或者是表单类型]
input:search/email/tel/number/range/color/date/time/url...
//=>ONINPUT：移动端没有KEY-DOWM/KEY-UP，用INPUT代替，代表正在操作当前表单元素（例如正在输入等）
年龄：
<input type="number" id="ageInp" step="1" max="65" min="18" value="25" disabled>
<input type="range" id="rangeInp" step="1" max="65" min="18" value="25">
<script>
//=>INPUT：移动端没有KEY-DOWM/KEY-UP，用INPUT代替，代表正在操作当前表单元素（例如正在输入等）
rangeInp.oninput = function () {
let val = this.value;
ageInp.value = val;
};
</script>表单元素中新增加的类型作用
1.功能强大了(很多东西不需要自己导入JS插件完成了，例如：日历)
2.在移动端根据设置的类型不一样，用户输入过程中调取出来的虚拟键盘也不一样（例如：number类型的文本框调取出来的是数字键盘）
3.新增加的类型提供了CSS/JS验证，可以验证用户输入的内容是否符合格式（之前我们都是用正则自己解决，现在H5中的新类型自带验证机制）
H5中给表单元素设置了一个新的属性：placeholder 用来做文本框的默认提示的 （自己扩展：使用JS实现一套和PLACE-HOLDER一模一样的效果）
<style>
#userEmail {
border: 1px solid #DDD;
outline: none; /*当文本框获取焦点后取出浏览器默认的边框选中颜色*/
}
#userEmail:valid {
/*通过验证:不输入或者输入的格式正确*/
border-color: green;
}
#userEmail:invalid {
/*没通过验证*/
border-color: red;
}
#userEmail:valid + span:after {
content: '邮箱格式正确';
}
#userEmail:invalid + span:after {
content: '邮箱不符合格式';
}
</style>
<input type="email" id="userEmail" placeholder="请输入邮箱!">
<span id="spanEmail"></span>
<script>
userEmail.onkeyup = function () {
//=>checkValidity:H5新提供的表单内容格式验证方法（新表单类型中有内置验证机制的，都可以基于这个方法验证）
if (this.checkValidity()) {
spanEmail.innerHTML = 'OK';
} else {
spanEmail.innerHTML = 'NO';
}
};
</script>
<script>
//=>BLUR:失去焦点
//=>FOCUS:获取焦点
userEmail.onkeyup = userEmail.onblur = function () {
let val = this.value.trim();
if (val.length === 0) {
spanEmail.innerHTML = '必填';
return;
}
let reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if (!reg.test(val)) {
spanEmail.innerHTML = 'NO';
return;
}
spanEmail.innerHTML = 'OK';
};
</script><!--下拉框（扩展：实现省市县三级联动）-->
地区：
<select id="selectCity">
<option value="">==请选择==</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="杭州">杭州</option>
<option value="成都">成都</option>
</select>
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>3.音视频标签
audio
video
=>让我们告别了FLASH时代
4.canvas图形绘制
5.提供了一些新的API
本地存储：localStorage/sessionStorge
获取地理位置： navigator.geolocation.getCurrentPosition 调取手机内部的GPS定位系统获取当前手机所在地的经纬度以及精准度等 ...
还提供了一些API，让我们可以通过浏览器调取手机内部的软件或者硬件（但是性能都不咋高，而且兼容性不是特别好）
6.websocket：socket.io 客户端和服务器端新的传输方式（即时通讯IM系统 如:QQ、微信 基本上很多是基于它完成的）
二、CSS3
[选择器]
#ID
.CLASS
TAG
*
SELECTOR1,SELECTOR1... 群组选择器
A .B{} 后代
A.B{} 既具备A也具备.B的（同级二次筛选）
A>B{} 子代
A+B{} 下一个弟弟
A~B{} 兄弟
A[NAME=''] 属性选择器 NAME!='' / NAME^=''（以..开头） / NAME$=''（以..结尾） / NAME*='' ...
A:HOVER
A:ACTIVE
A:VISTED
A:LINK
A:AFTER
A:BEFORE
A:NTH-CHILD
A:NTH-LAST-CHILD
A:NTH-OF-TYPE
A:NTH-LAST-OF-TYPE
A:NOT
A:FIRST-CHILD
A:LAST-CHILD
...[样式属性]
1.基本常用
border-radius
box-shadow
text-shadow
2.背景
background -color / -image / -position / -repeat / -attachment / ...
background-size：
100px 100px 宽高具体值
100% 100% 宽高百分比（相对于所在容器）
cover 以合适的比例把图片进行缩放(不会变形)，用来覆盖整个容器
contain 背景图覆盖整个容器（但是会出现，如果一边碰到容器的边缘，则停止覆盖，导致部分区域是没有背景图的）
...
background-clip: 背景图片裁切
border-box
padding-box
content-box
background-origin：设置背景图的起始点
border-box
padding-box
content-box
...
filter3.CSS3动画和变形（2D/3D）
//=>变形不是动画
transform:
translate(X|Y|Z) 位移
scale 缩放
rotate 旋转
skew 倾斜
matrix 矩阵(按照自己设定的矩阵公式实现变形)
transform-style:preserve-3d 实现3D变形
transform-origin：变形的起点
//=>过渡动画
transition:
transition-property:all/width... 哪些属性样式发生改变执行过渡动画效果，默认ALL，所有样式属性改变都会执行这个过渡效果
transition-duration:过渡动画的时间，我们一把都用秒，例如：.5s
transition-timing-function:动画运动的方式 linear(默认) ease ease-in ease-out ease-in-out cubic-bezier(执行自己设定的贝塞尔曲线)
transition-delay:设置延迟的时间,默认是0s不延迟,立即执行动画
...
//=>帧动画
animation：
animation-name 运动轨迹的名称
animation-duration 运动的时长
animation-timing-function 运动的方式(默认ease)
animation-delay 延迟时间
animation-iteration-count 运动次数(默认1 infinite无限次运动)
animation-fill-mode 运动完成后的状态（帧动画完成后，元素会默认回到运动的起始位置，如果想让
//其停留在最后一帧的位置，设置这个属性值为forwards；backwards是当前帧动画如果有延迟时间，在延
//迟等待时间内，元素处于帧动画的第一帧位置；both是让帧动画同时具备forwards和backwards）
...
//=>设置帧动画的运动轨迹
@keyframes [运动轨迹名称] {
from{
//开始的样式
}
to{
//结束的样式
}
}
@keyframes [运动轨迹名称] {
0%{
//开始的样式
}
50%{}
100%{
//结束的样式
}
}4.CSS3中的新盒子模型
box-sizing: border-box / padding-box / content-box（默认值）
//改变的就是我们在CSS中设置的WIDTH/HEIGHT到底代表啥 border-box让其代表整个盒子的宽高，
//当我们去修改PADDING或者BORDER，盒子大小不变，只会让内容缩放
columns：多列布局
flex：弹性盒子模型5.一些其他的CSS3属性
perspective:视距 实现3D动画必用的属性
@media:媒体查询 实现响应式布局的一种方案
@font-face:导入字体图标三、响应式布局开发
响应式布局：在不同尺寸的设备上都能良好的展示，这就是响应式布局设计（Responsive Layout）
公司中的产品形态：
1.PC端(全屏页面需要宽度自适应，但是一般都是固定宽度的)
2.PC+移动端用同一套项目（简单的页面，例如：产品介绍，公司展示类的官网等）
3.移动端（移动端设备尺寸差异较大，需要做响应式布局开发）
嵌入到APP中的H5
微信中分享出来的H5
微信公众号
小程序
靠浏览器访问的H5 ...
4.RN(React Native) / ionic / cordova ... JS开发APP的框架，使用JS代码开发APP，最后框架会把代码转换为 安卓和IOS 需要的代码
如何实现响应式布局开发? 最常用的方案：REM等比缩放响应式布局
做移动端H5开发，首先加META标签
<!--meta:vp [Tab]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
REM和PX一样都是样式单位，PX是固定单位，REM是相对单位（相对于当前页面根元素HTML的字体设定的单位）
我们开始给HTML的字体大小设置为100PX(1REM=100PX)，接下来我们写样式的时候，把所有的尺寸都用REM
//设定（测量出来的PX值/100就是应该设置的REM的值）,如果HTML的FONT-SIZE不变，用REM和PX一样，但是如
//果字体大小改变，也就是改变了REM和PX之间的换换算比例，那么之前所有用REM做单位的样式都会自动按照最
//新的比例进行缩放（实现了改动HTML的FONT-SIZE，整个页面中的元素都跟着缩放了，牵一发而动全身）
真实项目中，设计师给给我们一套设计稿（常用的尺寸：640*1136 750*1334 640*960 ...），拿到设计稿后，我们严格按照设计稿中的尺寸去编写样式
HTML{
FONT-SIZE:100PX;
}
接下来写样式，把测量出来的PX都除以100变为REM，所有的单位基于REM来搞
=>假设设计稿是750,也就相当于750的设备下,1REM=100PX
我们页面运行在320的设备上，我们需要修改HTML的字体大小，以此实现页面跟着整体缩放：320/750*100 =>当前设备上HTML的字体大小<sytle>
html {
/*
* 1.最好不要写10PX:浏览器默认最小的字体是12PX
* 2.font-size设置为多少，相当于1个rem等于多少像素
* 3.之所以设置为100PX就是为了方便计算REM和PX转换的比例
*/
font-size: 100px; /*1REM=100PX*/
}
</sytle>