什么是HTML5？HTML5的含义、元素和益处

译者 | 李睿

HTML5是超文本标识表记标帜语言(HTML)的第五版，收集阅读器利用它来可视化代码。它在网站功用、网页内容开发等方面有一些改进。

HTML的开展

在万维网的早期，次要的收集阅读器创造者（例如微软Internet Explorer和Mosaic Netscape）开发了特定于阅读器的元素，以加强其阅读器的网页外看。到上世纪90年代末，他们为Internet Explorer和Netscape创建了差别版本的网站。

1996年，新成立的万维网联盟(W3C)定见创建HTML3.2。那个原则涵盖了其时常用的HTML元素。它还包罗对HTML的表达扩展，例如在Internet Explorer和Netscape“阅读器大战”期间创建的中心元素和字体。

很快呈现了HTML 4.0(1998)和HTML 4.01(1999)，它们强调表达和构造的别离，同时加强了可拜候性。那些晋级在新创建的级联款式表(CSS)原则下转移了表达元素。

HTML5的呈现

在2000年之后不久，Mozilla、Opera和苹果公司结合起来成立了收集超文本利用手艺工做组(WHATWG)。那个实体的目标与W3C差别，其目标是加强HTML开发，使该语言可以称心来自现实创做理论和阅读器行为的新需求。WHATWG的最后文档Web Applications 1.0和Web Forms1.0被连系起来成立了HTML5。

现在，WHATWG庇护着一个正在利用的HTML原则，不利用数字停止分类。WHATWG的工做也为W3C成立本身的HTML5工做组供给了根底。HTML5在2014年10月正式获得“选举”的地位。

HTML5原则的标准由两个组织配合庇护，那偶尔会招致略微的纷歧致。大大都阅读器开发人员依靠WHATWG版本做为实现参考。

HTML 4.01 Strict是HTML5的根底，该版本没有基于表达的元素和其他不选举的属性。那招致大大都HTML5利用多年前利用的阅读器兼容元素创建。它还引进了许多新元素和全局属性，并使HTML 4.01中许多不选举利用的属性和元素过时。HTML5的一个关键特征是包罗了一个原则协议，用于处置阅读器遗留和格局错误的标识表记标帜。

展开全文

HTML5的特殊之处

在此次晋级之前，HTML次要存眷用于标识表记标帜网页可视化内容的元素。HTML5通过供给许多完成使命的新办法走在了前面。在以前的HTML版本中，那些使命需要特定的编程或专有插件，例如Silverlight或Flash。

HTML5的特征包罗标识表记标帜和脚本元素，以及用于在页面上添加视频和音频、当地数据存储、离线操做和位置数据利用等功用的利用法式编程接口(API)。HTML5处理了原则的Web开发功用，开发团队不需要为每个利用从头起头创立功能，而是能够依靠于内置的阅读器功用。

HTML5的元素

HTML5引进了许多大大都支流阅读器都撑持的新元素。下面列出的是HTML5的关键元素。

（1）article

那个新的元素用于将特定内容标识表记标帜为文章的一部门。那些内容将独立于网站上的其他内容处置，即便此中可能有堆叠。

（2）aside

该元素除了定义包罗在此中的内容之外，还定义了其他内容。它经常用于文档边栏。固然该元素在阅读器中不以特定形式闪现，但能够利用CSS来设置其款式。

该元素旨在识别与页面次要内容相关的内容，但不是其次要企图的一部门。例如，能够用它来归纳综合做者信息和“查看更多”链接。

（3）audio

该元素容许用户嵌进页面的声音内容，例如音乐或音频流。audio标识表记标帜与一个或多个source标识表记标帜一路利用，以划分音频源。阅读器将运行第一个受撑持的源。撑持的音频格局包罗MP3、OGG和WAV。假设阅读器不撑持该元素，它将展现audio和/audio标识表记标帜之间的文本。

（4）bdi

该元素的名称表达双向隔离。它的功用是隔离一个文本段，该文本段的格局可能与元素外部的文本差别。bdi有助于嵌进用户生成的内容，此中包罗具有未知标的目的格局的文本。

（5）canvas

该元素利用JavaScript绘造图形(方框、途径、渐变、文本)并向页面添加图像。在默认情状下不包罗边框和文本，标识表记标帜是通明的，仅做为绘造图形的容器。能够利用差别于元素的脚本生成那些图形。假设元素在阅读器中不受撑持或JavaScript被禁用，它将在＜canvas＞标识表记标帜中展现任何文本。

（6）data

该元素用于向内容中添加机器可读的信息。机器可读的值由数据处置器供给，而人类可读的值也提赐与web阅读器来闪现。

（7）datalist

该元素为元素供给了一个“主动完成”功用，它指定了一个预设选项的下拉列表，当数据输进时，阅读器将在输进数据时向用户展现那些选项。datalist元素的id属性必需等于input元素的list属性才气绑定它们。

（8）和 summary

该元素中包罗的内容最后是隐躲的，只要在用户期看看到它时才展现出来。它能够包罗任何内容。

为此创建了一个用户能够翻开或封闭的交互式小部件。那个小部件在默认情状下是封闭的，翻开后展开以展现此中的内容。

＜summary＞标识表记标帜定义了＜details＞小部件的可见题目，能够与之交互以查看或隐躲内容。

（9）dialog

那个元素定义了一个对话框或子窗口，使得在网页上很随便生成弹出对话框和模态窗口。

（10） embed

该元素用于嵌进第三方利用法式，那些利用法式凡是摘用视频或音频等多媒体内容的形式。它充任用户嵌进插件(如Flash动画)的容器。在HTML5中实现那个元素只需要起头标识表记标帜。应该重视到，许多现代阅读器不再撑持Java插件和applet、ActiveX控件或Shockwave Flash，从而限造了该元素的可用性。

（11）figure 和figcaption

该元素用于指定自包罗的内容，如图表、插图、代码列表和照片。其内容与支流有关；然而，它的位置不依靠于支流，假设元素被移除，页面畅通常不会遭到影响。＜figcaption＞元素容许用户为＜figure＞添加题目。

（12）footer

该元素为节或页定义页脚。它凡是包罗做者、联络体例、版权、“返回顶部”链接、网站地图、相关阅读等信息。单个文档能够包罗几个＜footer＞元素。联络人详尽信息凡是插进该元素的address标识表记标帜中。

（13）header

该元素凡是包罗与页面题目和题目相关的信息。凡是情状下，它概述了介绍信息或导航链接的容器。它也有助于可视化一个或多个题目元素（从＜h1＞到＜h6＞）、徽标、图标和做者。该元素以至能够用于包拆搜刮表单或节的目次。固然单个文档能够包罗许多header元素，但header标识表记标帜不克不及放在address、footer或其他header属性中。

（14）＜keygen＞

该元素在表单顶用于指定密钥对生成器字段。其目标是为用户供给一种平安的身份验证办法。提交表单后，将生成公钥和私钥。后者存储在当地，而前者传输到办事器，用于创建客户端证书，以便未来对用户停止身份验证。该元素也有助于创建和验证数字签名。

（15）main

该元素概述了页面的次要内容，那些内容关于特定文档来说应该是独一的。在文档中反复的内容，如导航链接、边栏、网站徽标、搜刮表单和版权数据，不该包罗在该元素中。一个文档不克不及有多个main元素，而且该元素不克不及是aside、article、header、footer或nav元素的后代。

（16）mark

该元素定义必需在段落中凸起展现或标识表记标帜的文本。

（17）meter

该元素也称为度量，用于在预定义的范畴和分数值内定义标量度量。例如，meter能够确定硬盘利用情状或查询成果相关性。

（18）nav

该元素概述了网站中凡是用于导航链接的部门，那些链接能够指向当前页面上的其他位置或其他页面。常见的＜nav＞元素包罗表、菜单和索引。

不克不及将文档中的每个链接都包罗在nav元素中；与其相反，它只适用于较大的导航链接块。具有类似功用的屏幕阅读器和阅读器能够用来晓得何时能够跳过初始内容闪现。

（19）output

该元素表达计算的输出，例如由JavaScript或其他脚本施行的计算。其属性包罗for（用于指定计算成果与计算期间利用的元素之间的关系）、form（用于指定输出元素所属的形式）和name（用于定名输出元素）。

（20）progress

该元素展现使命的进度，例如完成的工做量或下载的继续时间。它凡是与JavaScript一路利用。

（21）＜ruby＞、＜rt＞和＜rp＞

该元素用于指定ruby正文，即附加到主文本的小字体的额外文本。ruby文本的目标是批示用户理解字符的含义或发音（凡是用于日语内容）。

＜ruby＞凡是与＜rt＞和＜rp＞一路利用ruby包罗需要阐明的字符，＜rt＞包罗要给出的信息，可选的＜rp＞标识表记标帜用于定义在阅读器不撑持常规ruby正文的情状下要展现的内容。

（22）section

该元素定义了网页的特定部门，包罗页眉和页脚。它用于将页面划分为节和子节，特殊是当需要多个页眉、页脚或其他节标识表记标帜时。它对相关内容的通用块停止分组。

（23）svg

该元素为SVG图形创建一个容器。它有许多绘造框、途径、圆、图形图像和文本的办法。

（24）时间

该元素以人类可读格局展现日期和时间，还用于以机器可读格局编码日期和时间数据。它的利用包罗生日提醒、安放日历事务和进步搜刮引擎成果的量量。

（25）video

该元素用于在网页中嵌进视频内容。它应该包罗＜source＞标识表记标帜来概述差别的视频源，阅读器将播放第一个撑持的源。撑持的视频格局包罗MP4、OGG和WebM。假设阅读器不撑持此元素，它将展现video和/video标识表记标帜之间的文本。

（26）wbr

该元素的名称表达单词断开时机。它指定文本行中能够根据需要添加换行符的位置。假设利用的单词太长，而且阅读器可能会在错误的位置断开，该元素将很有用。

HTML5的益处

以上看到了HTML5中引进的元素若何简化多媒体内容的集成并加强语义价值。如今将进一步领会HTML5的益处。

（1）充分语义

语义标识表记标帜描述与特定含义相联系关系的标识表记标帜，而不是简单地创建特定的视觉输出。例如，＜h1＞标识表记标帜清晰地划分了网页的次要题目。固然能够通过利用相关的格局化标识表记标帜而不是＜h1＞标识表记标帜使题目文本加粗和变大来实现不异的输出，但语义含义不会保留。

以前版本的HTML也有语义标识表记标帜，如题目标识表记标帜、链接rel和文档元数据。然而，导航菜单、页面题目和次要内容部门等常见构造元素在语义上没有区别。相反，他们都利用了＜div＞标识表记标帜。

HTML5通过一系列新的语义元从来处理那个问题，例如＜header＞、＜main＞、＜section＞、＜nav＞、＜aside＞、＜article＞和＜footer＞。此外，新的内联语义元素（如＜address＞和＜time＞）搀扶帮助在线办事（如搜刮引擎）快速定位页面上的相关数据。现有的内联标识表记标帜（如粗体、斜体和下划线）也得到了改进，如今与特定的语义相联系关系。

（2）无插件的富媒体体验

跟着互联网速度越来越快，富媒体已经成为在线体验的核心部门。固然HTML最后做为超文本文档（可能还有一些图像）的标识表记标帜语言，但HTML5通过＜视频＞和＜音频＞等元素固有地撑持富媒体。

除了功用强大和便利开发人员之外，那个特征还有另一个益处：无插件。Java和Flash等插件的一些缺点包罗性能差、用户选项少、平安破绽和搜刮引擎可见性不敷。

此外，HTML5为用户供给了新的表单位素以及与CSS和JavaScript的超卓集成，简化了全面的富媒体Web利用法式的创建，而无需依靠插件。

（3）XML的兼容性

因为HTML5(也称为XHTML5)的XML序列化，能够利用“更严厉” 的XML语法编写代码。那关于喜好格局优良的XHTML(包罗引号括起来的属性值、小写元素名和所有元素的闭包)供给的整洁性的开发人员十分有用。在期看代码与其他XML利用法式一路工做的情状下，HTML5文档必需做为XML办事。

（4）设想和内容别离

除了鼓舞语义标识表记标帜之外，HTML5不鼓舞那些仅用于搀扶帮助阅读器可视化内容的无意义标识表记标帜(例如关于字体、文本颜色、文本对齐等的声明)。该原则已经弃用了许多撑持那种可视化的元素，而且少数受撑持的特征展现“不选举理论”警告。

别离设想和内容简化了网站的庇护和从头设想，因为CSS处置款式声明。此外，在一个平台上看起来不错的设想决策（好比桌面设备）在另一个平台（挪动设备）上也纷歧定都雅。HTML5通过供给语义场景并容许内容适应来处理那一问题。

（5）可拜候性和设想响应性

HTML早期的迭代不克不及与现代手艺浩瀚的屏幕尺寸和纵横比无缝兼容。那包罗手机、平板电脑、电子阅读器、辅助手艺（例如文本到语音转换器）、屏幕阅读器按捺款式，同时进步文本放大和比照度，盲文翻译。那些手艺被试图将款式和设想“硬编码”到页面内容中的标识表记标帜所障碍。

然而，因为语义标签和可拜候的丰富互联网利用法式(ARIA)，利用HTML5创建可拜候和响应的网站要简单得多。例如，屏幕阅读器能够更随便地阐明HTML5内容，使视障人士更随便在线阅读。

（6）利用法式编程接口

早期的HTML标准只笔录了语言中容许的元素、值和属性。那种办法适用于简单的文本网站，但对创建需要编程和脚本的基于Web的利用法式没有太大搀扶帮助。

HTML5通过定义大量简化与利用法式通信的新API实现了浩荡飞跃。它引进了先前需要插件或定造代码的功用API，包罗Web存储、挈放、天文定位和微数据。

那有助于原则化特定机造，简化本来复杂的编码使命，并容许开发者添加跨平台阅读器无缝运行的功用。

（7）耐久当地存储

做为Cookie和客户端数据库的混合体，HTML5撑持当地阅读器存储。该特征容许阅读器同时撑持跨多个窗口存储，加强平安性和性能，并确保即便在阅读器封闭后数据也能耐久。

耐久的当地存储撑持离线操做，并避免Cookie删除对阅读器操做形成倒霉影响，因为大大都现代阅读器都撑持由HTML5撑持的客户端数据存储。它还容许利用HTML5功用而不是第三方插件的利用法式顺利运行。

结语

手艺优先的企业已经在向HTML5过渡，很快，HTML5将成为跨垂曲行业的首选标识表记标帜语言。任安在线优先的企业都不克不及漠视那一原则，假设它期看连结相关性的话。利用HTML5，你能够足够操纵其前沿的用户粘性功用、用户友好性和可拜候性！

原文题目：What Is HTML5? Meaning, Elements, and Benefits，做者：Hossein Ashtari