欢迎光临散文网 会员登陆 & 注册

你真的知道HTML5吗?

2020-05-20 13:28 作者:一枚猿  | 我要投稿

HTML5是HTML最新的修订版本,由万维网联盟(W3C)于2014年10月完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。


HTML5添加了许多新的语法特征,其中包括<video>、<audio>和<canvas>元素,同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如<section>、<article>、<header>和<nav>则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素,像<a>、<cite>和<menu>被修改,重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节,使得所有浏览器和客户端程序能够一致地处理语法错误。




发展历史



2004年网页超文本技术工作小组(WHATWG)开始制定新标准。


2009年W3C与WHATWG合作共同为发展HTML5而努力。


2004年6月,宣布第二个草案Web Applications 。后来这两种规范合并形成HTML5。


2007年,获得W3C接纳,并成立了新的HTML工作团队。


2008年1月22日,第一份公开工作草案发布。


2014年10月28日,W3C正式发布HTML 5.0推荐标准。



各浏览器的支持情况



浏览器正式版本分数其他版本分数Google Chrome6752868528Opera5452855528Microsoft Edge1749218496Mozilla Firefox6149762497Apple Safari11.147111.2477



新特性



HTML5将Web带入一个成熟的应用平台,在这个平台上,视频、音频、图像、动画以及与设备的交互都进行了规范。 



智能表单


表单是实现用户与页面后台交互主要组成部分,HTML5在表单的设计上功能更加强大。input类型和属性的多样性大大地增强了HTML可表达的表单形式,再加上新增加的一些表单标签,使得原本需要JavaScript来实现的控件,可以直接使用HTML5的表单来实现;一些如内容提示、焦点处理、数据验证等功能,也可以通过HTML5的智能表单属性标签来完成。



绘图画布


HTML5的canvas元素可以实现画布功能,该元素通过自带的API结合使用JavaScript脚本语言在网页上绘制图形和处理,拥有实现绘制线条、弧线以及矩形,用样式和颜色填充区域,书写样式化文本,以及添加图像的方法,且使用JavaScript可以控制其每一个像素。HTML5的canvas元素使得浏览器无需Flash或Silverlight等插件就能直接显示图形或动画图像。 


多媒体


HTML5最大特色之一就是支持音频视频,在通过增加了<audio>、<video>两个标签来实现对多媒体中的音频、视频使用的支持,只要在Web网页中嵌入这两个标签,而无需第三方插件(如Flash)就可以实现音视频的播放功能。HTML5对音频、视频文件的支持使得浏览器摆脱了对插件的依赖,加快了页面的加载速度,扩展了互联网多媒体技术的发展空间。 


地理定位


现今移动网络备受青睐,用户对实时定位的应用越来,要求也越来越高。HTML5通过引入Geolocation的API可以通过GPS或网络信息实现用户的定位功能,定位更加准确、灵活。通过HTML5进行定位,除了可以定位自己的位置,还可以在他人对你开放信息的情况下获得他人的定位信息。 


数据存储


HTML5较之传统的数据存储有自已的存储方式,允许在客户端实现较大规模的数据存储。为了满足不同的需求,HTML5支持DOM Storage和Web SQL Database 两种存储机制。其中,DOM Storage 适用于具有key/value对的基本本地存储;而WebSQLDatabase是适用于关系型数据库的存储方式,开发者可以使用SQL语法对这些数据进行查询、插入等操作。


多线程


HTML5利用Web Worker将Web应用程序从原来的单线程业界中解放出来,通过创建一个Web Worker对象就可以实现多线程操作。JavaScript创建的Web程序处理事务都是在单线程中执行,响应时间较长,而当JavaScript过于复杂时,还有可能出现死锁的局面。HTML5新增加了一个WebWorkerAPI,用户可以创建多个在后台的线程,将耗费较长时间的处理交给后台面不影响用户界面和响应速度,这些处理不会因用户交互而运行中断。使用后台线程不能访问页面和窗口对象,但后台线程可以和贞面之间进行数据交互。子线程与子线程之间的数据交互,大致步骤如下:①先创建发送数据的子线程;②执行子线程任务,把要传递的数据发送给主线程;③在主线程接受到子线程传递回的消息时创建接收数据的子线程,然后把发送数据的子线程中返回的消息传递给接收数据的子线程;④执行接收数据子线程中的代码。



新的API


除了原先的DOM接口,HTML5增加了更多样化的应用程序接口(API):


  1. Canvas

  2. 定时媒体播放

  3. 离线

  4. 可编辑内容

  5. 拖放

  6. 历史

  7. MIME和协议进程时表头登记

  8. 微数据

  9. 网络消息

  10. 网络存储

  11. 地理位置

  12. 网页SQL数据库 ─ 本地SQL数据库(不再维护)

  13. IndexedDB

  14. 文件 ─ 处理文件上传和操纵文件

  15. 目录和文件系统

  16. 文件写入 

  17. 网络音频

  18. ClassList

  19. 网络加密

  20. WebRTC



异常处理


HTML5在设计时保证旧的浏览器能够安全地忽略掉新的HTML5代码[5]。与HTML4.01相比,HTML5给出了解析的完整规则,让不同的浏览器即使在发生语法错误时也能返回完全相同的结果。



新的标签



canvas


标签描述<canvas>标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API

多媒体

标签描述<audio>定义音频内容<video>定义视频(video 或者 movie)<source>定义多媒体资源 <video> 和 <audio><embed>定义嵌入的内容,比如插件。<track>为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

表单标签描述<datalist>定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。<keygen>规定用于表单的密钥对生成器字段。<output>定义不同类型的输出,比如脚本的输出。语义和结构


HTML5提供了新的元素来创建更好的页面结构:标签描述<article>定义页面独立的内容区域。<aside>定义页面的侧边栏内容。<bdi>允许您设置一段文本,使其脱离其父元素的文本方向设置。<command>定义命令按钮,比如单选按钮、复选框或按钮<details>用于描述文档或文档某个部分的细节<dialog>定义对话框,比如提示框<summary>标签包含 details 元素的标题<figure>规定独立的流内容(图像、图表、照片、代码等等)。<figcaption>定义 <figure> 元素的标题<footer>定义 section 或 document 的页脚。<header>定义了文档的头部区域<mark>定义带有记号的文本。<meter>定义度量衡。仅用于已知最大和最小值的度量。<nav>定义运行中的进度(进程)。<progress>定义任何类型的任务的进度。<ruby>定义 ruby 注释(中文注音或字符)。<rt>定义字符(中文注音或字符)的解释或发音。<rp>在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。<section>定义文档中的节(section、区段)。<time>定义日期或时间。<wbr>规定在文本中的何处适合添加换行符。


标签变化


注:在下面表格中4:指在HTML 4.01 中定义了该元素 5:指在HTML 5 中定义了该元素


按字母顺序排列的标签列表标签描述

定义注释45<!DOCTYPE>定义文档类型45<a>定义超链接45<abbr>定义缩写45<acronym>HTML 5 中不支持4
<address>定义地址元素45<applet>定义 applet(HTML 5 中不支持)4
<area>定义图像映射中的区域45<article>定义 article
5<aside>定义页面内容之外的内容
5<audio>定义声音内容
5<b>定义粗体文本45<base>定义页面中所有链接的基准URL45<basefont>HTML 5 中不支持,请使用CSS 代替4
<bdo>定义文本显示的方向45<big>定义大号文本(HTML 5 中不支持)4
<blockquote>定义长的引用45<body>定义 body 元素45<br>插入换行符45<button>定义按钮45<canvas>定义图形
5<caption>定义表格标题45<center>定义居中的文本(HTML 5 中不支持)4
<cite>定义引用45<code>定义计算机代码文本45<col>定义表格列的属性45<colgroup>定义表格列的分组45<command>定义命令按钮
5<datalist>定义下拉列表
5<dd>定义定义的描述45<del>定义删除文本45<details>定义元素的细节
5<dfn>定义定义项目45<dir>定义目录列表(HTML 5 中不支持)4
<div>定义文档中的一个部分45<dl>定义定义列表45<dt>定义定义的项目45<em>定义强调文本45<embed>定义外部交互内容或插件
5<fieldset>定义 fieldset45<figcaption>定义 figure 元素的标题
5<figure>定义媒介内容的分组,以及它们的标题
5<font>HTML 5 中不支持4
<footer>定义 section 或 page 的页脚
5<form>定义表单45<frame>定义子窗口(框架)(HTML 5 中不支持)4
<frameset>定义框架的集(HTML 5 中不支持)4
<h1> to <h6>定义标题1 到标题645<head>定义关于文档的信息45<header>定义 section 或 page 的页眉
5<hgroup>定义有关文档中的 section 的信息45<html>定义 html 文档45<i>定义斜体文本45<iframe>定义行内的子窗口(框架)45<img>定义图像45<input>定义输入域45<ins>定义插入文本45<keygen>定义生成密钥
5<isindex>定义单行的输入域(HTML 5 中不支持)4
<kbd>定义键盘文本45<label>定义表单控件的标注45<legend>定义 fieldset 中的标题45<li>定义列表的项目45<link>定义资源引用45<map>定义图像映射45<mark>定义有记号的文本45<menu>定义菜单列表45<meta>定义元信息45<meter>定义预定义范围内的度量
5<nav>定义导航链接
5<noframes>定义 noframe 部分(HTML 5 中不支持)4
<noscript>定义 noscript 部分45<object>定义嵌入对象45<ol>定义有序列表45<optgroup>定义选项组45<option>定义下拉列表中的选项45<output>定义输出的一些类型
5<p>定义段落45<param>为对象定义参数45<pre>定义预格式化文本45<progress>定义任何类型的任务的进度
5<q>定义短的引用45<rp>定义若浏览器不支持 ruby 元素显示的内容
5<rt>定义 ruby 注释的解释
5<ruby>定义 ruby 注释
5<s>定义加删除线的文本(HTML 5 中不支持)4
<samp>定义样本计算机代码45<script>定义脚本45<section>定义 section
5<select>定义可选列表45<small>定义小号文本45<source>定义媒介源45<span>定义文档中的 section45<strike>定义加删除线的文本(HTML 5 中不支持)4
<strong>定义强调文本45<style>定义样式定义45<sub>定义下标文本45<summary>定义 details 元素的标题
5<sup>定义上标文本45按字母顺序排列的标签列表标签描述4:指在HTML 4.01 中定义了该元素5:指在HTML 5 中定义了该元素<table>定义表格45<tbody>定义表格的主体45<td>定义表格单元45<textarea>定义 textarea45<tfoot>定义表格的脚注45<th>定义表头45<thead>定义表头45<time>定义日期/时间
5<title>定义文档的标题45<tr>定义表格行45<tt>定义打字机文本45<u>定义下划线文本(HTML 5 中不支持)4
<ul>定义无序列表45<var>定义变量45<video>定义视频
5<xmp>定义预格式文本(HTML 5 中不支持)4





你真的知道HTML5吗?的评论 (共 条)

分享到微博请遵守国家法律