前端开发面试宝典：HTML5语法规则与元素类型详解

需积分: 19 127 浏览量更新于2024-07-09 收藏 898KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

前端开发面试题宝典是一份旨在帮助求职者准备前端开发面试的重要参考资料。它涵盖了HTML5版本声明的简化、元素分类、CSS导入方法的区别，以及对浏览器内核的理解等核心知识点。 1. HTML5版本声明的简要介绍 - 在HTML5中，使用<!DOCTYPE html>代替了之前版本的DOCTYPE声明，主要是为了简化语法。<!DOCTYPE html>声明表明文档是HTML5标准规范，使得开发者可以使用HTML5特有的标签，如新的语义元素，而无需担心IE6中的怪异模式。之前的DOCTYPE声明类型繁多，而HTML5更倾向于统一和简洁。 2. 前端元素分类 - 行内元素包括`<a>`、`<span>`、`<img>`、`<input>`、`<select>`、`<strong>`等，它们在文本流中呈现，并且不会影响其他内容的布局。 - 块级元素则有`<div>`、`<ul>`、`<ol>`、`<li>`、`<h1>`到`<h6>`等，它们会在页面上独立占据空间，形成新的块级区域。 - 空(void)元素如`<br>`、`<hr>`、`<img>`、`<input>`等，它们没有内容区域，仅用于结构标记。 3. CSS导入方式的区别 - `link`标签是HTML的一部分，不仅用于加载外部CSS文件，还可以用于定义RSS源和设置rel属性。当页面加载时，`link`内的CSS会同步加载。 - 相比之下，`@import`是CSS内部的指令，用于引入外部CSS。它延迟到整个页面加载完成后才会加载，这可能导致页面渲染性能的下降。`@import`在CSS2.1中引入，可能不被早期版本的浏览器支持，而`link`标签的兼容性更好。 4. 浏览器内核的深入理解 - 浏览器内核主要由渲染引擎（Layout Engine或Rendering Engine）和JavaScript引擎两部分组成。渲染引擎负责解析HTML和CSS，构建页面结构，并根据CSS规则进行布局。不同浏览器的内核对HTML和CSS有不同的解释，导致渲染效果各异。 - JavaScript引擎负责执行JavaScript代码，与渲染引擎协同工作，实现动态交互功能。浏览器内核差异对前端开发者来说至关重要，因为选择合适的开发策略和优化技巧可能需要针对特定的内核特性进行。这份资料对于想要进入前端开发领域的求职者来说，提供了实用的面试准备工具，帮助他们了解并掌握面试官可能关注的关键知识点。通过理解和掌握这些内容，面试者能够更好地展示自己的技术实力和对行业的理解。

资源详情

资源推荐

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

36. 异步加载的方式有哪些？

(1) defer，只支持 IE

(2) async：

(3) 创建 script，插入到 DOM 中，加载完毕后 callBack

37. call() 和 .apply() 的区别？

例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：

alert(4);

注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。

function add(a,b)

{

alert(a+b);

}

function sub(a,b)

{

alert(a-b);

}

add.call(sub,3,1);

38. Jquery 与 jQuery UI 有啥区别？

jQuery 是一个 js 库，主要提供的功能是选择器，属性修改和事件绑定等等。

jQuery UI 则是在 jQuery 的基础上，利用 jQuery 的扩展性，设计的插件。

提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

39. http 状态码有那些？分别代表是什么意思？

100-199 用于指定客户端应相应的某些动作。

200-299 用于表示请求成功。

300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。

400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。

401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。

500-599 用于支持服务器错误。 503 – 服务不可用

40. 请写出一些前端性能优化的方式，越多越好

1.减少 dom 操作

2.部署前，图片压缩，代码压缩

3.优化 js 代码结构，减少冗余代码

4.减少 http 请求，合理设置 HTTP 缓存

5.使用内容分发 cdn 加速

6.静态资源缓存

7.图片延迟加载

41. 对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。

1、实现界面交互

2、提升用户体验

3、有了 Node.js，前端可以实现服务端的一些事情

前端是最贴近用户的程序员，前端的能力就是能让产品从 90 分进化到 100 分，甚至

更好，

参与项目，快速高质量完成实现效果图，精确到 1px；

与团队成员，UI 设计，产品经理的沟通；

做好的页面结构，页面重构和用户体验；

处理 hack，兼容、写出优美的代码格式；

针对服务器的优化、拥抱最新前端技术。

42. 说说最近最流行的一些东西吧？常去哪些网站？

Node.js、Mongodb、npm、MVVM、MEAN、three.js

43. 移动端（Android IOS）怎么做好用户体验?

清晰的视觉纵线、信息的分组、极致的减法、

利用选择代替输入、标签及文字的排布方式、

依靠明文确认密码、合理的键盘利用

44. jQuery 库中的 $() 是什么？

$() 函数是 jQuery() 函数的别称，乍一看这很怪异，还使 jQuery 代码晦涩难懂。

一旦你适应了，你会爱上它的简洁。$() 函数用于将任何对象包裹成 jQuery 对象，

接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择

器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery

对象。这个问题我已经见过好几次被提及，尽管它非常基础，它经常被用来区分一个

开发人员是否了解 jQuery。

45. 网页上有 5 个 <div> 元素，如何使用 jQuery 来选择它们？

另一个重要的 jQuery 问题是基于选择器的。jQuery 支持不同类型的选择器，例如

ID 选择器、class 选择器、标签选择器。鉴于这个问题没提到 ID 和 class，你可以

用标签选择器来选择所有的 div 元素。jQuery 代码：$("div")，这样会返回一个包含

所有 5 个 div 标签的 jQuery 对象。

46. jQuery 里的 ID 选择器和 class 选择器有何不同？

如果你用过 CSS，你也许就知道 ID 选择器和 class 选择器之间的差异，jQuery 也

同样如此。ID 选择器使用 ID 来选择元素，比如 #element1，而 class 选择器使用

CSS class 来选择元素。当你只需要选择一个元素时，使用 ID 选择器，而如果你想

要选择一组具有相同 CSS class 的元素，就要用 class 选择器。在面试过程中，你有

很大几率会被要求使用 ID 选择器和 class 选择器来写代码。下面的 jQuery 代码使

用了 ID 选择器和 class 选择器：

$('#LoginTextBox')

$('.active')

这是一个事件处理问题。jQuery 为按钮点击之类的事件提供了很好的支持。你可以通

过以下代码去隐藏一个通过 ID 或 class 定位到的图片。你需要知道如何为按钮设置事

件并执行 hide() 方法，代码如下所示：正如你所见，从语法角度来说，ID 选择器和

class 选择器的另一个不同之处是，前者用字符”#”而后者用字符”.”。

47. 如何在点击一个按钮时使用 jQuery 隐藏一个图片？

$('#ButtonToClick').click(function(){

$('#ImageToHide').hide();

});

48. $(document).ready() 是个什么函数？为什么要用它？

ready() 函数用于在文档进入 ready 状态时执行代码。当 DOM 完全加载（例如 HTML

被完全解析 DOM 树构建完成时），jQuery 允许你执行代码。使用$(document).ready()

的最大好处在于它适用于所有浏览器，jQuery 帮你解决了跨浏览器的难题。

49. JavaScript window.onload 事件和 jQuery ready 函数有何不同？

这个问答是紧接着上一个的。JavaScript window.onload 事件和 jQuery ready 函

数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、

视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用

户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源

加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势

是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它

们，相反对于 onload 技术而言，只能在单一函数里使用。

50. 如何找到所有 HTML select 标签的选中项？

这是面试里比较棘手的 jQuery 问题之一。这是个基础的问题，但是别期望每个

剩余52页未读，继续阅读

LOVEZMDMR

粉丝: 0
资源: 1

前端开发面试宝典：HTML5语法规则与元素类型详解

自己整理的一些前端面试笔试题pdf.pdf

前端面试宝典大全.pdf

前端面试宝典

前端程序员面试笔试宝典pdf

各大银行信息科技岗位笔试面试题大集合.7z

最新-前端工程师.笔试题.v20210514(1)

android程序员面试笔试宝典 pdf 网盘

超全的嵌入式工程师笔试面试题汇总.zip

硬件工程师笔试面试题资料

嵌入式软件笔试面试题

web前端开发实习生笔试题

web前端笔试题题库

硬件工程师笔试面试题

java基础笔试面试题以及答案

web前端开发笔试判断题

java八股文笔试面试题下载

测试工程师笔试面试题

2023前端面试笔试题

html和css,js的笔试面试题

vue前端面试笔试题

最新资源