前端面试必备：HTML5与CSS3核心知识点解析
需积分: 10 185 浏览量
更新于2024-07-09
收藏 1.67MB PDF 举报
"5月最新大厂前端高频核心面试题.pdf"
这份文档包含了前端开发者面试中常见的HTML5、HTML高级以及CSS3相关的题目，旨在帮助求职者准备大公司的面试。以下是对这些知识点的详细说明：
1. HTML5新特性与移除的元素：HTML5引入了新的元素如<header>, <footer>, <section>, <article>, <aside>, <canvas>, <video>, <audio>, <input type="date">等，同时移除了如<frame>, <frameset>, <menu>, <isindex>等元素。区分HTML和HTML5主要看使用的标签是否符合HTML5规范。
2. 浏览器兼容问题处理：对于HTML5新标签，旧版浏览器可能不支持，可以通过引入Modernizr库来检测浏览器特性，或者使用JavaScript库如jQuery的$.fn.append等方式模拟新标签的行为。
3. HTML5文件离线储存：离线储存通过`applicationCache` API实现，允许网页在用户离线时访问缓存的资源。工作原理是创建一个manifest文件，指定需要离线存储的文件，浏览器会自动下载并缓存这些文件。
4. SEO优化：HTML5提供了更好的结构化元素，如<header>, <nav>, <main>, <article>, <aside>等，有助于搜索引擎理解页面内容，提高SEO效果。
5. 浏览器内核：常见的浏览器内核有Webkit（如Safari, Chrome），Gecko（Firefox），Trident（Internet Explorer）和Blink（Chrome, Opera）。
6. 浏览器内核理解：内核负责解析HTML、CSS，渲染网页，执行JavaScript，并处理浏览器兼容性问题。
7. 标准模式与怪异模式：标准模式遵循W3C标准，怪异模式遵循早期的浏览器特定规则。它们之间的区别在于盒模型、事件处理、CSS解析等方面。
8. progressive enhancement与graceful degradation：前者是从基本功能开始，逐步增加增强功能，确保所有浏览器都能正常工作；后者是在高级浏览器中提供丰富功能，但保证基本功能在旧浏览器中仍可用。
9. FOUC（无样式内容闪烁）：当CSS未加载时，浏览器会先显示无样式的HTML内容，待CSS加载后页面重新渲染。避免方法包括将CSS放在头部，使用async或defer属性，或使用CSS-in-JS方案。
10. CSS的<link>和<script>位置：CSS放于<head>可让页面尽快呈现样式，脚本置于<body>底部可以防止阻塞页面渲染，但async或defer属性可异步加载脚本。
11. defer和async属性：defer延迟脚本执行，等待DOM加载完成，按顺序执行；async异步执行脚本，不保证执行顺序。
12. data-属性：用于自定义数据存储，方便JavaScript操作元素的私有数据。
13. HTML5语义化：使用语义化标签提高可读性和可访问性，有利于SEO，如<section>, <article>, <header>, <footer>等。
14. Cookies, sessionStorage和localStorage的区别：Cookies存储量小，每次请求都会发送到服务器；sessionStorage仅在当前会话中有效，存储量稍大；localStorage长期存储，但不随HTTP请求发送，适合存储大量数据。
15. iframe优缺点：优点是内容隔离，可嵌入外部资源；缺点是增加页面加载时间，可能导致SEO问题。
16. label元素：用于与表单元素关联，点击label触发关联元素的焦点或行为。
17. form关闭自动完成功能：通过设置`autocomplete="off"`或`autocomplete="new-password"`。
18. 多标签页通信：可利用WebSocket、BroadcastChannel API、SharedWorker、Local Storage事件监听等技术实现。
19. WebSocket兼容性：对于不支持WebSocket的旧浏览器，可以使用polyfill库，如Socket.io。
20. PageVisibility API：用于检测页面是否可见，有助于节省资源，如暂停视频播放。
21. 实现圆形可点击区域：使用CSS的border-radius属性创建圆形元素，配合JavaScript监听点击事件。
22. 1px线条绘制：在不同浏览器中，使用伪元素、border-image、transform缩放等方法实现。
23. 渐进式渲染：从核心内容开始加载，逐步加载非关键内容，提升用户体验。
24. CSS3新特性：包括选择器扩展、边框与背景、过渡与动画、多列布局、Flexbox、Grid布局、阴影与渐变、文字渲染等。
25. Flexbox（弹性盒布局模型）：用于创建灵活的、响应式的布局，可以轻松调整元素的大小和位置，适用于各种屏幕尺寸和方向。
这份面试题涵盖了前端开发的核心知识，对于提升面试者的HTML5、HTML高级和CSS3理解非常有帮助。
使用语义化标签比如 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页未读，继续阅读
2021-03-23 上传
2021-07-07 上传
2021-12-14 上传
2024-03-31 上传
点击了解资源详情
点击了解资源详情
2021-10-12 上传
2022-02-23 上传
张小哇
- 粉丝: 2
- 资源: 2
我的内容管理
展开
