H5与CSS3总结

H5

H5简介

• Web行为标准：W3C DOM、ECMAScript

• HTML5 —— 属于最新一项Web标准

• HTML设计理念

  • 避免不必要的复杂性

  • 支持已有内容

    • 属性值不包括空字符串、<、>、=、单双引号时，可省略引号
    • 可以省略结束标签的元素
      • li、p、option、tr、td、th、thead、tbody、tfoot
    • 可以省略全部标签的元素 —— html、head、body
    • 即使标签被省略了，该元素还是以隐式的方式存在的

  • 求真务实

  • 优雅降级

    • 在浏览器看到自己不理解的type值时，会将type的值解释为text

• Web应用

  • 多媒体支持
  • 图形、动画支持，易于实现游戏

• H5优点

  • 提升用户体验，加强视觉感受
  • 多设备，跨平台支持，及时更新，代码更清晰
  • 开放的网络标准

• H5发展现状

  • 业界、浏览器、平台支持
  • 各浏览器尚未全部支持，速度相比原生应用较慢，资源获取短板

H5标签及特性

• 标签分类

  • 优化文档结构，结构性元素
  • 提供新的功能，功能性元素

• 结构性元素 —— 语义化标签

  • —— 头部，导航、引导信息
  • —— 导航内容 页面导航的连接组
  • —— 正文 可以独立被外部引用的内容，通常有自己的标题和脚注
  • —— 文章中的段 区域
  • —— 边栏内容 附属信息
  • —— 页脚

• 功能性元素

  • 播放视频、播放音频

    • 属性

      属性	功能
      src	URL地址
      controls	添加播放控制条
      loop	是否循环播放
      autoplay	是否页面加载后自动播放
      width	视频宽度
      height	视频高度

    • 兼容性问题

      • audio/video 内写 source 元素 ，设置多个播放格式

    • 控制函数

      • play（）：加载
      • pause（）：暂停
      • load（）：重新加载

  • —— 公历事件（24时制）或日期

  • —— 进度条

    • 属性
      • max —— 总任务
      • **value **—— 已完成

表单

• 新增input输入类型

  • number，email，url，tel，range（含一定范围数值滑动条），date，color，search，time
  • date（各种日期与时间输入文本框 ），month（年和月），week（年和周），datetime-local（本地日期和时间）

• 新增表单元素

  • datalist：绑定需将输入域的 list 属性引用 datalist 的 id

  • output：显示计算结果或脚本输出

    • name（唯一对象名）、form、for（输出的一个或多个元素

  • Keygen：用户验证，用于表单的秘钥对生成器字段

• 新增表单属性

  • form：输入域所属的一个或多个表单，属性值为所属表单的 id
  • formaction ：表单提交到不同页面
  • formmethod：指定提交方式（get，post）
  • required：输入域是否为空
  • placeholder：输入框提示信息
  • list：与datalist的id绑定
  • autofocus：是否自动聚焦
  • multiple：是否允许多个文件上传
  • max，min，step
  • pattern：正则表达式验证

地理位置定位——Geolocation API

• 影响功能的定位数据：IP，GPS，WIFI，手机，用户自定义

• 判断浏览器兼容性

  • window.onload=function(){
    	if(navigator.geolocation){}
    }
    

• 方法(回调函数避免一直等待)

  • getCurrentPosition(onSuccess,onError,options) 获取当前地理位置
  • watchPosition() 持续监视当前地理位置
  • clearWatch() 清除监视

离线web应用

• 优势：离线浏览；快；减小服务器负载

• 创建

  • 创建缓存清单文件（manifest 文件）

    • 扩展名： appcache；
    • MIME 类型：text/cache-manifest（应用程序打开类型）
    • 文件内容
      • CACHE MANIFEST 必有，首次下载后进行缓存
      • NETWORK 不会被缓存，离线不可用
      • FALLBACK 获取不到缓存资源时的备选资源路径（404 页面）

  • 在 html 中标记

• API

  • 访问方式：window.applicationCache 更新
  • 方法
    • status() 状态
    • addEventListener() 监听
    • 更新缓存：update() swapCache() 加载过的不会重新加载

Web存储

• cookie
  • 存储用户信息方式，文本存储
  • 缺点：容量有限；每次发送请求，浪费宽带；不可跨域；要自己封装方法
  • 作用：与服务器进行交互，作为 HTTP 的一部分存在 ，不可或缺
• Web Storage
  • 作用：为在本地“存储”数据而生
  • 优点：更大容量存储；自带方法；独立存储空间；多接口
  • 存储机制
    • LocalStorage 保存在客户端本地的硬件设备 永久
    • SessionStorage 保存在session对象中 临时 （session：进网站到关浏览器）
  • 方法：getItem(key)、setItem(key,value)、key(index)、removeItem()、clear()

数据通信

• 通信方式

  • HTTP协议：req、res；客户端请求，服务端响应，单向
  • Ajax：JS请求，局部更新页面/应用；轮询 (Ajax)、长轮询(long poll)
  • 缺陷：非原生协议支持；效率、实时性低；资源、宽带浪费

• 实时通信（WebSocket）

  • window子对象

  • WebSocket、HTTP、TCP

    • WebSocket和HTTP属于应用层协议，都是通过TCP协议传输数据
    • WebSocket是全双工通信协议，HTTP是单向的通信协议
    • 对于WebSocket来说，它必须依赖HTTP协议进行一次握手，握手成功后，数据就直接从TCP通道传输，此后就与HTTP无关了

  • 特点：轻量高效；无同源限制；协议标识ws；可发文本，也可二进制

  • 意义：H5最强大通信功能；实时双向（eg：聊天，股票，位置监控…）

  • 使用

    • 构造函数，需要新建实例

      • var Socket = new WebSocket('ws://localhost:8080');
        

    • 属性：

      • WebSocket.readyState 只读属性
        • 值：CONNECTING（0），OPEN（1），CLOSED（3）
      • WebSocket.bufferedAmount =0 表示发送结束

    • 方法

      • window.WebSocket.send( ) window.WebSocket.close( )
      • window.WebSocket.onopen() window.WebSocket.onclose（）
      • window.WebSocket.onmessage() 收到数据后回调

    • 事件 open，message，error，close 与方法对应

文件

• File，FileList对象

  • 所有type属性为file的input元素都有一个files属性，用来存储用户所选择的文件。files 属性值就是 FileList 对象。
  • files有length属性和item方法，files[index]获取选择的file对象
  • 属性：name，size，type，lastModified （时间戳）、lastModifiedDate

• Blob对象

  • 表示二进制原始数据
  • file对象继承了Blob对象
  • 属性：slice()（可访问原始数据块）、size，type（MIME类型，eg:audio/*、image/jpeg）

• FileReade对象方法

  • readAsDataURL() Data URL形式读取

    • var reader  = new FileReader()
      reader.readAsDataURL(file)
      reader.result
      

  • readAsBinaryString () 二进制形式读取

  • readAsText () 文本文件读取，txt文件编码格式要设置UTF-8

拖放

• DataTransfer，拖拽数据传递对象，为事件对象的一个属性

• 事件

  • 拖拽元素：dragstart，drag，
  • 目标元素：dragenter，dragover，dragleave，dragend，drop

• 步骤

  • 设置元素可拖放 draggable=“true”

  • 拖拽元素设置 οndragstart=“darg(event)”，方法内设置数据setData

    • function drag(ev){ev.dataTransfer.setData("Text",ev.target.id)}
      

  • 目标元素设置 οndragοver=“ ”，方法内取消默认—ev.preventDefault()

  • 目标元素设置 οndrοp=“drop(ev)”和getData

    • function drop(ev){
          ev.preventDefault();
          var data = ev.dataTransfer.getData("Text");
          ev.target.appendChild(document.getElementById(data));数据放置
      }
      

画布——像素级操作

• canvas 和 svg 比较

  • canvas依赖分辨率，屏幕增大，画布降级
  • canvas不支持事件处理器，文本渲染能力弱；svg可大面积渲染（谷歌地图）
  • canvas可存为PNG或JPG，适合频繁重画的图形游戏

• 绘制直线

  • 步骤

    
    
     var c = document.getElementById("myCanvas");
     var context = c.getContext("2d");
     context.moveTo(0,0);
     context.lineTo(100,100);
     context.lineTo(200,0);
     context.lineWidth=10;
     context.strokeStyle="blue";
     context.stroke();
    

  • 填充：fill（），fillStyle（）

  • 路径封闭：beginPath()，closePath()，stroke在包裹里面图形不闭合

• 圆弧： context.arc(x, y, r, sAngle, eAngle, (true/false 是否逆时针)

• 矩形：context.rect(x, y, width, height)

  • fillRect 实心、strokeRect 空心、clearRect 清空指定像素

• 透明度：

  • context.fillStyle = “rgba(255,0,0,0.5)”
  • context.globalAlpha = 0.5

• 线条样式

  • lineWidth
  • lineCap —末端样式 butt默认 ，round，square 线条略长
  • lineJoin —夹角 bevel 斜角、round 圆角、miter 尖角 默认
  • miterLimit —内、外角间的距离 ； lineJoin 为 “miter” 时有效

• 画布转换 多次设置累加

  • 平移 — translate(x, y)
  • 旋转 — rotate(deg) 正代表顺时针
  • 缩放 — scale(sx, sy)

• 状态保存 save()保存、入栈 restore()恢复、出栈 可嵌套二者使用

• 文字渲染 fillText( text, x, y, maxWidth ) strokeText( text, x, y, maxWidth )

• 阴影 shadowColor 、shadowBlur —模糊级别 、shadowOffsetX 、shadowOffsetY

• 渐变色

  • createLinearGradient(x0,y0,x1,y1) 线性渐变
    • gradient.addColorStop(stop,color);
  • createRadialGradient(x0,y0,r0,x1,y1,r1) 放射性/环状渐变

• 图片填充 createPattern() ( image, type)

  • 合成操作属性 globalCompositeOperation

• 图片绘制

  • context.drawImage(img, x, y, width, height) 定位并缩放

    • 加载完绘图

      var img = new Image();  //新建一个IMG对象
      img.src='cake.jpg';
      img.onload=function ( ){
          context.drawImage(img,50,100,300,300);
       }
       也可为video，绘制视频，描绘当前帧
      

  • 剪切、缩放 context.drawImage(img, sx, sy, sw, sh, x, y, width, height)

• 像素操作

  • 创建ImageData对象 createImageData(width, height)

    • createImageData(imageData) 尺寸相同新对象，不复制图像数据
    • getImageData(x, y, width, height) 拷贝了画布指定矩形的像素数据
    • putImageData(imgData,x,y) 图像放画布上

  • 滤镜原理解释

    • 反色 rgb(255-r, 255-g, 255-b)

    • 灰色调

      newr = (r * 0.272) + (g * 0.534) + (b * 0.131);
      newg = (r * 0.349) + (g * 0.686) + (b * 0.168);
      newb = (r * 0.393) + (g * 0.769) + (b * 0.189);
      

    • 浮雕与雕刻：当前像素的前一个像素RGB值 — 后一个像素的RGB值+128

• 动画循环

  • setInterval() 、 clearInterval()

  • requestAnimationFrame( ) 、 cancelAnimationFrame()

    重绘：function animate（）{回调 requestAnimationFrame（animate）}；
    

css3

CSS3概述及选择器

• 特点：向下兼容、新属性、完善中、模块化
• 新特性：功能强大的选择器、颜色和透明制定、多栏布局、多背景图、文字阴影、开放字体、圆角、边框图片、盒子阴影、媒体查询
• 属性选择器
  • 属性选择器 E可省略，匹配任意类型
    • E[att^=“val”] val开头
    • E[att$=“val”] val结尾
    • E[att*=“val”] 包含val
    • 灵活应用可以判断扩展名 eg：a[href $=‘jpg’]:after{…}
  • 兄弟选择器 eg：box~.long {background:#FC0;}
  • **伪类选择器— 选择器 : 伪元素 { 属性：值 } **
    • E:first-line、E:fist-letter；E:before、E:after 必须设置content属性一起使用
    • 元素过滤
      • E:root 根元素；在HTML中，根元素永远是HTML
      • E:not(s) 不含有s选择符
      • E:empty 没有任何子元素
      • E:target target元素的id被当做页面中的超链接来使用，点击跳转后生效
    • E:first-child、E:last-child、E:only-child、E:nth-child(n)、E:nth-last-child(n)
    • E:nth-of-type(n) 、E:nth-last-of-type(n)、E:only-of-type （没有兄弟的父元素特定类型）

文本、字体与颜色

• 文本样式
  • 阴影：text-shadow : h-shadow v-shadow (blur-模糊距离 color); 可设置多个，逗号间隔
  • 自动换行
    • word-wrap: normal | break-word-不允许单词断;
    • word-break : normal | break-all-单词内断 | keep-all-半角空格/连字符处换行;
• 字体样式 @font-face{font-family:WebFont;src: url(’ …');}
• 颜色样式 RGBA、HSL、HSLA
  • rgba(red, green, blue,opacity)
  • hsl (hue, saturation, lightness) —— 色相（0红，120绿，240蓝），饱和度，亮度
  • hsla(hue, saturation, lightness, opacity)

背景与边框

• 背景样式
  • background-size ：
    • width height(可为百分比，设置一个值另一个为auto)
    • 缩放： cover—完全覆盖； contain —宽或高适应
  • background-origin:border-box | padding-box | content-box; 图片开始显示的区域
  • background-clip:border-box| padding-box| content-box; 能够显示的区域，可能裁剪背景
  • 使用多重背景图片：background-image: url(flwr.gif), url(tree.gif);
• 边框样式
  • border-radius：20px —可分别设置四角 border-top-left-radius、border-bottom-right-radius
  • border-image: url(border.png) 18 18 18 18; 上右下左
• 阴影 box-shadow: h-shadow v-shadow blur spread(尺寸) color inset(outset改为内部阴影）;

渐变与变形处理

• 渐变效果

  • 线性渐变 background: linear-gradient(direction, color-stop1, color-stop2, …);

    • .div1 {
           background: linear-gradient(60deg ,red, yellow, green);
      } 
      .div2{
          background: linear-gradient(to bottom left, red,  yellow, green);
      }
      

    • 重复： background: repeating-linear-gradient(red, yellow 10%, green 20%);

  • 径向渐变 background: radial-gradient (shape at position, color1 stop,

    color2 stop,…)

    .div1{
        background: radial-gradient( 50% 50%,red 0%, yellow 
        20%,black 50%,green 80%, yellow);}
    .div3{
        background: radial-gradient(circle at top left, 
        red 0%, yellow 20%,black 50%,green 80%, yellow);}
    

• transform ：

  • 平移：translateX(x) 、translate(x , y)
  • 旋转：rotate(angle )
  • 缩放：scaleX(x) 、scale(sx, sy) 负值反转
  • 倾斜：skewX(x) 、skew(x，y)

• transform-origin: x y 更改变换的基点位置 ，默认center center

• 多重变形

CSS3过渡与动画

• 过渡 transition ——平滑过渡

  • transition-property —过渡属性：all|属性名
  • transition-duration—时间：0|
  • transition-timing-function —时间曲线：ease(慢快慢)|linear|ease-in | ease-out | ease-in-out
  • transition-delay—开始时间：0

• 动画 animation —— 关键帧

  • 创建、调用

    @keyframes mycolor{
        0%{background-color: red;}
        70%{background-color: yellow; }
        100%{background-color: red;}
    }
    div:hover{animation-name: mycolor;}
    

  • animation: name duration timing-function delay

  • iteration-count(播放次数，infinite为无限) direction(轮流反向播);

  • 动画库 Animate.css

CSS3多列布局

• 多列 —— 传统形式，多个div
• column多列布局
  • 列数—column-count 、列宽—column-width
    • 简写columns: column-count column-width;
  • 列间隔—column-gap
  • 列边框—column-rule:3px outset #ff0000;
  • column-rule-width ：长度值| thin | medium | thick
  • column-rule-style ：none | hidden | dotted 点 | dashed 虚线| solid | double 双线
  • column-rule-color
  • 横跨所有列 — column-span：none | all

CSS3盒布局

• 盒的相关样式
  • display: flex; —— 块级弹性盒子 占满一行
  • display: inline-flex; —— 行块级弹性盒子 有多长占多长
• 弹性盒模型
  • 默认水平为主轴，垂直为交叉轴，可变
  • 容器属性
    • flex-direction —— 排列
      • 主轴水平：row| row-reverse
      • 主轴垂直：column | column-reverse
    • flex-wrap ——换行
      • nowrap | wrap | wrap-reverse（第一行在下面）
    • justify-content —— 主轴对齐方式
      • flex-start | flex-end | center | space-between | space-around
    • align-items —— 纵轴上对齐方式
      • flex-start | flex-end | center
      • baseline （与第一行的文字基线对齐）| stretch（拉伸元素适应容器）
  • 项目属性
    • flex-grow：number ——放大比例 默认为0，不会放大
    • flex-shrink ——缩小比例 默认值为1，不缩小；设置为0，空间不足不会缩小
    • flex-basis ：number—— 分配多余空间前，占据的主轴空间
    • flex：默认0 1 auto flex:1所有项目等分剩余空间

CSS3媒体查询

• 自适应网页：自动识别屏幕宽度、并做出相应调整

• 响应式布局

  • 根据设备环境以及用户行为调整页面的布局变化、内容的缩放等
  • 优势：开发、维护、运营成本优势；兼容性优势；操作灵活。
  • 实现：媒体查询；百分比布局

• 媒体查询

  • @media 设备类型 and （设备特性）{ 样式代码 }

  • @media screen and (min-width: 1000px) {
         #container{width: 1000px; }
    }
    @media screen and (min-width: 640px) and (max-width: 999px) {
         #container{width: 640px;}
    }
    

UI开发基础

• 前端三大框架：Vue，React，Angular
• Vue
  • 优点
    • 轻量级的框架，易用
    • 指令化、组件化、双向的数据绑定
  • 缺点
    • 不适合大型项目
    • 不支持IE8
    • 生态环境不如React
• React
  • 优点
    • 高效
    • 声明式设计
    • React 构建组件更适用于大型应用
  • 缺点：学习曲线相对陡峭

前后端交互

• 前后端分离，提高开发效率，降低的软件设计的耦合度。针对性工程化实现，提高处理复杂业务的能力