"前端面试题汇总：HTML知识点及模式区别详解"

需积分: 0 103 浏览量更新于2024-01-13 收藏 1.87MB PDF 举报

阿里前端面试题（第一期）总结 HTML 面试知识点总结 1.1 DOCTYPE 的作用是什么？ DOCTYPE 是 Document Type 的缩写，用于告诉浏览器使用的是哪种 HTML 或 XHTML 标准。它帮助浏览器正确地解析和渲染网页，确保网页在不同浏览器中有一致的展示效果。 1.2 标准模式与兼容模式各有什么区别？标准模式（Strict Mode）是浏览器按照 W3C 标准解析网页，提供更严格的规则和更好的性能。兼容模式（Quirks Mode）是为了兼容旧版本的浏览器，会出现一些不一致的解析行为。 1.3 HTML5 为什么只需要写 <!DOCTYPE HTML>，而不需要引入 DTD？ HTML5 规范不再基于 SGML，不需要引入 DTD（Document Type Definition）来定义文档的结构。HTML5 只需要写 <!DOCTYPE HTML> 即可，告诉浏览器使用 HTML5 标准解析。 1.4 SGML、HTML、XML 和 XHTML 的区别？ SGML（Standard Generalized Markup Language）是一种标记语言的国际标准，HTML（HyperText Markup Language）是 SGML 的应用之一。XML（eXtensible Markup Language）是一种可扩展的标记语言，而 XHTML（eXtensible HTML）是基于 XML 的 HTML。 1.6 行内元素定义行内元素（Inline Element）是指在默认情况下，元素在行内显示，并且只占据内容的宽度。常见的行内元素有 a、span、em、strong、img、input 等。 1.7 块级元素定义块级元素（Block Element）是指在默认情况下，元素会独占一行显示，并且可以设置宽度、高度和边距等属性。常见的块级元素有 div、p、h1~h6、ul、li、table 等。 1.8 行内元素与块级元素的区别行内元素在一行内水平排列，宽高由内容决定，不能设置宽高；块级元素会独占一行，可以设置宽高，可以设置边距和背景等样式。另外，块级元素可以包含行内元素和其他块级元素，但行内元素只能包含文字或其他行内元素。通过对以上几个阿里前端面试题的总结，我们了解到了 DOCTYPE 的作用、标准模式与兼容模式的区别、HTML5 的声明方式、SGML、HTML、XML 和 XHTML 的区别，以及行内元素和块级元素的定义和区别。这些都是前端开发中常见的知识点，掌握好这些知识对于提升编码能力和解决兼容性问题非常重要。在面试中遇到类似的问题时，我们可以通过清晰地解释这些概念和区别来展示自己的知识水平和经验。希望这个总结对大家有所帮助！

1.33 HTML5 的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用

户机器上的缓存文件。

原理：HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制（不是存储技术），

通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之

后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

（1）创建一个和 html 同名的 manifest 文件，然后在页面头部像下面一样加入一个

manifest 的属性。

（2）在如下 cache.manifest 文件的编写离线存储的资源。

CACHE MANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

/ /offline.html

CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线

存储，所以不需要把页面自身也列出来。

NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离

线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一

个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。

FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上

面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问

offline.html 。

（3）在离线状态时，操作 window.applicationCache 进行离线缓存的操作。

如何更新缓存：

（1）更新 manifest 文件

（2）通过 javascript 操作

（3）清除浏览器缓存

注意事项：

（1）浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点

5MB）。

（2）如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将

失败，浏览器继续全部使用老的缓存。

（3）引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。

（4）FALLBACK 中的资源必须和 manifest 文件同源。

（5）当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。

（6）站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存

中访问。

（7）当 manifest 文件发生改变时，资源请求本身也会触发更新。

详细的使用可以参考：《HTML5 离线缓存-manifest 简介》《有趣的 HTML5：离线存储》

1.34 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果

是第一次访问 app ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行

离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资

源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发

生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存

储。

离线的情况下，浏览器就直接使用离线存储的资源。

1.35. 常见的浏览器端的存储技术有哪些？

浏览器常见的存储技术有

、

localStorage

和

sessionStorage

。

还有两种存储技术用于大规模数据存储，

webSQL

（已被废除）和

indexDB

。

支持

userData

存储数据，但是基本很少使用到，除非有很强的浏览器兼容需求。

详细的资料可以参考：《很全很全的前端本地存储讲解》

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

相关资料：

SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都

是字符串类型的键值对。区别在于前两者属于 HTML5 WebStorage，创建它们的目的便于客

户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常

经过加密）。cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使

不需要），会在浏览器和服务器间来回传递。

存储大小：

cookie 数据大小不能超过 4 k 。

sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以

达到 5M 或更大。

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。

sessionStorage 数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，

并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶

级浏览上下文中初始化一个新的会话。

cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。

作用域：

sessionStorage 只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中

共享。

localStorage 在所有同源窗口中都是共享的。

cookie 在所有同源窗口中都是共享的。

回答：

浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。

cookie 其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存

储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4 k 数据，它的生存

时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。

sessionStorage 是 html5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 session

的概念，代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据，它在

当前窗口关闭后就失效了，并且 sessionStorage 只能被同一个窗口的同源

页面所访问共享。

localStorage 也是 html5 提供的一种浏览器本地存储的方法，它一般也能够存储 5M 或者

更大的数据。它和 sessionStorage

不同的是，除非手动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访

问共享。

上面几种方式都是存储少量数据的时候的存储方式，当我们需要在本地存储大量数据的时

候，我们可以使用浏览器的 indexDB 这是浏览器提供的一种本地的数据库存储机制。它不

是关系型数据库，它内部采用对象仓库的形式存储数据，它更接近 NoSQL 数据库。

详细的资料可以参考：《请描述一下 cookies，sessionStorage 和 localStorage 的区别？》

《浏览器数据库 IndexedDB 入门教程》

1.37 iframe 有那些缺点？

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

主要缺点有

（1） iframe 会阻塞主页面的 onload 事件。window 的 onload 事件需要在所有 iframe

加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态

设置 iframe 的 src 可以避免这种阻塞情况。

（2）搜索引擎的检索程序无法解读这种页面，不利于网页的 SEO 。

（3） iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的

并行加载。

（4）浏览器的后退按钮失效。

（5）小型的移动设备无法完全显示框架。

详细的资料可以参考：《使用 iframe 的优缺点》《iframe 简单探索以及 iframe 跨域处

理》

1.38 Label 的作用是什么？是怎么用的？

label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签

"前端面试题汇总：HTML知识点及模式区别详解"

阿里前端第一期1

阿里前端面试题

阿里前端面试（含答案）1

阿里前端面试题第二期.pdf

字节前端面试题.pdf

2021阿里前端面试题全解析：HTML、CSS与JS核心技术

前端大厂最新面试题-2020阿里高德前端社招面经.docx

js代码-阿里面试题

阿里巴巴Android面试题集（答案解析）1

2019阿里巴巴技术面试题汇总.pdf

最新资源