Web前端的学习误区

网页制作是计算机专业同学在大学期间都会接触到的一门课程，而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver，这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便。

入门快、见效快让我们在不知不觉中已经深深爱上了网页制作。此时，很多人会陷入一个误区，那就是既然借助这么帅的IDE，通过鼠标点击菜单就可以快速方便地制作网页。

那么我们为什么还要去学习HTML、CSS、JavaScrpt、jQuery等这些苦逼的代码呢?这不是舍简求繁吗?

但是随着学习的深入，就会发现我们步入了一种窘境——过分的依赖IDE导致我们不清楚其实现的本质，知其然但不知其所以然。

因此在页面效果出现问题时，我们便手足无措，更不用提如何进行页面优化以及完成一些更高级的应用了。其原因是显而易见的——聪明的IDE成全了我们的惰性，使我们忽略了华丽的网页背后最本质的内容——code。

那么我们应该怎么学习前端开发这门技术呢？ 现在很多小伙伴喜欢在互联网上找视频资料学习网页制作，但是光看视频你是不可能学会网页制作的，没有人指导你，而且很多视频已经过时了，并没有什么用!  如果你真的想学习网页制作这门技术，你可以来这个裙，前面是494，中间是零六思，最后是934！在这里有最新的HTML课程免费学习 也有很多人指导你进步，不需要你付出什么，只要你是真心想学习的，随便看看的就不要加了，加了也是浪费大家的时间。

正确的方向胜过无谓的努力

有两只蚂蚁想翻越一段墙，寻找墙那头的食物。一只蚂蚁来到墙脚就毫不犹豫地向上爬去，可是每当它爬到大半时，就会由于劳累、疲倦而跌落下来。虽然它不气馁，一次次跌下来，又迅速地调整一下自己，重新开始向上爬去

另一蚂蚁观察了一下，决定绕过墙去。很快，这只蚂蚁绕过墙来到食物前，开始享受起来而另一只蚂蚁还在不停地跌落下去又重新开始。

很多时候，成功除了勇气、坚持不懈外，更需要方向。也许有了一个好的方向，成功来得比想象的更快。如果在错误的路上奔跑,再怎么努力也是白搭。学习Web前端也是如此，首先应该选择一个正确的学习路线。

多去练习，多记，多敲。慢慢的你就会记住他们，熟能生巧，千万不要手懒。

随着互联网的发展，前端的概念也在悄然发生的改变。早些年学完HTML+CSS就可以找到一份很好的工作，后来企业又要求必须会写特效，所以很多人又开始学jQuery，可是现在又要求必须要会js原生。原来必须要使用JS才能实现的一部分特效，现在HTML5新增的标签已经可以帮我们实现了，原来要写一堆jquery做出的动画，现在用CSS3也能实现了。

学了这么多，够吗？显然不行！！！原来前端普通的DOM操作数据，也逐渐的被像vue.js这样的MVVM框架所取代，原来要依靠PHP、.NET、JAVA等语言开发后台才能实现数据的前后台交互，现在node.js也出来了，它直接让JS可以在服务器端运行了，借助它的模块化可以完成所有的功能。从某种意义上来讲，搞web开发，后台语言甚至变成了配角，直接写个接口，剩下的什么都不用你管，我前端全包了。

所以说，学完HTML+CSS能算是万里长征刚走完了第一步，你要完成PC端的案例简直是太多了，网站随例一搜就是一大堆，京东、淘宝你直接模仿制就可以了。下一步要把js、node.js、vue.js好好学一下，特别是移动端开发、微信小程序，因为你面试的时候基本上没有人会让你做个PC页面，问的都前端特别流程的技术和框架。

希望我的回答能帮到你。

本周我大概用了六天的时间完成了html和css的复习、制作考核网页以及完成了学长布置的五个学习小任务，总的来说，虽然完成了这一周的学习，但是对于一些知识点掌握的不是很牢固，使用不太熟练，之后还需要多加练习，对于本周的学习我有如下总结：

对于写网页需要的基础知识一定要牢牢掌握，比如，每个网页都需要的导航栏，一定要熟练掌握；下拉菜单最常用的是 ul 和 li 标签，也就是列表元素；对于一些标签，一定要知道是块级元素还是行内元素，要掌握他们之间的转换方法，这个也是非常常用的。对于css的盒子模型，一定要认真地学习，并且能熟练的运用。

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、 对齐和分配空白空间。

 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

 弹性容器内包含了一个或多个弹性子元素。

 注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

 当为父盒子设为flex布局，子元素的float、clear和vertical—align属性将失效

    flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置好排列方式

  flex布局父项常见的属性：

                1.flex-diretion:设置主轴的方向

                 默认的主轴方向是x轴方向，水平方向；默认的侧轴方向是y轴方向，水平向下

                    属性值：row 默认值从左到右

                           row-reverse 从右到左

                           column 从上到下

                           column 从下到上

                2.jusity-content:设置主轴上的子元素排列方式

                    属性值： flex-start 默认值从头开始 如果主轴是x轴，则从左到右

                             flex-end  从尾部开始排列

                             center 在主轴居中对齐（如果主轴是x轴则水平居中）

                             space-around平分剩余空间

                             space-between 先两边贴边再平分剩余空间（重要）

                3.flex-wrap:设置子元素是否换行

        属性值： nowrap 默认子元素不换行 如果装不下，会缩小子元素的宽度，一块放到父元素中

                        wrap 换行

                4.align-content:设置侧轴的子元素排列方式（多行 需要换行） 单行无效

                    属性值： flex-start 默认值在侧轴的头部开始排列

                             flex-end  在侧轴的尾部开始排列

                             center 在侧轴中间显示

                             space-around 子轴在侧轴平分剩余空间

                             space-between 轴在侧轴先分布在两头，再平分剩余空间

                             stretch   设置子项元素高度平分父元素高度

                5.align-items:设置侧轴的子元素排列方式（单行）

                    属性值： flex-start 从上到下

                             flex-end  从下到上

                             center    挤在一起（垂直居中）

                             stretch   拉伸（默认值） 使用时子盒子不要给高度

                    例如：子元素居中  默认主轴是x轴

                       主轴居中 jusity-content:center

                       侧轴居中 align-items:center

                6.flex-flow:复合属性，相当于同时设置了flex-diretion和flex-wrap

            flex布局子项常见属性

                1.flex定义子项目分配剩余空间，用flex来表示占多少份数

                    flex:<number>默认值 0

                2.align-self控制子项自己在侧轴的排列方式

                3.order属性定义子项的排列顺序（前后顺序）

 给父元素添加 display:grid

      display关于网格的取值分为两个，grid(块网格)和 inline-grid (行内网格 行内块)

      grid 容器从上向下排列

      inline-grid 容器从左向右排列

   grid-template-row规定行属性

    grid-template-column规定列属性

    1.绝对大小（根据列数或者行数确定值得个数）

       grid-template-row：200px 200px 200px

       grid-template-column：200px 200px 200px

    2.百分比（根据列数或者行数确定值得个数）

       grid-template-row：33.33% 33.33% 33.33%

       grid-template-column：33.33% 33.33% 33.33%

    3.repeat函数

       grid-template-rows: repeat(3,33.3%)

       grid-template-columns: repeat(3,33.3%)

    4.repead auto-fill  自动填充

        grid-template-rows: repeat(auto-fill,33.3%)

        grid-template-columns: repeat(auto-fill,33.3%)

    5.fr 片段  

        grid-template-rows: 100px 1fr 300px

        grid-template-columns: 100px 1fr 300px

    6.minmax

       grid-template-rows:minmax(100px,200px) 200px 300px

       grid-template-columns:200px 200px 200px

    7.auto

        grid-template-rows: 100px auto 300px

        grid-template-columns: 100px auto 300px

    列间距

    1.grid-row-gap: 10px

      grid-column-gap: 10px

      复合写法

      grid-gap: 10px 10px

    指定区域

     1.grid-template-areas: 'a b c '

                                         'd e f'

                                        'g h i'

        区域合并时  需要让合并的区域名字相同

        grid-template-areas: 'a a c '

                                         'd e f'

                                         'g h i'

        .box div:nth-child(1){

            grid-area: a

        }

以上两种网页布局方式是我制作网页时比较常用的，也是学习前端必须掌握的。

除了以上这些，还有很多是我们需要掌握的，加油吧继续学习！！！！！！下周分享js学习总结

---