< >头 43个重要的HTML5面试问答[2023]| Toptal®-欧博体育app下载 > < /头 身体< >

16个HTML5面试必备问题 *

最优秀的HTML5开发者和工程师可以回答的基本问题. 在我们社区的推动下,我们鼓励专家提交问题并提供反馈.

聘请顶级HTML5开发者
Toptal标志是顶级自由软件开发人员的专属网络吗, 设计师, 金融专家, 产品经理, 和世界上的项目经理. 顶级公司雇佣Toptal自由职业者来完成他们最重要的项目.

面试问题

1.

给出一个简单的实现 标签来嵌入存储在 http://www.例子.com/amazing_video.mp4. 给视频设置一个640 * 360像素的宽度. 为用户提供控件.

查看答案

这里有一个简单的实现:


或者,源文件可以用单独的 标签 元素,如:


2.

HTML5规范的主要目标和动机是什么?

查看答案

HTML5旨在取代HTML 4、XHTML和HTML DOM Level 2.

委员会的主要目标 HTML规范 是:

  • 提供丰富的内容(图形、电影等).),而不需要额外的插件(例如.g.Flash).
  • 通过引入新的结构元素标签,为网页结构提供更好的语义支持.
  • 提供更严格的解析标准以简化错误处理, 确保更一致的跨浏览器行为, 并简化与按照旧标准编写的文档的向后兼容性.
  • 提供更好的跨平台支持(例如.e.无论在PC、平板电脑还是智能手机上运行,都能很好地运行。).
3.

HTML5有哪些关键的新特性?

查看答案

HTML5的主要新特性包括:

  • 改进了对嵌入图形、音频和视频内容的支持 , , tags.

  • JavaScript API的扩展,如 地理位置 and 拖放 对于 存储 and 缓存.

  • 引入 “网络工作者”.

  • 还添加了几个新的语义标签,以补充现代web应用程序的结构逻辑. 这些包括

    ,
  • 新的表单控件,例如 , , , , , .

申请加入Toptal的发展网络

并享受可靠、稳定、远程 自由HTML5开发者职位

申请成为自由职业者
4.

什么是“网络工作者”??

查看答案

Web workers 终于给JavaScript带来了多线程.

web worker是在后台运行的脚本.e.(在另一个线程中),而不需要等待页面完成. 当web worker在后台运行时,用户可以继续与页面交互. 工作线程利用类似线程的消息传递来实现并行性.

5.

如何指示HTML5文档使用的字符集? 这与旧的HTML标准有什么不同?

查看答案

在HTML5中,使用的编码可以用 字符集 a的属性 标记在文档的 元素:




...

...

...

这是来自旧的HTML标准的稍微简单的语法,旧的HTML标准没有 字符集 属性. 例如,HTML 4.01文档将使用 标签如下:



  
    ...
    
    ...
  
  ...

6.

讨论HTML之间的区别 规范 浏览器的 实现 其中.

查看答案

HTML规范(如HTML5)定义了一组规则,文档必须遵守这些规则才能根据该规范“有效”. 除了, 规范提供了有关浏览器必须如何解释和呈现此类文档的说明.

如果浏览器根据规范的规则处理有效文档,则称其“支持”规范. 到目前为止, 没有浏览器支持HTML5规范的所有方面(尽管所有主流浏览器都支持) most ), 结果就是, 开发人员有必要确认他们所使用的方面是否被他们希望在其上显示内容的所有浏览器支持. 这就是为什么跨浏览器支持一直是开发人员头痛的问题, 尽管改进了规范.

此外,虽然HTML5定义了一些规则来遵循无效的HTML5文档(例如.e., (包含语法错误), 无效文档可能包含任何内容, 规范不可能全面地处理所有的可能性. 因此,关于如何处理格式错误的文档的许多决定都留给了浏览器.

7.

简要描述以下HTML5语义元素的正确用法:

,
,
,
.

查看答案

The

元素用于包含关于页面某部分的介绍信息和导航信息. 这可以包括章节标题, 作者姓名, 出版时间和日期, 目录表, 或者其他导航信息.

The

元素旨在容纳自包含的组合,可以在逻辑上独立地在页面外重新创建,而不会失去其意义. 个人博客文章或新闻故事都是很好的例子.

The

元素是一种灵活的容器,用于保存共享公共信息主题或目的的内容.

The

元素用于保存应该出现在内容部分末尾的信息,并包含有关该部分的附加信息. 作者姓名、版权信息和相关链接是此类内容的典型例子.

8.

可以一个

包含
元素? 可以一个
包含
元素? 提供用法示例.

查看答案

The answer to both questions is yes; i.e., a

可以包含
元素,和
可以包含
元素.

例如,个人指示板页面可能包含

用于社交网络互动以及
对于最新的新闻文章,后者可能包含几个
元素.

相反,一个

可能包含
最后供读者评论.

9.

一个网页可以包含多个吗

元素? 是什么
元素?

查看答案

都是. 事实上,两者都是

and
标签的设计是为了服务于它们各自的目的,无论它们的父“部分”是什么. 所以不仅可以页面 包含页眉和页脚,但每个都可以
and
元素. 事实上,
应该出现在所有这些,尽管a
并不总是必要的.

10.

描述两者之间的关系

and

HTML5中的标签.

查看答案

在以前的HTML规范中,只有一个

元素通常出现在页面上,用于整个页面的标题. HTML5规定

表示“节”的顶级标题,无论该节是页面 ,或
or
元素. 事实上,每一个
元素至少应该包含一个

元素. 如果该部分没有自然的标题,这是一个很好的指示,它不应该使用
or
tag.

11.

编写必要的代码来创建一个300像素乘300像素 . 在它的内部, 绘制一个100 * 100像素的蓝色正方形,正方形的左上角距离画布的上边缘和左边缘各50像素.

查看答案

这里有一个简单的实现:




12.

什么是HTML5 Web Storage? 解释localStorage和sessionStorage.

查看答案

使用HTML5,网页可以在用户的浏览器中本地存储数据.

早些时候,这是用饼干完成的. 然而,Web Storage更安全、更快. 数据不是包含在每个服务器请求中,而是仅在请求时使用.

数据以名称/值对的形式存储,网页只能访问自己存储的数据. 不像饼干, 存储限制要大得多(至少5MB),而且信息永远不会传输到服务器.

localStorage和sessionStorage之间的区别涉及到存储的生存期和作用域.

通过localStorage存储的数据是永久的:它不会过期,并一直存储在用户的计算机上,直到web应用程序删除它或用户要求浏览器删除它. SessionStorage的生存期与运行存储它的脚本的顶级窗口或浏览器选项卡的生存期相同. 当窗口或选项卡永久关闭时,通过sessionStorage存储的任何数据都将被删除.

这两种形式的存储都限定在文档起源的范围内,因此具有不同起源的文档永远不会共享存储的对象. 但是sessionStorage的作用域也是基于每个窗口的. 如果用户有两个浏览器选项卡显示来自同一来源的文档, 这两个选项卡具有独立的sessionStorage数据:在一个选项卡中运行的脚本不能读取或覆盖另一个选项卡中脚本写入的数据, 即使两个选项卡都访问完全相同的页面并运行完全相同的脚本.

13.

两者的区别是什么 span and div?

查看答案

区别在于 span 给出带有 显示:内联 div给出的输出是 显示:块.

span 当我们需要将元素一个接一个地显示在一行中时使用.

14.

HTML5中的地理定位API是什么?

查看答案

HTML5的地理定位API允许用户与选定的网站共享他们的物理位置. JavaScript可以捕获用户的纬度和经度,并将其发送到后端web服务器,以启用位置感知功能,如查找本地企业或在地图上显示其位置.

如今,大多数浏览器和移动设备都支持地理定位API. Geolocation API使用全局的一个新属性 导航器 object.

创建Geolocation对象的方法如下:

Var 地理位置 = 导航器.地理位置;

The 地理位置 对象是一个服务对象,它允许小部件检索有关用户设备地理位置的信息.

15.

如果不指定!,主要结果是什么 文档类型 在HTML页面中?

查看答案

新的特定于html5的标签将不会被浏览器解释.

16.

有什么区别 and 元素?

查看答案

The 元素是SVG图形的容器. SVG有几种绘制路径、框、圆、文本甚至位图图像的方法.

SVG是一种描述2D图形的语言,但是 允许您使用JavaScript动态绘制2D图形.

SVG是基于xml的,这意味着每个元素都可以在SVG DOM中使用. 您可以为元素附加JavaScript事件处理程序.

在SVG中,每个绘制的形状都被记住为一个对象. 如果改变了SVG对象的属性,浏览器可以自动重新呈现该形状.

画布是逐像素渲染的. 在canvas中,一旦图形被绘制出来,浏览器就会忘记它. 如果它的位置应该改变, 整个场景需要重新绘制, 包括任何可能被图像覆盖的物体.

面试不仅仅是棘手的技术问题, 所以这些只是作为一个指南. 并不是每一个值得雇佣的“A”候选人都能回答所有的问题, 回答所有问题也不能保证成为A级考生. 一天结束的时候, 招聘仍然是一门艺术,一门科学,需要大量的工作.

为什么Toptal

厌倦了面试候选人? 不知道该问什么才能让你得到一份好工作?

让Toptal为你找到最合适的人.

聘请顶级HTML5开发者

我们的HTML5开发者专属网络

希望找到一份HTML5开发者的工作?

让Toptal为你找到合适的工作.

申请成为HTML5开发者

工作机会从我们的网络

提出面试问题

提交的问题和答案将被审查和编辑, 并可能会或可能不会选择张贴, 由Toptal全权决定, LLC.

*所有字段均为必填项

寻找HTML5开发者?

寻找 HTML5开发人员? 看看Toptal的HTML5开发者.

鲍里斯Yordanov

自由HTML5开发者

美国Toptal成员2017年7月15日

Boris是一名全职web开发人员,主要使用香草JS和最流行的JavaScript框架(如Angular), React, 和流星. 14岁时,他创建了自己的第一个网站, 从那时起, 在他的自由职业生涯中,他已经创建了400多个WordPress网站. 现在,他设计和构建定制的web应用程序和网站.

显示更多

亚历杭德罗埃尔南德斯

自由HTML5开发者

阿根廷Toptal成员2012年10月30日

Alejandro于2005年获得软件工程学士学位,此后一直作为自由职业者为全球各种规模的软件公司工作. 目前, 他喜欢在JavaScript项目中担任全栈架构师, 他的经验和他对建筑和理论的深刻理解最具影响力的是什么.

显示更多

帕特里克Keenum

自由HTML5开发者

美国Toptal成员2018年7月6日

Patrick是一名高级全栈工程师,拥有10多年的开发经验, 可靠的, 可扩展的产品. 他热衷于将想法从概念转化为产品, 与不同技术水平的客户合作, 以及开发能帮助公司成长的产品.

显示更多

Toptal连接 排名前3% 世界各地的自由职业人才.

加入Toptal社区.

了解更多
\n\n","identifier":3280350},{"questionBody":"

什么是HTML5 Web Storage? 解释localStorage和sessionStorage.

\n","answerBody":"

使用HTML5,网页可以在用户的浏览器中本地存储数据.

\n\n

早些时候,这是用饼干完成的. 然而,Web Storage更安全、更快. 数据不是包含在每个服务器请求中,而是仅在请求时使用.

\n\n

数据以名称/值对的形式存储,网页只能访问自己存储的数据.\n不像饼干, 存储限制要大得多(至少5MB),而且信息永远不会传输到服务器.

\n\n

localStorage和sessionStorage之间的区别涉及到存储的生存期和作用域.

\n\n

通过localStorage存储的数据是永久的:它不会过期,并一直存储在用户的计算机上,直到web应用程序删除它或用户要求浏览器删除它. SessionStorage的生存期与运行存储它的脚本的顶级窗口或浏览器选项卡的生存期相同. 当窗口或选项卡永久关闭时,通过sessionStorage存储的任何数据都将被删除.

\n\n

这两种形式的存储都限定在文档起源的范围内,因此具有不同起源的文档永远不会共享存储的对象. 但是sessionStorage的作用域也是基于每个窗口的. 如果用户有两个浏览器选项卡显示来自同一来源的文档, 这两个选项卡具有独立的sessionStorage数据:在一个选项卡中运行的脚本不能读取或覆盖另一个选项卡中脚本写入的数据, 即使两个选项卡都访问完全相同的页面并运行完全相同的脚本.

\n","identifier":3280351},{"questionBody":"

两者的区别是什么 span and div?

\n","answerBody":"

区别在于 span 给出带有 显示:内联 div给出的输出是 显示:块.

\n\n

span 当我们需要将元素一个接一个地显示在一行中时使用.

\n","identifier":3280354},{"questionBody":"

HTML5中的地理定位API是什么?

\n","answerBody":"

HTML5的地理定位API允许用户与选定的网站共享他们的物理位置. JavaScript可以捕获用户的纬度和经度,并将其发送到后端web服务器,以启用位置感知功能,如查找本地企业或在地图上显示其位置.

\n\n

如今,大多数浏览器和移动设备都支持地理定位API. Geolocation API使用全局的一个新属性 导航器 object.

\n\n

创建Geolocation对象的方法如下:

\n\n
Var 地理位置 = 导航器.地理位置;\n
\n\n

The 地理位置 对象是一个服务对象,它允许小部件检索有关用户设备地理位置的信息.

\n","identifier":3280355},{"questionBody":"

如果不指定!,主要结果是什么 文档类型 在HTML页面中?

\n","answerBody":"

新的特定于html5的标签将不会被浏览器解释.

\n","identifier":3280356},{"questionBody":"

有什么区别 and 元素?

\n","answerBody":"

The 元素是SVG图形的容器. SVG有几种绘制路径、框、圆、文本甚至位图图像的方法.

\n\n

SVG是一种描述2D图形的语言,但是 允许您使用JavaScript动态绘制2D图形.

\n\n

SVG是基于xml的,这意味着每个元素都可以在SVG DOM中使用. 您可以为元素附加JavaScript事件处理程序.

\n\n

在SVG中,每个绘制的形状都被记住为一个对象. 如果改变了SVG对象的属性,浏览器可以自动重新呈现该形状.

\n\n

画布是逐像素渲染的. 在canvas中,一旦图形被绘制出来,浏览器就会忘记它. 如果它的位置应该改变, 整个场景需要重新绘制, 包括任何可能被图像覆盖的物体.

\n","identifier":3280357}],"publicUrl":"http://5qt.sz-feiyang.com/html5/interview-questions","tabsSection":{"selectedTab":"client","items":[{"type":"client","label":"我的招聘","activeIconUrl":"http://bs-uploads.toptal.io/blackfish-uploads/components/interview_questions_page/tabs_section/item/content/active_icon_file/active_icon/822463/ICON_TALENT__ACTIVE__2x-64d6654dfad0c04528a0525c494b144f.png","inactiveIconUrl":"http://bs-uploads.toptal.io/blackfish-uploads/components/interview_questions_page/tabs_section/item/content/inactive_icon_file/inactive_icon/822464/ICON_TALENT__NON_ACTIVE__2x-8710ec2d9e5d5ba4f8f684771a271d5b.png"},{"type":"talent","label":"我在找工作","activeIconUrl":"http://bs-uploads.toptal.io/blackfish-uploads/components/interview_questions_page/tabs_section/item/content/active_icon_file/active_icon/822461/ICON_CLIENT__ACTIVE__2x-9b251ec42929b7b96f7e20473b501eae.png","inactiveIconUrl":"http://bs-uploads.toptal.io/blackfish-uploads/components/interview_questions_page/tabs_section/item/content/inactive_icon_file/inactive_icon/822462/ICON_CLIENT__NON_ACTIVE__2x-de363650453eabe3d2c4e70e75deaaad.png"}]},"heroSection":{"title":"16个HTML5面试必备问题","subtitle":"最优秀的HTML5开发者和工程师可以回答的基本问题. Driven from our community, we encourage experts to submit questions and offer feedback.","cta":{"label":"Submit an Interview Question","href":"#submit-question"},"ctas":{"client":{"label":"聘请顶级HTML5开发者","href":"http://5qt.sz-feiyang.com/hire?interested_in=developers&skill=html5&skill_job_title=HTML5+Developer"},"talent":{"label":"申请成为HTML5开发者","href":"http://5qt.sz-feiyang.com/talent/apply?as=developers"}},"eatBadgeSection":{"iconUrl":"http://bs-uploads.toptal.io/blackfish-uploads/components/eat_badge_section/content/icon_file/icon/1240878/toptal_logo_white_mono-df3f70ab3f3d7bf2e75fbe7a95401562.svg","label":"是顶级自由软件开发人员的专属网络吗, 设计师, 金融专家, 产品经理, 和世界上的项目经理. 顶级公司雇佣Toptal自由职业者来完成他们最重要的项目."}},"featuredContributors":null,"questionsSection":{"note":"面试不仅仅是棘手的技术问题, 所以这些只是作为一个指南. 并不是每一个值得雇佣的“A”候选人都能回答所有的问题, 回答所有问题也不能保证成为A级考生. 一天结束的时候, hiring remains an art, a science — and a lot of work.","banner":{"title":"申请加入Toptal的发展网络","subtitle":"并享受可靠、稳定、远程 自由HTML5开发者 Jobs","cta":{"label":"申请成为自由职业者","href":"/talent/apply","gaCategory":"cta","gaEvent":"cta - interview_questions_block","gaLabel":"Apply to 自由HTML5开发者 Jobs"}}},"authorSection":null,"successStorySection":null}> < /脚本