JS知识体系梳理-6
HTML5新增标签
`header`：头部
`footer`：尾部
`main`：主体
`section`：区域
`article`：文章区域
`aside`：与内容无关的部分（例如：广告）
`nav`:导航
`figure`：配图区域
`figcaption`：配图说明
`mark`：标记
`time`：时间标记
`progress`：进度条
复制代码
表单
一、功能强大了（不少东西不须要本身导入JS插件完成了，例如：日历）javascript
二、在移动端根据设置的类型不同，用户输入过成功调取出来的虚拟键盘也不同（例如：number类型的文本框调取出来的是数字键盘）css
三、新增长的类型提供了css/js验证，能够验证用户输入的内容是否符合格式（以前咱们都是用正则解决）html
//=>使用正则验证邮箱格式是否正确
<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中支持的音乐播放格式java
- 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：设置这个属性，则使用浏览器默认的播放器控制(项目中不多使用默认播放器，通常都是本身作的)，布尔值css3
autoplay：自动播放，布尔值web
loop：播放完成后是否循环播放swift
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端
一、：PC端和移动端公用一套项目（结构相对简单的：通常都是展现类的企业站）
先作PC端（设计给的设计稿通常都是给PC端的），通常宽度都是自适应的
切换到手机端，使用@media(媒体查询)把不一样设备上不合适的样式进行修改
<style>
.box{
width:300px;
height:300px;
background:red;
}
/*
* 能够把@media理解为JS中的条件判断：在不一样条件中使用不一样的css样式进行渲染
* @media [媒体设备]
* all->全部设备
* screen->全部屏幕设备（PC+电脑）
* print->打印机设备
* ...
* @media [媒体设备] and [媒体条件] and [媒体条件]
*
* 手机经常使用的设备尺寸
* 苹果：320、37五、414
* 安卓：320、360、480、540、640
* IPad:768*102四、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优化技巧须要考虑的
一、各大搜索引擎养了一个：（爬虫），他会天天让这个小蜘蛛去各个网站中检索内容，把一些内容或者关键词收录到本身的搜索引擎库中（记录：某某内容来自于哪一个网站）
二、当用户在搜索框中输入一个关键词，搜索引擎会经过关键词到本身词库中进行检索，把全部匹配到内容对应的网站给检索出来，而且呈现给用户（谁的关键词被检索的次数多或者其它缘由，决定排名的先后）
SEO优化技巧
给当前的页面设置meta标签/title
<head>
<title>网页标题</title>
<meta name="keysword" content="网页关键词">
<meta name="description" content="网页描述"> <!-- 一、title不能够乱写，这个是很重要的一个优化技巧 二、keywords这个META标签是用来设置网站关键词的 三、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
一、其实就是个HTML页面，须要基于浏览器运行（PC或者移动端浏览器再或者V8内核的工具也能够），若是想要操做手机内部的软件或者硬件，须要浏览器的支持
二、相比于native-app来讲，性能很差
三、全部的请求访问都必须基于连网的状态（除了有些是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中运行，并且还能够调取微信提供的一些方法实现相关的操做
- 1. JS知识体系梳理-4
- 2. JS知识体系梳理-3
- 3. js知识体系梳理-2
- 4. js基础知识梳理
- 5. js部分知识梳理
- 6. 前端知识体系梳理
- 7. web前端知识体系梳理
- 8. 前端8大知识体系梳理
- 9. Ajax知识体系大梳理
- 10. 数据库知识体系梳理（一）
- 更多相关文章...
- • Spring体系结构详解 - Spring教程
- • 网络体系的构成和类型 - TCP/IP教程
- • Docker 清理命令
- • Docker容器实战(七) - 容器眼光下的文件系统
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Appium入门
- 2. Spring WebFlux 源码分析(2)-Netty 服务器启动服务流程 --TBD
- 3. wxpython入门第六步（高级组件）
- 4. CentOS7.5安装SVN和可视化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig对象缺少setMaxIdle、setMaxWaitMillis等方法，问题记录
- 6. 一步一图一代码，一定要让你真正彻底明白红黑树
- 7. 2018-04-12—（重点）源码角度分析Handler运行原理
- 8. Spring AOP源码详细解析
- 9. Spring Cloud（1）
- 10. python简单爬去油价信息发送到公众号
- 1. JS知识体系梳理-4
- 2. JS知识体系梳理-3
- 3. js知识体系梳理-2
- 4. js基础知识梳理
- 5. js部分知识梳理
- 6. 前端知识体系梳理
- 7. web前端知识体系梳理
- 8. 前端8大知识体系梳理
- 9. Ajax知识体系大梳理
- 10. 数据库知识体系梳理（一）