HTML5与前端面试深度解析

需积分: 9 130 浏览量更新于2024-07-09 收藏 2.15MB PDF 举报

"这份文档包含了最新的前端面试题，主要聚焦于HTML5和HTML高级部分，同时也涉及到了CSS3的相关知识，旨在帮助求职者准备大厂的面试。" 在这份5月更新的“大厂前端高频核心面试题”文档中，面试题目主要分为HTML5和HTML高级两大部分，同时涵盖了一些CSS3的知识点。以下是对这些知识点的详细说明： 1. **HTML5新特性与移除元素**：HTML5引入了新的标签（如<header>, <nav>, <article>, <section>, <aside>等），改进了表单控件，支持离线存储，提供了多媒体支持（<audio>, <video>）等。移除了如<frameset>, <frame>, <basefont>, <center>, <isindex>等元素。区分HTML5与HTML的关键在于版本号、新特性以及语义化标签的使用。 2. **HTML5浏览器兼容**：为解决新标签的兼容问题，可以使用JavaScript库如Modernizr，或者通过JavaScript或jQuery创建旧浏览器对新标签的支持。 3. **HTML5文件离线储存**：离线储存利用了Application Cache机制，允许网站在用户离线时也能访问。它基于manifest文件，列出需要缓存的资源，浏览器会预先下载这些资源以便离线使用。 4. **SEO优化**：使用正确的HTML结构，添加meta标签，合理设置title和alt属性，避免Flash，提供文本替代方案，使用语义化标签，优化图片大小等方法可提升SEO效果。 5. **浏览器内核**：常见浏览器如Chrome使用Blink内核，Firefox使用Gecko，Safari/iOS使用WebKit，IE/Edge早期使用Trident，现在使用Chakra。 6. **浏览器标准模式与怪异模式**：标准模式遵循W3C标准，怪异模式遵循早期浏览器（如Netscape 4）的行为，通常通过doctype来决定。 7. **CSS与JS加载位置**：CSS放<head>中防止FOUC（无样式内容闪烁），JS放<body>底部让页面先渲染，defer延迟执行，async异步执行，不阻塞页面渲染。 8. **data-属性**：自定义数据属性用于存储页面或应用程序的私有自定义数据，可使用JavaScript访问。 9. **HTML5语义化**：语义化标签如<header>, <footer>, <nav>等帮助搜索引擎理解页面结构，提高可访问性和可读性。 10. **Cookies, sessionStorage, localStorage**：Cookies存储少量信息（4KB），适用于跨域；sessionStorage存储会话期间的数据，关闭标签后清除；localStorage长期存储数据，但不支持跨域。 11. **iframe优缺点**：优点是能够嵌入外部资源，隔离脚本和样式；缺点是可能导致页面加载慢，影响性能，且可能引发XSS攻击。 12. **label元素**：用于关联表单元素，方便用户操作，增强可访问性。 13. **禁用表单自动完成**：在HTML5的<form>或<input>标签中使用`autocomplete="off"`来关闭自动完成功能。 14. **跨标签页通信**：可以使用Broadcast Channel API，SharedWorker，LocalStorage事件监听，或者基于WebSocket的实现。 15. **WebSocket兼容性**：对于不支持WebSocket的旧浏览器，可以使用Flash的polyfill或轮询长连接作为替代。 16. **PageVisibility API**：用于检测页面是否在用户视野中，可用于节能或暂停非活跃页面上的动画。 17. **绘制圆形点击区域**：可以使用HTML5的<map>和<area>标签，或者CSS的shape-outside属性结合clip-path或border-radius实现。 18. **1px线条兼容性**：使用伪元素、CSS calc()函数，或者vw/vh单位在不同浏览器下创建一致的1px线条。 19. **验证码**：防止自动化脚本（如机器人）进行非法操作，例如防止恶意注册、刷票等。 20. **title与h1、b与strong、i与em**：title用于定义元素的提示信息，h1定义一级标题；b强调文本，strong表示内容重要；i提供斜体，em表示强调。 21. **空格处理**：在HTML中，连续的空格在渲染时会被合并为一个，可以通过CSS的white-space属性控制。 22. **渐进式渲染**：网页逐步加载和显示内容，即使部分资源未加载完毕，用户也可以看到初步的页面结构。 23. **CSS3新特性**：包括选择器增强（如:nth-child(), :not()等），边框半径，阴影，渐变，过渡，动画，多列布局，Flexbox，Grid布局，以及更丰富的文本和图像样式控制等。这些面试题覆盖了前端开发的基础与进阶知识，不仅测试技术理解，还考察实际问题解决能力，对于面试准备非常有帮助。

使用语义化标签比如 header、footer、content、section，js、css 使用外部文件。

增加外部链接

即是对方没有和你链接，你也是可以链接别人的，大概搜索引擎的算法体现了互联网“分

享”的精神吧，通过外链网站的活跃度蹭点 seo 度。

前后端分离（vue、ajax）、flash 不利于 seo

2. 常用浏览器有哪些，内核都是什么？

常用浏览器有 IE 火狐(firefox) chrome safari 360 搜狗等

内核：

IE 的是 Trident

火狐的是 Gecko

chrome 和 safari 用的是 Webkit

360 和搜狗这些分极速模式和兼容模式，极速模式用的 Webkit 的内核，兼容模式用的

Trident 内核。

3. 介绍一下你对浏览器内核的理解？

浏览器内核主要分成两部分：渲染引擎(Layout Engine 或 Rendering Engine) 和 JS

引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整

理讯息（例如加入 CSS

等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同

对于网页的语法解释会有不同，所以渲染的效果也不相同。

剩余70页未读，继续阅读

弎金ぃ

粉丝: 23
资源: 10

HTML5与前端面试深度解析

最新前端大厂高频面试题

最新前端面试题

前端大厂最新面试题-book.pdf

6月最新大厂前端高频面试题.pdf

2020前端大厂高频面试题.pdf

238道大厂前端高频面试题.pdf

搜集了众多经典高频前端面试题和大厂前端面试题以及相关代码题 pdf.pdf

11前端大厂面试总结与补充说明.md

前端面试必备：高频面试题与代码解析PDF

React前端框架资料及大厂面试题解析

最新资源