Web前端开发面试题

来源：互联网发布：yoast seo设置编辑：程序博客网时间：2024/05/02 02:27

1、 W3C标准有哪些？

W3C推行的主要规范有HTML，CSS，XML，XHTML和DOM（Document ObjectModel）。

2、谈谈Js的内存泄露问题。

3、谈谈对Html 5的了解。

4、谈谈对CSS 3的了解。

5、用js实现随即选取10--100之间的10个数字，存入一个数组，并排序。

var iArray = [];funtion getRandom(istart, iend) {    var iChoice = istart - iend + 1;    return Math.floor(Math.random() * iChoice + istart);}for (var i = 0; i < 10; i++) {    iArray.push(getRandom(10, 100));}iArray.sort();

6、把两个数组合并，并删除第二个元素。

var array1 = ['a', 'b', 'c'];var bArray = ['d', 'e', 'f'];var cArray = array1.concat(bArray);cArray.splice(1, 1);

7、Js面向对象的几种方式。

8、请谈谈原型方式构造对象的特点。

9、在Css中那个属性会影响dom读取文档流的顺序。答： float属性。

10、请介绍几种用div实现两列布局的方案（兼容），另外要考虑文档流的加载。

11、谈谈css在浏览器中的兼容问题，详细谈谈IE6的一些bug,以及解决方案。

12、谈谈你对闭包的理解。以及如何实现js方法的重写。

13、Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

首先我讲讲如何触发两种模式：加入xml头部声明可以触发IE浏览器的Quirks mode，触发之后，浏览器解析方式就和IE5.5一样，拥有IE5.5一样的bug和其他问题，行为（Javascript）也是如此。

IE6的触发

在XHTML的DOCTYPE前加入XML声明

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

IE7的触发

在XML声明和XHTML的DOCTYPE之间加入HTML注释

<?xml version="1.0"encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

IE6和IE7都可以触发的

在HTML4.01的DOCTYPE文档头部加入HTML注释

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

其次是这样的意义：各个浏览器的混杂模式，基本就是各个浏览器的私有模式，不相互兼容。

所以，除非是为了兼容的问题，比如你不想修改很久很久以前做的IE ONLY的网页，否则刻意触发混杂模式没有任何意义。

14、行内元素有哪些？块级元素有哪些？CSS的盒模型？

块级元素

<address> information on author

<blockquote> longquotation

<button> push button

<caption> table caption

<dd> definitiondescription

<del> deleted text

<div> generic language/stylecontainer

<dl> definition list

<dt> definitionterm

<fieldset> form control group

<form> interactive form

<h1>heading

<h2> heading

<h3> heading

<h4> heading

<h5> heading

<h6> heading

<hr> horizontal rule

<ins>inserted text

<legend> fieldset legend

<li> list item

<map> client-sideimage map

<noframes> alternate content container for non frame-basedrendering

<ol> ordered list

<p>paragraph

<pre> preformatted text

<table> table <tbody> tablebody <td> table data cell <tfoot> table footer <th> tableheader cell <thead> table header <tr> table row

<ul> unorderedlist

行内元素

<a> anchor

<abbr> abbreviated form

<acronym> acronym

<b> bold text style

<bdo> I18N BiDi over-ride

<big> large text style

<br> forced line break

<button> push button

<cite> citation

<code> computer code fragment

<del> deleted text

<dfn> instance definition

<em> emphasis

<i> italic text style

<img> Embedded image

<input> form control

<ins> inserted text

<kbd> text to be entered by the user

<label> form field label text

<map> client-side image map

<q> short inline quotation

<samp> sample program output,scripts, etc.

<select> option selector

<small> small text style

<span> generic language/stylecontainer

<strong> strong emphasis

<sub> subscript

<sup> superscript

<textarea> multi-line text field

<tt> teletype or monospaced textstyle

<var> instance of a variable orprogram argument

15、行内元素与块级元素有什么不同？

1)尺寸-块级元素和行内元素之间的一个重要的不同点

行内元素和width

W3C CSS2 标准规定行内元素、非置换元素不会应用width属性。

行内元素和height

W3C CSS2 标准规定行内元素、非置换元素不会应用height属性，但是盒子高度可以通过line-height来指定。

行内元素和padding

你可以给行内元素设置padding，但只有padding-left和padding-right生效。

行内元素和marging

margin属性也是和padding属性一样，对行内元素左右有效，上下无效。

记住对行内元素

设置宽度width 无效。

设置高度height 无效，可以通过line-height来设置。

设置margin 只有左右margin有效，上下无效。

设置padding 只有左右padding有效，上下则无效。

注意元素范围是增大了，但是对元素周围的内容是没影响的，看图上效果就知道了

16、盒子模型

W3C 组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。

盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。

对于初学者，经常会搞不清楚 margin，background-color，background- image，padding，content，border之间的层次、关系和相互影响。

这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。

每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。

关于盒模型，还有以下几点需要注意：

·对于块级元素（display:block），未浮动的垂直相邻元素的上边界和下边界会被压缩，

例如：有上下2个元素，上元素的下边界为5px，下面元素的上边界为20px，则实际2个元素的间距为20px（2个边界值中较大的值）。

块级元素（display： block）

每个块级元素都从一个新行开始，而且其后的元素也需另起一行开始，标题、段落、表格、层、body等都是块级元素。

块级元素只能作为其他块级元素的子元素，而且需要一定的条件。

内联元素

例如<a>、<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。

注2. 内联元素（display：inline）内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。 ·浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。

如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0%，因此不会被显示，此点在采取层布局的时候需特别注意。

边界值可为负，其显示效果各浏览器可能不相同。

填充值不可为负。

边框默认的样式（border-style）为不显示（none）。

1 0