前端知识技术路线图

前端知识技术路线图，包括代码编写规范、HTML5、CSS3、JavaScript、JQuery与BootStrap。

前端知识技术路线图

• 注意
  • 目前不考虑兼容性，请使用谷歌浏览器
• 代码编写规范
  • 推荐使用小写元素名
  • 关闭所有 HTML 元素
  • 关闭空的 HTML 元素
  • 使用小写属性名
  • HTML5 属性值可以不用引号，推荐使用引号
  • 图片通常使用 alt 属性。 在图片不能显示时，它能替代图片显示。
  • HTML 注释
  • 命名不要随意，见名知意。
  • 为id或class命名时，多单词以“-”连接，如：demo-one
  • 空格与缩进
• HTML5
  • 目标
    • 文档类型
      • DOCTYPE
    • 理解HTML文档流
    • head标签里面各种标签含义作用
      • meta
        • chartset
        • ......
    • 文档元数据
      • 如：meta里的chartset等（chartset为元数据类型）
    • 文档主体（重点内容）
      • 文字形式
      • 语义标签——用正确的标签做正确的事情，html语义化让页面的内容结构化，结构更清晰。准确使用语义标签，不要滥用
      • 行内元素与块级元素的区别
      • 空元素
      • 嵌入内容
        • 引入CSS的三种常用方式以及优先级
          • Linking（外部引用式）——link 与 @import的区别
          • Embedding（嵌入式）
          • Inline（内联式）
        • 嵌入图片等
      • 交互元素
      • 表格
      • 表单
        • 表单元素
        • 表单属性
      • Input类型
      • 字符实体
      • 拖放（JS阶段）
      • 画布 与 SVG（JS阶段）
      • 事件（JS阶段）
      • 存储（JS阶段）
      • 应用缓存（PHP阶段，JS阶段可以了解）
      • 地理位置（JS阶段）
  • 何时
    • 14天
      • 学习
      • 实践
      • 考核
  • 如何
    • 学习网站
      • 菜鸟教程：http://www.runoob.com/
      • W3school ：http://www.w3school.com.cn/index.html
    • 推荐网站：MDN Web文档 https://developer.mozilla.org/zh-CN/
    • 考核例子：具有CSS3动画效果的静态网站(至少6个页面)
    • 注：HTML5与CSS3 为同一阶段
• CSS3
  • 目标
    • 语法规则
    • 字体
    • Border
    • outline
    • display 与 visibility
    • 选择器
      • id和class选择器
      • 元素选择器
        • 例：p, div
      • 伪对象选择器（伪元素选择器）
        • 例：:first-line
      • 伪类选择器
        • 例：a:hover, li:nth-child
      • 属性选择器
        • 例：a[rel = "external"]
      • 关系选择器
        • 后代选择器
        • 子代选择器（子元素选择器）
        • 相邻兄弟选择器
    • 取值单位
      • 长度
        • 绝对长度：px
        • 相对长度：em ,rem
      • 颜色
        • 颜色的几种表示方法
          • 颜色名
          • 十六进制
          • RGB
          • RGBA
          • HSL（了解）
          • HSLA（了解）
    • 属性
      • 用户界面
      • 显示样式
        • 颜色
        • 背景
      • 盒子模型
        • 标准盒子模型(W3C盒子模型)
        • IE盒子模型
      • 位置
        • 定位（position）
          • static
          • fix
          • relative
          • absolute
          • 附：css position基础  https://segmentfault.com/a/1190000003702416
        • 浮动
          • 产生浮动的原因
          • 清除浮动的方法
      • z-index
        • 属性
        • 何时用
        • 如何用
      • 状态
        • 变换
        • 动画
        • 过渡
      • 打印（了解）
    • 布局
      • flex布局（flexbox弹性盒子）—— 一维布局
      • Grid 布局(网格布局)——二维布局
      • 常用布局
        • 单列布局
        • 多列布局
          • float+margin
          • position+margin
          • 三栏布局
            • 圣杯布局（float+position+负margin+padding）
            • 双飞翼布局（float+负margin）
        • 常用居中
          • 水平居中
          • 垂直居中
      • 响应式布局
      • 网状布局
        • 多列
        • 列表
        • 表格
    • 媒体查询
  • 何时
    • 14天
      • 学习
      • 实践
      • 考核
  • 如何
    • 学习网站
      • 菜鸟教程：http://www.runoob.com/
      • W3school ：http://www.w3school.com.cn/index.html
    • 考核例子：具有CSS3动画效果的静态网站(至少6个页面)
    • 推荐网站：MDN Web文档 https://developer.mozilla.org/zh-CN/
    • 注：HTML5与CSS3 为同一阶段
• JavaScript
  • 目标
    • 基础知识
      • 数据类型
      • 函数
      • JS作用域
      • 正则表达式
    • 对象
    • 事件
      • 鼠标事件
      • 表单事件
      • 事件处理/监听函数
      • 窗口事件
      • Event对象
      • 事件流
      • 按键事件
    • 客户端存储
      • web存储
      • json与xml
      • web SQL数据库 （了解）
      • cookie
    • DOM操作
      • DOM节点操作
      • 样式操作
      • 脚本化文档
      • 附一篇个人博客：JS DOM操作及扩展  http://blog.csdn.net/qq_33430445/article/details/76977623
    • BOM
    • JavaScript特效
    • JS闭包
    • 插件的使用（自己写个插件，最好自己封装一下）
    • Ajax（JQuery阶段，原生ajax也要学习）
  • 何时
    • 14天
      • 学习
      • 实践
      • 考核
  • 如何
    • 推荐书籍：《JavaScript高级程序设计》/《JavaScript权威指南》（这两本书用来提高，也可作为新手入门）
    • 学习网站：菜鸟教程或W3school
    • 考核例子：具有JS动画效果的高质量静态网站
• JQuery与BootStrap
  • 目标
    • JQuery语法
    • Ajax与原生Ajax
    • BootStrap的使用
  • 何时
    • 3天
  • 如何
    • JQuery：菜鸟教程或W3school
    • BootStrap：https://v4.bootcss.com/