html面试基础(一)

html知识体系图片:https://juejin.cn/post/6905294475539513352

标红重点（考察很多）

src和href的区别：

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

src:表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应用到文档内，如请求js脚本。当浏览器解析到该元素时会暂停其他资源的下载和处理，直到将该资源加载，编译，执行完毕，所以一般js脚本会放到页面的底部。
href:表示超文本引用，它指向一些网络资源，建立和当前元素或文本的链接关系。当浏览器识别到它指向的文件时，就会并行下载资源不会停止对当前文档的处理。常用在a,link标签上。

对Html语义化的理解

语义化是根据内容的结构化（内容语义化）,选择合适的标签（代码语义化）。通俗的来讲就是用正确的代码，做正确的事情。
语义化的优点：

对机器友好，带有语义的文字表现力丰富，，更适合搜索引擎的爬虫爬取有效信息，有利于SE0（搜索引擎优化）；
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发和维护。

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

script标签中defer和async的区别

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。
下图可以直观的看出三者的区别：

其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。
defer和async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：

执行顺序：多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行；
脚本是否并行执行：async属性，表示后续文档的加载和执行js脚本的加载和执行时并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

HTML5有哪些更新

语义化标签

header：定义文档的页眉（头部）
nav：定义导航栏链接部分
footer：定义文档或节的页脚（底部）
article：定义文章内容
section：定义文档中的节（section,区段）
aside：定义所处内容之外的内容（侧边）

媒体标签

表单

进度条，度量器

DOM查询操作

Web存储

HTML5提供了两种在客户端存储数据的新方法：

localStorage -没有时间限制的数据存储
sessionStorage -针对一个session的数据存储
拓展：

LocalStorage:
存入数据：localStorage.setItem(key,value)调用一次存储一次数据；
取出数据：localStorage.getItem(key)
全部清除：localStorage.clear()
清除单个：localStorage.remove(key)
SessionStorage:
存入数据：sessionStorage.setItem(key,value)
取出数据：sessionStorage.getItem(key)
全部清除：sessionStorage.clear()
清除单个：sessionStorage.remove(key)
localStorage/sessionStorage的共同之处：

存储大小为5M
不会发送到服务器

两者的区别：

sessionStorage存储数据不仅限制在同源，还限制在同一窗口。可以理解为当取数据的页面和存数据的页面不是同一个取到的数据就是null.
localStorage存储的数据只要不清除，就永久有效；sessionStorage存储的数据只要窗口一关闭，就失效。

其他

拖放：即抓取对象以后拖放到另一个位置。设置元素可拖放：

1	<img draggable="true" />

画布(canvas)： canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

1	<canvas id="myCanvas" width="200" height="100"></canvas>

SVG：SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准
地理定位：Geolocation（地理定位）用于定位用户的位置。‘

考察较多

DOCTYPE(文档类型)的作用

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

CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
**BackCompat：怪异模式(混杂模式)(Quick mode)**，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

简述web worker

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

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

title与h1的区别，b与strong的区别，i与em的区别？

title属性没有明确意义指标的标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响
strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单的加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎（SEO）更侧重strong标签。
i内容展示为斜体，em便是强调得文本

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

 标签用于定义文档的头部，它是所有头部元素的容器中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供信息等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, <title>。其中 <title>定义文档的标题,它是 head 部分中唯一必需的元素。