1.HTML文件里开头的Doctype有什么作用 

DOCTYPE是document type的简写，它并不是 HTML 标签，也没有结束标签，它是一种标记语言的文档类型声明，

即告诉浏览器当前 HTML 是用什么版本编写的。

注意: DOCTYPE的声明必须是 HTML 文档的第一行，位于html标签之前。大多数Web文档的顶部都有doctype声明，

它是在新建一个文档时，由Web创作软件草率处理的众多细节之一。很少人会去注意 doctype ，但在遵循标准的任何Web文档中，

它都是一项必需的元素。doctype会影响代码验证，并决定了浏览器最终如何显示你的 Web文档。

DOCTYPE是document type(文档类型)的简写，在web设计中用来声明文档类型。

在所有 HTML 文档中规定 DOCTYPE 是非常重要的，这样浏览器就能了解预期的文档类型，

 告诉浏览器要通过哪一种规范（DTD）解析文档（比如HTML或XHTML规范）。

DOCTYPE会影响代码验证，并决定了浏览器最终如何显示你的Web文档。

2.如何理解盒模型及其content、padding、border、margin？

盒子模型简单点理解就是外边距 (margin)+ 边框 (border)+ 内边距 (padding)+ 内容 (content)，页面所呈现的效果其实就是一个个盒子堆叠而成的。

每一个元素其实是包含了一个 “外在盒子” 和一个 “内在盒子”，其中 “外在盒子” 负责元素是一行显示还是换行显示，

而 “内在盒子” 则负责宽高、内容展现。

Margin（外边距）：边框外的区域，外边距是透明的；

Border（边框）：围绕在内边距和内容外的边框；

Padding（内边距）：清除内容周围的区域，也是透明的；

Contnet（内容）：盒子的内容，可显示图片或文本。

在标准盒模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，

但是会增加元素框的总尺寸。盒子占位 width =  2margin + 2padding + 2*border, 高度与之一样。

3.常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别

inline元素

inline元素全称Inline Elements

英文原意:An inline element does not start on a new line and only takes up as much width as necessary.

一个内联元素不会开始新的一行，并且只占有必要的宽度。

特点:

和其他元素都在一行上；

元素的高度、宽度、行高及顶部和底部边距不可设置；

元素的宽度就是它包含的文字或图片的宽度，不可改变。

block元素

block元素全称Block-level Elements

英文原意:A block-level element always starts on a new line and takes up the full width available 

              (stretches out to the left and right as far as it can).

一个块级元素总是开始新的一行，并且占据可获得的全部宽度(左右都会尽可能的延伸到它能延伸的最远)

特点:

每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）;

元素的高度、宽度、行高以及顶和底边距都可设置;

元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

inline-block元素

inline-block元素，英文释义:inline-block elements are like inline elements but they can have a width and a height.它像内联元素，

但具有宽度和高度。

特点:

和其他元素都在一行上；

元素的高度、宽度、行高以及顶和底边距都可设置

与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。

与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

4.如何使用浏览器的F12调试页面？ 

查找编程代码中的错误被称为代码调试。. 调试并不简单。. 但幸运地是，所有现代浏览器都有内置的调试器。

内置的调试器可打开或关闭，强制将错误报告给用户。. 通过调试器，

您也可以设置断点（代码执行被中断的位置），并在代码执行时检查变量。

通常通过 F12 键启动浏览器中的调试器，然后在调试器菜单中选择“控制台”。

5.九宫格的布局你还能想到哪些办法实现？它们各自的优势劣势是什么？

inline-block实现

示例

ul {
  /*显示 :弯曲   display 属性规定元素应该生成的框的类型。*/
  display: flex;
  /*包裹         flex-wrap 属性规定弹性项目是否应换行。*/
  flex-wrap: wrap;
}

li {
  /*宽度*/
  width: 31%;
  /*  !*  !*底部间隙*!*!*/
  padding-bottom:31%;
  /*右边距*/
  margin-right: 1%;
  /*底部边距*/
  margin-bottom: 1%;
  /*显示：内联块*/
  display: inline-block;
  /*背景色*/
  background: orange;
}

优点：将元素设置为行内块元素，既有行内元素可以一行显示多个元素的特性，又有块元素可以设置宽高的特性。

缺点：设置为display:inline-block后，元素与元素之间会多出空格间隙

table实现

示例

.table{
  /*宽度*/
  width: 70%;
  /*  !*底部间隙*!*/
  padding-bottom:70%;
  /*显示*/
  display: table;
  /*边框间距*/
  border-spacing: 5px;
}
li{
  /*显示*/
  display: table-row;
}
div{
  /*水平对齐 ：居中*/
  text-align: center;
  /*宽度*/
  width: 31%;
  /*  !*底部间隙*!*/
  padding-bottom:31%;
  /*显示*/
  display: table-cell;
  /*边界半径*/
  border-radius: 10px;
  /*背景色*/
  background:yellow;
}

缺点是比其它html标记占更多的字节，会阻挡浏览器渲染引擎的渲染顺序，会影响其内部的某些布局属性的生效

优点就是用table做表格是完全正确的

6.IDE是什么？它和文本编辑器相比有什么优缺点？

文本编辑器

文本编辑器是计算机软件中的一种。主要用于用来编写和查看文本文件。

IDE

IDE是带有软件开发功能的“集成开发环境”。

集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，

一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。

所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境。

优点

节省时间和精力。IDE的目的就是要让开发更加快捷方便，通过提供工具和各种性能来帮助开发者组织资源，减少失误，提供捷径。

建立统一标准。当一组程序员使用同一个开发环境时，就建立了统一的工作标准，当IDE提供预设的模板，

或者不同团队分享代码库时，这一效果就更加明显了。管理开发工作。首先，IDE提供文档工具，可以自动输入开发者评论，

或者迫使开发者在不同区域编写评论。其次，IDE可以展示资源，更便于发现应用所处位置，无需在文件系统里面艰难的搜索。

缺点

学习曲线问题。IDE基本上是比较复杂的工具，为了更好的熟练使用，需要一定的时间和耐心。

初学者的困难。对初学者来说，使用IDE来学习开发有相当的难度，不适合学习一种新语言时使用。

无法修复坏代码或设计。开发者不能完全依赖工具的便捷，还是必须保持专业水准和熟练度，开发的成果好坏主要还是看开发员的技术。

7.加和不加meta的viewport有什么区别？

什么是 Viewport?

 viewport 翻译为中文可以叫做"视区"。 viewport 是用户网页的可视区域。 

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点， 

就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，

它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。所以我们利用meta标签对viewport进行控制，以达到我们想要的效果。

什么是mate？

元数据（Metadata）是数据的数据信息。

<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用

代码示例

<metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

width - viewport的宽度 height - viewport的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

收获：以上

明天计划：完成任务一