[秃破前端面试] —— HTML5

时间 2020-02-20

原文原文链接

前言

年前年后跳槽季，准备从面试内容入手看看前端相关知识点，旨在探究一个系列知识点，能力范围以内的深刻探究一下。重在实践，针对初级前端和准备面试的同窗，争取附上实际的代码例子以及相关试题～系列名字就用【秃破前端面试】—— 由于圈内你们共识，技术与发量成正比。😄但愿你们早日秃破瓶颈html

关于面试题或者某个知识点的文章太多了，这里笔者只是想把我的的总结用代码仓库的形式记录下来并输出文章，毕竟理论不等于实践，知其然也要知其因此然，实践用过才能真正理解～前端

什么是 HTML5

HTML的发展历程以下：git

产生于1990年
1997年 HTML4 出现，成为互联网开发的标准
2008年，HTML5正式出现，2002年趋于稳定

HTML在发展过程当中，HTML4.01 版本维持了长达十年的时间，以后 HTML5 标准才出现，它被认为是下一代互联网标准。咱们今天 Web 开发关于 HTML 内容相关的，绝大部分都是基于 HTML5 标准来进行开发的。github

下面是一个最基本的 HTML5 页面代码：web

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
复制代码

全部<!DOCTYPE html>头的 .html 文件，浏览器都会使用 HTML5 标准来解析。而若是是 HTML4.01，它的头部代码则是以下三种：面试

HTML4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
复制代码

HTML4.01 Traditional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
复制代码

HTML4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">
复制代码

这是由于，HTML4.01 是基于 SGML，须要声明 DTD 标记语言规则，浏览器才能够正常解析页面代码。而 HTML5 不是基于 SGML 标准，因此不须要声明 DTD，直接` 便可。跨域

HTML5“新”特性

这里给新打上引号是由于，说它新可是也确实不新了，毕竟也出现十多年了，并且如今大部分的特性API都已经被开发使用的差很少了。可是说它不新吧也不太对，由于 HTML5 里面不少 API 都是特性场景特定功能，若是只是通常开发简单的前端页面，那么大部分是不会用到的，因此不少人也不怎么了解。所以，在这里就根据实际代码来基本了解一下，避免被某些专项开发问住，至少不至于一点也不知道～浏览器

语义化标签

这个不须要多用语言文字说明，咱们来简单实现一下以下图所示的布局代码。缓存

第一种：原始标签布局

<div class="header">Header</div>
  <div class="nav">Nav</div>
  <div class="body">
    <div class="article">
      Article
      <div class="section">
        Section
      </div>
    </div>
    <div class="aside">
      Aside
    </div>
  </div>
<div class="footer">Footer</div>
复制代码

第二种：语义化标签布局

<header>Header</header>
  <nav>Nav</nav>
  <div class="body">
    <article>
      Article
      <section>Section</section>
    </article>
    <aside>Aside</aside>
  </div>
<footer>Footer</footer>
复制代码

看完上面两种写法相信大部分人仍是会常用第一种吧。两种写法孰优孰劣其实很难判定，由于单单从性能上来讲可能并无太多区别，而第一种又比较习惯，写起来比较快，可是语义化标签具备以下优势：

比全部布局所有采用 div 标签阅读起来更清晰
利于 SEO，方便搜索引擎识别页面结构 - 这也是很是重要的
方便设备解析，好比盲人阅读，语义化标签比 div 标签要好不少

HTML5 标签还有不少个，具体解释释义你们能够去查看，对应地址：HTML5标签。

表单功能加强

HTML5 对表单功能进行了加强，input 标签能够输入各类类型从而渲染相应的表单内容。具体以下所示：

<form action="" method="get">
    <p>邮箱标签: <input type="email"></p>
    <p>数字标签: <input type="number"></p>
    <p>滑动条标签: <input type="range"></p>
    <p>搜索框标签: <input type="search"></p>
    <p>日期框: <input type="date"></p>
    <p>星期框: <input type="week"></p>
    <p>月份框: <input type="month"></p>
    <p>颜色框: <input type="color"></p>
    <p>网址框: <input type="url"></p>
    <div>
      <input type="submit">
      <input type="reset">
    </div>
</form>
复制代码

能够看到，都是 input 标签，可是渲染出来的是不一样类型的页面元素。除此以外，HTML5 对 form 表单还进行了内置属性的加强。好比通用属性 placeholder、autofocus，再好比若是是 number 类型，则能够设置 min 和 max 属性，若是是 password 类型，则能够设置 minLength 和 maxLength 属性。

更多相关属性，请查阅HTML5 表单

音频/视频

音频/视频是 HTML5 提供的关键 API，由于在 HTML5 以前，浏览器支持音视频方案都是经过 Flash 来实现的，相信不少人都知道，远古的页面确实嵌套着不少 Flash 插件。HTML5 的音频视频方案具体有以下优势：

浏览器原生支持

<audio src="./media/luffy.mp3" controls="controls">
    本网页不支持媒体标签
</audio>
复制代码

上面代码，就直接嵌入了一段音频在网页上，而且增长了控制器，很是便捷。视频选项也同样，只不过换成了<video>标签。

能够设置多类型音视频，兼容性良好

<audio controls="controls">
    <source src="./media/luffy.ogg"></source>
    <source src="./media/luffy.mp3"></source>
    本网页不支持媒体标签
</audio>
复制代码

媒体标签内部，还能够经过<source>标签来进行多种类型的兼容，好比低版本 IE 不支持 mp3 文件，那么咱们就能够经过上面的代码来进行低版本浏览器的兼容，点击播放按钮，浏览器就会从上至下解析，直到解析成功，若是不成功，则显示不支持媒体标签，以下图所示：

能够看到，第一个播放的是 mp3 文件，第二个播放的是 ogg 文件。

画布 — Canvas

关于 Canvas 这里不想多说，由于这个地方太专业了，若是只是问你知不知道那么你必定知道，可是不常用绘图 API 的话也讲不太清楚细节，所以此处留做之后单独讲解。以后可能会单独列出来 Canvas 各个 API 的详细用法以及相关试题。

拖放

本地存储

HTML5 的本地存储新增了一些，好比 Storage 和 manifest 离线缓存。以前前端本地存储都是经过 cookie 来进行的。

Storage

分为 LocalStorage 和 SessionStorage，具体的相信你们都很清楚，也常常被问到，因此就很少作解释了。真的烂大街了，我再写也是浪费彼此时间。

Cache Manifest

应用程序缓存为应用带来三个优点：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减小服务器负载 —— 浏览器将只从服务器下载更新过或更改过的资源。

下面简单来设置一下，以下图所示，在有网络的时候加载一个图片连接，而后将网络设置成离线，该连接就不可访问了。

设置一下离线缓存，新建manifest.appcache，这里的后缀名是官方建议的。具体能够查看此处HTML5 应用缓存，而后写入以下内容：

CACHE MANIFEST
https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3097378621,1517430839&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=7dcb802bd45e50b25868fc4d1302ffdc
复制代码

里面对应的内容就是咱们但愿缓存的图片线上地址，而后咱们在有网的时候访问一下，再关闭网络，刷新页面就会发现图片能够正常展现，而且从图中能够看出，加载的图片就变成了从 cache 里获取。

Web Worker

咱们都知道，HTMl 代码的执行顺序是从上而下，单线程执行，因此当浏览器执行到某个 js 脚本的时候，页面的状态是不可被响应的，也就是会阻塞。而 Web Worker 是运行在后台的 JavaScript，它独立于其余脚本，不会影响页面的性能。也就是说，相似于多线程，给 Worker 的脚本代码开了另外一个线程来执行，通常来讲配合 HTML5 的 postMessage 来进行与主页面的交流。

Web Worker 看起来很是简单，可是实际使用很是高深，用得好能够提高应用性能，用得很差则不少余。我实际上没怎么用过，因此这里就简单介绍一下。

// worker.js
var i=0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()", 500);
}

timedCount();
复制代码

// webworker.html

<script>
    var w;
    
    function startWorker() {
      if (typeof (Worker) !== "undefined") {
        if (typeof (w) == "undefined") {
          w = new Worker("webworker.js");
        }
        w.onmessage = function (event) {
          document.getElementById("result").innerHTML = event.data;
        };
      }
      else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
      }
    }
    
    function stopWorker() {
      w.terminate();
    }
</script>
复制代码

具体效果如上图所示，这里须要注意的是，本地文件是没法访问到 worker.js 的，若是想要使用，须要起一个小服务才行。

其余内容

除了上面几个大块知识点，HTML5 还有几个其余 API，这些知识点在某些方面很是的有用，因此在这里也就简单说明一下。

地理定位

HTML5 还提供了地理定位功能，这个就是个封装 API，因此没什么可说的。

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>
复制代码

datalist

这个属性也是很是好用的，只不过咱们常用别人已经封装好的 UI 组件，因此就没怎么用过，此标签就是 HTML5 封装的 Select API。

<input id="myCar" list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>
复制代码

上面代码表示，此标签须要与input使用，而后呈现下拉框与选项，实际效果以下图所示：

此功能也是很是值得二次开发的～

可编辑内容

这个属性牛逼的不行，也是全部主流浏览器都支持的，而且它被普遍的应用，好比不少网页编辑器，内容切换编辑状态等等，均可以经过这个属性来实现。

<div class="edit" contenteditable='true'></div>
复制代码

以下图所示：

div 标签变成了可编辑的状态，此属性被不少页面编辑器所应用。很是好用，值得你们二次开发～

跨域

此处知识点也就是 postMessage 和 WebSocket 两个，这两个详细在另外一篇文章，能够去查看～

前端跨域总结

总结

这就是我总结的前端新三剑客之一 —— HTML5 的一些特性使用方法，相信在面试过程当中，若是被面试官问到你了解的 HTML5 新特性，能够拿来应付一下～

相关代码地址：秃破前端面试系列代码