Web前端面试题总结（day3）

最新推荐文章于 2024-05-17 08:18:48 发布

原创最新推荐文章于 2024-05-17 08:18:48 发布 · 1.3k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文总结了Web前端面试中常见的知识点，包括HTML的<a>标签target属性、文本装饰、CSS选择器、浮动清除、盒子模型、标签加粗方式、overflow属性、CSS错误描述、sessionStorage使用、DOCTYPE的描述、CSS中clear的作用、JavaScript执行时机、表单属性对比、CSS Sprites的优缺点、CSS选择器优先级、HTML5标签及CSS百分比参照问题等，是前端面试必备参考资料。

1.在html中通过<a>标签打开一个链接，通过 <a> 标签的 target 属性规定在何处打开链接档。如果在标签<a>中写入target属性，则浏览器会根据target的属性值去打开与其命名或名称相符的框架<frame>或者窗口。在target中还存在四个保留的属性值如下，

属性值

这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。（上面这段出自w3c）

2. { text-decoration:none} 表示去掉文本超链接的下划线

3.div>p的意思是说：选择所有父元素为div的p元素，如果一个p元素的父元素不是div，那么这个p元素是不会被选择的！！！

4.浮动会导致页面的非正常显示，以下几种清除浮动的方法，哪个是不推荐使用的？（C）

A.在浮动元素末尾添加一个空的标签 eg: <div style="clear:both"></div>

B.通过设置父元素overflow值为hidden；

C.父元素也设置浮动

D.给父元素添加clearfix类

四种方法都可以清除，最常用的是D A；

A选项中，通过添加空标签，是W3C推荐的，但会增加多余标签，一般不采用（非不推荐）。

B选项中，如果子元素中有使用了绝对定位，在页面上显示是在父元素外面，一般就没法使用了

C选项中，大型项目一般会多层嵌套，如果采用给父元素设置浮动的方法，那么父元素的父元素很有可能也要设置浮动，页面布局很容易乱掉

5. 标准盒子模型中：盒子的总宽度 = 左右margin + 左右border + 左右padding + width

标准盒子的模型 = margin + border + padding + content ( content = width | height )

IE盒子模型 = margin + content ( content = border + padding + width | height )

6. 网站标签加粗的方式：

1、<b></b>加粗标签元素告诉浏览器把其加b标签的文本以粗体方式显示给浏览者。

2.<strong>标签（不仅是加粗，更加深了语气，符合W3C的标准。）。

3.<em> 标签是告诉浏览器把其中的文本表示为强调的内容。Internet Explorer 等浏览器会用斜体字显示，有些浏览器会用改变文字的颜色等其他方法来实现强调的效果。需要注意的事：

a.如果强调太多，有些重要的短语就会被漏掉；

b.如果强调太少，就无法真正突出重要的部分。这与调味品一样，最好还是不要滥用强调。

4.<h>内容标题标签，能够提升权重。

5.font-weight:bold样式加粗标签，而属性值有三种指定方法：

a.关键字法；

关键字包括“normal”和“bold”两个；

b.相对粗细值法；

相对粗细也是由关键字定义，但是它的粗细是相对于上级元素的继承值而言的，包括“bolder”和“lighter”两个；

c.数字法；

从“100”到“900”的9个数字序列（注意，只能是100、200之类的整百数）。这些数字序列代表从最细（100）到最粗（900）的字体粗细程度。每一个数字定义的粗细都要比上一个等级稍微粗一些。

7.css属性overflow属性定义溢出元素内容区的内容会如何处理？

参数是scroll时候，必会出现滚动条。

参数是auto时候，子元素内容大于父元素时出现滚动条。

参数是visible时，溢出的内容出现在父元素之外。

参数是hidden时，溢出隐藏。

8. 以下描述错误的是（A）

A.cookie以及localStorage都会伴随着http请求发送到服务器

B.get提交的url会有长度的限制，而post提交的数据则可以比较大

C.在javascript中可以操作cookie

D.javascript在浏览器的执行是单线程的

E.html5中的新增存储方式包括localStorage / sessionStorage

A cookie会被Http请求携带，但localStorage不会

9.下列描述错误的是（D）

A.HTTP状态码302表示暂时性转移

B.domContentLoaded事件早于onload事件

C.IE6/7/8不支持事件捕获

D.localStorage存储的数据，在刷新页面后会消失

HTTP状态码302表示被请求的资源暂时转移，然后会给出一个转移后的URL，而浏览器在处理服务器返回的302错误时，原则上会重新建立一个TCP连接，然后再取重定向后的URL的页面；但是如果页面存在于缓存中，则不重新获取；

onload事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了，domContentLoaded事件触发时，仅当DOM加载完成，不包括样式，图片，flash。

web storage有以下几种对象：

sessionStorage：存储特定于某个会话的数据，该数据只保留到浏览器关闭。

globalStorage：目的是跨越会话存储数据，不过要指定哪些域可以访问该数据。如果不使用removeltem()或delete删除，或者用户未清除浏览器缓存，存储在globalStorage上的数据会一直保留在磁盘上。所以globalStorage非常适合在客户端存储文档或长期保留用户偏好设置。

localStorage：在HTML5作为持久保持客户端数据的方案取代globalStorage。它不能被指定访问规则，要访问localStorage，页面必须来自同一个域名，使用同一种协议，在同一个端口上。它的数据也保留到通过JavaScript删除或用户清除浏览器缓存。

10.sessionStorage 保存数据的方法 sessionStorage。setItem（"键名","键值"）;

( 设置一般用set开头，获取采用get开头；键值一般都是(key,value)的形式 )

sessionStorage主要含几种方法：

页面A：存放一个简单的字符串 sessionStorage.obj='123';

页面B：取到给obj var str = sessionStorage.obj;

类型地： sessionStorage.setltem(key,value); sessionStorage.gettltem(key,value);

sessionStorage.remove(key);

10.下面有关html Doctype的描述，说法错误的是？（D）

A. 它的责任就是告诉浏览器文档使用哪种html或者xhtml规范

B. 不同文档模式主要影响css内容的呈现，尤其是浏览器对盒模型的解析

C. 不同浏览器在混杂模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。

D. 如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启严格模式

hack技术主要是为了某些浏览器特定设置的，写在css中，里面可以嵌套style和html代码，不可以写在style中。如果在文档开始处没有文档类型声明，则浏览器会开启 混杂模式

11.css中clear的作用是指明该元素周围不可出现浮动元素

clear : none | left | right | both.

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

清除浮动方法，

1，给父级元素添加class=“clearflex”

2，在css中给父级添加属性：overflow：hidden；

3，伪元素清除法，

4，建立空的div，命名为clear，在css中添加clear：both；

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

12.JavaScript写在HTML代码中的 <body>标签部分会导致页面在加载的时候自身被执行

放在<head>部分会先加载完js再加载页面

放在<body>部分会在加载页面时候加载

13.form表单中input元素的readonly与disable属性描述 Disabled为真时，input的值不会随着表单提交

disabled指当input元素加载时禁用此元素。input内容不会随着表单提交

readonly规定输入字段为只读。input内容会随着表单提交。

无论设置readonly还是disabled，通过js脚本都能更改input的value

disabled和readonly这两个属性有一些共同之处，比如都设为true，则form属性将不能被编辑，往往在写js代码的时候容易混合使用这两个属性，其实他们之间是有一定区别的：

如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。
而readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。

14.下面有关CSS sprites说法错误的是？（C）

A. 允许你将一个页面涉及到的所有零星图片都包含到一张大图中去

B. 利用CSS的 "backgroud-image","background-repeat","background-position"的组合进行背景定位

C. css Sprites虽然增加了总的图片的字节，但是很好地减少网页的http请求，从而大大的挺高页面的性能

D. sprites整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名

CSS Sprites

1.简介

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中，利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，访问页面时避免图片载入缓慢的现象。

2.优点

（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

（2）CSS Sprites能减少图片的字节；

（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。

（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

3.缺点

（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。

（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。

（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。

（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

15.下列辅助类的说法错误的是？（C）

A. <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <br>可以用来表示一个关闭按钮

B. <span class="caret"></span>可以用来表示一个三角字符

C. navbar可使用pull-left类来定义

D. navbar可使用navbar-left类来定义

16. CSS选择器：ID选择器>Class选择器=伪类>标签名称选择器

优先级由高到低可分为：

在属性后面使用!important会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器 = 伪类选择器=属性选择器（后面的样式会覆盖前面的样式）
标签选择器
通配符选择器
浏览器自定义的样式

17.

HTML5不再支持<font>标签；

HTML5中，

<q>标签定义一个短的引用；

<ins>标签定义文档的其余部分之外的插入文本；

<menu>标签定义菜单列表。当希望列出表单控件时使用该标签（HTML4不支持该标签）

18.当margin-top、padding-top的值是百分比时，计算为相对最近父级块级元素的width，相对最近父级块级元素的width

CSS 百分比参照问题

参照父元素宽度的元素：padding margin width text-indent

参照父元素高度的元素：height

参照父元素属性:font-size line-height

特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度

19. 给定下面的 HTML 代码：（C）

<div id=”wrapper”>

<div class=”wText”>…</div>…<!—more wText items here -->

<div class=”wImg”>…</div>…<!—more wImg items here -->

<div class=”wVideo”>…</div>…<!—more wVideo items here -->

</div>

怎么能够取得 ”wrapper” 中全部项的集合？

A. $(‘#wrapper’).children();

B. $(‘#wrapper’).html();

C. $(‘#wrapper’).contents();

D.$(‘#wrapper’).find(“all”);

$(‘#wrapper’).children(); //（只沿着 DOM 树向下遍历单一层级）查询直接的子元素。而不管子元素的子元素。

$(‘#wrapper’).html(); //返回的是dom结构。而不是集合

$(‘#wrapper’).contents();

$(‘#wrapper’).find(“all”); //并没有all这个元素

20. css中可继承的属性

所有元素可继承：visibility和cursor。内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、 font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。终端块状元素可继承：text-indent和text-align。列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。