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

叁歲伎倆 2022-11-19 01:15 148阅读 0赞

![74fba52137160abf394fd2d48dd93528.png][]

## 前言： ##

笔者曾经一度很迷茫，在选择入门前端以后学习了 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 表单相关元素和属性**  
![fd324a12cb22c48c7e9cafdd435a5150.png][]

##### 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. 弹性盒模型**

![78a308ab49b9b2a1eee509858e491167.png][]

##### JavaScript基础篇 #####

**1. JavaScript基础**

*  外部引入 js 文件：

*  关键词  
    ![a0eb7b1bc278fc50d41016b42e145cc1.png][]
 *  变量名大小写敏感
 *  命名规范

1.  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;

![165b7de87d4f1ba7b6eb76cfac2e722b.png][]

**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. 字符串**

![b57394a302562aeb6a1343b03e7c7f04.png][]

#### 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. 命名视图**

![3154f3e899275d260e20b6e4d2c174f5.png][]

##### 工具【webpack基础知识】 #####

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

![cf50d0f7452809644e53b984a8e7dbd1.png][]

#### 最后 ####

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

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

![【2021年前端面试题精选大全】][2021]

[74fba52137160abf394fd2d48dd93528.png]: /images/20221022/b2a7c8e812864347841f48c181aac0af.png
[fd324a12cb22c48c7e9cafdd435a5150.png]: /images/20221022/a237518baf5048458425f9f35626ebfb.png
[78a308ab49b9b2a1eee509858e491167.png]: /images/20221022/1b2d5a6f6b474f70b7abaf9b9e33e64e.png
[a0eb7b1bc278fc50d41016b42e145cc1.png]: /images/20221022/011c61b3ad3b4918a897aebe9081b79f.png
[165b7de87d4f1ba7b6eb76cfac2e722b.png]: /images/20221022/bfd58625cdc24990ab18ae445d249409.png
[b57394a302562aeb6a1343b03e7c7f04.png]: /images/20221022/b43eb546dec64a55a661ccaeefe9820e.png
[3154f3e899275d260e20b6e4d2c174f5.png]: /images/20221022/5e9550794b744082b4dcb34f25e2acbe.png
[cf50d0f7452809644e53b984a8e7dbd1.png]: /images/20221022/e824f388a41e49d4816be3e9e3feb595.png
[PDF]: https://jq.qq.com/?_wv=1027&k=vVchJU6T
[2021]: /images/20221022/639eff65cb6f49a3b1f96d7bfc29e66d.png