

首页  思维导图  详情



前端路线v2.3.3

2018-03-27 16:35:58   0  举报





AI智能生成

前端路线图，仅供参使用。包含HTML5+CSS3+JavaScript

前端路线

前端开发

软件开发

模版推荐

作者其他创作

大纲/内容

注意

目前不考虑兼容性，请使用谷歌浏览器

代码编写规范

推荐使用小写元素名

关闭所有 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数据库（了解）

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/

 Collect

Get Started

新流程司机发布路线V1.0

 Collect

Get Started

v y a

 Collect

Get Started

新流程乘客发布路线V1.0

 Collect

Get Started

技能学习路线





0 条评论

下一页