浙江大华前端面试题

阅读量：

1、行内标签和块组标签有哪些

块组标签：

、

...

、

、、

、

、

行内标签：a、span、em、strong、b、i、u、label、br、img；

块级元素和内联元素的区别

1. 块级元素会独占一行，其宽度自动填满其父元素宽度

行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，

2. 一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效

（注意，块级元素设置了width宽度属性后仍然是独占一行的）

3. 块级元素可以设置margin,padding属性

行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果

2、div和span的区别

（一)span和div功能区别

span和div区别在于，div是一个块级元素，它包含的元素会自动换行。

而span是行内元素，在它的前后不会换行。span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素。

span可以作为div的子元素，但div不能是span的子元素，如果出现span中出现div不符合ws3c的页面标准。

（二）span和div使用区别

span元素宽度是被包围的内容宽度决定，不建议给span设置宽度属性width，可以给span设置margin值，设置与父元素之前的距离。

span可以通过css声明（display:block）转换为块元素，想对一行中的文字或图片单独设置样式，而又由不需要换行的条件下又不影响其他行内其他内容，span可以很好解决这些问题

3、写出ul、ol、dl的区别

1.ul是无序列表 ，也就是说没有排列限制可以随意加li；

2.ol有序列表 ，会按照你写的li前后依次排列；

3.dl是定义列表 ，会默认前后层级关系；

我是头

我是内容

我是内容

我是头

--我是内容

--我是内容

4、如何理解标签语义化、它有哪些好处

标签语义化 ：简单来说，就是让标签有含义，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，不论是谁都能够看懂这块内容是什么，并且有利于搜索引擎。

好处：

1. HTML结构清晰

2. 代码可读性较好

3. 无障碍阅读

4. 搜索引擎可以根据标签的语言确定上下文和权重问题

5. 移动设备能够更完美的展现网页（对css支持较弱的设备） 6. 便于团队维护和开发

5、css的选择符有哪些，优先级如何计算，哪些属性可以继承

选择符：

1.id选择器（#id）

2.类选择器（.class）

3.标签选择器（div，h1，p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[title]）

9.伪类选择器（a:hover，li:nth-child）

优先级如何计算

1.优先级就近原则，同权重情况下样式定义最近者为准；

2.载入样式以最后载入的定位为准；

3.!important > id > class > tag；

4.important 比内联优先级高，但内联比id要高；

哪些属性可以继承

1.字体系列属性 font，font-family，font-weight，font-size，font-style，font-variant，font-stretch，font-size-adjust

2.文本系列属性 text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，direction，color

3.元素可见性 visibility

4.表格布局属性 caption-side，border-collapse，border-spacing，empty-cells，table-layout

5.列表布局属性 list-style-type，list-style-image，list-style-position，list-style

6.生成内容属性 quotes

7.光标属性 cursor

8.页面样式属性 page，page-break-inside，windows，orphans

9.声音样式属性 speak，speak-punctuation，speak-numeral，speak-header，speech-rate，volume，voice-family，pitch，pitch-range，stress，richness，azimuth，elevation

6、css的盒模型有哪些

盒模型：

1、W3C盒模型（标准盒模型）：盒模型的width与height只含content，不包括padding和border。

2、IE盒模型（怪异盒模型）：IE盒模型的width与height是content、padding和border的总和。

盒子模型组成：

margin（外边距）、border（边框）、padding（内边距）、content（内容）

margin、border、padding是CSS属性，content则是HTML元素的内容

盒子模型大小

盒子真正的宽和高按下面公式计算：

默认情况下width和height属性只是设置content（内容）部分的宽和高

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

7、经常遇到的css兼容性的问题有哪些？如何解决

8、用JavaScript对string对象添加一个去前后空格的方法

String.prototype.Trim = function () {
return this.replace(/(^\s*)|(\s*$)/g, "");
}

String.prototype.LTrim = function () {
return this.replace(/(^\s*)/g, "");
}

String.prototype.RTrim = function () {
return this.replace(/(\s*$)/g, "");
}

9、优化一个页面的加载速度，从哪几方面入手

一、减少HTTP请求

二、用css sprites降低图片数量

三、添加Expires头 ：页面的初次访问者会进行很多HTTP请求，通过使用一个长久的Expires头，可以使这些组件被缓存，下次访问的时候，就可以减少不必要的HTPP请求，从而提高加载速度。

四、压缩组件 ：Web客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持：Content-Encoding: gzip

五、将样式表放在头部 ：对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。

六、将脚本放在底部 ：脚本放在底部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现。

七、避免CSS表达式： 事件处理机制：用js事件处理机制来动态改变元素的样式，使函数运行次数在可控范围之内。

八、使用外部的JavaScript和CSS ：内联脚本或者样式可以减少HTTP请求，按理来说可以提高页面加载的速度

九、减少DNS查找：

十、精简JavaScript

十一、避免重定向

十二、删除重复脚本

十三、配置ETag

10、用JavaScript实现一个对象的继承

ES5继承是先创建子类的实例对象this，再向this对象中添加父类的方法；
ES6继承是先创造父类的实例对象this，再用子类的构造函数修改this。

11、js怎么捕获异常

try...catch 用来异常捕获（主要适用于IE5以上内核的浏览器，也是最常用的异常捕获方式）

使用onerror时间捕获异常，这种捕获方式是比较古老的一中方式，目前一些主流的浏览器暂不支持这种

12、es6和es5的不同

什么是ES5

作为ECMAScript第五个版本（第四版因为过于复杂废弃了），浏览器支持情况可看第一副图，增加特性如下。

1. strict模式

严格模式，限制一些用法，'use strict';

2. Array增加方法

增加了every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法

PS：还有其他方法 Function.prototype.bind、String.prototype.trim、Date.now

3. Object方法

Object.getPrototypeOf

Object.create

Object.getOwnPropertyNames

Object.defineProperty

Object.getOwnPropertyDescriptor

Object.defineProperties

Object.keys

Object.preventExtensions / Object.isExtensible

Object.seal / Object.isSealed

Object.freeze / Object.isFrozen

PS：只讲有什么，不讲是什么。

什么是ES6

ECMAScript6在保证向下兼容的前提下，提供大量新特性，目前浏览器兼容情况如下：

ES6特性如下：

1.块级作用域关键字let, 常量const

2.对象字面量的属性赋值简写（property value shorthand）

ES5 与 ES6六大不同

1、类Class

2、模块Module 导出变量导出函数导入

3、箭头函数

4、不再支持Mixins。

5、ES6不再支持自动绑定。

13、js原型链

只要是使用new方法得到的对象，不管是string还是Number或者Boolean，这三种数据类型都有其函数对应的prototype方法，而他们三种数据的prototype方法的上一层（prototype.__proto__）就是object对象的prototype方法。

而.__proto一层一层的指向就可以被称为原型链 。

作者：孙炎_
链接：https://www.jianshu.com/p/6ec88183541c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

14、有一个数组，求数组按age排序的结果

sort()对数组排序，不开辟新的内存，对原有数组元素进行调换

1、简单数组简单排序

var arrSimple=new Array(1,8,7,6);

arrSimple.sort();

document.writeln(arrSimple.join());

2、简单数组自定义排序

var arrSimple2=new Array(1,8,7,6);

arrSimple2.sort(function(a,b){

return b-a

});

document.writeln(arrSimple2.join());

解释：a,b表示数组中的任意两个元素，若return > 0 b前a后；reutrn < 0 a前b后；a=b时存在浏览器兼容简化一下：a-b输出从小到大排序，b-a输出从大到小排序。

15、自定义http请求头

果你想在你的服务器 HTTP response 报文头中包含自定义的 HTTP header，流程将会很简单。我们将在接下来告诉你在 Apache 和 Nginx 上配置自定义header所需要配置。

Apache

对于 Apache 用户来说，把下面的片段添加进 .htaccess 文件。将 Custom-Header-Name 和 Custom Header Value 替换为想要的自定义header 名字和值就可以了。
复制代码
    Header set Custom-Header-Name "Custom Header Value"
Nginx

对于 Nginx 用户来说，将下面这个片段添加进 configuration 文件。
复制代码
    add_header Custom-Header-Name "Custom Header Value"
16、常见的http状态码

200 - 请求成功

301 - 资源（网页等）被永久转移到其它URL

404 - 请求的资源（网页等）不存在

500 - 内部服务器错误

17、冒泡排序

18、ajax跨域，cors怎么设置original

Jsonp 跨域

Jsonp 的实现原理就是：创建一个回调函数，然后在远程服务上调用这个函数并且将 JSON 数据形式作为参数传递，完成回调。

CORS（跨域资源共享）

跨源资源共享标准通过新增一系列 HTTP 头，让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源。

对于 GET 以外的 HTTP 方法，或者搭配某些 MIME 类型的 POST 请求，如：PUT 或者 DELETE 等，

以及如果自定义了请求头的话，浏览器必须先以 OPTIONS 请求方式发送一个预请求 (Preflight Request)，

从而获知服务器端对跨域请求所支持的 HTTP 方法，确认了服务器端允许该跨域请求的情况下，以实际的 HTTP 请求方法发送真正的请求。

使用 CORS，其实主要都是服务器端的配置，都是设置一系列的响应头 (Response Headers)
复制代码
复制代码
 Access-Control-Allow-Origin:  http://www.YOURDOMAIN.com             // 设置允许请求的域名，多个域名以逗号分隔



 Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS       // 设置允许请求的方法，多个方法以逗号分隔



 Access-Control-Allow-Headers: Authorization                         // 设置允许请求自定义的请求头字段，多个字段以逗号分隔



 Access-Control-Allow-Credentials: true
复制代码
### 19、vue父子组件，兄弟组建之间的通信

**一、父组件- >子组件**

（1）直接关系：

1\. 属性传值(props)

2\. $children（数组）

3\. $refs

（2）跨多层关系：

1\. provide / inject

**二、子组件- >父组件**

（1）直接关系：

1\. 事件传值

2\. $parent

（2）跨多层关系：

1\. 暂无

**三、兄弟组件**

（1）使用事件中心，实例化一个空的 Vue 实例（建议使用vuex）

### 20、数组的排序方法，如何继承一个自定义的includes数组方法，用于判断数组中是否包含某个元素，若是返回true，否则false

### 21、常见的数组结构

（1）线性数据结构：元素之间一般存在元素之间存在一对一关系，是最常用的一类数据结构，典型的有：数组、栈、队列和线性表

（2）树形结构：结点间具有层次关系，每一层的一个结点能且只能和上一层的一个结点相关，但同时可以和下一层的多个结点相关，称为“一对多”关系，常见类型有：树、堆

（3）图形结构：在图形结构中，允许多个结点之间相关，称为“多对多”关系

### 22、h5中的<video>支持的媒体格式

1）MPEG-4

2）ogg

3）webm

### 23、怎么理解h5标签语义化

通过标签判断内容语义，例如根据h1标签判断出内容是标题，根据<p>判断内容是段落、<input>标签是输入框等。

### 24、绘制图形的方式有哪些，除了直接插图

1）canvas

2）svg

3）font-size

### 25、css3的优雅降级和渐进增强

**渐进增强（Progressive Enhancement）** ：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

**优雅降级（Graceful Degradation）** ：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

**优雅降级和渐进增强只是看待同种事物的两种观点** 。优雅降级和渐进增强都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处，以及这种关注如何影响工作的流程。

**优雅降级** 观点认为应该针对那些最高级、最完善的浏览器来设计网站。

**渐进增强** 观点则认为应关注于内容本身。

### 26、vue的父子组件如何传值

### 27、如何理解MVVM

MVVM分为Model、View、ViewModel三者。

  * Model：代表数据模型，数据和业务逻辑都在Model层中定义；
  * View：代表UI视图，负责数据的展示；
  * ViewModel：就是与界面(view)对应的Model，ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

简单的说，ViewModel就是View与Model的连接器，View与Model通过ViewModel实现双向绑定。

### 28、创建对象的方法有哪些

一.最基本的：类名 对象名 Person person = new Person（）；

二.匿名对象:new 类名（） new Person（）；

三.通过反射： Class c = Class.forName（"类的全路径"）； Person person = （Person）c.newInstance();

### 29、原型（函数、原型、实例之间的关系）
全部评论 (0)
还没有任何评论哟~
相关文章推荐
浙江大华前端面试题
1、行内标签和块组标签有哪些块组标签：<div、<p、<h1...<h6、<ol、<ul、<dl、<table、<address、<blockquote、<form 行内标签：a、span、em、s...
浙江大华面试过程
去杭州是我弟弟接的我他在杭州理工读书。去的时候是下午，由于是做硬件的，有自己独立的大厦，去的时候不让我弟进去。我弟就只能在保安那个接待外来的人的地方玩（ps：我弟在里面睡觉了2个小时，很感想我弟陪我...
浙江-杭州-大华【面试题+答案】
先做个简单的自我介绍 2.ui自动化大概有实现哪些功能 3.那你上传文件是直接调他的接口去传还是ui的方式去点然后去传的 4.ui自动化调试的过程中有没有遇到一些问题，比如元素找不到之类的东西 5.本...
浙江大华 2021 春招面试总结
岗位：嵌入式软件工程师一面（电话面试25分钟） 1、自我介绍 2、简历中写了做过朱友鹏老师的海思音视频项目，所以问了海思项目。回答：问vivpssvenc模块的东西，问这些模块里面的代码有没有深入...
浙江大华 2021 秋招面试总结
岗位：嵌入式软件工程师浙江大华笔试一共37道题，35道选择填空，2道编程，时间60分钟，C语言一半，C++一半。一面是晚上九点半打电话过来，过程15分钟，可能他们还在加班。二面是现场面，20分钟...
浙江大华一面面经（7.16号）
之前收到的短信是十天内电话面，实验室的其他同学是五天内，我想着我应该下周了吧。啪的一下，很突然，一个浙江杭州的电话打来了！面试官：wai，你好，是xx同学吗? 我：是的面试官：我是浙江大华的面试...
浙江大华2012笔试+解析
一、程序编写题 1.函数checkstr判断一个字符串是不是对称的，如：“abccba”是对称的，abccbaa则不是对称的。函数声明如下，其中msg为输入的字符串，对称返回0，不对称返回1，请实现该...
浙江大华2011.10.10校园招聘会笔试题
请写出下面程序的输出结果：（答案在下面） 1、 intcount=3; intmainvoid inti,sum,count=2; fori=0,sum=0;i<count;i+=2,count++ ...
浙江-杭州-数字浙江春招一面【面试题+答案】
数字浙江——杭州 1.好的，然后我们先从一个用例的一个场景设计起开始，然后我的题目是需要你做一个购物车的用例设计。这个你需要从两个角度考虑，第一个是商品展示，第二个是商品库存。
浙江大华股份有限公司笔试/面试总结
9月份参加了浙江大华的实习生招聘，总共分笔试、主管面（两个人）、HR面试、终面。笔试：一共五个题目（四题和五题可以任选一道题目，我选择了题目四）都是编程题 1、给一个整数数组，然后计算出第二大的数...
未开通会员
会员专享资源、会员博客等服务
免责声明
鲁ICP备2023021068号-1
© 2024 技术社区 .All Rights Reserved.

是否确定退出登录?

浙江大华前端面试题

1、行内标签和块组标签有哪些

...

2、div和span的区别

3、写出ul、ol、dl的区别

4、如何理解标签语义化、它有哪些好处

5、css的选择符有哪些，优先级如何计算，哪些属性可以继承

6、css的盒模型有哪些

7、经常遇到的css兼容性的问题有哪些？如何解决

8、用JavaScript对string对象添加一个去前后空格的方法

9、优化一个页面的加载速度，从哪几方面入手

10、用JavaScript实现一个对象的继承

11、js怎么捕获异常

12、es6和es5的不同

ES5 与 ES6六大不同

13、js原型链

14、有一个数组，求数组按age排序的结果

15、自定义http请求头

16、常见的http状态码

17、冒泡排序

18、ajax跨域，cors怎么设置original

全部评论 (0)

相关文章推荐

浙江大华前端面试题

浙江大华面试过程

浙江-杭州-大华【面试题+答案】

浙江大华 2021 春招面试总结

浙江大华 2021 秋招面试总结

浙江大华一面面经（7.16号）

浙江大华2012笔试+解析

浙江大华2011.10.10校园招聘会笔试题

浙江-杭州-数字浙江春招一面【面试题+答案】

浙江大华股份有限公司笔试/面试总结