前端路线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数据库 (了解)
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/
收藏
0 条评论
下一页