HTML5新增标签
`header`：头部
`footer`：尾部
`main`：主体
`section`：区域
`article`：文章区域
`aside`：与内容无关的部分（例如：广告）
`nav`:导航
`figure`：配图区域
`figcaption`：配图说明
`mark`：标记
`time`：时间标记
`progress`：进度条
表单
1、功能强大了（很多东西不需要自己导入JS插件完成了，例如：日历）
2、在移动端根据设置的类型不一样，用户输入过成功调取出来的虚拟键盘也不一样（例如：number类型的文本框调取出来的是数字键盘）
3、新增加的类型提供了css/js验证，可以验证用户输入的内容是否符合格式（之前我们都是用正则解决）
//=>使用正则验证邮箱格式是否正确
<input type="email" id="userEmail" placeholder="请输入邮箱">
<span id="spanEmail"></span>
<script>
//=>当按键抬起和文本框失去焦点的时候都进行验证
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.innnerHTML="ok";i
}
</script>
AUDIO：音频标签
1.H5中支持的音乐播放格式
- MP3（常用）
- OGG（苹果手机录的视频）
- WAV
- M3U8:直播流
- M4A
//=>各个浏览器中并不是都支持各种类型的音乐播放格式
<audio>
<source src="xxx.mp3" type="audio/mpeg">
<source src="xxx.ogg" type="audio/ogg">
<source src="xxx.wav" type="audio/wav">
当前浏览器版本过低，不支持AUDIO播放！
//=>有的项目中，上面三种都不支持，会继续使用FLASH完成音频的播放
</audio>
AUDIO常用属性
controls：设置这个属性，则使用浏览器默认的播放器控制(项目中很少使用默认播放器，一般都是自己做的)，布尔值
autoplay：自动播放，布尔值
loop：播放完成后是否循环播放
preload：资源预加载，一般不与autoplay同时使用
- none 开始的时候什么都不加载，播放的时候才加载[常用]
- metadata 开始加载一些基础信息（如：出自哪张专辑，歌手是谁）
- auto
(默认值)加载页面就开始加载资源
currentTime：当前已经播放的时间(s)
currentLoop：已循环次数
ended：当前是否已播放完，布尔值
muted：是否静音播放，布尔值
start：从哪里开始播放（可设置）
duration：播放的总时间(s)，音频加载出来了duration才会有值，meta data加载完就好了
pause：当前是否为暂停状态，如果是暂停状态，值为true
volume：控制音量（0~1）
video标签也都具有以上这些属性，初次之外还有
poster:设置封面图
AUDIO常用事件
canplay：可以正常播放（可能会出现卡顿的情况）
canplaythrough：资源加载完毕，可以顺畅播放
ended：播放完成
loadedmetada：资源的基础信息已经加载完成
loadeddata：整个资源都加载完成
playing：正在播放中
play：触发了播放
pause：触发了暂停
AUDIO常用方法（HTMLMediaElemnet原型上的）
pause()：让音频停止播放
play():让音频开始播放
提供了一些新的API
本地存储
localStorage/sessionStorge
获取地理位置
navigator.geolocation.getCurrentPosition
调取手机内部的GPS定位系统获取当前手机所在地的经纬度以及精准度
还提供了一些API，让我们可以通过浏览器调取手机内部的软件或者硬件（但是性能都不咋高，而且兼容性不是特别好）
websocket
socket.io 客户端和服务器端新的传输方式（即时通讯IM系统基本上很多是基于它完成的）
CSS3
选择器
样式属性
基本常用的
改变的就是我们在CSS中设置的width/height到底代表哪一部分，border-box让其代表整个盒子的宽高，当我们去修改帕丁或者border，盒子大小不变，只会让内容缩放
- border-radious
- box-shadow
- text-shadow
背景类的
-
background-color
-
background-image
-
background-position
-
background-repeat
-
background-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
CSS3动画和变形
变形(变形不是动画)
-
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 [运动轨迹名称]{
0%{
//=>开始的样式
}
50%{}
100%{
//=>结束的样式
}
}
@keyframs [运动轨迹名称]{
from{
//=>开始的样式
}
to{
//=>结束的样式
}
}
CSS3中的新盒子模型
- box-sizing 改变的是width/height是什么
- border-box 代表整个盒子的宽高
- padding-box
- content-box(默认值)
- columns：多列布局
- flex：弹性盒子模型
其它的css3属性
- prespective：视距 实现3D动画比用的属性
- @media：媒体查询 实现响应式布局的一种方案
- @font-face：导入字体图标
响应式布局开发
在不同尺寸上的设备都能良好的展示（Responsive Layout）
移动端和PC端
1、：PC端和移动端公用一套项目（结构相对简单的：一般都是展示类的企业站）
先做PC端（设计给的设计稿一般都是给PC端的），一般宽度都是自适应的
切换到手机端，使用@media(媒体查询)把不同设备上不合适的样式进行修改
<style>
.box{
width:300px;
height:300px;
background:red;
}
/*
* 可以把@media理解为JS中的条件判断：在不同条件中使用不同的css样式进行渲染
* @media [媒体设备]
* all->所有设备
* screen->所有屏幕设备（PC+电脑）
* print->打印机设备
* ...
* @media [媒体设备] and [媒体条件] and [媒体条件]
*
* 手机常用的设备尺寸
* 苹果：320、375、414
* 安卓：320、360、480、540、640
* IPad:768*1024、1024*1366...
*/
@media all (max-width:780px){
/**/
.box{
width:300px;
height:300px;
background:red;
}
}
@media all (max-width:640px){
.box{
width:200px;
height:200px;
background:red;
}
}
@media all (max-width:480px){
.box{
width:100px;
height:100px;
background:red;
}
}
@media screen and (orientation:portraint){
/*portrait(竖) | landscape(横)*/
body{
background:lightcoral;
}
}
</style>
<div class="box"></div>
移动端常用响应式布局方案
最常用的方案：REM等比缩放响应式布局A、依然可以基于@media来处理（虽然麻烦，但是是最精准的方案，调出来显示的效果是最好的）
B、固定布局（viewport=>width=320px）:按照设计稿把320尺寸的写好即可（所有的尺寸都可以固定，而且都是设计稿的一半，因为设计稿是大一倍的），在其它的设备上，让320的页面居中展示即可
C、scale等比缩放布局（严格按照设计稿的尺寸来写样式，没啥自适应宽度，都是固定值），在其它设备上，首先获取设备的宽度，让其除以设计稿的宽度，然后让原始写好的页面按照这个比例整体缩小即可=>会导致一些问题如字体变模糊等
//=>一块一块区域调整
window.addEventListener("load",()=>{
let container=document.querySelector(".container"),
winW=document.documentElement.clientWidth;
container.style.transform=`scale(${winW/750})`;
})
D、REM等比缩放：它是参考scale，只是用的rem单位来实现的等比缩放（严格按照设计稿的尺寸编写，但是一般宽度让他自适应），其余的值可以写成固定值
REM和PX一样都是样式单位，PX是固定单位，REM是相对单位（相对于当前页面根元素HTML的字体设定的单位）
//=>开始给HTML的字体大小设置为100px(1Rem=100px),接下来我们写样式得到时候，把所有的尺寸都用Rem设定(测量出来的px值/100就是应该设置的Rem的值)，如果HTML的font-size不变，用rem和px一样，但是如果字体大小改变，也就改变了rem和px之间的换算比例，那么之前所有用rem做单位的样式都会自动按照最新的比例进行缩放(实现了改动HTML的font-size，整个页面中的元素都跟着缩放了)
html{
font-size:100px;
}
接下里写样式，把测量出来的px都除以100变为rem，所有的单位基于rem来搞
假设现在设计稿是750的，1rem=100px，运行在320的设备上的时候我们要修改html的字体大小，以此实现页面跟着整体缩放：320/750*100
移动端页面html的font-size大小转换
<script>
(function(){
let computedFont=function(){
let winW=document.documentElement.clientWidth,//=>当前可视窗口的宽度
desW=640;//=>设计稿的宽度
if(winW>=desW){
document.documentElement.style.fontSize="100px";
return;
}
document.documentElement.style.fontSize=winH/640*100+"px";
}
computenFont();
window.addEventListener("resize",computedFont);
})();
</script>
REM布局存在的问题，若项目要求固定一屏的，手机屏的高度小于社极品的高度，导致里面子元素有一些被隐藏，底部某些样式显示不出来
E：CSS3中提供了flex-box伸缩盒子模型，基于这个属性，可以让某些效果处理起来更加的方便
viewport
做移动端H5开发，首先加meta标签
//=>快捷键：meta:vp+Tab
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
//-------------JS中动态设置meta
let metaV=document.createElement("meta");
metaV.name="viewport";
metaV.content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0";
document.head.appendChild(metaV);
- width=device-width：让HTML页面的宽度等于设备的宽度
- initial-scale=1.0：初始缩放比例为1:1，页面即不放大也不缩小
- user-scalable=no：禁止用户手动缩放
- maximum-scale=1.0：设置最大的缩放比例
- minimum-scale=1.0：设置最小的缩放比例（部分安卓机中只设置user-scalable是补不起作用的，需要同maximum-scale和minimum-scale一起使用）
三个视口
- layout viewport：布局（页面）视口（和开发css等相关）
- visual viewport：手机视口
- ideal viewport： 理想视口
移动端的点击事件
click在移动端是单击事件行为，当触发点击事件，浏览器总会等待300MS，验证是否触发了第二次点击操作，没有触发才会执行click对应的方法（click在移动端的300MS延迟问题）
1.不建议在移动端使用click（如果非要使用也可以，最好导入一个插件fastclick.min.js），就是解决
//=>zepto中提供的专门供移动端操作的事件方法
$box.tap((ev)=>{
//=>点击
})
$box.singleTap(()=>{
//=>单击
})
$box.doubleTap(()=>{
//=>双击
})
$box.longTap((ev)=>{
//=>长按
})
$box.swipe((ev)=>{
//=>手指滑动
})
$box.swipeLeft(()=>{
//=>手指向左滑动
})
重写zepto上的tap方法
移动端基本上所有的事件行为都是根据touchstart、touchmove、touchend三个事件合成的
移动端上的click事件叫做单击事件，要在300ms内无重复才做才行
box.ontouchstart=funtion(ev){
let val=ev.changedTouches[0];
this.starX=val.clientX;
this.starY=val.clientY;
this.isMove=false;
}
box.ontouchmove=functon(ev){
let val=ev=changedTouches[0];
this.changeX=val.clientX-this.startX;
this.changeY=val.clientY-this.startY;
if(this.changeX>=10||this.changeY>=10){//=>移动距离大于10，我们当做是移动事件
this.isMove=true;
}
}
box.ontouchend=function(ev){
if(this.isMove) return;
alert("我是点击事件")
}
zepto和JQ的区别
1.zepto没有考虑浏览器的兼容，专门为移动端开发的小型类库，也仅仅是把JQ中的一些常规方法实现了，很多方法也没有实现（例如：slideDown/show...在zepto中都没有）， 移动端使用流量，加载缓慢，所以要保证zepto的体积尽量小
2.zepto中提供了移动端专门操作的事件方法（例如：tap等），这些方法都是基于移动端的touch和gesture事件模型封装好的方法，JQ中并没有提供这些方法=>zepto更适合移动端
SEO(网络运营推广)和SEM(百度竞价)
搜索引擎的优化和推广，尽可能在搜索引擎中提升产品的权重（ALEX排名）
当我们在百度搜索框中输入一个关键词，下面会呈现出很多网站，有的靠前，有的靠后，如何让搜索的结果有自己的网站，而且位置还靠前，这就是SEO优化技巧需要考虑的
1、各大搜索引擎养了一个：（爬虫），他会每天让这个小蜘蛛去各个网站中检索内容，把一些内容或者关键词收录到自己的搜索引擎库中（记录：某某内容来自于哪个网站）
2、当用户在搜索框中输入一个关键词，搜索引擎会通过关键词到自己词库中进行检索，把所有匹配到内容对应的网站给检索出来，并且呈现给用户（谁的关键词被检索的次数多或者其它原因，决定排名的前后）
SEO优化技巧
给当前的页面设置meta标签/title
<head>
<title>网页标题</title>
<meta name="keysword" content="网页关键词">
<meta name="description" content="网页描述">
<!--
1、title不可以乱写，这个是很重要的一个优化技巧
2、keywords这个META标签是用来设置网站关键词的
3、description这个META标签是设置网站的描述
-->
</head>
对于一个页面中H1-H6这些标签的权重较高，尤其是h1，我们尽可能把重要的关键词放到h1中（语义化标签合理使用）,但是要注意一个页面中的H1标签只能使用一次
<h1>
<img src="" alt=""/>
xxx
</h1>
//h1中的文字不需要展示给用户，但是我们还会写一些文字，主要是给爬虫看的（样式中font-size等于零即可）；img是不被收录的，但是alt中编写的问题可以被收录，所以img标签的alt属性一定要加，最好写一些关键词
前后端分离项目(数据有客户端JS获取和渲染)是不利于SEO优化的，使用JS做数据绑定，页面的原代码中是没有动态绑定的数据的（但是用户在页面中可以看见内容），而搜索引擎的爬虫就是从源代码进行抓取收录的（VUE/REACT都是JS做数据绑定）
大部分前后端分离项目，也就是JS做数据绑定，由客户端渲染，但是还是一部分项目依然是传统的服务端数据处理（非完全前后端分离项目）
页面中不要出现无效的链接（利于SEO优化）
Hybrid混合开发
web-App
1、其实就是个HTML页面，需要基于浏览器运行（PC或者移动端浏览器再或者V8内核的工具也可以），如果想要操作手机内部的软件或者硬件，需要浏览器的支持
2、相比于native-app来说，性能不好
3、所有的请求访问都必须基于连网的状态（除了有些是native-app把h5特殊处理了），虽然h5中支持manifest离线缓存，但是这个技术不咋好用 原因：native-app不需要，是因为所有的代码文件都在手机上，一些需要连网访问的，native-app都可以做离线缓存（缓存视频）；H5页面部署到了自己的服务器上，源文件都在服务器上呢，用户想要看页面，必须从服务器上重新的拉取代码才可以；
更新比较及时：H5只需要把服务器上的文件更新，用户每次访问看到的都是最新版本，这个比native-app好
native App
安卓系统：JAVA(java-native)
IOS系统：C(object-c/swift)
1.本地开发，打包成安装包，上传到应用商店（App Store 是有审核期的[7天]），用户从应用商店下载安装相关的APP：把当前APP的源文件（原代码安装在手机上了，类似于在电脑上安装WS）
2.native app可以操作手机内部的软件或者硬件（例如：通讯录、摄像头、相册、重力感应器等等），因为它是直接运行在操作系统中的程序
3.手机操作系统不一样，使用的技术也不一样，所以需要两个不同的开发团队，开发不同版本的APP（问题：有的版本升级快，有的版本升级慢）
Hybrid混合开发
在native-App中嵌入H5页面(web-app)，用户需要用到手机操作系统时，如摄像头等，实际上是通过jsBridge把信息传递给native-App，由其调取然后再把得到的信息反馈给H5页面
微信公众号是最为经典Hybrid混合开发模式，它支持我们的H5页面在微信这个native-app中运行，而且还可以调取微信提供的一些方法实现相关的操作
