在写input的时候想法是用一个大div框住一个图片和input，为了让二者对齐学习了vertical-align:middle，但是因为开始用的是FLEX布局，导致二者总是错开一行，用inline图片大小总是溢出盒子，看了一些经验贴后来改成inline-block，然后用绝对定位把有input的div定位在图片右边。单位，图片用px,input的div用%   实现了改变页面宽度的同时左边图片不变，右边可以随页面宽度自适应。

关于header 标签可以直接在<header></header>中直接写，因为这次任务标题需要定位左中右三个标题，我采取用class，方便在一行内给三个标题定位，后来了解到可以用<span>代替<p>实现三个标题在一行。

FIXED在移动端使用会出现元素随页面一起滚动的Bug，原因是滚动页面时，由于滚动的是 main 内部的 div，因此 footer 没有跟随页面滚动，将main 绝对定位，进行内部滚动，但是滚动仍有卡顿。

html语义化就是用正确的标签做正确的事情。例如：段落用 p 标签，标题用 h 系列标签，边栏用 aside 标签，主要内容用 main 标签。便于团队的开发和维护。在没有加载 CSS 的情况下也能呈现较好的内容结构与代码结构，易于阅读。

position 定位常规取值： 1.static(静态） 2.Relative(相对） 3.Absolute(绝对) 4.fixed(固定)。

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

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

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

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