Q1:后缀.html .htm .shtml区别？
首先来看 .htm 和 .html 文件的区别。答案居然是：它们是相同的。
有个问题是服务端的，如果服务端某文件夹下同时有 index.html 和 index.htm 文件，URL 省略了后面的文件名（如 http://www.domain.dom/dirname/） 那么显然一个文件会优先于另一文件被读取（先解析 index.html）。事实上，我们一般不会在同一个文件夹下保存两个 index 文件。
接着来说说 .html 和 .shtml 文件的区别，简单说 .shtml 文件就是 html 文件加个 SSI。
SSI 是 Server Side Include 的首字母缩略词。包含有嵌入式服务器方包含命令的 HTML 文本。在被传送给浏览器之前，服务器会对 SHTML 文档进行完全地读取、分析以及修改。SSI 就是在 HTML 文件中，可以通过注释行调用的命令或指针。SSI 具有强大的功能，只要使用一条简单的 SSI 命令就可以实现整个网站的内容更新，时间和日期的动态显示，以及执行 shell 和 CGI 脚本程序等复杂的功能。 网站维护常常碰到的一个问题是，网站的结构已经固定，却为了更新一点内容而不得不重做一大批网页。SSI 提供了一种简单、有效的方法来解决这一问题，它将一个网站的基本结构放在几个简单的 HTML 文件中(模板)，以后我们要做的只是将文本传到服务器，让程序按照模板自动生成网页，从而使管理大型网站变得容易。
应用它可以把网站中一些公共区域做成独立的页面，然后利用此技术嵌入到其它需要此区域内容的页面中去。
机制：
SSI 机制是动态包含，而不是静态生成，是由 web服务器比如 apache 在收到用户的请求时，如果解析到其中有 SSI 包含指令时，自动取出被包含的页面嵌入到被请求的页面中一起当做一个整体的页面发送给用户，对用户来说根本不知道服务器做了啥，只是知道得到一个完整的页面。
由 SSI 工作机制我们知道，包含动作是在每次用户请求页面时发生，所以如果被包含的页面内容有变化，也能实时的反应出来，正因为如此，就很容易用来实现静态页面的动态嵌入，我们就可以用来实现网站中全站公共区域，或是出现很多的重复区域内容发布成一个独立静态页面，然后在需要的地方用SSI指令包含进去，比如像全站的头部和尾部，全站最新新闻等等。
事实上，.html 的文件同样可以开启 SSI，只需在 apache 里进行相应的配置，一旦开启 SSI，.html 文件和 .shtml 文件可以一样对待了。
Q2：CSS的4种引入方式
行内式（不推荐，没有体现出CSS的优势）
行内式是在标记的style属性中设定CSS样式
使用语法<div style="color:#333"></div>
嵌入式（单一网页时推荐）
嵌入式是在head标签中写style标签，使用语法如下：
<head>
<style type="text/css">
此处写css描述
</style>
</head> 导入式(网页css显示有延迟)
将一个独立的CSS文件以CSS规则导入HTML文件，也是写在head标签里，使用语法如下：
<style type="text/css">
@import"文件路径.css"
</style> 链接式（显示无延迟）
以HTML规则引入外部的CSS文件，会在网页文件主体装载前装载CSS文件，因此显示出来无延迟，在head中用link来链接实现。使用语法<link href="文件路径.css" rel="stylesheet" type="text/css">
Q3:如何让2个div并排显示？
使用display的line属性
<div class="第一种"> <div style="display:line-block;background:black;">div1</div> <div style="display:line-block;background:white;margin-left:10px;">div2</div> </div>使用float浮动
<div class="第二种"> <div style="float:left;background:black;">div1</div> <div style="float:left;background:white;margin-left:10px;">div2</div> </div>使用position为absolute
<div class="第三种"> <div style="position: absolute;width:100px;background:#f00;">div1</div> <div style="position: absolute;left:100px;background:#0f0;margin-left:10px;">div2</div> </div>
Q4如果父div中的2个子div是浮动的，父div的高度有没有被子div撑起来，父的高度是多少
不会被撑起来，父div高度为0px,要使被撑起来，有以下2种方法。
- 清除浮动，在浮动div后面加
style="clear: both;" - 在父div后面加
overflow: hidden;
Q5设置背景为灰色的盒子宽高各为100px,给盒子加上10px的蓝色border,50px的padding.那灰色区域的面积变为多少？
如果加上50px的padding,那么灰色区域将变为200200，蓝色边框仍为10px.
但是文字的书写范围仍为灰色的100100.
Q6 margin重叠发生的条件及现象？
- 上下都为普通元素，会发生margin重叠
- 父子（子为普通元素），父无论是否浮动，都会发生margin重叠
详见转载margin重叠及防止方法
Q7搜索块状元素和内联元素都有哪些？
块状元素div：address-地址；blockquote-块引用；center-居中对齐；dir-目录列表；dl-定义列表；form-交互表单；fieldset-form控制组；hr-水平分割线；menu-菜单列表；ol-有序表单；p-段落；pre-格式化文本；table-表格；ul-无序列表；
内联元素span：a-锚点；abbr-缩写；acronym-首字；strong-粗体；big-大字体；br-换行；cite-引用；dfn-定义字段；em-强调；i-斜体；img-图片；input-输入框；textarea-多行文本输入框；label-表格标签；q-短引用；strike-中划线；u-下划线；var-定义变量；
Q8内联元素与块状元素的转化
display:block;变为块状元素display:inline;变为内联元素display:none;设置之后，该元素和该元素的子元素不再显示，等同于这段代码被删除，不占空间。Q9有的网站即设置了背景图还设置了背景色为什么？
既有背景图又有背景色，优先显示背景图- 考虑到大屏幕，背景图不足以铺满整个显示区域，背景图之外的地方显示背景色，并且背景图边缘部分必须处理妥当保证平滑过渡到背景色，不会有突兀的感觉。
- 根据网站的主色调定义一个背景色，利于减少视觉疲劳（不至于图片加载不出来，颜色反差大，闪眼，造成视觉不友好。一般是先定义背景色，再定义背景图片，色彩优先）
- 考虑到如果图片加载不出来，有背景色可过度。
Q10哪些标签是自闭合？
一般标签成对出现，中间可以插入别的标签或内容
自闭合标签单个出现，只能定义一些属性，不能插入别的标签或者内容。
常见的自闭合标签：