html5面试题 前端面试题大全

这篇文章给大家聊聊关于html5面试题，以及前端面试题大全对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

HTML5面试中常会被问到的面试题有哪些

1.XHTML和HTML有什么区别

HTML是一种网页设计语言，XHTML是一个置标语言。两者最大的不同是：XHTML元素必须被正确嵌套;XHTML元素必须被关闭;标签名必须用小写字母;XHTML文档必须拥有根元素。

2.前端页面有哪三层构成，分别是什么?作用是什么?

结构层HTML，表示层 CSS，行为层 js。

3.什么是语义化的HTML?

HTML语义化就是让页面的内容结构化，便于对搜索引擎解析;在没有样式的情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重。这样使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

4.Doctype作用?标准模式与兼容模式各有什么区别?

DOCTYPE作用是告知浏览器的解析器用什么文档标准解析这个文档。如果DOCTYPE不存在或者是格式上的不正确可以回会导致文档以兼容模式来呈现。标准模式和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以向后兼容的方式显示,模拟浏览器的行为以防止站点无法工作。

5. cookies，sessionStorage和 localStorage三者有何区别?

Cookie是在浏览器和服务器间来回传递的。sessionStorage和localStorage的存储空间比cookies会更大些;而且sessionStorage和localStorage相比cookies有更多的丰富易用的接口;另外，sessionStorage和localStorage都有它们各自独立的存储空间。

6.如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等的本地存储方式可以实现浏览器内多个标签页之间的通信。

更多资讯，请及时关注本平台，小编会为您做详细的整理和总结。

Web前端面试的常见面试题汇总

今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。

1.渐进增强与优雅降级

渐进增强

并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等)，并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。

优雅降级也是一种设计思想，为了保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。

这两种思想的区别在于：

1.渐进增强是向上兼容，优雅降级是向下兼容;

2.渐进增强是从简单到复杂，优雅降级是从复杂到简单;

3.渐进增强关注的是内容(保证核心内容)，优雅降级关注的是浏览体验(为了兼容低版本浏览器)

2.DOCTYPE

作用

DTD(DocumentTypeDefinition，文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML

的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。

DOCTYPE是用来声明文档类型和DTD

规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。

HTML5的文档类型声明：

HTML4.01Strict(HTML4.01严格模式)的DTD包含所有HTML

元素和属性，但不包括展示性的和弃用的元素(如font)，它的文档类型声明：

"">

标准模式与怪异模式

怪异模式(Quirks

Mode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规范，随着浏览器支持越来越多的规范，在那些旧的浏览器中开发的页面在显示时会被破坏。为了向后兼容，浏览器发明了怪异模式，一行错误或无效的

DOCTYPE都会触发怪异模式。

浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE

可以确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。

怪异模式与标准模式的主要区别：

1.怪异模式的宽度和高度会包含padding和border。标准模式不包含，标准模式下可以通过设置box-sizing:

border-box将标准盒模型转化成怪异模式下的盒模型。

2.怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。

3.怪异模式下，在表格中的字体样式(如font-size)不会继承。

4.怪异模式下颜色值必须使用十六进制标记法。

3.语义化

HTML5

中的语义化就是让元素、属性或属性值有含义，更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而CSS

样式控制内容的呈现，像元素，没有语义但却能将字体变粗，这类元素违背了语义化的目的，将会被废弃。

优点

·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。

·有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。

·方便其他设备解析，如盲人阅读器根据语义渲染网页。

·有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

语义化标签

·定义文档的页眉区域,应作为介绍内容或者导航链接栏的容器;

·footer内容的页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息;

·article

文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目;

·nav描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表;

·section表示文档中的一个区域(或节)，比如，内容中的一个专题组;

·main定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站

logo，搜索框(搜索框作为文档的主要内容);

·aside

表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

4.超链接伪类

:link、:visited、:active和:hover的声明顺序是怎样的?

:link表示未访问的链接状态;

:visited表示已访问状态;:active表示激活状态(鼠标按下);:hover表示悬停状态。

推荐顺序是LVHA，即:link:visited:hover:active。理由如下：

·当鼠标悬停在未访问的链接上时，:link和:hover都会命中，如果:hover在:link

之前声明，那么(:hover)就会被覆盖;

·当鼠标悬停在已访问的连接上时，:visited和:hover都会命中，如果:hover在:visited

之前声明，那么(:hover)就会被覆盖;

·当鼠标单击链接时，:active和:hover都会命中，我们大多是想让:hover只在悬停时展示样式，按下鼠标时使用:active

样式，因此:active在:hover之后声明;

·综上，:hover应在:link和:visited之后，在:active之前，因此active在最后。而:link和

:visited两者的顺序无所谓，互不影响。

5.CSS常见的长度单位

CSS中除了px长度单位之外，还有下面几个长度单位：

·pc六分之一英寸，1pc=12pt=1/6*1in=16px;

·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;

·in一英寸，1in=2.54cm=96px;

·ex在含有“X”字母的字体中，它是该字体的小写字母的高度。对于很多字体来说，1ex≈0.5em;

·em1em等于父级元素的字体大小，2em就是父级元素字体大小的二倍;

·rem当用在根元素()的font-size上面时，它代表了它的初始值;

·ch代表元素所用字体font中“0”这一字形的宽度;

·vh1vh相当于视口高度的1%，100vh就是视口的高度;

·vw1vw相当于视口宽度的1%，100vw就是视口的宽度;

·vmax视口高度vw和宽度vh两者中的最小值

·vmin视口高度vw和宽度vh两种中的最大值;

·%相对于父级元素的大小来确定;

参考：CSS[1]

CSSpercentage[2]

6.事件对象

冒泡与捕获

事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。

在点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：

·浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它;

·

然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素;

而冒泡与捕获恰恰相反：

·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它;

·然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素;

而现代浏览器在默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件，然后向上冒泡，触发父元素绑定的事件。

addEventListener函数的第三个参数是个布尔值。含义：

·当布尔值是false时(这也是默认值)，表示向上冒泡触发事件;

·当布尔值是true时，表示向下捕获触发事件;

不能冒泡的事件

有些事件是不会冒泡的。比如：

·blur元素失去焦点时触发，focusout事件也是失去焦点时触发，但可以冒泡;

·focus元素获取焦点时触发;

·mouseenter鼠标移动到元素上时会触发该事件，与之对应的是mouseover事件，但会冒泡;

·mouseleave鼠标离开元素时触发，与之对应的是mouseout，但会冒泡;

事件冒泡可以让我们利用事件委托，尤其是处理大量子元素时，如果给每个子元素都绑定事件，这是不优雅的，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用

e.target属性可以获取到当前触发事件的子元素。

事件对象中的方法

·stopPropagation()阻止事件冒泡，当设置后，点击该元素时父元素绑定的事件就不会再触发;

·preventDefault()阻止默认事件的发生;

·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡，比如给同一个div

元素绑定多个click事件(使用addEventListener方法可以注册多个)，当在第二个事件函数中调用

stopImmediatePropagation方法时，点击div元素时，后面注册的click将不会被触发，而且还会阻止事件冒泡;

比如下面的例子，给p绑定多个click事件，在第二个事件函数中调用stopImmediatePropagation，第三个click

事件就不会触发，因为也阻止了冒泡，因此父元素的click事件也不会触发。

paragraph

常见的H5前端开发岗位面试问题

以下是常见的H5前端开发岗位面试问题分类整理：

基础知识问题

HTML5理解与重要性HTML5是最新HTML标准，新增语义化标签（如<header>、<article>）、多媒体支持（<audio>、<video>）、Canvas绘图、本地存储（localStorage/sessionStorage）等特性。其重要性体现在：

提升SEO效果（语义化标签优化爬虫抓取）

减少对插件依赖（如Flash）

支持跨平台开发（移动端与桌面端统一）

增强离线应用能力（通过Service Worker实现PWA）

CSS常见问题与解决

布局问题：如浮动导致父元素高度塌陷→使用clearfix或Flexbox/Grid布局替代浮动。

响应式适配：媒体查询（@media）覆盖设备差异，结合rem/vw单位实现弹性布局。

浏览器兼容性：通过Autoprefixer自动添加厂商前缀，或使用PostCSS处理CSS新特性降级。

JavaScript异步编程异步编程通过回调函数、Promise、Async/Await解决单线程阻塞问题。

回调地狱：用Promise链式调用或Async/Await替代嵌套回调。

事件循环机制：宏任务（setTimeout、I/O）与微任务（Promise.then）按顺序执行，确保异步代码有序处理。

前端框架与库的作用

React：组件化开发，虚拟DOM提升渲染效率，适合复杂单页应用（SPA）。

Vue：渐进式框架，双向数据绑定简化DOM操作，生态丰富（Vuex、Vue Router）。

jQuery：简化DOM操作与AJax请求，但现代项目逐渐被原生API或框架替代。

前端性能优化经验

资源优化：图片压缩（WebP格式）、代码压缩（Terser）、Tree Shaking删除未使用代码。

加载策略：懒加载（Intersection Observer API）、预加载（<link rel="preload">）、CDN加速静态资源。

缓存策略：Service Worker缓存静态资源，HTTP缓存头（Cache-Control、ETag）控制缓存行为。

项目经验问题

HTML5/CSS/JavaScript应用场景在电商项目中，使用HTML5语义化标签构建商品详情页结构，CSS Grid实现响应式商品列表布局，通过JavaScript监听滚动事件实现懒加载。

技术难题与解决

移动端点击延迟：使用FastClick库或CSS属性touch-action: manipulation消除300ms延迟。

跨域问题：通过CORS配置服务器响应头或JSONP（仅限GET请求）解决。

项目角色与贡献在团队中担任前端负责人，负责制定代码规范（ESLint+Prettier）、搭建Webpack构建流程，并主导核心功能开发（如购物车模块）。

技术更新方式

官方文档学习（如React官方文档、MDN Web Docs）。

实践驱动：通过GitHub开源项目或个人博客复现新技术特性。

社区交流：参与Stack Overflow问答、技术峰会（如JSConf）。

实际问题解决

复杂H5应用性能优化

代码层面：使用React.memo避免不必要的组件重渲染，通过React DevTools分析组件更新链路。

网络层面：启用HTTP/2多路复用，合并请求减少TCP连接数。

渲染层面：虚拟滚动（如react-window）优化长列表渲染性能。

网页输入卡顿解决

防抖/节流：对输入事件（如onInput）使用防抖（debounce）限制触发频率。

Web Worker：将耗时计算（如数据格式化）移至Web Worker线程，避免阻塞主线程。

SPA性能问题处理

代码分割：通过动态import()实现路由级代码分割，减少首屏加载体积。

预加载关键路由：使用<link rel="preload">提前加载即将访问的路由资源。

新技术评估与决策

评估维度：社区活跃度、文档完整性、与现有技术栈兼容性、学习成本。

快速验证：通过Create React App或Vite快速搭建原型，验证技术可行性。

编程和问题解决

编程问题解决案例问题：实现一个无限滚动列表，数据分页加载时出现重复请求。解决策略：

使用Intersection Observer监听滚动容器底部元素可见性。

添加加载状态锁（isLoading），避免重复触发请求。

错误重试机制：请求失败时自动重试3次，超时后显示错误提示。

寻求帮助的途径

官方文档与GitHub Issues：优先查阅框架/库的官方文档或已知问题列表。

搜索引擎：使用精准关键词（如“React useEffect无限循环”）搜索技术博客或Stack Overflow答案。

团队代码审查（Code Review）：向资深开发者请教代码设计合理性。

前端工具评价

VS Code：轻量级、插件生态丰富（如ESLint、Prettier集成），支持调试前端与Node.js代码。

Chrome DevTools：Performance面板分析渲染性能，Network面板监控资源加载耗时。

多方案选择策略

基准测试：使用Lighthouse或WebPageTest对比不同方案的性能指标（如FCP、LCP）。

可维护性：评估代码复杂度（如圈复杂度）、注释覆盖率、单元测试通过率。

情境问题

同事代码错误处理

私下沟通：通过代码审查或即时通讯工具指出问题，提供修复建议（如“此处缺少空值检查，可能导致崩溃”）。

示例复现：编写单元测试用例证明错误场景，推动团队修复。

方案被拒后的行动

理解原因：与团队讨论拒绝的具体理由（如技术风险、时间成本）。

优化方案：根据反馈调整设计（如用更轻量的库替代复杂框架），或提供备选方案。

高性能与安全性设计

性能：启用CSP（内容安全策略）防止XSS攻击，使用Subresource Integrity（SRI）校验第三方资源完整性。

安全性：对用户输入进行转义（如textContent替代innerHTML），敏感操作需二次验证（如短信验证码）。

遗留系统迁移策略

分阶段迁移：先迁移静态页面，再逐步重构交互逻辑，保留旧系统作为回滚方案。

自动化测试：编写E2E测试（如Cypress）确保迁移后功能一致性。

紧急用户体验优化

优先级排序：通过用户行为数据（如热力图）定位关键路径（如登录流程）。

快速迭代：采用MVP（最小可行产品）模式，先优化核心功能体验（如减少表单字段）。

好了，文章到此结束，希望可以帮助到大家。