在2022年10月24日到11月11日的三个星期中，我参与了大约25家公司的面试并整理出《一份历时三个星期的前端面经请查收》一篇帖子，地址如下：juejin.cn/post/716513…

本篇是针对HTML&CSS部分：1.html5有哪些新功能问题？ 所进行的答案整理，供大家参考，欢迎大佬们指正～

html5新功能主要可以概括为：语义化标签、表单功能增强、音视频标签、Canvas+SVG，拖放功能、本地存储、webWorker、地理位置

一、语义化标签

语义化标签其实就是可以让标签有自己的含义。如header、nav、footer、main、artical、section等.。

语义化标签的优势：

代码结构清晰，方便阅读，有利于团队合作。
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。
有利于搜索引擎优化(SEO)

二、表单功能增强

<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>

三、音视频标签

在h5之前，网页中内嵌视频普遍会采用flash实现，在h5中音频是audio，视频是video标签。

<video width="320" height="300" controls="controls">
    <source src="cartoon.mp4" type="video/mp4"/>
</video>

四、Canvas + SVG

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

<canvas id="myCanvas" width="320" height="300"></canvas> <script type="text/javascript">
    var c=document.getElementById("myCanvas"); 
    var cxt=c.getContext("2d");
    cxt.fillStyle="#000000";
    cxt.fillRect(0,0,150,100);
</script>

五、拖放功能

<p>请把图片拖放到矩形中:</p> 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
<img id="drag1" src="img.png" draggable="true" ondragstart="drag(event)" />

六、本地存储

通过本地存储(Local Storage), web应用程序能够在用户浏览器中对数据进行本地的存储。

在HTML5之前，应用程序数据只能存储在cookie中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。与cookie(4kb)不同，存储限制要大得多(至少5MB)，并且信息不会被传输到服务器。本地存储经由起源地(origin)(经由域和协议)。所有页面，从起源地，能够存储和访问相同的数据。

七、webWorker

当在HTML页面中执行脚本时，页面是不可响应的，直到脚本已完成。

Webworker 是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等，而此时 web worker 运行在后台。

八、地理位置

var x = document.getElementById("demo");
function getLocation() { 
    if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(showPosition, showError); 
     } else { showError(); 
    }
 } 
 function showPosition(position) { 
     x.innerHTML = "Latitude: " + position.coords.latitude + "<br/> Longitude: " + position.coords.longtitude;
 } 
 function showErrr(error) { 
     x.innerHTML = `GeoLocation is not supported by current navigator ${ error ? error.message : "" }`;
 }

面试总结：

这道题只是简单被问过一次，大概知道有哪些和有什么作用就可以了。其中会被单独拎出来提问点有：

本地存储
webworker和serviceworker
是否做过seo，如何进行seo

【面经答案篇之Html&CSS】1. Html5的新功能有哪些？