……－Ｓ０删＾ＲＥ ＤＥＶＥＬＯＰ啊ＥＮＴ＆ＡＰＰＬＩＣ＾ＴＩＯＮ…………………………………………………… ……………… 试析ＨＴＭＬ５技术 查卫亮 （江苏省惠山中等专业学校电信工程系，江苏无锡２１４１５３） 摘要：从ＨＴＭＬ５的发展历史、组成、新特征、高级功能４个方面阐述了ＨＴＭＬ５技术。对ＨＴＭＬ５中的文档标准、 布局标签、表单标签、音视频等技术作了详细的介绍，对ＨＴＭＬ５中的本地存储、离线存储、地理定位的高级功能 作了简要的说明，通过介绍以达到对ＨＴＭＬ５技术普及的目的。 关键词：ＨＭＴＬ５技术；标签；浏览器 １ 引言 首先引用一下网上比较热门的一段话：作为一位前端工 作者，如果想在这场Ｗｅｂ技术中立于不败之地，建议从 现在开始学习与使用ＨＴＭＬ５。ＨＭＴＬ５有两个使命： （１）弥 补上一代ＨＴＭＬ的不足；（２）实现富Ｗｅｂ应用的本地化，使 浏览器逃离Ｆｌａｓｈ和Ｓｉｌｖｅｒｌｉｇｈｔ等富客户端插件的羁绊。ＨＴＭＬ５ 也必定将成为新一代的Ｗｅｂ技术标准。 ２ ＨＴＭＬ５发展历史 谈到ＨＭＴＬ５很容易让人想到ＨＴＭＬ４，它们两间之间到 底有什么样的关系呢，首先来了解一下ＨＴＭＬ５的发展历史。 １９９３年ＩＥＴＦ发布ＨＴＭＬ１．０草案：１９９５年又推出了 ＨＴＭＬ２．０，但很快于又宣布该版本过时；１９９６年由Ｗ３Ｃ推荐 推出ＨＴＭＬ３．２，此时的ＨＴＭＬ进入标准化时代，缺点是版本 体系庞大；１９９７年Ｗ３Ｃ对ＨＴＭＬ作了瘦身，使得ＨＴＭＬ标准 更加精简也更加实用，此时推出了ＨＴＭＬ４．０：１９９９年由Ｗ３Ｃ 推荐再次对ＨＴＭＬ４．０作了微小的改进推出了ＨＴＭＬ４．ｏｌ版． 这个版本自从发布一直延用至今，直至ＨＴＭＬ５发布，这个版 本也是目前最常用的版本。 ２０００年由Ｗ３Ｃ又发布了ＸＨＴＭＬ１．０版。Ｗ３Ｃ要求浏览 器厂商必须严格按照ＸＨＭＬ的标准执行，如果不符合要求， 网页就不能正常显示，尽管Ｗ３Ｃ的本意是好的，但浏览器厂 商并不这样认为，因为这样会导致数以干计的网站不能正常 访问，所以２００４年由浏览器厂商成立一个新的组织 ＷＨＡＴＷＧ，这个组织在ＨＴＭＬ４．０１的基础上发了一个ＨＴＭＬ５ 的草案，后来Ｗ３Ｃ也意识到它自己制订的标准没人用，为此 于２００８年再次与ＷＨＡＴＷＧ合作开始推出ＨＴＭＬ５的正式版， 此时的ＨＴＭＬ５继承了ＸＨＴＭＬ一些好的构思与概念。到目前 为至ＨＭＴＬ５已被许多浏览器所支持。 ３ ＨＴＭＬ５组成 到底什么是ＨＴＭＬ５，ＨＴＭＬ５包括哪些内容，下面的表 达式能简要说明。 ｜Ｈ￣ＭＥ５ ＨＴＭＬ Ｓ３￣ＪａｖａＳＣｔｉｐｔ￣ＡＰｔ ≯｜ （１）ＨＴＭＬ：表示在原来的ＨＴＭＬ４．Ｏ１的基础上对标签进 行改进，使得页面的布局更加清晰，对于音频与视频的实现 也更加容易。 （２）ＣＳＳ３：它是ＣＳＳ２的升级版本，它为页面的效果提 供更好的支持，例如：圆角的矩形、阴影效果、背景的控制、 ２Ｄ、３Ｄ的效果等。 （３）ＪａｖａＳｃｆｉｐｔ：通过它来调用ＡＰＩ。 （４）ＡＰＩ：它是编程的接口。 所以从这里也可以看出学习ＨＴＭＬ５最好要有ＨＴＭＬ４．０１、 ＣＳＳ２．０、ＪａｖａＳｃｉｒｐｔ的基础。 ４ ＨＴＭＬ５新特征 ４．１标准的改变 ＨＴＭＬ５的ＤＴＤ声明中不需要使用ＤＴＤ文件。从下面的 两张图可清楚地看出标准的改变。如图１、图２所示。 图１ ＨＴＭＬ４．０１的网页声明 图２ ＨＴＭＬ５的网页声明 ４．２标签的改变 ４．２．１删除部分标签 （１）纯表现的元素标签：ｂａｓｅｆｏｎｔ、ｂ 、ｃｅｎｔｅｒ、ｆｏｎｔ、ｓ、 ｓｔｉｒｋｅ、ｔｔ、ｕ。 （２）可能对页面产生负面影响的标签：ｆｒａｍｅ、ｆｒａｍｅｓｅｔ、 ｎｏｆｒａｍｅｓ。 （３）可能产生混淆的标签：ａｃｒｏｎｙｍ、ａｐｐｌｅｔ、ｉｓｉｎｄｅｘ、 ｄｉｒ。 ４．２．２重定义部分标签 （１）＜ｂ＞代表内联文本，通常是粗体，没有传递表示重要 的意思。 （２）＜ｉ＞代表内联文本，通常是斜体，没有传递表示重要 的意思 （３）＜ｄｄ＞可以同ｄｅｔａｉｌｓ与ｆｉｇｕｒｅ一同使用，定义包含文 本，ｄｉａｌｏｇ也可用。 （４）＜ｄｔ＞可以同ｄｅｔａｉｌｓ与ｆｉｇｕｒｅ一同使用，汇总细节，ｄｉ＿ 作者简介：查卫亮（１９７５一），女，高级讲师，硕士，研究方 向：软件工程。 收稿日期：２０１６—０９—０７ ………………………………………… …………… 实用第一 智慧密集 ａｌｏｇ也可用 在几乎每一个网站都有音视频，所以浏览器应该原生支持音 视频，因此在ＨＴＭＬ５中音频与视频跟文本与图片一样也成为 了Ｗｅｂ中的一等公民。 ＨＴＭＬ５中使用＜ｖｉｄｅｏ＞标记定义一个视频，使用＜ａｕｄｉｏ＞ （５）＜ｈｒ＞表示主题结束，而不是水平线，虽然显示相同。 （６）＜ｍｅｎｕ＞重新定义用户界面的菜单，配合ｃｏｍｍｏｎｄ或 者ｍｅｎｕｉｔｅｍ使用。 （７）＜ｓｍａｌｌ＞表示小字体，例如打印注释或者法律条款。 （８）＜ｓｔｒｏｎｇ＞表示重要性而不是强调符号。 ４．２．３新增结构标签 标记定义一个音频，使用Ｊｓ代码调用ＡＰＩ函数就可以方便地 控制音频与视频。 ４．５ 画布标签ｃａｎｖａｓ （１）＜ａｒｔｉｃｌｅ＞定义一篇文章。 （２）＜ｈｅａｄｅｒ＞定义一个页面或一个区域的头部。 ＨＴＭＬ５提供了ｃａｎｖａｓ的画布标签．通过Ｊｓ调用ＡＰＩ函数 可以在画布上绘制各样基本图形。再由基本图形组合成各种 （３）＜ｎａｖ＞定义导航链接。 （４）＜ｓｅｃｔｉｏｎ＞定义一个区域。 （５）＜ａｓｉｄｅ＞定义页面内容部分的侧边栏。 （６）＜ｈｇｒｏｕｐ＞定义文件中一个区块的相关信息。 （７）＜ｆｉｇｕｒｅ＞定义一组媒体内容以及它们的标题。 （８）＜ｆｉｇｃａｐｔｉｏｎ＞定义ｆｉｇｕｒｅ元素的标题。 （９）＜ｆｏｏｔｅｒ＞定义一个页面或一个区域的底部。 （１０）＜ｄｉｌａｏｇ＞定义一个对话框ｆ△话框）。 新增的结构标签也是块状元素，它相当于有意义的ｄｉｖ。 新的结构标签带来的是网页布局的改进并提升了搜索引擎对 它的友好支持。 ４．３智能表单 在ＨＴＭＬ４．Ｏｌ中，ｆｒｏｍ和其中的表单元素标签必须嵌套使 用，ＨＴＭＬ５中为了方便排版，可以使ｆｒｏｍ中的表单元素标签 脱离ｆｒｏｍ的嵌套，方法是将ｆｒｏｍ指定ｉｄ．所有此表单元素标 签均添加ｆｒｏｍ等于ｉｄ的属性。 在ＨＴＭＬ５中ｉｎｐｕｔ标签的ｔｙｐｅ属性增加了新的属性值， 通过设置不同的属性值可方便地对用户输入的数据进行校检。 （１）Ｔｙｐｅ＝“ｅｍａｉｌ”用户必须输入Ｅｍａｉｌ类型。 （２）Ｔｙｐｅ＝“ｕｒｌ”用户必须输入ＵＲＬ类型。 （３）Ｔｙｐｅ＝“ｄａｔｅ”用户必须输入日期时间类型。 （４）Ｔｙｐｅ＝“ｎｕｍｂｅｒ”用户必须输入数字类型。 （５）Ｔｙｐｅ＝“ｒａｎｇｅ”产生一个滑动条表单。 （６）Ｔｙｐｅ＝“ｓｅａｒｃｈ”产生一个搜索意义的表单。 （７）Ｔｙｐｅ＝“ｃｏ］ｏｒ”产生颜色选择的表单。 另外，还可以通过新增的表单属性，也可以起到校检、 提示、非空约束的作用。 （１）ｒｅｑｕｉｒｅｄ：拥有该属性表示其内容不能为空，必填。 （２）ｐｌａｃｅｈｏｌｄｅｒ：用于设置表单的提示文本信息。 （３）ａｕｔｏｆｏｃｕｓ：自动聚焦。 （４）ｐａ￣ｅｍ：设置正则表达式。 ４．４ ＨＴＭＬ５音视频标签 早期在网页中使用＜ｅｍｂｅｄ＞＋＜ｏｂｉｅｃｔ＞的方法来插入音频与 视频，但并非所有浏览器都支持，为此就需要通过安装插件 的方法来解决。问题是不同厂商有不同的标准，网站编码和 格式也都不相同，还有Ｆｌａｓｈ的出现解决了面临的问题，但是 Ａｐｐｌｅ在０７年决定任何设备将不再支持Ｆｌａｓｈ。ＨＴＭＬ５认为现 ２０＂１６．２４码习．．－．．，ｌｌ ｌｌｍＬ一曩＿聃覆哥—＋ 复杂图形，与Ｆｌａｓｈ画图相比它的最大好处是生成的文件空间 小，特别适用于移动设备，目前网上也有许多基于ｃａｎｖａｓ的 项目。 ５高级功能 ５．１ ＨＴＭＬ５本地存储 在ＨＴＭＬ５中，本地存储是一个Ｗｉｎｄｏｗｓ的属性，包括 ｌｏｃａｌＳｔｏｒａｇｅ和ｓｅｓｓｉｏｎＳｔｏｒａｇｅ，从名字应该可以很清楚地辨认 二者的区别，前者是一直存在本地的。后者只是伴随着ｓｅｓ． ｓｉｏｎ，窗口一旦关闭就没了。二者用法完全相同。 以前知道ＳＱＬ数据库是属于服务器端的东西，ＨＴＭＬ５中 为客户端也提供了Ｗｅｂ ＳＱＬ Ｄａｔａｂａｓｅ数据库的本地化存储， 它较前面的Ｌｏｃａｌ Ｓｔｏｒａｇｅ本地存储在查询数据时更加方便。事 实上Ｗｅｂ ＳＱＬ数据库ＡＰＩ实际上不是ＨＴＭＬ５规范的组成部 分，而是单独的规范。它通过一套ＡＰＩ来操纵客户端的数据 库。Ｓａｆａｒｉ、Ｃｈｒｏｍｅ、Ｆｉｒｅｆｏｘ、Ｏｐｅｒａ等主流浏览器都已经支持 Ｗｅｂ ＳＱＬ Ｄａｔａｂａｓｅ。 ５．２离线应用存储 Ｗｅｂ２．０技术积极地鼓励个人参与．并认为每个人都是 Ｗｅｂ内容的编写者。如果Ｗｅｂ应用能够支持离线的功能，让 客户在没有网络的地方（飞机上）和特殊情况（网络中断）， 也能进行内容编写，等到有网络正常的时候，再上传至Ｗｅｂ 上，就大大方便了用户的操作。ＨＴＭＬ５作为新一代的ＨＴＭＬ 标准，包含了对离线功能的支持。 ５．３地理定位 目前很多软件中都提供了定位的功能，ＨＭＴＬ５中主要提 供了Ｇｅｏｌｏｃａｔｉｏｎ和ｗａｔｃｈＰｏｓｉｔｉｏｎ对象来完成地理定位的功能。 通过以上几个方面的介绍相信读者对ＨＴＭＬ５的功能有了 初步的了解。除了上面列举的ＨＴＭＬ５特性外。ＨＴＭＬ５还有很 多其他重要的特性如Ｄｒａｇ＆Ｄｒｏｐ、ＷｅｂＧＬ、Ｗｅｂ Ｓｏｃｋｅｔ等，在 此不再一一描述，未来ＨＴＭＬ５在移动终端的发展将让大家更 加期待。
