HTML结构层基础

  • HTML5不是基于SGML的，因此不用声明DTD

  • HTML5 ≈ 标签(HTML5) + CSS3 + JAVASCRIPT

  • 语义化标签

    • 不要万物皆可div+css
    • 行内元素
      • a\b\span\img\input\button\select\strong等
    • 块级元素
      • div\ul\ol\li\dl\dt\dd\h1-6\p\table等
    • 空元素
      • br\hr\link\meta\area\base\col\command\embed\keygen\param\source\track等

  • HTML糟糕的部分

    • 不要用table，因为要等table标签里面的内容解析完了才能展示网页
      • 可以使用ul\li模拟表格
    • 不要万物皆可div+css
    • img要写alt和title

  • AMP HTML（Accelerated Mobile Pages\流动网络提速）

    • 使用严格受限的高效HTML标签
    • 使用静态网页缓存技术来提高访问静态资源的性能和用户体验

前端结构层演进

  • XML和HTML的区别

    • XML注重数据存储
    • HTML注重把数据展示出来给用户看
    • 例如：结合Web Component自定义元素实现来加载

  • HTML Web Component

    • video标签里面有一个用show userAgent Shadow DOM才能查看的东西，那就是Shadow DOM（播放器控件所在之处）

浏览器脚本演进时代（重点）

  • ECMAScript5
    • 严格模式 ’use strict‘
    • JSON
      • stringify和parse
    • Object方法和属性
      • getPrototypeOf
      • getOwnPropertyNames
      • create
      • defineProperty
      • defineProperties
      • seal
      • freeze
      • preventExtensions
      • isSealed
      • isFrozen
      • isExtensible
      • keys
    • Array属性和方法
      • indexOf
      • lastIndexOf
      • every
      • some
      • forEach
      • map
      • filter
      • reduce
      • reduceRight
    • bind()
    • trim()
      • 去除两端空字符
    • Date
      • now()
      • toJSON()
  • ECMAScript6
    • let，const
    • 字符串模板
    • 解构赋值
    • 数组新特性
      • ... 扩展运算符
      • Array.from()
        • 将类数组对象转换成真正的数组
      • Array.of()
        • 传入的一组参数值转换成数组
      • Array.prototype.copyWithin(target, start, end)
        • 数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。
        • 它接受三个参数。
        • target （必需）：从该位置开始替换数据。
        • start （可选）：从该位置开始读取数据，默认为 0 。如果为负值，表示倒数。
        • end （可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
      • fill
      • find
      • findIndex
    • 函数参数
      • 默认参数 function func(name = 'xxx)
      • 不定参数 function func(...rest)
      • 扩展参数
        • let name = ['xxx','xxx1'];
        • function sayHello(name1, name2)
        • sayHi(...name)
    • 箭头函数
    • 增强对象
      • 属性简写
      • 对象方法属性简写声明
      • 返回变量或者对象作为属性名，[表达式]: 'value'
    • 类
      • class
      • extends
    • export/import
    • Iterator
    • Generator
    • Map\Set\WeakMap\WeakSet
    • Promise
    • Symbol
    • Proxy
    • 统一码
    • 进制数
    • Reflect
    • 递归安全限制
  • ECMAScript7+
    • Array.prototype.includes()
    • async/await
  • TypeScript

前端表现层基础

  • CSS选择器与属性
    • 选择器：详看第一章
    • 属性
      • 布局类
        • position，flex，float，align等
      • 几何类
        • 盒相关（margin、padding等），渐变，background等
      • 文本类
        • font类，text类等
      • 动画类
        • css3为主的transition、animation等
      • 查询类
        • @media等
  • 样式统一化
    • 清空浏览器默认格式
  • CSS预处理
    • scss、less那些

表现层动画

  • JavaScript
  • SVG
  • CSS3 animation
  • Canvas
  • requestAnimationFrame

响应式网站开发技术

  • 结构层响应式

    • 结构层数据内容响应式
      • 前端根据userAgent获取不同的资源
    • 后端数据渲染响应式
      • 后端根据userAgent获取不同模板
    • 结构层媒体响应式
      • Media Query
      • Picture标签（草案）

  • 表现层响应式

    • 响应式布局
      • Media Query
    • 屏幕适配布局
      • 百分比

  • 行为层响应式

    • 判断浏览器