HTML5的十大新特性

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

简介

说明

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

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

十大新特性

  1. 新增语义化标签
  2. 增强表单功能
  3. 新增视频和音频
  4. 新增Canvas绘图
  5. 新增SVG绘图
  6. 新增地理定位
  7. 新增拖放API
  8. 新增WebWorker
  9. 新增WebStorage
  10. 新增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提供的新元素可以更好的描述网页文档结构,比如:

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?

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

SVG的优势

  1. SVG图像可通过文本编译器来创建和修改
  2. SVG图像可被搜索、索引、脚本化或压缩
  3. SVG是可伸缩的
  4. SVG图像可在任何的分辨率下被高质量的打印
  5. 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包括:

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

详见:cookie, localStorage, sessionStorage的区别(很全,很详细)_IT利刃出鞘的博客-CSDN博客

十、新增WebSocket

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

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

其他网址

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

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

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

上一篇:使用Jsoup爬取网络请求的方法(java,post,get,代理IP)


下一篇:Html5的新增的语义标签 方便搜索引擎搜索