导图社区 前端知识技术路线图
- 73
- 3
- 举报
前端知识技术路线图
前端知识技术路线图，包括代码编写规范、HTML5、CSS3、JavaScript、JQuery与BootStrap。
编辑于2022-05-17 21:56:48- 技术
- 前端知识
- 相似推荐
- 大纲
前端知识技术路线图
注意
目前不考虑兼容性，请使用谷歌浏览器
代码编写规范
推荐使用小写元素名
关闭所有 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/