3、Doctype用来标明文档的类型。它不是HTML标签，让浏览器知道用哪个版本的HTML来解析代码。

‍‍‍‍在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。‍‍

HTML5 不基于 SGML，所以不需要引用 DTD。但是最好还是添加上。

‍‍4、CSS盒模型：content区域的width与height，padding和margin。

分为标准盒模型与IE8及以下的怪异盒模型：

标准盒模型：内容区域的宽就是width，高就是height。

怪异盒模型：内容区域的宽是width + padding-left + padding-right + border-left + border-right，高同理。

CSS3中的box-sizing可用来设置：box-sizing: border-box;(怪异盒模型)，box-sizing: content-box;（标准盒模型）。

5、常用的inline元素有：span,img,a,i,button,input，label，常用的block元素有：div,p,h1,h2,ul,li,ol,table,section,blockquote.等。

行内元素又分为替换元素和非替换元素：input和img实际上属于行内替换元素，可设置margin与padding，width与height，而非替换元素只能设置margin-left,margin-right，padding-left,padding-right.

区别：inline元素又叫做行内元素，不能设置宽高，大小由内容撑开，并序排列，。block元素又叫做块元素，能设置宽高，可独占一行。inline-block元素又叫做行内块状元素，可设置宽高，margin,padding，不独占一行。

6.什么是自适应,怎么去自适应?

什么是自适应：

自适应网站能自主适应浏览环境的变化。

传统网页设计：固定宽度页面布局。自适应网页设计：流式页面布局。

多种布局方式组合运用：大屏幕中屏幕使用固定宽度布局，小屏幕使用流式页面布局。

如何做到自适应：

一. 允许网页宽度自动调整： 插入<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width"/>

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 

二. 不使用绝对宽度 ：width: xx% 或 width: auto 或 max-width，max-height。

三. 相对大小的字体 ：字体也不能使用绝对大小（px），而只能使用相对大小（em）。 

四. 流动布局（fluid grid） ："流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。 

五. "自适应网页设计"的核心，就是CSS3引入的Media Query模块 。

六. 图片的自适应（fluid image） ：img { max-width: 100%;} 老版本的IE不支持max-width，所以只好写成：img { width: 100%; } 

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：img { -ms-interpolation-mode: bicubic; } 

不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。

九. 避免出现水平滚动条 ：img,iframe {max-width:100%;box-sizing:border-box;}