成果链接：https://dongjiayu2018.github.io/learn/task4/task4.html

官方脑图：

个人脑图：

任务进度符合预期时间

个人脑图对比官方脑图来看相对掌握知识点

任务总结：

1.position定位有哪几种？各有什么特点？

position的属性值共有四个常用的：static、relative、absolute、fixed。
还有三个不常用的：inherit、initial、sticky

Static
所有元素在默认的情况下position属性均为static，而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right或者 z-index
声明在position为static的情况下无效。

Relative
relative定位，又称为相对定位，相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流。

Absolute
absolute定位，也称为绝对定位，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以position非static方式定位的。

Fixed

（1）.会改变行内元素的呈现模式，使display之变更为block。

（2）.会让元素脱离文档流，不占据空间。
（3）.默认会覆盖到非定位元素上。

2.常用表单元素

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

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

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

                label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。

                input:定义输入域，常用。可设置type属性，从而具有不同功能。

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

                button:定义一个按钮。

                select:定义一个选择列表，即下拉列表。

                option:定义下拉列表中的选项。

3.header元素

header元素代表“网页“和”section”的页眉。通常包含H1~H6元素或者hgroup元素。作为整个页面或者内容块的标题，也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素

header使用注意：

•可以是“网页”或任意“section”的头部部分；

•没有个数限制。

•如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

4.footer元素

footer元素代表“网页”或“section”的页脚，通常含有该页面的一些基本信息，例如：文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。。

footer使用注意：

•可以是“网页”或任意“section”的底部部分；

•没有个数限制，除了包裹的内容不一样，其他跟header类似。

5.hgroup元素

hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

hgroup使用注意：

•如果只需要一个h1-h6标签就不用hgroup

•如果有连续多个h1-h6标签就用hgroup

•如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签

6.nav元素

nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。但是我在有些时候却情不自禁的想用它，譬如：侧边栏上目录，面包屑导航，搜索样式，或者下一篇上一篇文章，但是事实上规范上说nav只能用在页面主要导航部分上。页脚区域中的链接列表，虽然指向不同网站的不同区域，譬如服务条款，版权页等，这些footer元素就能够用了。

nav使用注意：

•用在整个页面主要导航部分上，不合适就不要用nav元素；

7.aside元素

aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名词解释等。（特殊的section）

在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。

aside使用总结：

•aside在article内表示主要内容的附属信息，

•在article之外则可做侧边栏，没有article与之对应，最好不用。

•如果是广告，其他日志链接或者其他分类导航也可以用

8.article元素

article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）

除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。

article使用注意：

•自身独立的情况下：用article

•是相关内容：用section

•没有语义的：用div