今天完成的事：

一.完成任务五的页面布局

二.完成深度思考

1.title与h1、b与strong、i与em、img的alt与title、src与href有什么区别？

title与h1的区别: 

 定义：title是网站标题，h1是文章主题

作用：title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的

b与strong,i与em的区别

 单从视觉上效果观看b与strong、i与em是没有区别的,唯一区别是搜索引擎检索的时候搜索引擎可以识别strong、em标签、而不能识别b与i标签

建议：为了符合CSS3的规范，b应尽量少用而改用strong ,i应尽量少用而改用em

img中的alt与title属性区别: 

 alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方

title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover

src与href的区别: 

href，.是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。 

src是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用 

src通常用作“拿取”（引入），href 用作 “连结前往”（引用） 

例如：1.<img src ="image.jpg"/>就是src引入image.jpg，作为这个img的源文件所在路径，会显示image.jpg。

          2.<a href ="image.jpg"/>就是href引用image.jpg，网址会跳转到image.jpg。

请解释一下CSS3的Flexbox（弹性盒布局模型）以及适用场景？

        布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便 

2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能

lex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。块级元素只需要display属性为flex即可。行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 项目默认沿主轴排列。 

   容器属性 

flex-direction属性决定主轴的方向（即项目的排列方向）。 

flex-wrap属性定义，如果一条轴线排不下，如何换行。默认情况下，项目都排在一条线（又称”轴线”）上。 

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap 

justify-content属性定义了项目在主轴上的对齐方式。 

align-items属性定义项目在交叉轴上如何对齐。 

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 

   项目属性 

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 

flex属性是以上三个的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch 

HTML中dl、ul、ol用哪个比较好？（应该大概可能是uI好点吧。。。）

1.无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

2.有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

3.定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

如何理解vertical-align与line-height？

line-height ：行高是指文本行基线baseline之间的垂直距离。

可以被赋值：

设置固定长度(px,rem等固定单位)设置数字:

设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

设置百分比:基于当前字体尺寸的百分比行距

注意：数字可以直接被继承，然后在计算行高，而百分比是先计算出行高，在以px继承

vertical-align： 使行内元素的基线相对于该元素所在行的基线的垂直对齐

  默认值baseline:元素基线与父元素基线对齐众所周知，

vertical-align支持很多属性值；(关键字值:vertical-align等等: middle;长度值：vertical-align: 4px等等；百分比值：vertical-align: 10%...等等)

注意：vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算。

明天计划的事：调试代码，对一些不合理的地方加以修改，巩固之前学到的知识，准备提交任务。

遇到的问题：还原设计图后，footer布局，还是做不到固定在页面底部，这个问题还没有解决，明天请教师兄师姐。

收获：任务五的也，页面布局已基本完成，学习深度思考。