深度思考

1.HTML文件里开头的Doctype有什么作用 
DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

2.如何理解盒模型及其content、padding、border、margin？ 
html任何一个元素都可以看作一个盒子
盒模型有两种，分别是IE盒子模型（IE6以下版本浏览器)和标准w3c盒子模型，区别在于前者content的宽度和高度包括了border和padding
content：内容，显示文本和图像
padding内边距
border边框
margin外边距

3.常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别 
常见inline元素：span、em、strong、a、br、textarea、lable、select
常见block元素：div、p、h1...h6、ol、ul、dl、table、address、blockquote、form
常见inline-block元素：img、input
区别
inline元素
不换行
宽度随内容变化
无法设置width和height属性
padding和margin只有水平方向有用，竖直方向无效

block元素
会自动换行
默认宽度填满父元素，可以设置height，width，margin和padding

inline-block
将对象呈现为inline对象，但是对象的内容作为block对象呈现
可以给一个元素inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

4.如何使用浏览器的F12调试页面？ 
Elements标签页的左侧就是对页面HTML结构的查看与编辑，可以直接在某个元素上双击修改元素的属性。
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。
Sources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容。也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。
Audits标签页对于优化前端页面、加速网页加载速度很有用;点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了
Console标签页就是Javascript控制台

5.九宫格的布局你还能想到哪些办法实现？它们各自的优势劣势是什么？ 
（1）.使用div+css布局
使用9个div,将div标签inline-block化，使div能够水平排列。然后对div标签设置背景色，使用padding内边距来
撑开div标签宽高，控制好外边距，使得div标签之间间距相等。
它的优点是
1.网页载入比较快，由于DIV+CSS中的CSS富含丰富的样式，表现更加灵活。
2.页面内容与样式分离可以是网页代码减少，使页面的样式的调整变得更加方便。
3.表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。
它的缺点是
浏览器兼容性。DIV+CSS更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。
（2）.使用ul,li布局。
ul,li布局和div布局很像，同样使用9个li，将li标签inline-block化。
然后对li标签设置背景色，使用padding内边距来撑开li标签宽高，控制好外边距，使得li标签之间的间距相等。
这种方法的优点是：
层次分明，不易混乱；
缺点是：
ul,li标签是有默认的margin和padding.

6.IDE是什么？它和文本编辑器相比有什么优缺点？ 
IDE是集成开发环境。包括了编辑器，编译器等。比如eclipse就是一款IDE。
文本编辑器用来编写程序的源代码。比如sublime就是一款编辑器。
优缺点：
　　IDE提供了大量的工具，不过正式因为如此，软件非常的笨重（消耗内存），大家觉得有些IDE打开时间非常慢。
　　文本编辑器，轻便，可以自定义插件，不过有时候需要的插件多，而且插件下载往往需要FQ不方便。
  
7.加和不加meta的viewport有什么区别？
viewport是浏览器的可视区域。通常viewport使用在移动端，因为移动端的往往比电脑端小，所以在移动端的时候，
浏览器会出现横向的滚动条，这是用户体验所不想有的。
于是使用了meta的viewport可以消除滚动条，取而代之的采用平移和缩放的方式浏览网页的其他区域。（联系平时在手机上浏览网页即可）。