前路漫漫，写给初级前端的学习指南

前言：

笔者曾经一度很迷茫，在选择入门前端以后学习了 HTML 和 CSS，接着学习了JavaScript，但是好像遇到了一些瓶颈，不知道该怎样继续深入下去。

相信这也是很多初学前端的人遇到的共同问题，这篇文章，笔者想分享一些整理出的路线，帮助各位初学前端的伙伴少走一些弯路。

这篇文章会提到学习笔记，路线图和一下面试资料，如果你还在初学的阶段，不必太焦虑，可以把这篇文章作为一个学习的路线图，在未来的时日里朝着这个方向努力就好。

基础能力

HTML(5)篇

1. html 基本结构

• html 标签是由<>包围的关键词。
• html 标签通常成对出现，分为标签开头和标签结尾。
• 有部分标签是没有结束标签的，为单标签，单标签必须使用 / 结尾。
• 页面所有的内容，都在 html 标签中。
• html 标签分为三部分：标签名称，标签内容，标签属性。
• html 标签具有语义化，可通过标签名能够判断出该标签的内容，语义化的作用是网页
• 结构层次更清晰，更容易被搜索引擎收录，更容易让屏幕阅读器读出网页内 容。
• 标签的内容是在一对标签内部的内容。
• 标签的内容可以是其他标签。

2. 标签属性

• class 属性：用于定义元素的类名
• id 属性：用于指定元素的唯一 id，该属性的值在整个 html 文档中具有唯一 性
• style 属性：用于指定元素的行内样式，使用该属性后将会覆盖任何全局的 样式设定
• title 属性：用于指定元素的额外信息
• accesskey 属性：用于指定激活元素的快捷键
• tabindex 属性：用于指定元素在 tab 键下的次序
• dir 属性：用于指定元素中内容的文本方向，属性只有ltr或rtl两种
• lang 属性：用于指定元素内容的语言

3. 事件属性

• window 窗口事件
  onload：在网页加载结束之后触发
  onunload：在用户从 网页离开时发生（点击跳转，页面重载，关闭浏览器窗口等）
• form 表单事件
  onblur：当元素失去焦点时触发
  onchange：在元素的值被 改变时触发
  onfocus：当元素获得焦点时触发
  onreset：当表单中的重置 按钮被点击时触发
  onselect：在元素中文本被选中后触发
  onsubmit：在 提交表单时触发
• keyboard：键盘事件
  onkeydown：在用户按下按键时触发
  onkeypress：在 用户按下按键后，按着按键时触发。该属性不会对所有按键生效，不生效的 有，alt,ctrl,shift,esc
• mouse 鼠标事件
  onclick：当在元素上发生鼠标点击时触发，
  onblclick：当在元素上发生鼠标双击时触发，
  onmousedown：当元素上按下鼠标按钮时 触发，
  onmousemove：当鼠标指针移动到元素上时触发，
  onmouseout：当元 素指针移出元素时触发，
  onmouseup：当元素上释放鼠标按钮时触发。Media 媒体事件，
  onabort：当退出时触发，
  onwaiting：当媒体已停止播放但打算 继续播放时触发。

4. 文本标签

• 段落标签 <p></p>，段落标签用来描述一段文字
• 标题标签 <hx></hx>，标题标签用来描述一个标题，标题标签总共有六个级 别，<h1></h1> 标签在每个页面中通常只出现一次
• 强调语句标签，<em></em>，用于强调某些文字的重要性
• 更加强调标签，<strong></strong> 和 <em> 标签一样，用于强调文本，但它 强调的程度更强一些
• 无语义标签 <span></span>，标签是没有语义的
• 短文本引用标签 <q></q>，简短文字的引用
• 长文本引用标签 <blockquote></blockquote>，定义长的文本引用
• 换行标签 <br/>

5. 多媒体标签

• 链接标签，<a></a>
• 图片标签，<img/>
• 视频标签，<video></video>
• 音频标签，<audio></audio>

6. 列表

• 无序列表标签 ul,li，<ul></ul> 列表定义一个无序列表，<li></li> 代表 无需列表中的每一个元素
• 有序列表 ol,li
• 定义列表 <dl></dl>，定义列表通常和 <dt></dt> 和 <dd></dd> 标签一起使 用

7. 表格

• 表格标签 <table></table>
• 表格的一行 <tr></tr>
• 表格的表头 <th></th>
• 单元格 <td></td>
• 表格合并，同一行内，合并几列 colspan="2"，同一列内，合并几行 rowspan="3"

8. 表单标签
9. 其他语义化标签
10. 网页结构
11. 模块划分
12. HTML5 的优势
13. HTML5 废弃元素
14. HTML5 新增元素
15. HTML5 表单相关元素和属性

CSS(3)篇

1. CSS 代码语法

• CSS 全称为层叠样式表(Cascading Style Sheets)，它主要是用于定义 HTML 内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
• CSS 代码通常存放在 <style></style> 标签内
• CSS 样式由选择符和声明组成，而声明又由属性和值组成
• 选择符{ 属性:值 }
• 选择符：又称选择器，指明网页中要应用样式规则的元素

2. CSS 放置位置

• 行内样式，不建议使用
• 内联式样式表
• 外联样式表

3. CSS 的继承

• CSS 的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于 某个特定 html 标签元素，而且应用于其后代。
• 不可继承样式：
  display、margin、border、padding、background、height、 min-height、max-height、width、min-width、max-width、overflow、 position、left、right、top、bottom、z-index、float、clear
• 可 以 继 承 的 样 式 ：
  letter-spacing 、 word-spacing 、 white-space 、line-height 、color 、 font、 font-family 、font-size 、 font-style、 font-variant 、 font-weight 、 text-decoration 、 text-transform 、 direction、visibility、cursor

4. 选择器的种类

• 标签选择器：通过标签的名字，修改 css 样式
• 通配符选择器：选择页面中所有的元素
• 属性选择器
• 后代选择器：选择某个父元素下面所有的元素
• 一级子元素选则器：选择某个父元素的直接子元素，后代选择器是选择父元 素的所有子孙元素，一级子元素原则器只选择第一级子元素，不会再向下查 找元素
• id 选择器：通过 id 查找页面中唯一的标签
• class 选择器：通过特定的 class（类）来查找页面中对应的标签，以 .class 名称
• 伪类选择器:
  :hover 鼠标移入某个元素;
  :before 在某个元素的前面插入内容;
  :after 在某个元素的后面插入内容
• 群组选择器：可以对多个不同的选择器设置相同的样式

5. 背景样式

• 背景颜色 background-color
• 背景图片 background-image

background-image:url(bg01.jpg); 

• 背景图片位置background-position

background-position:10px 100px; // 代表坐标 x，y 轴 

• 背景图片重复 background-repeat

background-repeat:no-repeat
// no-repeat 设置图像不重复
// round 自动缩放直到适应并填充满整个容器 
// space 以相同的间距平铺且填充满整个容器 

• 背景图片定位 background-attachment

background-attachment:fixed
// 背景图像是否固定或者随着页面的其余部分滚动 
// background-attachment 的值可以是 scroll（跟随滚动），fixed（固定） 

• background 缩写

background:#ff0000 url(bg01.jpg) no-repeat fixed center

6. 字体样式

• 字体族 font-family

font-family:"微软雅黑","黑体"; 

• 字体大小

font-size font-size:12px; 

网页默认字体大小是 16px

• 字体粗细

font-weight font-weight:400;

normal（默认）
bold（加粗）
bolder（相当于 <strong> 和 <b> 标签）
lighter （常规）
100 ~ 900 整百（400=normal，700=bold）

• 字体颜色 【color】
  颜色的英文单词 color:red;
  十六进制色：color: #FFFF00;
  RGB(红绿蓝) color:rgb(255,255,0)
  RGBA（红绿蓝透明度）A 是透明度在 0~1 之间取值。color:rgba(255,255,0,0.5)
• 字体斜体
  font-style font-style:italic

7. 文本属性

• 行高

line-height line-height:50px;

可以将父元素的高度撑起来

• 文本水平对齐方式 【text-align】
  left 左对齐
  center 文字居中
  right 右对齐
• 文本所在行高的垂直对齐方式 【vertical-align】
  baseline 默认
  sub 垂直对齐文本的下标，和 <sub> 标签一样的效果
  super 垂直对齐文本的上标，和 <sup> 标签一样的效果
  top 对象的顶端与所在容器的顶端对齐
  text-top 对象的顶端与所在行文字顶端对齐
  middle 元素对象基于基线垂直对齐
  bottom 对象的底端与所在行的文字底部对齐
  text-bottom 对象的底端与所在行文字的底端对齐
• 文本缩进

text-indent text-indent:2em;

通常用在段落开始位置的首行缩进

• 字母之间的间距 letter-spacing
• 单词之间间距 word-spacing
• 文本的大小写 text-transform
capitalize 文本中的每个单词以大写字母开头
  uppercase 定义仅有大写字母
  lowercase 定义仅有小写字母
• 文本的装饰 text-decoration
none 默认
  underline 下划线
  overline 上划线
  line-through 中线
• 自动换行 word-wrap

word-wrap: break-word;

8. 基本样式

• 宽度 width

width:200px; 

定义元素的宽度

• 高度

height height:300px
//元素默认没有高度 
//需要设置高度 
//可以不定义高度，让元素的内容将元素撑高 

• 鼠标样式 cursor

cursor:pointer //定义鼠标的样式 
//default 默认
//pointer 小手形状 
//move 移动形状 

• 透明度 opacity

opacity:0.3 
//透明度的值 0~1 之间的数字，0 代表透明，1 代表完全不透明 
//透明的元素，只是看不到了，但是还占据着文档流 

• 可见性 visibility

visibility:hidden;
//visible 元素可见 
//hidden 元素不可见 
//collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

• 溢出隐藏 overflow
  设置当对象的内容超过其指定高度及宽度时如何显示内容

visible 默认值，内容不会被修剪，会呈现在元素框之外 
hidden 内容会被修剪，并且其余内容是不可见的 
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 

• 边框颜色 outline

input 文本输入框自带边框，且样式丑陋，我们可以通过 
outline 修改边框 
outline:1px solid #ccc; 
outline:none 清除边框

9. 样式重置
10. 盒模型样式
11. 浮动float
12. 定位position
13. 浏览器默认样式
14. CSS3 新增选择器
15. CSS3 新增属性
16. 新增变形动画属性
17. 3D 变形属性
18. CSS3 的过渡属性
19. CSS3 的动画属性
20. CSS3 新增多列属性
21. CSS3 新增单位
22. 弹性盒模型

JavaScript基础篇

1. JavaScript基础

• 外部引入 js 文件：

<script src="main.js"></script>

• 关键词
  

• 变量名大小写敏感

• 命名规范

2. JavaScript 数据类型

• 字符串(String)
• 数字（Number）
• 布尔值（Boolean）
• 未定义（Undefined）

//undefined 有两种结果 
//1、真的没定义 
alert(typeof dada); //undefined 
//2、定义了，但是没有放东西进去 
var dada; alert(dada); //undefined 

undefined：表示未定义或只声明未给值的变量

• 对象（Object） js 中内置了如下的对象：
  Object 是所有 JS 对象的超类(基类），JS 中的所有对象都是继承自 Object 对象的
  Array 数组对象 定义数组属性和方法
  Number 数字对象
  Boolean 布尔对象 布尔值相关
  Error 错误对象 处理程序错误
  Function 函数对象 定义函数属性和方法
  Math 数学对象
  Date 日期对象
  RegExp 对象正则表达式对象 定义文本匹配与筛选规则
  String 字符串对象 定义字符串属性和方法

3. 算术运算

var y = 3;

4. 强制转换

• 字符串转数字 parseInt() parseFloat() isNaN()
• 数字转为字符串 toString()

5. 赋值运算
6. 关系运算
7. 逻辑运算
8. 三元运算
9. 分支循环
10. switch
11. while
12. do-while
13. for
14. break和continue
15. 数组
16. 数组方法
17. 二维数组
18. 字符串

Vue框架

1. MVC模式
MVC 模式是移动最广泛的软件架构之一，把应用程序强制性地划分为三部分：模 型（Model）、视图（View）和控制器（Controller）。

2. MVVM模式
MVVM 模式是把 MVC 模式的 Controller 改成 ViewModel。View 的变化会自动更新 ViewModel，ViewModel 的变化也会自动同步到 View 上显示。

3. 基础语法
示例：

• el：把 Vue 实例挂载到 DOM 元素上，通过 id 绑定 html 元素
• data：数据对象，Vue 实例的数据（注意：数据不要与 methods 中的方法重 名）
• methods：事件对象，包含事件所要触发的函数（注意：方法名不要与 data 中的数据重名）
• computed：计算属性
• watch：监听器
• directives：自定义指令
• 钩子函数（8 个）：不同生命周期引发的动作
• 路由钩子函数（3 个）：路由组件在不同状态时触发
• components：组件容器
• template：定义模板，可以是字符串，也可以是”#“选择器
• props：用于接收来自父组件的数据
• router：路由
• store：vuex状态

4. 实例属性/方法
5. 生命周期
6. 计算属性
7. 数组的更新检查
8. 事件对象
9. Vue组件
10. 路由使用
11. 路由导航
12. 嵌套路由
13. 命名视图

工具【webpack基础知识】

1. webpack的特点
2. webpack的缺点
3. 安装
4. webpack基本应用
5. 配置文件入门

最后

篇幅有限，文章中的前端初阶笔记，学习路线图，和前端面试题都可以加入前端裙：【953352883】领取完整版PDF（含答案解析）。

《2021年前端面试题精选大全》内容大纲包括HTML，CSS，JavaScript，jQuery，浏览器，HTTP，React，小程序