Web前端开发笔试面试题

来源：互联网发布：根域名中国镜像服务器编辑：程序博客网时间：2024/05/21 19:41

1、javascript中包含的数据类型有：

　　Undefined、Null、Boolean、Number、String 还有一种复杂的数据类型Object
2、使用什么属性可以让内联元素也可以定义margin-top和margin-bottom？
　　line-height

3、html5有哪些新特性？
　　(1)新的文档类型:声明方式<!DOCTYPE html>
　　(2)脚本和链接无需type
　　(3)语义Header和Footer：以前<div id="header(footer)"></div>，现在<header(footer)></header(footer)>
　　(4)新元素Hgroup：<hgroup><h1></h1><h2></h2></hgroup>
　　(5)标记元素（高亮标签）：<mark></mark>比如说，当我在某博客中搜索“Open your Mind”时，我可以利用一些JavaScript将出现的词组用<mark>修饰一下.
　　(6)图形元素：修饰图片注释<figure><img src="" alt=""><figcaption><p>图片注释</p></figcaption></figure>
　　(7)重新定义<small>,定义小字1、css文件，以及js文件尽量分别都放在一个文件里，因为客户端请求服务器的次数就会减少。
　　(8)占位符placeholder：你需要用JavaScript来给文本框添加占位符。比如，你可以提前设置好一些信息，当用户开始输入时，文本框中的文字就消失。
　　而在HTML5中，新的“placeholder”就简化了这个问题。
　　(9)必要属性：当文本框被指定必需时，如果空白的话表格就不能提交,输入框高亮显示。如<input type="text" name="aaa" required>或required="required" />
　　(10)Autofocus自动聚焦属性，如：<input type="text" name="aaa" placeholder="bbb" required autofocus="autofocus" />
　　(11)Audio支持<audio>渲染音频：如：<audio autoplay="autoplay" controls="controls"><source src="file.ogg" /><source src="file.mp3" /><a href="file.mp3">下载　　　　　</a></audio>
当使用<audio>元素时记得包含两种音频格式，FF想要.ogg格式的文件，而Webkit浏览器则需要.mp3格式的，IE不支持，且Opera10及以下版本只支持.wav格式。
(12)Video支持<video>,和<audio>类似，需要提供两种格式.mp4和.ogv
(13)视频预加载属性：<video preload>或者<video preload="preload">
(14)显示控制条:video元素不指定controls属性时，视频仅仅显示一张图片，没有控制条，为了渲染出播放控制条，必须在video元素内指定controls属性，如：<video preload controls>
(15)正则表达式pattern属性：如：<input type="text" name="a" id="b" placehorder="4<>10" pattern="[A-Za-z]{4,10}" autofocus required />
4、如果让你来制作一个访问量很高的大型网站，你会如何管理所有的CSS文件、JS文件？

　　(1)css文件，以及js文件尽量分别都放在一个文件里。

　　(2)背景图片尽量放到一张图片中，用background-position来定位。

　　(3)CSS跟HTML分文件夹并行存放,命名均要统一。

5、用JS写一个数组去重：

var aa=[1,3,5,4,3,3,1,4]function arr(arr) {  var result=[];  for(var i=0; i<arr.length; i++){    if(result.indexOf(arr[i])==-1){      result.push(arr[i]);    }  }  console.log(result);}      arr(aa);

6.JS添加、删除节点

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

创建新元素<p>：

var x = document.createElement("p");

向 <p> 元素添加文本：

var y = document.createTextNode("文本");

向 <p> 元素追加这个文本节点：

x.appendChild(y);

向一个已有的元素追加这个新元素<p>:

var z = document.getElementById("div1");

z.appendChild(x);

如需删除 HTML 元素，您必须首先获得该元素的父元素：

var parent = document.getElementById("div1");

var child = document.getElementById("p");

parent.removeChild(child);

7.通过 id 查找 HTML 元素：

var x = document.getElementById("y");

8. JavaScript 改变 HTML 元素的内容:

document.getElementById("id").innerHTML="新内容";

改变 HTML 元素的属性：

document.getElementById("id").属性="新的值";

9.JavaScript 改变 HTML 元素的样式:

例如：document.getElementById("id").style.color="red";

10.mouseover和mouseout事件

分别用于鼠标移至或移开HTML元素上方触发事件。

11.DOCTYPE是用来做什么的？

DOCTYPE标签是一种标准通用标记语言的文档类型声明，目的是告诉浏览器的解析器应该使用什么样的文档类型来解析文档。

12.一次完整的HTTP事务过程？

基本流程：

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求，浏览器得到html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

13.HTTP状态码:

1xx 信息状态码

2xx 成功状态码

3xx 重定向

4xx 客户端错误

5xx 服务器错误

14.CSS的引入方式？

（1）内联样式：标签内css

（2）外部样式表：在<head>标签中用<link>标签从外部引入css

（3）内部样式表：在<head>标签中用<style>定义css

（4）使用@import引入外部css文件

15.什么是盒子模型？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（又叫填充）（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

16.什么是CSS Hack？

针对不同浏览器的不同版本所写的CSS。

17.性能优化：

（1）减少http请求次数：CSS Sprites，JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。

（2）前端模板：JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。

（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4）当需要设置的样式很多时设置className而不是直接操作style。

（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

（7）图片预加载，将样式表放在顶部，将脚本放在底部。

阅读全文

0 0