面试八股-HTML

用户4921702877553
62 阅读3分钟

什么是 DOCTYPE， 有何作用？

Doctype是HTML5的文档声明，指定HTML版本标准。如果不指定，大部分浏览器将以最大兼容模式来解析网页（怪异模式），这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的

H5有哪些新元素和新特性

  • 语义化标签，例如header，footer，section，article等
    • 语义化标签的作用：提升页面的阅读性(结构性增强)，更有利于SEO，对于使用屏幕阅读器的人来说会更友好(有明显的语气差别，例如strong标签内的内容会重读)；
  • 视频video、音频audio
  • 画布canvas
  • 新增的表单控件：calendar、date、time、email、url、search
  • 本地离线存储，localStorage长期存储数据，浏览器关闭后数据不丢失，sessionStorage的数据在浏览器关闭后自动删除
  • webworker

cookie、sessionStorage 和 localStorage 的区别

使用方式

cookie

设置cookie

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user; domain=mysite.com"

读取cookie

function getCookieValue(name) {
    let result = document.cookie.match("(^|[^;]+)\\s*" + name + "\\s*=\\s*([^;]+)")
    return result ? result.pop() : ""
}
getCookieValue("userId")

localStorage & sessionStorage

sessionStorage.setItem(key, value);
localStorage.setItem(key,value);
sessionStorage.getItem(key);
localStorage.getItem(key);
sessionStorage.removeItem(key);
localStorage.removeItem(key);

区别

  • 生命周期
    • cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效
    • localStorage：除非被手动清除，否则将会永久保存
    • sessionStorage： 仅在当前网页会话下有效，关闭页面或浏览器后就会被清除
  • 存放数据大小
    • cookie：4KB左右
    • localStorage和sessionStorage：可以保存5MB的信息
  • http请求：
    • cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
    • localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信
  • 易用性：
    • cookie：需要程序员自己封装，源生的Cookie接口不友好
    • localStorage和sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

script、script async 和 script defer 的区别

  • script：从上到下，解析到就会下载执行，下载和执行都会会阻塞HTML文档解析渲染。下载执行均有序

  • defer：从上到下，解析到就会下载，但不会执行，等到HTML文档解析渲染完成才会执行，不会阻塞HTML文档解析渲染，下载执行均有序

  • async：从上到下，解析到就会下载，下载好就会执行，下载不阻塞HTML文档解析渲染，但是执行会阻塞。开始下载有序，但是执行顺序无法保证

iframe的优缺点

  • 优点
    • 可以在页面上独立显示一个页面或者内容,不会与页面其他元素产生冲突
    • 可以在多个页面中重用同一个页面或者内容,可以减少代码的冗余
    • 加载是异步的,页面可以在不等待 iframe 加载完成的情况下进行展示
    • 方便地实现跨域访问
  • 缺点
    • 不利于SEO
    • 会阻塞主页面的 onload 事件
    • 和主页面共享连接池,影响页面并行加载

meta viewport 是做什么用的，怎么写？

Viewport，适配移动端，可以控制视口的大小和比例：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

其中，content 参数有以下几种：

  • width：宽度(数值/device-width)
  • height ：高度(数值/device-height)
  • initial-scale：初始缩放比例
  • maximum-scale：最大缩放比例
  • minimum-scale：最小缩放比例
  • user-scalable：是否允许用户缩放(yes/no）
avatar
文章
阅读
粉丝