今天完成的事情：1 已大致将任务四完成，还差一个边框闪烁问题未解决

                  2  学习了表单元素，了解了多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

（1）  文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

‍‍<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form> 

效果如图：

（2） 密码字段

密码字段通过标签<input type="password"> 来定义:

‍‍<form>
Password: <input type="password" name="pwd">
</form> 

效果如图：

（3） 单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项。

‍‍<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form> 

效果如图：只能选择一个，选择其中一个时另外一个就会被取消

（4 ）复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

‍‍<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form> 

效果如图：能同时多选，与单选框相对应

（5 ）提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

‍‍<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form> 

效果如图：点击submit按钮即可提交表单

（6  ）‍‍文本域(Textarea)‍‍
本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。

‍‍<textarea> 标签定义一个多行的文本输入控件。

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，分别对应height和width

<textarea rows="10" cols="30"> 
   ‍‍ 里面可以添加文本‍‍ </textarea> 

（7） placeholder属性

在任务四中可以与password以及name属性相结合

<form>

<input  type="password" name="pwd" placeholder="请输入密码">

</form>

效果如图

2 了解了px，em和rem的区别及优劣

‍‍PX

px 像素（Pixel）。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。

PX特点

• 1. IE无法调整那些使用px作为单位的字体大小；
• 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；‍‍

EM

em 是基于基数（比如：1.5em）来计算出来的相对字体大小。

em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

EM特点

• 1. em的值并不是固定的；
• 2. em会继承父级元素的字体大小。

• 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

  所以我们在写CSS的时候，需要注意两点：

  • 1. body选择器中声明Font-size=62.5%；
  • 2. 将你的原来的px数值除以10，然后换上em作为单位；
  • 3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

  也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
  

REM

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

‍‍p {font-size:14px; font-size:0.875rem;}

%（百分比）

%也很常见，它和em差不多一样，都是相对于父级元素。但%可以在很多属性中使用，比如：width、height、font-size等。而em是用来设置字体大小（font-size）的单位，width、height等属性是没有em单位的。

px、em、rem和%的区别与总结

px是固定长度单位，不随其它元素的变化而变化em和%是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化，更加常见于自适应px和%用的比较广泛一些，可以充当更多属性的单位，而em和rem是字体大小的单位，用于充当font-size属性的单位一般来说：1em = 1rem = 100% = 16 px

文章来源：https://www.ggbiji.com/px_em_rem.html

        https://www.w3cschool.cn/html5/html5-form-attributes.html

明天计划的事情：1 因对任务三理解失误，错将下方两个icon与数字当成一个整体切了下来，明天重新整理再上交

                             2 将任务四的边框闪烁问题解决再上交

遇到的问题：因任务中大量使用em，师兄就告诫我说，尽量少使用em，现在还驾驭不了，于是我就从w3cschool以及百度上整理了以上的资料。

                   清楚同样是相对大小，em继承父元素的大小，每次父元素大小改变，em的大小都要发生变化，rem是相对于html的根元素大小，

                  没有特殊申明，则一直根据根元素的大小而变化。