前端
面试题
前端
面试题

h5的新特性有哪些?

html 5 总的来说比 html 4 多了十个新特性,但是其不支持 ie 8 及以下版本的浏览器

  1. 语义化标签
  2. 增强型表单
  3. 视频和音频
  4. canvas 绘图
  5. svg 绘图
  6. 地理定位
  7. 拖放 API
  8. WebWorker
  9. WebStorage
  10. WebSocket

一 语义标签

标签 描述
header 定义了文档的头部区域
footer 定义了文档的尾部区域
nav 定义了文档的导航
section 定义了文档中的章节
article 定义文章
aside 定义页面以外的内容
details 定义用户可以看到或者隐藏的额外细节
summary 标签包含 details 元素的标题
dialog 定义对话框
main 定义文档主内容
mark 定义文档的主内容
time 定义日期/时间

二 增强型表单

html 5 修改一些新的 input 输入特性,改善更好的输入控制和验证

输入类型 描述
color 用于选取颜色
date 用于选取日期
datetime 选取日期(UTC 时间)
datetime-local 选取日期(无时区)
month 选取一个月份
week 选择周和年
time 选择一个时间
email 包含 e-mail 地址的输入框
number 数字的输入框
url url 地址的输入框
tel 定义输入电话号码和字段
search 用于搜索框
range 一个范围内数字值的输入框

html 新增了五个表单元素

元素 描述
datalist 用于会在他们输入数据时看到域定义选项的下拉列表
progress 进度条,展示连接/下载速度
meter 刻度值,用于某些计量,例如温度/重量等
keygen 提供一种验证用户的可靠方法,生成一个公钥和私钥
output 用于不同类型的输出,比如脚本输出

html 5 新增表单属性

属性 描述
placeholder 输入框默认提示文字
required 输入框的内容是否可以为空
pattern 描述一个正则表达式验证输入的值 max/max
min/max 设置元素最小/最大值
step 为输入域规定合法的数字间隔
height/width 用于 image 类型 <input> 标签图像高度/宽度
autofocus 规定在页面加载时,域自动获得焦点
multiple 规定 <input> 元素中可选择多个值

三 音频和视频

html 5 增加了音频和视频文件的标准

音频: <audio src=""></audio>

<audio controls>    //controls属性提供添加播放、暂停和音量控件。
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。        //浏览器不支持时显示文字
</audio>

视频: <video src=""></video>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

四 canvas 绘图

canvas 是 HTML 5 新增的,一个可以使用 js 在其中绘制图像的 HTML 元素,他可以用来制作动画/视频处理和渲染

五 svg 绘图

  • 什么是 svg?
    • svg 指可伸缩矢量图形
    • svg 用于定义用于网络的基本适矢量的图形
    • svg 使用 xml 格式定义图形
    • svg 图像在放大或改变尺寸的情况下其图形质量不会有损失
    • svg 是万维网联盟的标准
  • svg 的优势
    • svg 图像可以通过文本编辑器来创建和修改
    • svg 图像可被搜索/索引/脚本化或压缩
    • svg 是可伸缩的
    • svg 图片可在任何的分辨率下被高质量的打印
    • svg 可在图像质量不下降的情况下被放大
  • svg 与 canvas 的区别
    • svg 适用于描述 xml 中的 2 D 图形的语言
    • canvas 随时随地绘制 2 D 图形
    • svg 是基于 xml 的,这意味着可以操作 dom,渲染速度较慢
    • 在 svg 中每个形状都被当做是一个对象,如果 svg 发生改变,页面就会发生重绘
    • canvas 是一像素一像素地渲染,如果改变某一个位置,整个画布会重绘
canvas svg
依赖分辨率 不依赖分辨率
不支持事件处理器 支持事件处理器
能够以.png 或者.jpg 格式保存结果图像 复杂度中减慢渲染速度
文字呈现功能比较简单 适合大型渲染区域的应用程序
最适合图像密集的游戏 不适合游戏应用

六 地理定位

使用 getCurrentPosition 方法来获取用户的位置,以实现 LBS 服务

<!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>
    <div id="demo">地理定位</div>
  </body>
  <script>
    const 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
    }
    getLocation()
  </script>
</html>

七 拖拽 API

在 HTML 5 中,拖放是标准的一部分,任何元素都能够拖放

拖放是一种常见的特性,即捉取对象以后拖到另一个位置

<div draggable="true"></div>

当用上拖动时,我们可以检查其拖动的数据

<!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>
    <div
      draggable="true"
      ondragstart="drag(event)"
    >
      拖拽
    </div>
    <script>
      function drag(ev) {
        console.log(ev)
      }
    </script>
  </body>
</html>
拖动生命周期 属性名 描述
拖动开始 ondragstart 在拖动操作开始时执行脚本
拖动过程中 ondrag 只要脚本在被拖动就运行脚本
拖动过程中 ondragentr 当元素被拖动到一个合法的防止目标时,执行脚本
拖动过程中 ondragover 只要元素正在合法的防止目标上拖动时,就执行脚本
拖动过程中 ondragleave 当元素离开合法的防止目标时
拖动结束 ondrop 将被拖动元素放在目标元素内运行脚本
拖动结束 ondragend 在拖动操作结束时运行脚本

八 Web Worker

Web Worker 可以通过加载一个脚本文件进而创建一个独立工作的线程,在主线程之外运行

基本使用:

Web Worker 的基本原理就是在当前 js 的主线程中,使用 Worker 类加载一个 js 文件来开辟一个新的线程,起到互不阻塞的效果,并且提供主线程和新线程之间数据交换的接口:postMessage/onMessage

//worker.js
onmessage = function (evt) {
  const d = evt.data //通过evt.data获取发送过来的线程
  console.log('🚀 ~~- d:', d)
  postMessage(d) //将获取到底额数据发送回主线程
}
<!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>
    <script>
      const worker = new Worker('worker.js')
      worker.postMessage('hello world')
      worker.onmessage = function (evt) {
        console.log('🚀 ~~- evt:', evt.data)
      }
    </script>
  </body>
</html>

九 Web Storage

WebStorage 是 html 新增的本地存储解决方案之一,但是并不是取代 cookie 而指定的标准,cookie 作为 html 协议的一部分用来处理客户端和服务端的通信是不可获缺的,session 正式依赖于实现的客户端状态保持

WebStorage 的意图用来解决本来不应该 cookie 做,却不得不用 cookie 的本地存储

WebStorage 拥有 5 m 的存储空间,而 cookie 只有 4 k,这是完全不能比的

客户端存储有两个对象,其用法是基本一致的

localStorage:没有时间限制的数据存储 sessionStorage:在浏览器关闭的时候就会清除

localStorage.setItem(key,value);//保存数据
    let value = localStorage.getItem(key);//读取数据
    localStorage.removeItem(key);//删除单个数据
    localStorage.clear();//删除所有数据
    let key = localStorage.key(index);//得到某个索引的值Ï

十 WebSocket

WebSocket 协议为 web 应用程序客户端和服务端之间提供了一种全双工通信机制

特点:

  1. 握手阶段采用 HTTP 协议,默认端口是 80 和 443
  2. 建立在 TCP 协议基础之上,和 http 协议同属于应用层
  3. 可以发送文本,也可以发送二进制文件
  4. 没有同源限制,客户端可以与任意服务器通信
  5. 协议标识符是 ws(如果加密为 wss),如 wx://localhost:8000