前言
手里有大量的前段面试题拿来分享（关于框架的暂时没整），因为量太大，就分开整合了，后期会逐渐更新哦~
1.什么是HTML5？
答：HTML5是最新的HTML标准。
注意：讲述HTML5推出的设计目的，以及现在市场的使用情况，浏览器支持情况等。。。。
设计目的
HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括：
· 新的解析规则增强了灵活性
· 新属性
· 淘汰过时的或冗余的属性
· 一个HTML5文档到另一个文档间的拖放功能
2.2.HTML5中什么是不同的新的表单元素类型？
答：提示本地验证表单需要再外面添加form标签包起来，才能查看效果
color
date
datetime-local
email
time
url
range
telephone
number
search
可以参考网址：<u>www.w3school.com.cn/html5/html_5_form_input_types.asp</u>
3.HTML5的页面结构同HTML4或者更前的HTML有什么区别？
答：一个典型的WEB页面包含头部，脚部，导航，中心区域，侧边栏。现在如果我们想在在HTML4的HTML区域中呈现这些内容，我们可能要使用DIV标签。
但是在HTML5中通过为这些区域创建元素名称使他们更加清晰，也使得你的HTML更加可读
以下是形成页面结构的HTML5元素的更多细节：（注意主要考的是标签语意化）
<header>：代表HTML的头部数据
<footer>：页面的脚部区域
<nav>：页面导航元素
<article>：自包含的内容
<section>：使用内部article去定义区域或者把分组内容放到区域里
<aside>：代表页面的侧边栏内容
4.哪些浏览器支持HTML5？
答：几乎所有的高版本浏览器Safari，Chrome，Firefox，Opera，IE8以上都支持HTML5
5.为什么HTML5里面我们不需要DTD（Document Type Definition文档类型定义）？
答：HTML5没有使用SGML或者XHTML，他是一个全新的东西，因此你不需要参考DTD，对于HTML5，你仅需放置下面的文档类型代码告诉浏览器识别这是HTML5文档即可
6.HTML5的离线储存？
答：localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
7.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
答：在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据 manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后 浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资 源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
8.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
（1）cookie在浏览器和服务器间来回传递， sessionStorage和localStorage不会。
（2）sessionStorage和localStorage的存储空间更大。
（3）sessionStorage和localStorage有更多丰富易用的接口。
（4）sessionStorage和localStorage各自独立的存储空间。
9.页面可见性（Page Visibility）API 可以有哪些用途？
答：在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放。
10.HTML5的form如何关闭自动完成功能？
答：给不想要提示的input是设置autocomplete=off即可。
11.一个div，要求实现当内容过少时，div的最低高度为200px，当内容较多时，div的高度被内容撑开。
答：min-height:200px
12.实现一个布局，分左中右三栏。左栏固定宽为200px，右栏固定150px，中栏随屏幕宽自动适应。写出html和css。
<div id=\"content\" class=\"clearfix\">
<div id=\"left\">
</div>
<div id=\"middle\">
</div>
<div id=\"right\">
</div>
</div>
#content{background:#ff6;}
#left,#right{width:200px;background:#fc0;float:left;}
#middle{float:left; width:100%;margin:0 -200px;}
#middle .inner{margin:0 200px;background:#ccc;}
#right{float:right;}
13.a标签的四个伪类是什么？如何排序？为什么？
爱恨分明原则: l v h a
注释：为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后 !
注释：为了产生预期的效果，在 CSS 定义中，a:active 必须位于 a:hover 之后！！
注释：Pseudo-class（伪类）的名称对大小写不敏感。
注释：伪类可与 CSS 类配合使用：
a.red:visited {color: #FF0000;}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
如果上面这个例子中的链接已访问过，那么它会显示为红色。
14.如何实现浮动元素居中
<div class="box">
<p>我是浮动的</p>
<p>我也是居中的</p>
</div>
.box{
float:left;
position:relative;
left:50%;
}
p{
float:left;
position:relative;
right:50%;
}
15.已知一个div内有一个img，两者的高度均不知道，但图片的高度一定小于div的高度。用css实现图片在div内的垂直居中。
参考：<u>http://www.jb51.net/css/76120.html</u>
16.HTML静态页面出现中文乱码如何解决？
答：<meta charset="UTF-8" />
17.下列标签既是行内属性标签又可以设宽高的标签是？（D）
A.div B. span C. input D. img E. h1
18.用一两句话说一下你对“盒模型”这个概念的理解，和它都涉及到哪些css属性。
答：网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
19.外边距、内边距、边框有几种书写形式,列举说明。
参考：<u>http://wangye.huseoblog.com/cssdivhezi.html</u>
20.有上下两个div，上一个div 设置margin-bottom：10px；下一个div设置margin-top： 5px；那么两个div最后的间距是多少？
答：10px
21.写出下列CSS命令的最简写法{margin-left:20px; margin-bottom:50px; margin-right:20px; margin-top:20px;}
答：margin: 20px 20px 50px;
22.我们用hack调兼容时，用到如下命令 div{height：300px；*height：400px；_height：500px;}，在ie6里div显示高度是多少，火狐里显示高度是多少？
答：ie6:400px, 火狐：300px;
23.三层嵌套用在什么地方最合适，有什么优点。
答：有圆角边框不固定宽度同时兼容ie的时候
24.背景图合并用在什么地方最适合，有什么优点。
答: 通常当遇到一个网站要加载大量icon(小图标)的时候，我们会把它合并成sprite(图片拼接)。目的是为了减少HTTP请求次数。这样做既能减少页面加载时间，又可以减轻服务器的负载
25.页面如何在浏览器里达到居中，并且左右自适应？
答：margin: 0 auto;
26.HTML5版本类型声明怎么写。有什么用？
答：<!DOCTYPE html>
27.XHTML1.0版本你知道么，跟html5版本有什么区别
答: XHTML 1.0 是 XML 风格的 HTML 4.01。
XHTML 1.1 主要是初步进行了模块化。
HTML5 是下一代 HTML，取代 HTML 4.01。
W3C 原本确实计划用 XHTML 系列替代 HTML 4.01，但 XHTML 系列实际上只活到了 1.1（1.1 和夭折的 1.2 已经体现出过分 XML 的迹象，而 W3C 的理想其实在疯狂的 XHTML 2 身上，当然，它没能诞生），还没脱离 HTML 4.01 的阴影就死了。
还没等 XHTML 兴起，它的地位就被 HTML5 取代了。
28.书写ol，ul，table的嵌套规范
答：<u>http://www.5icool.org/a/201308/a2081.html</u>
29.前端页面有哪三层构成，分别是什么？作用是什么？
答: 分成：结构层、表示层、行为层。
结构层由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”
表示层由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。
行为层负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。
30.img的alt和title有什么区别？
答: alt 是图片加载失败时，显示在网页上的替代文字； title 是鼠标放上面时显示的文字
31.HTML代码的书写规范有哪些？
答: https://segmentfault.com/a/1190000003229217
32.浏览器的调试工具有哪些？都有什么功能？
答: http://www.cnblogs.com/Excellent/p/5368812.html
33.table的合并边框属性是什么？跨行是什么？跨列是什么？
答:合并边框:cellspacing, 跨行:rowspan, 跨列: colspan
34.CSS是什么？有什么用处。
答: 层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
35.你知道less,sass这些东西么（小米）；
答: CSS 预处理器技术已经非常的成熟，而且也涌现出了越来越多的 CSS 的预处理器框架。最为普遍的三款 CSS 预处理器框架，分别是 Sass、Less CSS、Stylus。CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。
36.解释W3C
答: 万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，
如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，
有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。
37.页面重构
答: 网站重构不是一种技术，不是css+div，更不是标准，网站重构是一种思想，是一种理念。
引用WebReBuild.ORG 的话：当前国内的同行普遍的认为：所谓的网站重构就是“DIV+CSS”，想法固然极度局限。但也不是另一部分的人认为是“XHTML+CSS”，因为“XHTML+CSS”只是页面重构。真正的网站重构理应包含结构、行为、表现三层次的分离以及优化，行内分工优化，以及以技术与数据、人文为主导的交互优化等。
重构网站先重构人，重构你的理念，不要光光追求技术，追求还原设计稿，追求浏览器的兼容性，重要的是基础和理念。当你真正了解什么是网站重构的时候网站重构也就真正开始了。
38.div+css与table布局的有何区别？
答: div+css:布局简洁明了，使用方便，相对于表格来说更容易搜索的到！优化程度高点。不易出现错误或者不可控！样式繁多，易控易修改。
Table: 表格布局不建议使用，这个算是快要被淘汰的一种布局方式。布局不容易调整和规划。容易失控。大部分都不能使用太多样式。
39.后台编码格式不是UTF-8怎么办？
答: 统一编码格式
40.一个CSS文件如果过大的话，加载会很慢，占用过大带宽，如果解决？
答: 1.去除空格和换行,压缩css代码;
2.尽量使用简写, 缩减代码;
3.将css文件分成多个文件
网友评论