在边投简历边准备面试的过程中，我上网搜索了很多题，其中https://www.jianshu.com/p/fdcdd8f9a4d0这篇文章的面试题目个人觉得比较好，作者工作经验也才一年，很适合自己，但里面有些题目没有答案或答案比较简单笼统，所以就写到我的博客中，方便日后回忆查看，当然我也有新增一些新的题目上去，有些是自己遇到的，有些是上网查找到的，但又觉得不错，就写在一起了（由于博客有点类似于大杂烩那样，所以我就厚着脸皮写原创了，借鉴的几乎都有链接，请多多包涵，勿怪！）。可能我写的有点多，这主要便于自己了解清楚，技术面的时候可以简单说，并不需要说的这么清楚，自己把握分寸就行。
HTML篇
1、doctype是什么？有哪些类型？
doctype：声明文档类型；
HTML5只有一种声明；
HTML4有以下三种声明：
①过渡的（Transitional）：一种要求不很严格的DTD，允许在页面中使用HTML4.01的标识（符合xhtml语法标准）；
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">②严格的（Strict）：一种要求严格的DTD，不允许使用任何表现层的标识和属性；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">③框架的（Frameset）：一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">2、HTML5中input有哪些新类型？简要说明其用法。
email、url、number、range、Date、pickers (date, month, week, time, datetime, datetime-local)、search、color
大多数浏览器不支持（由下图可知）
用法我就简单写一些，详细介绍请点这里：http://www.w3school.com.cn/html5/html_5_form_input_types.asp
email：包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值。
E-mail: <input type="email" name="user_email" />url：包含 URL 地址的输入域，在提交表单时，会自动验证 url 域的值。
Homepage: <input type="url" name="user_url" />number：包含数值的输入域，能够设定对所接受的数字的限定。
Points: <input type="number" name="points" min="1" max="10" />range：包含一定范围内数字值的输入域，range 类型显示为滑动条。
<input type="range" name="points" min="1" max="10" />Date和pickers (date, month, week, time, datetime, datetime-local)：日期选择器
1）date：选取日、月、年；
2）month：选取月、年；
3）week：选取周和年；
4）time：选取时间（小时和分钟）；
5）datetime：选取时间、日、月、年（UTC 时间）；
6）datetime-local：选取时间、日、月、年（本地时间）。
Date: <input type="date" name="user_date" />search：用于搜索域，比如站点搜索或 Google 搜索，search 域显示为常规的文本域。
（具体用法：http://www.w3school.com.cn/jsref/dom_obj_search.asp）
color：创建一个允许用户使用颜色选择器，或输入兼容CSS语法的颜色代码的区域。
拾色器: <input type="color" id="myColor">
<p>点击 "点我" 按钮修改拾色器颜色。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.getElementById("myColor").value="#FF8040";
}
</script>3、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
具体的见https://www.cnblogs.com/roucheng/archive/2016/06/26/html5new.html和https://blog.csdn.net/zhouziyu2011/article/details/58588947这两篇文章。
（1）新特性：
canvas
video和audio标签
本地存储：localStorage和sessionStorage
语义化：article、footer、header、nav、section
表单控件新类型
地理定位Geolocation
（2）移除的元素：big/center/tt/u/s/frame/frameset/noframes
（3）HTML5新标签的浏览器兼容问题：
当在页面中使用HTML5新标签时，可能会得到三种不同的结果：
1）新标签被当作错误处理并被忽略，在DOM构建时会当作这个标签不存在；
2）新标签被当作错误处理，并在DOM构建时，这个新标签会被构造成行内元素；
3）新标签被识别为HTML5标签，然后用DOM节点对其进行替换。
不能识别HTML5新标签而不能使用，解决办法有两种：
1）方法1：实现标签被识别
IE6~IE8支持通过document.createElement（tagName）方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的CSS样式。
例如识别article标签：在<head>区域添加<script> document.createElement('article'); </script>。
2）方法2：JavaScript解决方案（直接使用成熟的框架）
a）使用html5shim： 在<head>中调用以下代码：
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->b）使用kill IE6：在</body>之前调用以下代码：
<!--if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
<![endif]-->（4）区分 HTML 和 HTML5：
1）DOCTYPE声明；
2）新增的元素（结构元素/功能元素）。
4、bootstrap响应式的实现原理是什么？
具体看https://blog.csdn.net/qq_21794603/article/details/68585249页面。
Bootstrap响应式布局是利用其栅格系统，对于不同的屏幕采用不同的类属性。
百分比和媒体查询。
5.多终端页面适配是怎样实现的？
（1）使用淘宝的rem.js，基本原理是根据通过dpr设置缩放比，实现布局视口大小，然后通过js动态计算font-size；
（2）根据设计稿的大小，设置一个参考值计算font-size。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
