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

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

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

基础能力

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. 样式重置
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

资料领取方式：戳这里获取

4/03/13/H4lCoPEF.jpg" />

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

资料领取方式：戳这里获取