春节事后，又是新的一年开始，不少要换行业换工做换岗位的都开始了新一轮的跳槽，那么想要在众多的求职者中让本身脱颖而出呢？怎么样能使得本身更有效的拿到高薪的offer呢？今天千锋老师给你们整理了各大厂常出现的web前端面试题，相信对于不少同窗来讲看完会有必定的帮助。html
1. 请说明 HTML 文档中 DTD 的意义和做用（酷讯）前端
DTD，文档类型定义，是一种保证 html 文档格式正确的有效方法，在解析网页时，浏览器将使用 DTD 来检查页面的有效性（是否符合规范，元素和标签使用是否正确）而且采起相应的措施。同时它还会影响浏览器的渲染模式（工做模式）。web
2. 准确的指出如下代码的显示结果（酷讯）面试
<style> a{ position:relative; height:200px; width:500px; border:solid 1px #000; background:#FFF;浏览器
}缓存
#b,#c{position:absolute; width:250px; height:90px;}服务器
#b{top:30px; left:50px; background:#FF0000; z-index:1;}cookie
#c{bottom:30px; right:50px; background:#0000FF;}框架
</style>
<div class="a">
<div id="b"></div> <div id="c"></div>
</div>
结果如图所示：
1. 指出如下代码的显示结果（酷讯）
<table border=1 width=500 style="text-align:center;">
<tr>
<td rowspan=2 width=50% height=50>a</td>
<td width=50% eight=25>d</td>
</tr>
<tr><td width=50% height=25>b</td></tr>
<tr height=25><td colspan=2>c</td></tr>
</table>
显示效果如图：
1. 如何产生带有数字列表符号的列表？（ ）
A. <ul>
B. <dl>
C. <ol> D. <list>
答案：C
5. 如何显示没有下划线的超连接？（）
A. a {text-decoration:none}
B. a {text-decoration:no underline}
C. a {underline:none}
D. a {decoration:no underline}
答案：A
6. 如下一段 XHTML 代码片断，它不符合 W3C 规范，请问出现了几处错误？
<div id="newsmore">
<ul>
<li><img src="0967_ohmyrabbit.jpg" /></li>
<li>印度总理辛格访华专题</li>
<li>
<ul id="newsmore">
<li>专访辛格：早日解决边界问题是战略目标</li>
<li>辛格称北京奥运将为印度举办赛事提供灵感</li>
<li>印度总理辛格访华参观北京奥运场馆建设</li>
</ul>
</li>
</ul>
</div>
有一处，div 和 ul 有一个相同的 id 属性 newsmore。
1. 请描述出两点以上 XHTML 和 HTML 最显著的区别
(1).XHTML 必须强制指定文档类型 DocType，HTML 不须要
(2).XHTML 全部标签必须闭合，HTML 比较随意
(3).XHTML 严格区分大小写，全部标签的元素和属性的名字都必须使用小写
(4).XHTML 要求全部的标记都必需要有一个相应的结束标记
(5).XHTML 规定全部属性都必须有一个值，没有值的就重复自己
1. 请问，div 和 span, p 标签三者间的区别 (YG)
从语义化的角度来说，div和span标签对于它们包含的元素是没有意义的，而p标签则是
一个语义化标签，表示一个段落。因此div 和 span 通常是用来布局。
从显示的角度来说，span 是内联的，用在一小块的内联 HTML 中，先后不断行，div 元素是块级的，等同于其先后有断行，p 元素是块级的，先后断行，并且还要再隔一行，至关于断两行。
2. CSS 中 class 和 id 的区别(YG)
id：每一个页 ID 是惟一的不能重复。 class：能够设置多个 class 为同一个值。
3. 请列举几个 meta 元素(YG)
<meta name="keywords" contect=""> //向搜索引擎说明你的网页的关键词
<meta name="description" contect=""> //告诉搜索引擎你的站点的主要内容
<meta name="author" contect="你的姓名"> //告诉搜索引擎你的站点的制做的做者
<meta http-equiv="Content-Type" contect="text/html";charset=utf-8"> //指定字符集
<meta http-equiv="refresh" contect="n;url="> //定时让网页在指定的时间 n 内跳转
<meta http-equiv='refresh'contect="n;url">
<meta http-equiv="expires" contect="Mon,12 May 2001 00:20:00 GMT"> // 能够用于设定网页的到期时间，一旦过时则必须到服务器上从新调用。须要注意的是必须使用 GMT 时间格式
<meta http-equiv="pragma" contect="no-cache"> //禁用缓存
<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT"> //cookie 设定，若是网页过时，存盘的 cookie 将被删除。须要注意的也是必须使用 GMT 时间格式
1. 怪异模式和 XHTML 模式下 IE 的宽的区别(YG)
所谓的标准模式是指，浏览器按 W3C 标准解析执行代码；怪异模式则是使用浏览器本身的方式解析执行代码，由于不一样浏览器解析执行的方式不同，因此咱们称之为怪异模式。
浏览器解析时到底使用标准模式仍是怪异模式，与你网页中的 DTD 声明直接相关，DTD 声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略 DTD 声明,将使网页进入怪异模式(quirks mode)。
在 XHTML 模式下，声明一个元素的宽度，仅仅指的是在 css 中设置的 width，而在怪
异模式下，元素的宽度包括 width 和 padding。
1. 实现框架的标签，使用举例(YG)
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" /> <frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
2. 请写出如下 html 标签的含义：input form script style table b img （小米）
<input /> 标签用于搜集用户信息。根据不一样的 type 属性值，输入字段拥有不少种形式。输入字段能够是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<form> 标签用于为用户输入建立 HTML 表单。表单可以包含 input 元素，好比文本字段、复选框、单选框、提交按钮等等。
<script> 标签用于定义客户端脚本，好比 JavaScript。script 元素既能够包含脚本语句，也能够经过 src 属性指向外部脚本文件。
<style> 标签用于为 HTML 文档定义样式信息。
<table> 标签订义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、 th 或 td 元素组成。
<b>呈现粗体文本效果。
<img /> 元素向网页中嵌入一幅图像。
14. 用 css、html 编写一个两列布局的网页，右侧固定宽度 200px，左侧自适应 （小米）方案 1：
HTML 结构：
CSS 样式：
这种方案最简单，但不支持 IE7 及 IE7 如下的浏览器。
方案 2：
HTML 结构
CSS 样式
这种方案，兼容性好，可是会产生额外的标签。
以上就是整合的面试题，你们以为有帮助，就收藏保存吧！