前端也能轻松年薪20w+？超详细前端入门攻略拿去！

2020-05-22  本文已影响0人  欧小白617

前言

来自一名多年工作经验的前端工程师倾情力作！

最近看到有很多小伙伴在提问，我是新手想学习前端应该怎么入门？我对前端很感兴趣但是一直搞不懂什么css、js到底怎么写的，为什么这个样式这样写总是不行呢？有没有系统学习css知识的书籍、课程推荐？

因此，我在这里特意整理了一份超详细的《前端入门进阶路线规划攻略》，主要分为三大方面，分别是：前端小白入门教程、前端进阶路线和前端常用工具网站大全。

声明：以下内容全部为最新原创，旨在为新人提供一个入门的要点整理，不会只是简单的丢一大堆链接让你自己去看。

一、前端小白入门教程

作为一名前端小白，或者刚刚接触这个领域没多久的新人，需要关心的知识点有哪些呢?

1. HTML

什么是html?下面这个就是最简单的例子：

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

所谓html，全称是Hyper Text Marked Language，即超文本标记语言。

它是1989年被一位英国计算机科学家：蒂姆·伯纳斯-李提出，应用于浏览器的一种标记语言。时至今日，它已经经过多次的修订和发展，最新版是2014年作为W3C推荐标准发布的HTML 5。

简单了解一下它的历史，对于我们并没有坏处，知识需要沉下心来慢慢感悟。

Html的书写很容易，总是两个标签的互相嵌套，或者一个标签的自闭合（img、a等）。

关于html知识点，我们主要了解下面几点：

块状元素：body、div、p、h1-h6、ul、li、table、tr、td；
行内元素：span、a、i、strong;
行内块元素：input、img；

块状元素指的是有自身宽高、可以设置margin和padding、占据一行、多个块状元素排列方式从上到下；

行内元素指的是自身没宽高、可以设置水平的margin和padding、不占据一行、多个行内元素排列方式从左到右；

行内块元素，自身可设置宽高、可以设置margin和padding、但是不占据一行、多个行内块元素排列方式也是从左到右。

为了方便小伙伴们理解，这里画了一个草图，相信能很容易就明白了。

image.png
image.png
image.png

How browsers work

image.png

文章主要是讲浏览器的渲染机制的，其中有提到如果有错误的嵌套标签，不同浏览器会如何如何处理，有兴趣的同学可以去看一下。

2. CSS

接着来到前端三板斧的第二板：CSS；

我想对于没接触前端的人来说，如果有某个原因使得ta对前端感兴趣，那么绝大部分跟CSS脱不了关系；

CSS很强大，你可以通过它编写出任意你想要的网站效果，也可以通过它制作各种各样酷炫的动画；

CSS又很矛盾，当你只懂点皮毛的时候，它表现出来的样式效果会让你崩溃，常常会为了某一处样式而耗费大半天的调试，却想不通为什么会这样子；

CSS的知识点其实很多很多，这里的话我只整理一些对于入门前端的同学能在日常开发中基本能够正常编写页面的必备点，不多说了，请往下看吧~

这个是最基础，也是面试中常问的考点之一了；

所谓盒子模型，指的其实就是一个html标签元素，这个元素包括margin、border、padding、
width几个样式，加上元素本身的content就构成了盒子模型；

不过值得注意的是，IE浏览器下的盒子模型和W3C标准盒子模型是不同的，具体区别看下面两个图相信就能完全了解：

image.png
image.png

简单来说，也就是标准盒子模型的width属性，仅仅表示内容的宽度，而不包含padding和border的宽度；而IE盒子模型的width属性，包含内容、padding和border的宽度；

这已经是历史遗留原因了，从开发角度来说，IE的盒子模型更加符合我们的心意；w3c后面出了一个折中方案，也就是可以通过设置box-sizing: border-box;属性来将盒子模型修改为IE盒子模型；

了解什么是浮动，以及如何清除浮动；

浮动元素的设置很简单，只要设置float: left;或者float: right;属性之后就可以将元素变为浮动的状态，也就是元素会贴在父元素的左边或者右边；

浮动元素有什么危害呢？

设置了浮动的元素，将无法撑开父元素，所以会导致其他的div会堆积在上方，形成样式错乱；来看个简单的代码例子：

<body>
    <div class="main">
        这里是父元素
        <div class="inside">前端充电营</div>
    </div>
    <div class="other">这里是其他元素</div>
</body>

下面是对应的css样式：

<style>
.main {
    background-color: aqua;
}
.inside {
    float: left;
    width: 100px;
    height: 100px;
    background-color: pink;
}
.other {
    background-color: yellow;
}
</style>
image.png

显然，浮动的子元素不会把父元素撑开，所以导致看起来子元素排在了两个元素的上方；

那么，怎么解决这个问题呢？

解决方案有两个：

设置高度的方案不再赘述，这里演示一下如何使用clear: both;来清除浮动：

.main:after {
    content: "";
    display: block;
    clear: both;
}

在main元素后方增加上面代码，看下效果：

image.png

可以看到，浮动被成功清除；

关于css的浮动知识点，其实可以展开很多，这里只是提了几个注意的点，小伙伴们下来可以自己再去详细了解下~

这也是很基本的css必备知识点，也就是当css的样式相同时，应该渲染哪一个样式呢？这里面也是有一套很详细的标准；

我们都知道css有三种方式可以引入：元素style属性(行内样式)、头部style(内部样式文件)、link标签引入(外部样式文件)；

这几种引入方式的优先级为：行内样式 > 内部样式文件 = 外部样式文件；当两者优先级相同时，哪一个文件靠后，则它的优先级会更高；

除了文件的优先级，同文件的样式又如何比较呢？

首先我们要知道css是有多种选择器的，优先级从大到小分成四档，这四档我们可以看成是一个0.0.0.0的数字；下面是我总结的比较详细的层叠规则：

注意： 的组合值为0.0.0.0*

这一点虽然看起来比较空泛，但其实这是在工作中经常都会碰到的问题；

前端需要写页面，页面就会涉及到布局，布局就会跟各种div打交道；只有清楚了解它们各自的特性，才会在编写页面时候得心应手；

这里列举几条比较常见但是又容易被忽略的特性：

更多特性就不再一一总结了，这些小伙伴们也可以在以后的编码过程中自己总结；不过注意到以上几点的话，很多时候可以避免不知原因的坑；

还有css样式中还有position属性，css3属性没有提到，可能以后也会再开一篇新文章来总结一下我个人的经验；

css篇就先到这里了，剩下还有js的入门篇，但是我看了下篇幅已经很长快5000字了，本来没打算写到这么多的没想到展开的有点多（汗...），js的话就放到下一期吧；

喜欢的小伙伴可以点个赞、点个关注，你的支持是我最大的动力！

image.png
上一篇 下一篇

猜你喜欢

热点阅读