今天完成的事：

     了解关于任务四的深度理解：

          position的定位方式常用的四种：

            1.static(默认)

             所有元素在默认情况下的position属性值均为static

            用法为：在改变了元素position属性后可将元素重置为static让其回归到页面默认文档流里面。

            2.relative(相对定位)：

              让元素相对于原来的位置，即参照物为元素本身。进行位置调整（主要用于元素盒子的微调）。

              相对定位的占位不会随定位位置的调整而变化，简单说就是视觉上发生了变化，但元素仍在原有的默认位置，并没有脱离文档流。

             3.absolute(绝对定位)：

                 绝对定位是相对而言的，这个相对指的是绝对定位的参照物。设置了position：absolute的元素会通过最近的position属性非static定位的祖先元素来作为参照物偏移，从而确定元素位置。如果其祖先元素都没有设置过position属性非static定位时，则该元素最终会以html元素的位置为参照物进行位置偏移。

                   使用了absolute进行定位，该元素的display值会变更为block。而且会脱离文档流。

              4.fixed（固定定位）：

                   元素使用fixed定位时，元素的参照物为浏览器的窗口，且拉动滚动条元素位置不会发生改变。

                   会使元素脱离文档流，不占据空间。默认覆盖到非定位元素上。

                    该元素的的display值变更为block，默认宽度为内容宽度。

           哪些css属性可以设置为百分比，其计算原则是什么？

             可以使用百分比的属性：

             定位： top、right、bottom、left；全部可以兼容

              盒模型： height：基于包含该元素的块级元素对象的百分比高度

                            width：基于包含该元素的块级元素对象的百分比宽度                   

                            margin：相对于父元素的width进行计算

                            padding：相对于父元素的width进行计算

             背景：background-position，默认值为0%、0%，在功能上相当于 top，left。

                       background-size，相对于html的宽高进行计算

             文本：text-index，相对于父元素的宽度进行计算，从而缩进。

             字体：font-size，相对于父元素的字体大小进行计算。

         常见的表单元素，各有什么属性。

             form：定义供用户输入的表单。

                     属性：action、 属性值为提交地址

             fieldset：定义域，即输入区加有文字的边框。

             legend：定义域的标题，即边框上的文字。

             input：定义输入域，可设置type的属性，从而使其有不同的功能。（常用）

                    属性：当type属性值为text时，定义为单行文本输入框，属性name定义文本框的名称。属性size定义文本宽度，单位是单个字符的宽度，属性maxlength定义最多输入字符数，属性value定义文本框的默认初始值

                              type属性值为password时，定义为密码框，属性name定义密码框的名称。属性size定义密码框的宽度，单位是单个字符宽度。maxlength属性定义最多输入字符数。

                              type属性值为hidden时，定义为隐藏域，name属性定义隐藏域名称，value属性定义隐藏域的值

                              type属性值为radio时，定义为单选框，name属性定义单选框名称，单选框一般以组为单位使用，在同一组的单选框必须使用同一个名称。value属性定义单选框的值，在同一组中，值域必须是不同的。

                              type属性值为checkbox时，定义为多选框，name属性定义多选框的名称value属性定义多选框的值

                              type属性值为submit时，定义为提交按钮，name属性定义提交按钮名称，value属性定义按钮显示文字。

                              type属性值为reset时，定义为复位按钮，name属性定义复位按钮名称，value属性定义按钮显示文字。

                              type属性值为image时，定义为图像形式的提交按钮，src属性定义图像链接，alt属性定义图像缓冲不出来是显示的文本。 

                       其他type属性：button、

                       html5新增type属性：

                        1.search：input会呈现搜索框（与text类型唯一区别在于当鼠标覆盖时尾部会出现叉号可快速清除输入内容）

                        2.tel：编辑电话号码控件提交时换行符会自动从输入框中去掉

                        3.url：编辑url的控件，提交时换行符与首位的空格都将自动清除

                        4.email：可输入一个邮件地址

             textarea：定义文本域（一个多行的输入控件），默认可通过鼠标拖动调整大小。

                        name属性定义文本框名称，cols属性定义文本框宽度，单位是单个字符宽度，rows属性定义文本框的高度，单位是单个字符宽度，wrap属性定义输入内容大于文本域时显示的方式

             button：定义一个按钮。

             select：定义一个下拉表单。

             option：定义下拉表单中的选项。

         如何理解html结构语义化

            为了在没有css的情况下，页面也能呈现出很好的内容结构、代码结构

            提高用户体验，例如在title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签活用

            有利于SEO（搜索引擎优化），和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息（爬虫依赖于标签来确定上下文和各个关键字的权重）

           方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染画网页

           便于团队开发和维护，语义化更具有可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

明天计划的事：

         继续深度思考的学习，使用fixed布局时在手机上出现的问题如何解决与常见移动端登录页面header的实现方法。

遇到的困难：

         当使用fixed布局时header脱离文本流，使header与输入框重叠，设置margin-top与header等高使页面重新回归正常

收获：

         知道了流的概念 ，当position不为static时设置z-index的值可以调节页面的浮动层的显示顺序。根据深度思考，对input标签的相关属性与效果有了更深刻的认识，也知道了相对定位，绝对定位，固定定位的概念与应用方法，对于HTML结构语义化的学习，使自己明白了之前师兄说的规范使用HTML标签的意思。