16个HTML5面试必备问题 *
最优秀的HTML5开发者和工程师可以回答的基本问题. 在我们社区的推动下,我们鼓励专家提交问题并提供反馈.
聘请顶级HTML5开发者面试问题
这里有一个简单的实现:
或者,源文件可以用单独的 标签
元素,如:
HTML5旨在取代HTML 4、XHTML和HTML DOM Level 2.
委员会的主要目标 HTML规范 是:
- 提供丰富的内容(图形、电影等).),而不需要额外的插件(例如.g.Flash).
- 通过引入新的结构元素标签,为网页结构提供更好的语义支持.
- 提供更严格的解析标准以简化错误处理, 确保更一致的跨浏览器行为, 并简化与按照旧标准编写的文档的向后兼容性.
- 提供更好的跨平台支持(例如.e.无论在PC、平板电脑还是智能手机上运行,都能很好地运行。).
申请加入Toptal的发展网络
并享受可靠、稳定、远程 自由HTML5开发者职位
Web workers 终于给JavaScript带来了多线程.
web worker是在后台运行的脚本.e.(在另一个线程中),而不需要等待页面完成. 当web worker在后台运行时,用户可以继续与页面交互. 工作线程利用类似线程的消息传递来实现并行性.
在HTML5中,使用的编码可以用 字符集
a的属性 标记在文档的
元素:
...
...
...
这是来自旧的HTML标准的稍微简单的语法,旧的HTML标准没有 字符集
属性. 例如,HTML 4.01文档将使用 标签如下:
...
...
...
HTML规范(如HTML5)定义了一组规则,文档必须遵守这些规则才能根据该规范“有效”. 除了, 规范提供了有关浏览器必须如何解释和呈现此类文档的说明.
如果浏览器根据规范的规则处理有效文档,则称其“支持”规范. 到目前为止, 没有浏览器支持HTML5规范的所有方面(尽管所有主流浏览器都支持) most ), 结果就是, 开发人员有必要确认他们所使用的方面是否被他们希望在其上显示内容的所有浏览器支持. 这就是为什么跨浏览器支持一直是开发人员头痛的问题, 尽管改进了规范.
此外,虽然HTML5定义了一些规则来遵循无效的HTML5文档(例如.e., (包含语法错误), 无效文档可能包含任何内容, 规范不可能全面地处理所有的可能性. 因此,关于如何处理格式错误的文档的许多决定都留给了浏览器.
The
元素用于包含关于页面某部分的介绍信息和导航信息. 这可以包括章节标题, 作者姓名, 出版时间和日期, 目录表, 或者其他导航信息.
The 元素旨在容纳自包含的组合,可以在逻辑上独立地在页面外重新创建,而不会失去其意义. 个人博客文章或新闻故事都是很好的例子.
The 元素是一种灵活的容器,用于保存共享公共信息主题或目的的内容.
The 元素用于保存应该出现在内容部分末尾的信息,并包含有关该部分的附加信息. 作者姓名、版权信息和相关链接是此类内容的典型例子.
The answer to both questions is yes; i.e., a 可以包含
元素,和
可以包含
元素.
例如,个人指示板页面可能包含 用于社交网络互动以及
对于最新的新闻文章,后者可能包含几个
元素.
相反,一个 可能包含
最后供读者评论.
都是. 事实上,两者都是
and 标签的设计是为了服务于它们各自的目的,无论它们的父“部分”是什么. 所以不仅可以页面
包含页眉和页脚,但每个都可以
and
元素. 事实上,
应该出现在所有这些,尽管a 并不总是必要的.
在以前的HTML规范中,只有一个 元素通常出现在页面上,用于整个页面的标题. HTML5规定
表示“节”的顶级标题,无论该节是页面
,或
or
元素. 事实上,每一个
元素至少应该包含一个 元素. 如果该部分没有自然的标题,这是一个很好的指示,它不应该使用
or
tag.
使用HTML5,网页可以在用户的浏览器中本地存储数据.
早些时候,这是用饼干完成的. 然而,Web Storage更安全、更快. 数据不是包含在每个服务器请求中,而是仅在请求时使用.
数据以名称/值对的形式存储,网页只能访问自己存储的数据. 不像饼干, 存储限制要大得多(至少5MB),而且信息永远不会传输到服务器.
localStorage和sessionStorage之间的区别涉及到存储的生存期和作用域.
通过localStorage存储的数据是永久的:它不会过期,并一直存储在用户的计算机上,直到web应用程序删除它或用户要求浏览器删除它. SessionStorage的生存期与运行存储它的脚本的顶级窗口或浏览器选项卡的生存期相同. 当窗口或选项卡永久关闭时,通过sessionStorage存储的任何数据都将被删除.
这两种形式的存储都限定在文档起源的范围内,因此具有不同起源的文档永远不会共享存储的对象. 但是sessionStorage的作用域也是基于每个窗口的. 如果用户有两个浏览器选项卡显示来自同一来源的文档, 这两个选项卡具有独立的sessionStorage数据:在一个选项卡中运行的脚本不能读取或覆盖另一个选项卡中脚本写入的数据, 即使两个选项卡都访问完全相同的页面并运行完全相同的脚本.
HTML5的地理定位API允许用户与选定的网站共享他们的物理位置. JavaScript可以捕获用户的纬度和经度,并将其发送到后端web服务器,以启用位置感知功能,如查找本地企业或在地图上显示其位置.
如今,大多数浏览器和移动设备都支持地理定位API. Geolocation API使用全局的一个新属性 导航器
object.
创建Geolocation对象的方法如下:
Var 地理位置 = 导航器.地理位置;
The 地理位置
对象是一个服务对象,它允许小部件检索有关用户设备地理位置的信息.
The 元素是SVG图形的容器. SVG有几种绘制路径、框、圆、文本甚至位图图像的方法.
SVG是一种描述2D图形的语言,但是 允许您使用JavaScript动态绘制2D图形.
SVG是基于xml的,这意味着每个元素都可以在SVG DOM中使用. 您可以为元素附加JavaScript事件处理程序.
在SVG中,每个绘制的形状都被记住为一个对象. 如果改变了SVG对象的属性,浏览器可以自动重新呈现该形状.
画布是逐像素渲染的. 在canvas中,一旦图形被绘制出来,浏览器就会忘记它. 如果它的位置应该改变, 整个场景需要重新绘制, 包括任何可能被图像覆盖的物体.
面试不仅仅是棘手的技术问题, 所以这些只是作为一个指南. 并不是每一个值得雇佣的“A”候选人都能回答所有的问题, 回答所有问题也不能保证成为A级考生. 一天结束的时候, 招聘仍然是一门艺术,一门科学,需要大量的工作.
为什么Toptal
提出面试问题
提交的问题和答案将被审查和编辑, 并可能会或可能不会选择张贴, 由Toptal全权决定, LLC.
寻找HTML5开发者?
寻找 HTML5开发人员? 看看Toptal的HTML5开发者.
Toptal连接 排名前3% 世界各地的自由职业人才.
加入Toptal社区.
什么是HTML5 Web Storage? 解释localStorage和sessionStorage.
\n","answerBody":"使用HTML5,网页可以在用户的浏览器中本地存储数据.
\n\n早些时候,这是用饼干完成的. 然而,Web Storage更安全、更快. 数据不是包含在每个服务器请求中,而是仅在请求时使用.
\n\n数据以名称/值对的形式存储,网页只能访问自己存储的数据.\n不像饼干, 存储限制要大得多(至少5MB),而且信息永远不会传输到服务器.
\n\nlocalStorage和sessionStorage之间的区别涉及到存储的生存期和作用域.
\n\n通过localStorage存储的数据是永久的:它不会过期,并一直存储在用户的计算机上,直到web应用程序删除它或用户要求浏览器删除它. SessionStorage的生存期与运行存储它的脚本的顶级窗口或浏览器选项卡的生存期相同. 当窗口或选项卡永久关闭时,通过sessionStorage存储的任何数据都将被删除.
\n\n这两种形式的存储都限定在文档起源的范围内,因此具有不同起源的文档永远不会共享存储的对象. 但是sessionStorage的作用域也是基于每个窗口的. 如果用户有两个浏览器选项卡显示来自同一来源的文档, 这两个选项卡具有独立的sessionStorage数据:在一个选项卡中运行的脚本不能读取或覆盖另一个选项卡中脚本写入的数据, 即使两个选项卡都访问完全相同的页面并运行完全相同的脚本.
\n","identifier":3280351},{"questionBody":"两者的区别是什么 span
and div
?
区别在于 span
给出带有 显示:内联
div给出的输出是 显示:块
.
span
当我们需要将元素一个接一个地显示在一行中时使用.
HTML5中的地理定位API是什么?
\n","answerBody":"HTML5的地理定位API允许用户与选定的网站共享他们的物理位置. JavaScript可以捕获用户的纬度和经度,并将其发送到后端web服务器,以启用位置感知功能,如查找本地企业或在地图上显示其位置.
\n\n如今,大多数浏览器和移动设备都支持地理定位API. Geolocation API使用全局的一个新属性 导航器
object.
创建Geolocation对象的方法如下:
\n\nVar 地理位置 = 导航器.地理位置;\n
\n\nThe 地理位置
对象是一个服务对象,它允许小部件检索有关用户设备地理位置的信息.
如果不指定!,主要结果是什么 文档类型
在HTML页面中?
新的特定于html5的标签将不会被浏览器解释.
\n","identifier":3280356},{"questionBody":"有什么区别 and
元素?
The 元素是SVG图形的容器. SVG有几种绘制路径、框、圆、文本甚至位图图像的方法.
SVG是一种描述2D图形的语言,但是 允许您使用JavaScript动态绘制2D图形.
SVG是基于xml的,这意味着每个元素都可以在SVG DOM中使用. 您可以为元素附加JavaScript事件处理程序.
\n\n在SVG中,每个绘制的形状都被记住为一个对象. 如果改变了SVG对象的属性,浏览器可以自动重新呈现该形状.
\n\n画布是逐像素渲染的. 在canvas中,一旦图形被绘制出来,浏览器就会忘记它. 如果它的位置应该改变, 整个场景需要重新绘制, 包括任何可能被图像覆盖的物体.
\n","identifier":3280357}],"publicUrl":"http://idj7.aykarteknoloji.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://idj7.aykarteknoloji.com/hire?interested_in=developers&skill=html5&skill_job_title=HTML5+Developer"},"talent":{"label":"申请成为HTML5开发者","href":"http://idj7.aykarteknoloji.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}> < /脚本