Web前端2019年各大厂经典面试题整理分享

0.543字数 1699阅读 992

春节过后,又是新的一年开始,很多要换行业换工作换岗位的都开始了新一轮的跳槽,那么想要在众多的求职者中让自己脱颖而出呢?怎么样能使得自己更有效的拿到高薪的offer呢?今天千锋老师给大家整理了各大厂常出现的web前端面试题,相信对于很多同学来说看完会有一定的帮助。

1.请说明 HTML 文档中 DTD 的意义和作用(酷讯)

DTD,文档类型定义,是一种保证 html 文档格式正确的有效方法,在解析网页时,浏览器将使用 DTD 来检查页面的有效性(是否符合规范,元素和标签使用是否正确)并且采取相应的措施。同时它还会影响浏览器的渲染模式(工作模式)。

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;}

#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 样式

这种方案,兼容性好,但是会产生额外的标签。

以上就是整合的面试题,大家觉得有帮助,就收藏保存吧!

推荐阅读更多精彩内容