前端面试必备：HTML5面试题及答案解析

196 浏览量更新于2024-08-03 收藏 79KB DOC 举报

"前端工程师面试题汇总，包含HTML、CSS等相关知识" 在前端工程师的面试中，掌握HTML和CSS的基本概念和技术是至关重要的。以下是一些面试中可能会遇到的题目及其解析： 1. **HTML相关** - **Doctype作用**：DOCTYPE声明告知浏览器文档遵循的HTML或XHTML规范，以便正确解析。 - **严格模式与混杂模式**：严格模式下，浏览器按照W3C标准解析；混杂模式下，浏览器采用旧的、宽松的解析规则。 - **HTML5只需<!DOCTYPE HTML>**：因为它指示浏览器使用HTML5标准解析文档。 - **行内元素与块级元素**：行内元素如`<span>`、`<a>`，占据自身内容宽度；块级元素如`<div>`、`<p>`，独占一行。 - **空(void)元素**：没有结束标签的元素，如`<br>`、`<img>`。 - **link与@import的区别**：link用于外部样式表，支持异步加载，可设置rel属性；@import仅在CSS内部使用，加载时阻塞页面渲染。 2. **浏览器内核及HTML5** - **浏览器内核**：常见的有Trident（IE）、Gecko（Firefox）、Blink（Chrome、Opera）和Webkit（Safari）。 - **HTML5新特性**：包括离线存储、canvas画布、geolocation定位、web workers和web sockets等。 - **移除的元素**：如frame、frameset、menu、dir等。 - **HTML5兼容问题**：通过HTML5 Shim、Modernizr等库解决，或者针对老浏览器编写polyfill。 3. **HTML语义化** - **语义化**：使HTML结构清晰，有利于SEO和无障碍访问，如使用`<header>`、`<nav>`、`<article>`等标签。 4. **HTML5离线储存** - **使用与原理**：通过`manifest`文件声明缓存资源，浏览器在有网络时将资源存入本地，离线时直接读取。 - **管理与加载**：浏览器自动管理缓存，加载时先检查本地是否有资源，无网络时使用本地缓存。 5. **前端存储** - **cookies**：存储小量数据，每次请求都会发送到服务器。 - **sessionStorage**：只在当前会话中有效，关闭标签页后清除。 - **localStorage**：长期存储，不受会话限制，但只能存储字符串。 6. **其他技术** - **iframe缺点**：加载速度慢，可能导致页面加载性能下降。 - **label作用**：关联表单元素，提高可访问性，可用`for`属性或包裹元素。 - **禁用自动完成**：在`<form>`中设置`autocomplete="off"`。 - **WebSocket兼容性**：使用FlashFallback或polyfills。 - **页面可见性API**：检测页面是否处于活动状态，优化资源加载。 - **圆形可点击区域**：使用CSS边框半径创建圆形元素。 - **1px线兼容**：利用相对单位和负margin调整。 - **网页验证码**：防止自动化脚本攻击，例如自动登录、垃圾邮件等。 - **title与h1、b与strong、i与em的区别**：title是文档标题，h1是主标题；b和strong强调文字，但strong更语义化；i和em表示强调或引用，em更语义化。 7. **CSS相关** - **CSS盒子模型**：内容(content)、内边距(padding)、边框(border)和外边距(margin)组成，IE低版本采用怪异盒模型。 - **选择符**：包括ID、类、标签、属性、伪类等。 - **CSS优先级**：计算id、class、标签和行内样式权重。 - **CSS3新伪类**：如`:nth-child()`, `:hover`, `:active`, `:focus`等。 - **居中技巧**：`margin: auto`、`text-align: center`、`position: absolute`配合`transform: translate(-50%, -50%)`等。 - **display值**：`block`、`inline`、`none`、`flex`等，分别控制元素显示方式。 - **position定位原点**：relative基于元素本身，absolute基于最近的非static祖先元素。 - **CSS3新特性**：阴影、渐变、动画、多列布局、Flexbox、Grid等。 - **Flexbox**：用于灵活布局，适应不同屏幕尺寸，常用于响应式设计。 - **创建三角形原理**：利用边框透明性和宽度/高度为0来构造。 - **品字布局**：常使用Flexbox或Grid实现，分配三列并调整间距。 - **li间隔**：因为空白字符，可设置`font-size: 0`或使用浮动元素解决。 - **浏览器兼容性**：涉及到CSS Hack、条件注释、前缀等，确保在不同浏览器中一致展示。掌握这些知识将有助于前端工程师在面试中脱颖而出，深入理解并熟练应用这些技术，能够构建高质量的Web应用程序。

【干货】前端工程师面试题汇总

HTML

Doctype 作用？严格模式与混杂模式如何区分？它们有何意义?

HTML5 为什么只需要写 <!DOCTYPE HTML>？

行内元素有哪些？块级元素有哪些？空(void)元素有那些？

页面导入样式时，使用 link 和@import 有什么区别？

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

常见的浏览器内核有哪些？

html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区

分 HTML 和 HTML5？

简述一下你对 HTML 语义化的理解？

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

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

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

iframe 有那些缺点？

Label 的作用是什么？是怎么用的？（加 for 或包裹）

HTML5 的 form 如何关闭自动完成功能？

如何实现浏览器内多个标签页之间的通信? (阿里)

webSocket 如何兼容低浏览器？(阿里)

页面可见性（Page Visibility）API 可以有哪些用途？

如何在页面上实现一个圆形的可点击区域？

实现不使用 border 画出 1px 高的线，在不同浏览器的 Quirksmode 和 CSSCompat 模式下都

能保持同一效果。

下载后可阅读完整内容，剩余9页未读，立即下载

zz_ll9023one

粉丝: 915
资源: 5091

前端面试必备：HTML5面试题及答案解析

前端最全的初级前端面试题 干货满满

干货合集-史上最全的大厂前端开发工程师面试笔试经验汇总（81份）.zip

elementui面试题

java数组完全解析(干货满满)

hive数据仓库面试题

godebug环境变量_GODEBUG之gctrace干货解析

干货 | spark streaming 和 flink 详细对比

计算机信息技术招聘试讲,【干货】面试试讲万能模板（小学信息技术）

c语音编程步骤详细干货

张一鸣近10年微博整理出的231条干货.pdf

最新资源

前端最全的初级前端面试题干货满满