标准规范

DOCTYPE(⽂档类型) 的作⽤

DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html 或 xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在 HTML ⽂档的第⼀⾏。
浏览器渲染页面的两种模式（可通过 document.compatMode 获取，比如，语雀官网的文档类型是CSS1Compat）：

  • CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用 W3C 的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。

  • BackCompat：怪异模式（混杂模式）（Quick mode），浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

    如何理解HTML语义化？

  • 增强代码可读性

  • 让搜索更容易理解，利于SEO


    常⽤的 meta 标签有哪些

    meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了 HTTP 标准固定了一些name作为大家使用的共识，开发者还可以自定义 name。
    常用的 meta 标签：
    （1）charset，用来描述 HTML 文档的编码类型：

    1. <meta charset="UTF-8" >

    （2） keywords，页面关键词：

    1. <meta name="keywords" content="关键词" />

    （3）description，页面描述：

    1. <meta name="description" content="页面描述内容" />

    （4）refresh，页面重定向和刷新：

    1. <meta http-equiv="refresh" content="0;url=" />

    （5）viewport，适配移动端，可以控制视口的大小和比例：

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

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

  • width viewport ：宽度(数值/device-width)

  • height viewport ：高度(数值/device-height)
  • initial-scale ：初始缩放比例
  • maximum-scale ：最大缩放比例
  • minimum-scale ：最小缩放比例
  • user-scalable ：是否允许用户缩放(yes/no）


（6）搜索引擎索引方式：

  1. <meta name="robots" content="index,follow" />

head 标签有什么作用，其中什么标签必不可少？

作用

  • 用于定义文档的头部，它是所有头部元素的容器。
  • 引用资源：脚本、样式表等。
  • 描述文档：元信息、文档标题、在 Web 中的位置以及和其他文档的关系等
  • 绝大多数文档头部包含的数据都不会真正作为内容显示给用户

包含的标签

  • base
  • link
  • meta
  • script
  • style
  • title(唯一必需)
    1. <head>
    2.  <meta ...></meta>
    3.  <link ...>
    4.  <title ...>
    5. </head>

    HTML5 有哪些更新

  1. 新增语义化标签：nav、header、footer、aside、section、article
  2. 音频、视频标签：audio、video
  3. 表单：
  • 表单类型新增 ：email、url、number、search、range、color、time、date、datetime、datetime-local、week、month
  • 表单属性 ：placeholder、autofocus、required、pattern、multiple、form等
  • 表单事件：oninput、oninvalid
  1. DOM 查询操作
  • document.querySelector()
  • document.querySelectorAll()

它们选择的对象可以是标签，可以是类(需要加点)，可以是 ID(需要加#)

  1. Web存储：localStorage、sessionStorage
  2. canvas（画布）、drag API（元素拖放）、Geolocation（地理定位）、websocket（通信协议）
  3. input 标签新增属性：placeholder、autocomplete、autofocus、required
  4. history API：go、forward、back、pushstate
  5. 离线储存能力

标签

script 标签中 defer 和 async 的区别

如果没有 defer 或 async 属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。
defer 和 async 属性都是异步去加载外部的 JS 脚本文件，它们都不会阻塞页面的解析，其区别如下：

  • 执行顺序:
    • 多个带 async 属性的标签，不能保证加载的顺序；
    • 多个带 defer 属性的标签，按照加载顺序执行；

  • 脚本是否并行执行：

    • async 属性，表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的，即异步执行；
    • defer 属性，加载后续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步)，js 脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded 事件触发执行之前。

      src 和 href 的区别

      src 和 href 都是用来引用外部的资源，它们的区别如下：

  • src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src 会将其指向的资源下载并应⽤到⽂档内，如请求 js 脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般 js 脚本会放在页面底部。

  • href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在 a、link 等标签上。

    哪些块级元素、内联元素和空标签？

    块级元素：指的是display:block / tabel的元素，有div、p、h1、table、ul、ol等

  • 可以设置宽高；

  • 设置 margin 和 padding 都有效；
  • 可以自动换行；
  • 多个块状，默认排列从上到下。

内联元素：指的是display：inline/inline-block的元素。有a b span img input select strong；

  • 设置宽高无效；
  • 可以设置水平方向的 margin 和 padding 属性，不能设置垂直方向的 padding 和 margin；
  • 不会自动换行；

空元素
空元素，即没有内容的 HTML 元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

  • 常见的有：
    、
    、HTML - 图1、、、；
  • 鲜见的有：、、、、、、、、、、。

display:inline-block 什么时候会显示间隙

  • 有空格时会有间隙，可以删除空格解决；
  • margin正值时，可以让margin使用负值解决；
  • 使用font-size时，可通过设置font-size:0、letter-spacing、word-spacing解决；

    li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

    浏览器会把 inline 内联元素间的空白字符（空格、换行、Tab 等）渲染成一个空格。为了美观，通常是一个
  • 放在一行，这导致
  • 换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。
    解决办法：
    （1）为
  • 设置 float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。
    （2）将所有
  • 写在同一行。不足：代码不美观。
    （3）将
      内的字符尺寸直接设为 0，即 font-size:0。不足：
        中的其他字符尺寸也被设为 0，需要额外重新设定其他字符尺寸，且在 Safari 浏览器依然会出现空白间隔。
        （4）消除
          的字符间隔 letter-spacing:-8px，不足：这也设置了
        • 内的字符间隔，因此需要将
        • 内的字符间隔设为默认 letter-spacing:normal。

        说一下 web worker

        在 HTML 页面中，如果在执行脚本时，页面的状态是不可响应的，直到脚本执行完成后，页面才变成可响应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。
        如何创建 web worker：

        1. 检测浏览器对于 web worker 的支持性
        2. 创建 web worker 文件（js，回传函数等）
        3. 创建 web worker 对象

        HTML5 的离线储存怎么使用，它的工作原理是什么

        离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

        HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
        使用方法：
        （1）创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性：

        1. <html lang="en" manifest="index.manifest">

        （2）在 cache.manifest 文件中编写需要离线存储的资源：

        1. CACHE MANIFEST
        2.     #v0.11
        3.     CACHE:
        4.     js/app.js
        5.     css/style.css
        6.     NETWORK:
        7.     resourse/logo.png
        8.     FALLBACK:
        9.     / /offline.html
        • CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
        • NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
        • FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。

        （3）在离线状态时，操作window.applicationCache 进行离线缓存的操作。
        如何更新缓存：
        （1）更新 manifest 文件
        （2）通过 javascript 操作
        （3）清除浏览器缓存
        注意事项：
        （1）浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
        （2）如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
        （3）引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。
        （4）FALLBACK 中的资源必须和 manifest 文件同源。
        （5）当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
        （6）站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。
        （7）当 manifest 文件发生改变时，资源请求本身也会触发更新。

        浏览器是如何对 HTML5 的离线储存资源进行管理和加载

        • 在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面 ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。
        • 离线的情况下，浏览器会直接使用离线存储的资源。