今天完成的事情

任务一-深度思考

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

doctype是document type的缩写，并不是html标签，无结束标签，作用是标记语言的文档类型声明，用于规范浏览器行为，告诉浏览器当前html是用什么版本编写的，使浏览器了解文档类型今儿知道通过什么规范解析文档，它会影响代码验证，并决定浏览器如何显示该文档。（如果不加，各种浏览器会按自己的理解去渲染页面。）

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

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

inline是内联元素，常见的有a,span,br,i,em,strong,label,q,var,cite,code。

特点：行内元素，与其他行内元素共处一行，宽度为内容宽度，无法设定height及width属性，可以使用左右内外边距，不能使用上下。

block是块级元素，常见的块元素有div、p、h1...h6、ol、ul、dl、table、address、blockquote 、form

特点：块级元素，独占一行，不设置宽度时默认填充父级元素宽度。可以设置height及width。可以设置所有内外边距。

inline-block是内联块元素，常见的img、input

特点：与其他行内元素共享一行，但是可以设置height及width，也可以设置所有方向的内外边距。

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

（我只用过最简单的elements，其他的参考https://www.jianshu.com/p/c31f8232b553，之前修真院师兄的简书文章，先了解一下以后用的多了再深入了解）

elements显示html代码，右侧style显示该模块对应的css样式，双击可以修改。

Network标签页显示打开Chrome开发者工具后发起的请求，请求的类型及路径都可以显示，用于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容。

Sources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容。也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。

Audits标签页，点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果。对于优化前端页面、加速网页加载速度很有用。

Console标签页即Javascript控制台，在控制台中可以直接模拟手机、调整UA、修改网络连接状态。

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

表格

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

IDE是集成开发环境。包括了编辑器，编译器等。提供了大量的工具但体积较大

文本编辑器用来编写程序的源代码。轻便但功能较少，可以自定义插件

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

viewport是浏览器的可视区域。通常移动端viewport的往往比电脑端小，所以在移动端不添加meta的时候，浏览器会出现横向滚动条。

https://blog.csdn.net/jnshu_it/article/details/84196068

任务一-改写为外联式

师姐说任务应该用外联样式写，所以将任务一改写了一下

在任务一对应的html文件所在的文件夹中新建名为css的文件夹，在其中新建style.css文件

在html的head部分写入

1.   <link href="css/style.css" rel="stylesheet" type="text/css"/>  

或者

1.   <style type="text/css" media="all">@import "css/style.css"</style>  

将html文件头部对div设置样式的语句剪切到css文件中（不需要添加style标签）

明天计划的事情

任务二-重点看github，明天过后就可以加成果展示啦

遇到的问题

无

收获

复习任务一基础知识，初步了解外联样式