一个小公司的前端笔试HTML CSS JS

2022-02-24 18:19:52

网上有这套题的答案，版本也很多，我做了很多参考。本文就当个小笔记，可能有错误，还望指正~

第1章  Html篇

1. 你做的网页在哪些浏览器测试过？这些浏览器的内核分别是什么？

浏览器类型

内核

Firefox

Gecko

搜狗、谷歌chrome

WebKit

360

Chromium+Trident

2.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

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

DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

3. Quirks模式是什么？它和Standards模式有什么区别？

quirks和standards的区别很多都可以归为IE5和IE6的区别。

盒模型的高宽包含内补丁和边框：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks模式下，I E的宽度和高度还包含了 padding和border。IE5.5及以下的浏览器即使在Standards模式下，也会有这个问题。

可以设置行内元素的高宽：在Standards模式下，给span等行内元素设置width和height都不会生效，而在quirks模式下，则会生效。

可设罝百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置—个百分比的高度是无效的。

用margin：0 auto设罝水平居中在IE下会失效：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。Quirks模式下的解决办法，用text-align属性。

设罝图片的padding会失效。

Table中的字体属性不能继承上层的设罝

white-space: pre会失效

http://blog.sina.com.cn/s/blog_675e54810101ce0b.html

4. img的alt与title有何异同？ strong与em的异同？

img 元素向网页中嵌入一幅图像，img标签有两个属性分别为alt和title。

alt和title的相同点:

同属于img的属性，可以替代图片显示为文本。

不同点：alt是图片在无法正确显示的时候起到文本替代的作用，title在鼠标滑过时显示的文字提示。

5. 请描述一下 cookies，sessionStorage 和localStorage 的区别？

共同点：都是保存在浏览器端，且同源的。

区别：

①cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

② 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

③ 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

④ 作用域不同，sessionStorage不在不同的浏览器窗口*享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

⑤ Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。

⑥ Web Storage 的 api 接口使用更方便。

6. 简述一下src与href的区别。

src和href之间存在区别，能混淆使用。src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

<script src ="js.js"></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

<link href="common.css" rel="stylesheet"/>

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

7. 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示

8. 在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，—次js请求一般情况下有哪些地方会有缓存处理？

dns缓存，cdn缓存，浏览器缓存，服务器缓存。

9. —个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加 载，给用户更好的体验。

  • 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
  • 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
  • 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
  • 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
  • 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

10. 谈谈从前端角度出发做好SEO需要考虑什么？

  • 了解搜索引擎如何抓取网页和如何索引网页

　　你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。

  • Meta标签优化

　　主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。

  • 如何选取关键词并在网页中放置关键词

　　搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

  • 了解主要的搜索引擎

　　虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。

  • 主要的互联网目录

　　Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。

  • 按点击付费的搜索引擎

　　搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。

  • 搜索引擎登录

　　网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。

  • 链接交换和链接广泛度（Link Popularity）

　　网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。

  • 合理的标签使用

第2章   Css篇:

1. CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

最基本的：设置display：none，或者visibility：hidden

技巧性：设置宽高为0，设置透明度为0，设置z-index位置在-1000

2. 超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

3. 什么是Css Hack? ie6,7,8的hack分别是什么？

针对不同的浏览器写不同的CSS code的过程，就叫CSS hack。

一个小公司的前端笔试HTML CSS JS

4. 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

块级元素(block)特性：

  • 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
  • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

　　内联元素(inline)特性：

  • 和相邻的内联元素在同一行;
  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。

　　那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

　　答案：<input> 、<img> 、<button> 、<textarea> 、<label>。

5. Rgba（）和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

6. css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

　　垂直方向：line-height

水平方向：letter-spacing

　  那么问题来了，关于letter-spacing的妙用知道有哪些么？

　　答案:可以用于消除inline-block元素间的换行符空格间隙问题。

7. px和em的区别。

 什么是px和em
px像素（Pixel）。相对长度单位。 像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册);em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸 未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册);px和em的用法px.是绝对长度单位多我们会将它用于设置页面的宽度和高度等 一些绝对的布局和定上，而em则用之来设置字体的大小等一些相对定位；

 px和em的区别
1.IE无法调整那些使用px作为单位字体的大小；
2.国外的大部分网站能够调整字体大小的原因在于其使用了em作为字体单位；
3.Firefox能够调整px和em，在我国但是96%以上网民使用IE浏览器(或内核)。

1em=16px

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。

8. 描述一个“reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同处？

不同的浏览器对一些元素有不同的默认样式，Normalize.css 和 Reset CSS都是用来重置浏览器默认样式。

最主要的区别是Normalize.css保留不同浏览器同标签相同的默认值，只重置不同默认样式的差异，可以说css reset的高级版。

相对于普通的css reset，Normalize的的浏览器的兼容性更好，毕竟是专业人士经过不同版本浏览器测试打造的css文件，看看它的兼容性就知道多强悍：Google Chrome
(latest)、Mozilla Firefox (latest)、Mozilla Firefox
ESR、Opera (latest)、Apple Safari 6+、Internet Explorer
8+

9. Sass、LESS是什么？大家为什么要使用他们？

相同点：两者都是CSS预处理器，都具有相同的功能，可以帮助我们快速编译代码，帮助我们更好的维护我们的样式代码或者说维护项目吧。
不同点：语法规则不同，当然功能或许略有差别
我选择Sass的原因：
1、Sass也是成熟的CSS预处理器之一，而且有一个稳定，强大的团队在维护
2、Sass对于我来说参考的教程多
3、Sass有一些成熟稳定的框架，特别是Compass，新秀还有Foundation之类
4、还有一个原因是国外讨论Sass的同行要多于LESS

10. display:none与visibility:hidden 的区别是什么？

  • display : 隐藏对应的元素但不挤占该元素原来的空间。
  • visibility: 隐藏对应的元素并且挤占该元素原来的空间。

　　即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

第3章  Javascript:

1. JavaScrip的数据类型都有什么？

基本数据类型：String,boolean,Number,Undefined, Null

　　引用数据类型：Object(Array,Date,RegExp,Function)

2. 己知ID的Input输入框，希望获取这个输入框的输入值，怎么做？（不使用第三方框架)

document.getElementById(“ID”).value

3. 希望获取到页面中所有的checkbox怎么做？（不使用第三方框架）

一个小公司的前端笔试HTML CSS JS

4. 当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？

一个小公司的前端笔试HTML CSS JS

5. 什么是Ajax和JSON，它们的优缺点。

一个小公司的前端笔试HTML CSS JS

http://blog.sina.com.cn/s/blog_8a30865f0101amjh.html

6. 看下列代码输出为何？解释原因。

var a;

alert(typeof(a));

alert(b);

一个小公司的前端笔试HTML CSS JS

　　解释：Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

7. 看下列代码，输出什么？解释原因。

var a = new
Object();

a.value = 1;

b = a;

b.value = 2;

alert(a.vaIue);

输出2.

8. 说出以下函数的作用是？空白区域应该填写什么？

一个小公司的前端笔试HTML CSS JS

9. (设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS)回答出基本概念和过程即可。

a)       给需要拖拽的节点绑定mousedown,
mousemove, mouseup事件

b)      mousedown事件触发后，开始拖拽

c)       mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置

d)      mouseup时，拖拽结束

e)       需要注意浏览器边界的情况

10.原生 JS 的 window.onload 与 Jquery 的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

上一篇：C++类的大小


下一篇：Linux Ubuntu 安装、汉化、常用操作