前端面试精华：HTML5特性、语义化标签与存储技术详解

需积分: 30 70 浏览量更新于2024-07-17 收藏 466KB PDF 举报

前端面试题是一个全面的资料，涵盖了HTML、CSS、JavaScript、前端框架Vue和React，以及浏览器工作原理、Git版本控制等关键知识点。以下是对部分重点内容的详细解读： 1. HTML基础知识： - `<!DOCTYPE>`声明：用于指定文档类型，告诉浏览器文档采用哪种HTML版本，例如`<!DOCTYPE html>`表示使用HTML5。HTML5引入了新的语义化标签，如`<article>`, `<footer>`, `<header>`, `<nav>`, 和 `<section>`等，这些标签有助于提高页面的可读性和SEO优化，使搜索引擎能更好地理解页面结构。 2. 表单元素与本地存储： - 表单新特性：HTML5中增加了特定类型属性，如`<input type="date">`, `<input type="tel">`, `<input type="email">`, 和 `<input type="search">`等，提供了更好的用户体验。同时，`localStorage`和`sessionStorage`用于本地持久性数据存储，与`cookie`相比，它们的存储容量更大（5MB），且生命周期不同：`sessionStorage`随浏览器标签页关闭而消失，`localStorage`持久保留，除非代码清除或用户手动清除，而`cookie`一般在浏览器关闭时消失，可以通过Expires和Max-Age属性设置存储时间。 3. 媒体处理与图形绘制： - `video`和`audio`标签支持视频和音频的播放，这对多媒体内容的展示至关重要。`canvas`元素用于网页上的绘图，提供了一种动态生成图像的能力。 4. DOM操作与Web通信： - `querySelector`和`querySelectorAll`是现代DOM操作的选择器，增强了JavaScript操作DOM的灵活性。Web Worker和WebSocket是实现后台多任务处理和实时双向通信的技术，使得页面与服务器之间的交互更为高效。 5. 语义化与代码规范： - HTML语义化有助于提升代码可读性和结构清晰度，使开发者更容易理解和维护代码，同时也对SEO有积极影响。 6. 存储选项比较： - `sessionStorage`, `localStorage`, 和 `cookie`各有优缺点，存储大小、生命周期和持久性是它们的主要区别。`sessionStorage`和`localStorage`适合存储临时或长期数据，而`cookie`主要用于小型关键信息的传递。前端面试题的整理旨在帮助求职者全面了解前端技术的基础和深入知识，以便在面试中展示扎实的技能和理解。通过掌握这些知识点，开发者能够构建高效、可维护且符合现代标准的网页应用。

px/em/rem有么区别？为么通常给font-size 设置的字体为62.5%

px是绝对的，󰖳em和rem是相对的，em主要是根据󰅠元素的，rem则是根据根元素的

body{font-size=62.5% } 此时1rem = 10px;算

渐进增强和优雅降级是么？

由于CSS3的特性并是所有󰉁户的浏览都兼容，所以需要从两个󰤐度去考虑如何使󰉁这些特性，以达成最好的效果

渐进增强：在󰉁户普遍使󰉁低版本浏览的情况下，先满󰨤低版本的󰵎󰴯显示，再影响到这些浏览显示的情况下，进步对󰷼版本的浏

览进󰢩󰵎󰴯美化，即使󰉁新特性

优雅降级：在󰉁户普遍使󰉁󰷼版本浏览的情况下，使󰉁新特性，然后再满󰨤低版本浏览󰵎󰴯的正常显示

如何使󰉁伪元素清除浮动？

1 :after{

2 content: ' ';

3 display: table;

4 clear: both;

5 }

css实现单󰢩省󰉝

1 {

2 width:xxpx;

3 overflow:hidden;

4 white-space:nowrap;

5 text-overflow:ellipsis;

6 }

机端上图󰅧󰲊时间点击会选中图󰅧，如何处󰇹?

onselect = function() {

return false

}

已知以下的html󰅧段和css󰅧段

1 <div class="parent">

2 <p id="c1">1</p>

3 <span id="c2">2</span>

4 <span id="c3">3</span>

5 <p id="c4">4</p>

6 <p id="c4">5</p>

7 </div>

8 !

9 .parent > p:nth-child(3) {

10 color: red;

11 }

请问css会作󰉁在哪个id元素上（）

A: 会作󰉁在任何元素上 B: c3 C: c4 D: c5

答案：A 󰶳先nth-child是根据其󰅠级来选择的，参数3那么就是󰅠级的第三个元素，󰖳第三个元素是p元素，所以会作󰉁在任何元

素上

Js部分

Js有哪些基本类型

六种基本类型：null, undefined, string, boolean, number, symbol

󰇹解原型链上的各种关系

1 function Test (num1, num2) {

2 this.num1 = num1

3 this.num2 = num2

4 }

5 Test.prototype.add = function() {

6 return this.num1 + this.num2

7 }

8 let test = new Test(1,2)

9 console.log(Test.prototype.constructor)

10 console.log(test.__proto__ === Test.prototype)

11 console.log(Object.getPrototypeOf(test) === Test.prototype)

显式原型和隐式原型的关系:

隐式原型：__proto__ ：每个对象都会有隐式原型，该属性是个对象，每个__proto__󰮟都有__proto__，当访问个对象的属性或法存

在时，它就会找下个__proto__，这就形成原型链，但它是个标准，标准规定可以通过Object.getPrototypeOf()的法来访问这

个,Object.create()法创建个新对象使󰉁现有的对象来提供新创建的对象的__proto__

显式原型：prototype ：任意个函数（特殊的对象）都有个显式原型prototype，该属性就是这个对象的原型对象

test.__proto__ === Test.prototype

构造函数和原型的关系：

Test.prototype.constructor === Test

实和对象之间的关系:

确定原型和实的关系：instanceof操作符和isPrototypeof法

console.log(test instanceof Test); //true

console.log(Test.prototype.isPrototypeOf(test)); //true

讲讲ES6有哪些新特性

变󰮢声明－let 与 const：let主要是添加块级作󰉁域，const是变󰮢得修改

模版字符（``）：反引号，可以使变󰮢直接和字符写在起，只需要将变󰮢󰉁${}包裹，还持多󰢩，书写代码

解构赋值：好的对数组和对象进󰢩数据读取

箭头函数：函数的快捷写法，且󰮟󰴯的this定指向的是它的上级

class：原型继承的语法糖

Promise：异步解决案

模块化import,export

函数声明和变󰮢声明存在优先级吗？

Js在执󰢩代码前，都会先进󰢩简单的编译，会将函数声明和变󰮢声明提前到当前作󰉁域顶端，同作󰉁域下，如果出现函数名和变󰮢名相同，

函数名会覆盖变󰮢名，但是当变󰮢被赋值的时候，会变成变󰮢

如以下代码，var a和function a都被提升󰙸顶端，由于函数声明会覆盖变󰮢声明，所以第个输出的的function a(){} ,由于后󰴯变󰮢a被赋值

3，所以第个输出的是变󰮢的值3

1 console.log(a)

2 function a() {}

3 var a = 3

4 console.log(a)

么是js的严格模式

严格模式是让js在严格的规范下运󰢩，为js的升级做准备

严格模式中变󰮢必须显示声明(var/let/const)

允许函数有相同的参数，对象有相同的属性

允许对只读属性赋值（Object.defineProperty(obj, 'a', {value: 1, writable: false})

禁this关键字指向全局对象，也就是说this能指向window顶层对象

允许使󰉁新添加的保󰉙关键字

剩余25页未读，继续阅读

Dilomen

粉丝: 11
资源: 1

前端面试精华：HTML5特性、语义化标签与存储技术详解

"前端开发面试题.pdf中的DOCTYPE和HTML5标准模式解释

前端面试题资料汇总

前端面试必备：96道面试题解析

前端面试题前端面试题.pdf

2024前端面试题.pdf

web前端面试题.pdf

2021前端面试题.pdf

字节前端面试题.pdf

一些前端面试题.pdf

Web前端面试题.pdf

最新资源