html和css学习总结

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

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

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

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

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

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

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

 当为父盒子设为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学习总结

一、网页设计师考试：

1、网络应用师考试满分为1000分，分为理论试题部分和实践试题部分，其中理论试题部分满分为400分，实践试题部分满分为600分。

2、网络应用师考试时间为140分钟，其中理论考试部分限时35分钟，实践部分限时105分钟。

★★ 特别重要 ★ 重要 未作标识的为一般了解内容

二、考试大纲：

第一部分总考核要点：DreamweaverMX基础知识与高级应用

1、DreamweaverMX界面

★ 2、设置图片、超连接及使用历史记录

★★ 3、表格和页面布局

★ 4、表单、框架与样式表

★★ 5、层、模板与库

★ 6、时间轴、动态HTML行为举多媒体的应用

7、连接管理与网站上传

第二部分总考核要点：FireworksMX基础知识与高级应用

1、FireworksMX界面

★ 2、库、样式及URL的应用

★ 3、切片与热点的概念

★★ 4、按钮、导航栏及动画元件的应用

5、图形优化与输入输出

第三部分总考核要点：FlashMX基础知识与高级应用

1、FlashMX界面

★ 2、绘图工具箱的应用

★ 3、文本与位图的编辑与处理

★★ 4、元件的创建与应用用

★ 5、Flash Action 的应用

6、动画的测试、优化与发布

第四部分总考核要点：Photoshop7.0基础知识与高级应用

1、Photoshop7.0界面

★★ 2、选区、变换及路径的应用

★ 3、图层与蒙板的应用

★★ 4、色彩的调整

★ 5、滤镜的应用

在哪考我就不知道了！

参考资料：http://www.gx.xinhuanet.com/edu/xhb2005/cp/5-04-05/kaoshi/wy.htm

参考资料：http://zhidao.baidu.com/question/16392072.html?fr=qrl3

拉勾教育html怎么样？问出这问题说明朋友你还是不懂行！html是前端技能里最基础的一部分，面试里很少会重点聊这些的！重点还是建议放在Vue和React这些框架上。

至于拉勾，一同事就是拉勾内推过来的，当初面试面的他一面，感觉技术还算扎实，现在工作也能独当一面。印象里他们课还挺实用，挺贴合大厂工作需求。组里也有一些外包的人，好多也都是培训班出来的，就能写些简单的代码，能力水平咋样就不敢恭维了。

个人觉得还是从就业角度看吧，保你内推，教的技术够实战就够了。建议找大厂工作的帮看下课程大纲。有些技术out很久了，还能拿出来充数的公司多半都不靠谱，就别报了，毕竟大厂试用期考核也不是摆设，技术不够，还是很难转正。

---