HTML5的十大新特性

2021/12/16 23:45:46

编程Tag： 元素 HTML5 SVG 特性拖动定义新增十大

本文主要是介绍HTML5的十大新特性，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

原文网址：HTML5的十大新特性_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍HTML5的十大新特性和一些废除的特性。此内容是前端面试中的常见问题。

HTML5总体比HTML4多了十个新特性，但其不支持IE8及IE8以下版本的浏览器。

十大新特性

新增语义化标签
增强表单功能
新增视频和音频
新增Canvas绘图
新增SVG绘图
新增地理定位
新增拖放API
新增WebWorker
新增WebStorage
新增WebSocket

废除的特性

废除的元素：纯表现元素、部分浏览器支持的元素和对可用性产生负面影响的元素

纯表现元素：basefont、big、center、font、s、strike、tt、u 用css代替
部分浏览器支持的元素：applet、bgsound、blink、marquee
对可用性产生负面影响的元素：frameset、frame、noframes,在html5中不支持frame框架，只支持iframe框架

一、新增语义化标签

语义化标签使得页面的内容结构化，见名知义。

结构化元素

标签	描述
<header>	定义了文档的头部区域
<footer>	定义了文档的尾部区域
<nav>	定义文档的导航
<section>	定义文档中的节
<article>	定义文章
<aside>	定义页面以外的内容（侧边栏）
<figure>	定义自包含内容，如图表
<main>	定义文档主内容

HTML5提供的新元素可以更好的描述网页文档结构，比如：

其他元素

标签	描述
<video>	用来定义视频。
<audio>	用来定义音频。
<canvas>	用来展示图形，该元素本身没有行为，仅提供一块画布。
<embed>	用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。
<mark>	用来展示高亮的文字。
<progress>	用来展示任何类型的任务的进度。
<meter>	表示度量衡，定义预定义范围内的度量。
<time>	用来展示日期或者时间。
<command>	表示命令按钮。
<details>	用来展示用户要求得到并且可以得到的细节信息。
<summary>	用来为details元素定义可见的标题。
<datalist>	用来展示可选的数据列表，与input元素配合使用，可以制作出输入值的下拉列表。
<datagrid>	也用来展示可选的数据列表，以树形列表的形式来显示。
<keygen>	表示生成密匙。
<output>	表示不同类型的输出。
<source>	为媒介元素定义媒介资源。
<menu>	表示菜单列表。
<ruby>	表示ruby注释，rt元素表示字符的解释或发音。rp元素在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容。
<wbr>	表示软换行。与br元素的区别是：br元素表示此处必须换行。 wbr元素：浏览器窗口或父级元素的宽度够宽时，不进行换行；而当宽度不够时，主动在此处进行换行。
<bdi>	定义文本的文本方向，使其脱离其周围文本的方向设置。
<dialog>	表示对话框或窗口。

二、增强表单功能

新增输入类型（type）

HTML5新增了一些新的input输入特性，从而更好的进行输入控制和验证。

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

新增表单元素

标签	含义
<datalist>	用户会在他们输入数据时看到域定义选项的下拉列表
<progress>	进度条，展示连接/下载进度
<meter>	刻度值，用于某些计量，例如温度、重量等
<keygen>	提供一种验证用户的可靠方法生成一个公钥和私钥
<output>	用于不同类型的输出。output元素的输出内容是由代码控制的

新增表单属性

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

三、新增音频和视频

音频：<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> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域，类似于其他通用的二维 API，通过一套完整的绘图函数来动态生成图形。

Canvas基本使用

<canvas id="tutorial" width="300" height="300"></canvas>

详见：学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程

五、新增SVG绘图

什么是SVG?

SVG指可伸缩矢量图形
SVG用于定义用于网络的基于矢量的图形
SVG使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG是万维网联盟的标准

SVG的优势

SVG图像可通过文本编译器来创建和修改
SVG图像可被搜索、索引、脚本化或压缩
SVG是可伸缩的
SVG图像可在任何的分辨率下被高质量的打印
SVG可在图像质量不下降的情况下被放大

SVG与Canvas区别

项	Canvas	SVG
绘制方式	JavaScript	XML
是否依赖于分辨率	依赖分辨率	不依赖分辨率
是否支持事件处理器	不支持事件处理器	支持事件处理器
渲染速度	能够以.png或.jpg格式保存结果图像	复杂度会减慢搞渲染速度
功能	文字呈现功能比较简单	适合大型渲染区域的应用程序
适用场景	最合适图像密集的游戏	不适合游戏应用

六、新增地理定位

使用getCurrentPosition()方法来获取用户的位置以实现“LBS服务”。

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

七、新增拖放

拖放是一种常见的特性，即捉取对象以后拖到另一个位置。在HTML5中，拖放是标准的一部分，任何元素都能够拖放。

示例

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

当元素拖动时，我们可以检查其拖动的数据

<div draggable="true" ondragstart="drag(event)"></div>
<script>
function drap(ev){
    console.log(ev);
}
</script>

拖动的生命周期

拖动生命周期	属性名	描述
拖动开始	ondragstart	在拖动操作开始时执行脚本
拖动过程中	ondrag	只要脚本在被拖动就运行脚本
拖动过程中	ondragenter	当元素被拖动到一个合法的防止目标时，执行脚本
拖动过程中	ondragover	只要元素正在合法的防止目标上拖动时，就执行脚本
拖动过程中	ondragleave	当元素离开合法的防止目标时
拖动结束	ondrop	将被拖动元素放在目标元素内时运行脚本
拖动结束	ondragend	在拖动操作结束时运行脚本

八、新增Web Worker

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

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新县城之间数据交换的接口：postMessage、onmessage。

JavaScript

//worker.js
onmessage = function (evt){
  var d = evt.data;//通过evt.data获得发送来的数据
  postMessage( d );//将获取到的数据发送会主线程
}

HTML

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">
        //WEB页主线程
        var worker = new Worker("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
        worker.postMessage("hello world");     //向worker发送数据
        worker.onmessage = function (evt) {     //接收worker传过来的数据函数
            console.log(evt.data);              //输出worker发送来的数据
        }
    </script>
</head>
<body></body>
</html>

九、新增Web Storage

WebStorage是HTML新增的本地存储解决方案之一，但并不是取代cookie而指定的标准。cookie作为HTTP协议的一部分用来处理客户端和服务器的通信是不可或缺的。

WebSorage的意图在于解决本来不应该cookie做，却不得不用cookie的本地存储。

WebStorage包括：

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

详见：cookie, localStorage, sessionStorage的区别（很全，很详细）_IT利刃出鞘的博客-CSDN博客

十、新增WebSocket

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

握手阶段采用HTTP协议，默认端口是80和443
建立在TCP协议基础之上，和http协议同属于应用层
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，为wss），如ws://localhost:8023

其他网址

面试： H5新特性：十个新特性 - jane_panyiyun - 博客园

前端HTML5十大新特性详细总结_傲娇味的草莓的博客-CSDN博客_html5十大新特性

HTML5新特性_y_xiuzhu的博客-CSDN博客

这篇关于HTML5的十大新特性的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！