前端面试题系列之HTML篇

前端面试题系列之HTML篇

20
Oct 2018

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

  • <!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
  • 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

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

  • link属于XHTML标签,除了加载CSS外,还能用于定义RSS,定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS。
  • 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载。
  • import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题。

cookies,sessionStorage 和 localStorage 的区别?

  • cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
  • cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
  • sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
  • 存储大小:
    — cookie数据大小不能超过4k。
    — sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
  • 有期时间:
    — localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据。
    — sessionStorage 数据在当前浏览器窗口关闭后自动删除。
    — cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

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

  • iframe + contentWindow
  • postMessage
  • SharedWorker(Web Worker API)
  • storage 事件(localStorge API)
  • WebSocket

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

  • map+area或者svg。
  • border-radius。
  • 纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等。

HTML5有哪些新特性?

  • 新增选择器 document.querySelector、document.querySelectorAll
  • 拖拽释放(Drag and drop) API
  • 媒体播放的 video 和 audio
  • 本地存储 localStorage 和 sessionStorage
  • 离线应用 manifest
  • 桌面通知 Notifications
  • 语意化标签 article、footer、header、nav、section
  • 增强表单控件 calendar、date、time、email、url、search
  • 地理位置 Geolocation
  • 多任务 webworker
  • 全双工通信协议 websocket
  • 历史管理 history
  • 跨域资源共享(CORS) Access-Control-Allow-Origin
  • 页面可见性改变事件 visibilitychange
  • 跨窗口通信 PostMessage
  • Form Data 对象
  • 绘画 canvas

 

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

/鼻子 /黑头 /黄瓜 /魔鬼 /雪糕 /鄙视 /送花 /耳光 /神气 /石头 /石化 /睡觉 /爱心 /点赞 /死去 /无语 /捂眼 /拥抱 /打你 /感动 /感冒 /怒火 /微笑 /害羞 /奸笑 /唉呀 /哭泪 /吐血 /吐口水 /吐你 /口水 /勾引 /剪刀手 /出拳 /冰冻 /亲亲 /中指 /不想看 /不开心