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

嘉民617
193 阅读11分钟
原文链接： mp.weixin.qq.com

点击前端充电营，关注我们

前言

    来自一名多年工作经验的前端工程师倾情力作！     最近看到有很多小伙伴在提问，我是新手想学习前端应该怎么入门？我对前端很感兴趣但是一直搞不懂什么css、js到底怎么写的，为什么这个样式这样写总是不行呢？有没有系统学习css知识的书籍、课程推荐？     因此，我在这里特意整理了一份超详细的《前端入门进阶路线规划攻略》，主要分为三大方面，分别是：前端小白入门教程、前端进阶路线和前端常用工具网站大全。     声明：以下内容全部为最新原创，旨在为新人提供一个入门的要点整理，所以可能更多的是偏基础一点。 一、前端小白入门教程     作为一名前端小白，或者刚刚接触这个领域没多久的新人，需要关心的知识点有哪些呢?
  1. HTML
    什么是html?下面这个就是最简单的例子： 
<!DOCTYPE><html>  <head></head>  <body></body></html>
    所谓html，全称是Hyper Text Marked Language，即超文本标记语言。     它是1989年被一位英国计算机科学家：蒂姆·伯纳斯-李提出，应用于浏览器的一种标记语言。时至今日，它已经经过多次的修订和发展，最新版是2014年作为W3C推荐标准发布的HTML 5。     简单了解一下它的历史，对于我们并没有坏处，知识需要沉下心来慢慢感悟。     Html的书写很容易，总是两个标签的互相嵌套，或者一个标签的自闭合（img、a等）。关于html知识点，我们主要了解下面几点：
  • html文档头部的!doctype声明；
    html发展史中，有过众多的版本，例如HTML 4.01 Strict、HTML 4.01 Transitional、HTML 5等等，Doctype主要作用在于告诉浏览器应该基于Html的哪个版本去解析文档，上面的<!DOCTYPE html>表示使用HTML 5去解析文档。
  • 了解常用的html元素有哪些；
    以下是我能想得起来的一些元素，自然就表示是常用的(ww)；
块状元素：body、div、p、h1-h6、ul、li、table、tr、td； 行内元素：span、a、i、strong； 行内块元素：input、img；
    块状元素指的是有自身宽高、可以设置margin和padding、占据一行、多个块状元素排列方式从上到下；     行内元素指的是自身没宽高、可以设置水平的margin和padding、不占据一行、多个行内元素排列方式从左到右；     行内块元素，自身可设置宽高、可以设置margin和padding、但是不占据一行、多个行内块元素排列方式也是从左到右。 为了方便小伙伴们理解，这里画了一个草图，相信能很容易就明白了。

  • 了解标签互相嵌套的原则；
    这些原则我都总结在下面了（注意这里所讲的全部都是本身标签定义的块元素或者行内元素，不是css设置了display样式之后的情况）：
  • 块元素可以包含行内元素，行内元素不能包含块元素；
  • p元素里面不能包含块级元素；
  • 特殊的块元素只能包含行内元素，不能再包含块元素，包括：h1-h6、p；
  • 特殊的元素下面只能包含特定的标签元素，例如：table下面是thead、tbody，ul下面是li，ol下面是li，dl下面是dt、dd，如果有错误嵌套的话html会将其转为正确的嵌套标签；
  • 至于转换规则是如何，这里贴一下很久以前看过的一篇文章：（由于公众号不能贴链接，所以有兴趣的小伙伴可以百度去搜索文章：How browsers work） http://taligarsiel.com/Projects/howbrowserswork1.htm#Introduction
    文章主要是讲浏览器的渲染机制的，其中有提到如果有错误的嵌套标签，不同浏览器会如何如何处理，有兴趣的同学可以去看一下。
  • 了解常用的meta标签作用； 
<!-- 设置页面charset --><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- 设置页面的宽高比，主要用于移动端 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 设置页面标题（展示在浏览器tab栏） --><title>前端充电营</title><!-- 设置页面关键词，利于seo --><meta name="keywords" content="前端充电营"><!-- 设置页面内容，利于seo --><meta name="description" content="专注于前端领域技术分享"><!-- 设置网页作者 --><meta name="author" content="嘉民617">

关于html的知识，暂时只需要了解这些点，都是很基础的知识了。

2. CSS

    接着来到前端三板斧的第二板：CSS；     我想对于没接触前端的人来说，如果有某个原因使得ta对前端感兴趣，那么绝大部分跟CSS脱不了关系；     CSS很强大，你可以通过它编写出任意你想要的网站效果，也可以通过它制作各种各样酷炫的动画；     CSS又很矛盾，当你只懂点皮毛的时候，它表现出来的样式效果会让你崩溃，常常会为了某一处样式而耗费大半天的调试，却想不通为什么会这样子；     CSS的知识点其实很多很多，这里的话我只整理一些对于入门前端的同学能在日常开发中基本能够正常编写页面的必备点;
  • 了解什么是盒子模型；
    这个是最基础，也是面试中常问的考点之一了；     所谓盒子模型，指的其实就是一个html标签元素，这个元素包括margin、border、padding、 width几个样式，加上元素本身的content就构成了盒子模型；     不过值得注意的是，IE浏览器下的盒子模型和W3C标准盒子模型是不同的，具体区别看下面两个图相信就能完全了解：

    简单来说，也就是标准盒子模型的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>

    显然，浮动的子元素不会把父元素撑开，所以导致看起来子元素排在了两个元素的上方；     那么，怎么解决这个问题呢？     解决方案有两个：
  • 给父元素显示设置高度；
  • 利用clear:both;属性清除浮动
    设置高度的方案不再赘述，这里演示一下如何使用clear: both;来清除浮动： 
.main:after {    content: "";    display: block;    clear: both;}
    在main元素后方增加上面代码，看下效果：

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

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

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

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

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

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

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

  • 四个位置的值组成的一个组合，用a.b.c.d来表示，当a相同时，比较b，值较大的组合优先级较高，以此类推；
  • 四个位置的值生成规则如下
    • 如果html标签的style属性中该样式存在，则a = 1；
    • 选择器中id选择器的个数作为b的值；
    • 其他属性以及伪类的总数量作为c的值，如'.con'，':hover'等；
    • 元素名和伪元素的总数量作为d的值，如'div'，':after'等；
    注意：* 的组合值为0.0.0.0

  • 清晰地知道块状元素、行内元素和行内块元素在某些场景会有什么表现；

    这一点虽然看起来比较空泛，但其实这是在工作中经常都会碰到的问题；     前端需要写页面，页面就会涉及到布局，布局就会跟各种div打交道；只有清楚了解它们各自的特性，才会在编写页面时候得心应手；     这里列举几条比较常见但是又容易被忽略的特性：
  • 块状元素默认会占据当前行内父元素剩余的所有空间，所以有时候不需要设置width属性；
  • 行内元素只会占据 元素本身的宽度大小，并且设置宽高也无效；
  • 行内元素无法设置上下margin、padding，但是可以设置左右margin、padding；
  • 要用text-align:center使得元素居中，需要将子元素设置为行内元素或者行内块元素；
  • 当发现行内元素上下没对齐的时候，可以试一下vertical-align属性，它可以设置px值、百分比等等，是布局的好手；
  • 元素设置了width: 100%;的时候你就要小心了，因为所有的border、padding属性都会导致滚动条的出现，如果想避免这种情况的话，你可以设置box-sizing: border-box;（使用IE盒子模型）
  • 想要一个div出现滚动条的条件，该div设置了overflow: auto或scroll，其子元素内容足够多，其父元素或者该div本身有固定高度，并且其父元素设置了overflow: hidden;
   更多特性就不再一一总结了，这些小伙伴们也可以在以后的编码过程中自己总结；不过注意到以上几点的话，很多时候可以避免不知原因的坑；     还有css样式中还有position属性，css3属性没有提到，可能以后也会再开一篇新文章来总结一下我个人的经验；     css篇就先到这里了，剩下还有js的入门篇，但是我看了下篇幅已经很长快5000字了，本来没打算写到这么多的没想到展开的有点多（汗...），js的话就放到下一期吧；     喜欢的小伙伴可以点个赞、点个关注，你的支持是我最大的动力！

都0202年了，你还不知道javascript有几种继承方式？

简单而面试中又常见的知识点：JS执行机制

 

avatar
文章
阅读
粉丝