今天完成的事：

1.完成了任务五，并提交审核

2.任务三-6、任务四-1.2.3.4的深度思考

明天的计划：

1.开始任务六

2.任务四5.6.深度思考

遇到的问题：

1.任务五做完了，做一个总结，总共遇到以下

（1）导航栏的居中——给一个<span>主页</span>，左右absolute脱离文本框，然后给span添加text-align

（2）活用flex布局中间信息栏和底部按钮

（3）底部按钮上方会有“字”穿过去

收获：

【任务三-6.】深度思考

6.手机分辨率和网页中的px是一回事吗？

不是一回事，说到这个，必须要提到DPR(device pixel ratio)设备的物理像素，实际上像素分为 CSS像素（px）和设备像素（dpr）。在电脑端，1个CSS像素对应的是1个DPR，但是在手机端，CSS像素会受到分辨率的影响，例如相同屏幕大小的两部手机，有一部的分辨率是另一部的一倍，那就意味着DPR=2，一个手机上的像素点就需要2个CSS像素。在举例，有些手机里的DPR值是固定的，iphone6p就是DPR=3，那么我们在做开发的时候，假如设置了一个100px，到了6p上就会被放大显示为300px，这就是高分辨率

【任务四 1.2.3.4】

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

STATIC(静态）

HTML元素的默认值，不受top、bottom、left、right属性影响，元素出现在正常的文档流中

RELATIVE(相对）

相对定位, 特点：不脱离文档流的布局，受top、bottom、left、right属性影响,只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

ABSOLUTE(绝对)

绝对定位 特点:脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为html文档本身。

FIXED(固定)

固定定位, 特点：类似于absolute，但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置。

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

可以使用百分比的样式属性:

定位：top,right,bottom,left;

盒模型：height,width,margin,padding,

背景：background-position,background-size(css3),

文本：text-indent，

字体：font-size;

各个属性使用详细：

top,right,bottom,left:全兼容,

height：基于包含它的块级对象的百分比高度。

width：基于包含它的块级对象的百分比宽度。

margin：百分数是相对于父元素的 宽度width 计算的。

padding：百分数是相对于父元素的 宽度width 计算的。---------举例：一个宽1000px，高600px的父级盒子，让子集盒子取margin: 10% 5%,  所得到的结果是 100 50 100 50

（为什么参照宽度，我的理解是，如果参照的是高度，那就是无限延长了，不具有计算意义）

background-position:图像中描述为 50% 50% 的点（中心点）

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。

如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：

body

{

background-image:url(‘xxxxx.gif’);

background-repeat:no-repeat;

background-position:66% 33%;

}

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。

background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

background-size 兼容IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。

text-indent 定义基于父元素宽度的百分比的缩进。当外层不指定宽度时，ie下会基于浏览器宽度。

font-size在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值。

3.常见的表单元素有哪些？各有什么属性？  

常用表单元素:

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

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

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

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

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

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

button: 定义一个按钮。

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

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

常见的type属性：

button：定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。

checkbox: 定义复选框。

file: 定义输入字段和 "浏览"按钮，供文件上传。

hidden：定义隐藏的输入字段。

image：定义图像形式的提交按钮。

password：定义密码字段。该字段中的字符被掩码。

radio：定义单选按钮。

reset：定义重置按钮。重置按钮会清除表单中的所有数据。

submit：定义提交按钮。提交按钮会把表单数据发送到服务器。

text：定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

4.如何理解HTML结构的语义化？  

简单的说就是

（1）用正确的标签做正确的事情

（2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析

（3）即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的

（4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO

【什么是SEO ?】——Search Engine Optimization 搜索引擎优化

（5）使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

进一步的了解：

  语义化的 HTML 首先要强调 HTML 结构一个网页就好像一幢房子，HTML 结构就是钢筋混泥土的墙，一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头，也就称不上是房子了。CSS 是装饰材料，是油漆，是用来装饰房子的。CSS 如果没有 HTML 结构那也就什么都不是了，没有了实际使用价值。CSS 完全依靠引用它的 (X)HTML 文档。如果你想使 CSS 的能力发挥到极致，提供一个既干净又有结构的 HTML 是非常必要的。

其实HTML 中的标签都有他自身的含义，只是常常被忽视——就像表格一直充当着网页布局的角色。还好随着 CSS 的重现江湖，表格也终于回到他的本质工作——列表数据。它会告诉我们说：“这行是一个标题;这几行组成了一个段落;这些文字是项目列表……”

在做前端开发的时候要记住：HTML 告诉我们一块内容是什么(或其意义)，而不是它长的什么样子。