HTML 5 也被称为 Web Applications 1.0。为了实现这个目标,增加了几个为 Web 页面提供交互体验的新元素:
details
datagrid
menu
command
这些元素都可以根据用户的操作和选择改变显示的内容,而不需要从服务器装载新页面。
details
details 元素表示在默认情况下可能不显示的详细信息。可选的 legend 元素可以提供详细信息的摘要。
details 元素的用途之一是提供脚注和尾注。例如:
The bill of a Craveri's Murrelet is about 10% thinner
than the bill of a Xantus's Murrelet.
<details>
<legend>[Sibley, 2000]</legend>
<p>Sibley, David Allen, The Sibley Guide to Birds,
(New York: Chanticleer Press, 2000) p. 247
</p>
</details>
没有指定具体的显示方式。浏览器可以选用脚注、尾注和工具提示等方式。
每个 details 元素可以有一个 open 属性。如果设置了这个属性,那么详细信息在最初就显示出来。如果没有设置这个属性,那么会隐藏它们,直到用户要求显示它们。无论是哪种情况,用户都可以通过单击一个图标或其他控件来显示或隐藏详细信息。
datagrid
datagrid 元素提供一个网格控件。可以用它显示树、列表和表格,用户和脚本可以更新这些界面元素。与之相反,传统的表格主要用来显示静态数据。
datagrid 从它的内容(一个 table、select 或其他 HTML 元素)获得初始数据。例如,代码 9 中的 datagrid 包含一张成绩表。在这个示例中,datagrid 的数据来自一个 table。更简单的一维 datagrid 可以从 select 元素获得数据。如果使用其他 HTML 元素,那么每个子元素成为网格中的一行。
<datagrid>
<table>
<tr><td>Jones</td><td>Allison</td><td>A-</td><td>B </td><td>A</td></tr>
<tr><td>Smith</td><td>Johnny</td><td>A</td><td>C </td><td>A</td></tr>
<tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>
<tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B </td><td>A</td></tr>
</table>
</datagrid>
这个元素与常规表格的区别在于,用户可以选择行、列和单元格;把行、列和单元格折叠起来;编辑单元格;删除行、列和单元格;对网格排序;以及在客户机浏览器中直接进行其他数据操作。可以用 JavaScript 代码监视更新。Document Object Model(DOM)中增加了 HTMLDataGridElement 接口以支持这个元素(代码 10 HTMLDataGridElement)。
interface HTMLDataGridElement : HTMLElement {
attribute DataGridDataProvider data;
readonly attribute DataGridSelection selection;
attribute boolean multiple;
attribute boolean disabled;
void updateEverything();
void updateRowsChanged(in RowSpecification row, in unsigned long count);
void updateRowsInserted(in RowSpecification row, in unsigned long count);
void updateRowsRemoved(in RowSpecification row, in unsigned long count);
void updateRowChanged(in RowSpecification row);
void updateColumnChanged(in unsigned long column);
void updateCellChanged(in RowSpecification row, in unsigned long column);
};
还可以使用 DOM 在网格中动态地装载数据。也就是说,datagrid 可以不包含那些提供初始数据的子元素。可以用一个 DataGridDataProvider 对象设置它(代码 11 DataGridDataProvider)。这样就可以从数据库、XmlHttpRequest 或者 JavaScript 代码能够访问的任何资源装载数据。
interface DataGridDataProvider {
void initialize(in HTMLDataGridElement datagrid);
unsigned long getRowCount(in RowSpecification row);
unsigned long getChildAtPosition(in RowSpecification parentRow,
in unsigned long position);
unsigned long getColumnCount();
DOMString getCaptionText(in unsigned long column);
void getCaptionClasses(in unsigned long column, in DOMTokenList classes);
DOMString getRowImage(in RowSpecification row);
HTMLMenuElement getRowMenu(in RowSpecification row);
void getRowClasses(in RowSpecification row, in DOMTokenList classes);
DOMString getCellData(in RowSpecification row, in unsigned long column);
void getCellClasses(in RowSpecification row, in unsigned long column,
in DOMTokenList classes);
void toggleColumnSortState(in unsigned long column);
void setCellCheckedState(in RowSpecification row, in unsigned long column,
in long state);void cycleCell(in RowSpecification row, in unsigned long column);
void editCell(in RowSpecification row, in unsigned long column, in DOMString data);
};
menu 和 command
menu 元素实际上在 HTML 2 中就出现了。在 HTML 4 中废弃了它,但是 HTML 5 又恢复了它并指定了新的意义。在 HTML 5 中,menu 包含 command 元素,每个 command 元素引发一个操作。例如,代码 12 HTML 5 菜单 是一个弹出警告框的菜单。
<menu>
<commandlabel="Do 1st Command"/>
<command label="Do 2nd Command"/>
<commandlabel="Do 3rd Command"/>
</menu>
还可以用 checked="checked" 属性将命令转换为复选框。通过指定 radiogroup 属性,可以将复选框转换为单选按钮,这个属性的值是互相排斥的按钮的组名。
除了简单的命令列表之外,还可以使用 menu 元素创建工具栏或弹出式上下文菜单,这需要将 type 属性设置为 toolbar 或 popup。例如,代码 13. HTML 5 工具栏 显示一个与 WordPress 等 blog 编辑器相似的工具栏。它使用 icon 属性链接到按钮的图片。
<menu type="toolbar">
<commandlabel="strong" icon="bold.gif"/>
<command onclick="insertTag(buttons, 1);"label="em" icon="italic.gif"/>
<command onclick="insertLink(buttons, 2);" label="link" icon="link.gif"/>
<commandlabel="b-quote" icon="blockquote.gif"/>
<command onclick="insertTag(buttons, 4);"label="del" icon="del.gif"/>
<command onclick="insertTag(buttons, 5);"label="ins" icon="insert.gif"/>
<command label="img" icon="image.gif"/>
<commandlabel="ul" icon="bullet.gif"/>
<commandlabel="ol" icon="number.gif"/>
<commandlabel="li" icon="item.gif"/>
<command label="code" icon="code.gif"/>
<command onclick="insertTag(buttons, 11);" label="cite" icon="cite.gif"/>
<command label="abbr" icon="abbr.gif"/>
<command label="acronym" icon="acronym.gif"/>
</menu>
label 属性提供菜单的标题。例如,代码14. HTML 5 Edit 菜单 显示一个 Edit 菜单。
<menu type="popup" label="edit">
<command label="Undo"/>
<command label="Redo"/>
<commandlabel="Cut"/>
<command onclick="copy()" label="Copy"/>
<command onclick="paste()"label="Paste"/>
<command label="Clear"/>
</menu>
菜单可以嵌套在其他菜单中,形成层次化的菜单结构。
TML 5 是最新的超文本标记语言 (HTML),它是用于描述网页内容和外观的标准编程语言。如今,所有主要浏览器(Chrome、Safari、Firefox、Opera 和 IE)都提供 HTML5 支持,这使其成为当今使用的最新 HTML 技术。
下面列出了 HTML5 的一些惊人优势:
1. 跨浏览器兼容性
HTML5 易于实现,并且可以与 CSS3 一起使用。今天所有的浏览器都支持 HTML5 标签,甚至 IE6 也能理解标记 <!doctype html> 并且会正确地呈现页面。
2. 新的 DOCTYPE 声明:
关于 HTML 5 最重要的事实是 - HTML5 易于实现并且可以与 CSS3 一起使用
HTML5 的 DOCTYPE 声明非常简单:
<! DOCTYPE html>
是的,只有“DOCTYPE”和“html”这两个词,不再有长行充满脏标签的不可读代码。
3. 带来可用性和用户体验的改进
可用性和用户体验与网站或应用程序的设计程度有关。我们都想要更好的动态网站和美观的应用程序与用户交互并允许用户享受功能、内容等,而不仅仅是看它。HTML5 对 Web 具有多项技术增强和改进功能,并且使用 HTML5 代码,Web 开发人员可以轻松设计更好的应用程序和动态网站,从而带来更好的用户体验和可用性。
4. 替代 Flash 和 Silver light
HTML5超越Flash和Silver light而领先只是因为播放Flash文件和Silver light需要安装Adobe Flash最新版本或Silver light插件,还需要注意设备和操作系统的兼容性. HTML 5 并非如此。因此,HTML5 如今在公司中变得越来越流行,因为它提供了大量的属性和功能,可帮助 Web 开发人员以最少的工作量构建漂亮的网站和应用程序。
5. 大量用于移动应用和游戏
HTML5 在移动应用程序和游戏开发中的适应性随着 HTML5 Web 应用程序工具在从用户界面 (UI)、开发、使用脚本等开始的所有情况下为 Web 开发人员提供了更大的灵活性而增加。
HTML5 还能够处理多媒体内容,而无需安装插件,我们可以使用该技术轻松开发交互式游戏。
6. 干净的标记和改进的代码
HTML5 带有简洁的标记和简洁的代码,使其比以前的版本更易于访问。HTML 5 允许 Web 开发人员和 Web 设计人员使用更简洁的代码并删除 div 标签并将所有 div 标签替换为新的 HTML 5 元素。
7. 离线浏览
HTML5 还提供离线浏览功能,这意味着访问者可以在没有有效互联网连接的情况下加载网页上的某些元素。假设你访问了该站点,但不知何故你现在没有连接到互联网,或者互联网连接发生故障。使用 HTML5 离线缓存,我们仍然可以加载网站的核心元素,你可以离线查看它们。
8. HTML5 在网站抓取和索引方面对 SEO 友好:
如今,为了在包括谷歌在内的不同搜索引擎中获得并保持最高排名,必须小心优化网站和所有必要的 SEO 模块。HTML 5 带有各种属性和模块,使网络爬虫可以轻松搜索你的内容并使其正确编入索引,从而提高其在搜索引擎搜索结果页面中的排名。HTML5 的技术提供了具有广泛结构元素、语义、表单类型、新属性和媒体元素的各种功能,使数字营销专家和开发人员更容易专注于更好的搜索引擎优化技术并推动更多的自然搜索流量。
9. 视频和音频支持
借助 HTML5 技术,我们不再需要依赖第三方插件来渲染音频和视频。你可以忘记 Flash Player 和其他第三方媒体播放器和插件。你可以使用新的 HTML5 <video> 和 <audio> 标签轻松访问你的视频和音频。
以前你必须使用旧的 <embed> 和 <object> 标签并分配大量参数,以显示视频可见并正常工作。但是使用 HTML5 的视频和音频标签,我们可以将它们视为图像; <video src=”url”/>。
我们只需要像任何其他 HTML 元素一样在单行标签中定义高度、宽度和自动播放等参数:<video src=”url” width=”800px” height=”500px”autoplay/>。
10. 地理位置支持
在地理定位的帮助下,我们可以轻松地找出我们在世界上的位置,并轻松地与人们分享这些信息。过去,如果我们想首先检测客户端设备的位置,我们必须查看客户端 IP 地址、你的无线网络连接、手机的基站和纬度和经度。但是对于 HTML5,已经开发了一组 API,它们可以有效地允许客户端设备(即你的手机、IP 甚至你的桌面浏览器)使用你的 HTML5 兼容浏览器直接可用的 JavaScript 检索地理定位信息。
HTML5 改进并增强了浏览体验。那么为什么不为你的网站和移动应用程序采用 HTML 5 呢?
了解更多
5,既HTML 5技术,是一项网页互动效果制作的技术集合。过去一年里,H5小游戏和各类“卡片式”营销席卷了我们的微信朋友圈。以一款游戏的爆发为契机,人们见识到了其技术的巨大魅力和潜力。各类创新、创业公司纷纷投身H5蓝海,欲再创奇迹。
3月29日下午,创业家“创客论沙龙”以“H5生态重建冷思考”为主题,邀请到腾讯、搜狐快站、云适配、白鹭游戏、火速轻、创新工场各位商业大佬进行分享,并与在场的相关从业者与兴趣爱好者共同探讨H5生态的现状与未来。
过去一年里,H5小游戏和各类“卡片式”营销席卷了我们的微信朋友圈。以《围住神经猫》游戏的爆发为契机,人们见识到了HTML5技术的巨大魅力和潜力。各类创新、创业公司一夜间纷纷投身H5蓝海,乘风破浪,欲再创奇迹。
殊不知,HTML5作为一项网页互动效果制作的技术集合,已经历超过10年的发展历程。从2004年HTML5的提出与开发,到2014年10月29日,W3C正式宣布H5标准规范最终制定完成;在大众视角之外,互联网巨头和创业型公司都在努力用实践探索H5发展之路。国际环境下,H5发展经过高峰期和低谷期,正步入缓慢发展阶段。国内领域,H5技术受到热烈关注,却也存在不少问题,H5生态的构建方兴未艾。
3月29日下午,创业家“创客论沙龙”以“H5生态重建冷思考”为主题,邀请到腾讯X5浏览服务产品负责人杨三金、搜狐快站产品负责人翁晓奇、云适配创始人兼CEO陈本峰、白鹭游戏引擎联合创始人张翔、火速轻应用创始人兼CEO赵九州、创新工场投资总监姜证严等嘉宾进行分享,并与在场的H5相关从业者与兴趣爱好者共同探讨H5生态的现状与未来。
PC时代,浏览器是获取用户获取信息的唯一入口。20年前,网景开启浏览器时代。如今,移动互联网时代,WEB信息浏览发生变化,浏览器在APP生态中权重降低。用户获取信息不断碎片化到各个APP中,同时利用社交网络传播信息更快更广。
然而,移动时代,WEB场景不减反增,淘宝、微信、QQ等应用体系,都是基于H5技术的Web来承载的。移动端的未来不再是狭义的“浏览器”时代,而是“大浏览时代”。移动浏览的大量需求使得WEB生态发展更加迅猛,很多及时通讯和信息传播都是WEB承载的,不过呈现出来的是APP外壳而已。
然而手机APP中的浏览技术能力却支撑不足,存在适配成本高、不安全、不稳定、耗流量、速度慢等一系列问题。QQ浏览器的X5内核致力于探索解决WEB技术和体验上的困局。X5目前已广泛应用于微信、手机QQ、QQ空间和QQ浏览器等腾讯四款用户量最大的产品中,每天接受超过60亿次PV考验。第三方APP只需接入60K的SDK即可实现X5内核的引擎共享。
针对H5行业普遍关注的闭环变现问题,杨三金的思考思路是:用户产生-用户运营-获取盈利。他认为H5的用户产生渠道远大于原生应用,跨平台及易传播性可以快速获取用户。至于H5应用普遍存在的用户留存问题,他认为基于更好的用户体验和强运营,经过推广发力,可以精准用户实现留存和盈利。
随着移动终端爆发式普及、消耗碎片时间成为常态,移动时代全面来临,用户指数超5亿(2013年数据)。移动发展史经历了门户WAP大潮、SIS大潮、APP大潮和公众大潮后,即将迎来HTML5大潮。在硬件成熟促成H5体验提升、端能力提高将“端+云”成为主流的情况下,未来H5领域会出现系统级入口。
后移动时代,全入口、多载体、跨平台为移动发展现状,H5+App+多种入口成为主流玩法。从产业格局上讲,内容、技术、渠道、设备应各司其职,促进用户更好实现H5生态体验。
搜狐快站,目前作为内容技术供应商,通过在线可视化页面编辑器简单生成自己移动端站点。试图解决转码流、微信流和定制流无法完成的“最后一公里”难题:三分钟建站,一键生成独立APP,并支持安卓和苹果系统。通过多渠道分发、移动营销和其他功能实现一站式解决方案。与各行业商家深入合作,并与微信公众号打通、与百度直达号深度合作等,达到“一处建站,全网营销”。
作为HTML5标准制定的参与者及W3C中国区HTML5布道官,陈本峰将原生APP比作飞机,而H5应用比作汽车。他认为目前的情况下,原生APP开发时间长、成本高,但速度快、界面操作流畅、省流量。而H5应用则有跨平台、易开发、可搜索、无需下载升级等优点。两种产品形态各有利弊,无法彻底替代。
他认为,以少量高频的原生APP带动海量低频的H5应用将是未来一段时间移动生态的发展情况。以应用商店为分发渠道App客户端为主要应用形式的现状,未来会发生变化,基于浏览内核的超级App会成为分发平台,H5 WEB APP会成为主要应用形态。
为了充分利用H5跨平台的优势,云适配致力于实现“一次开发、多处运行”,打造H5跨屏应用。即任何终端设备上,用户始终可通过同一个网址访问该应用,并获得一致的内容及最适合当前设备或平台的使用体验。同时,Amaze UI可帮助企业自主开发跨屏应用。
目前国内H5市场,游戏行业算是发展比较快、产业链比较健全的领域。也是众多创业者积极投身尝试的领域,被期待最早实现闭环变现。H5游戏有着用户进入门槛低、方便营销、易开发、及时更新等特点。H5游戏打破了渠道为王的格局,或许将爆发出巨大价值。
以《围住神经猫》游戏声名鹊起的白鹭游戏引擎,却希望大家对H5游戏的理解不要停留于此。他们相信H5技术将可以实现更重的、炫酷的、甚至3D大型游戏。现在白鹭引擎已经支持3D。作为游戏引擎平台,白鹭希望H5游戏行业要保持正面积极的态度,也要客观冷静看待市场。相信市场潜力长远,积极投入、不断尝试,共建生态会解决留存率和付费率的问题。白鹭引擎下一步计划海外布局。
智能机人口红利消退下的互联网技术趋势,解决单一领域需求的低频次个体应用会逐渐融入大平台。火速轻应用通过深度研究移动端用户习惯,发现产品去本地化、内容去中心化、场景去搜索化成为移动互联网新的需求。HTML 5技术将不仅局限于应用层的创新、而将实现重构信息传播形态。
H5在重新定义APP、Minisite和游戏的概念,在产品力、传播力和表现力上体现突出特点。同时H5也面临一系列问题。比如,商业化进程过早过热:在H5环境尚未成熟时,进行拔苗助长式的商业变现不利于用户体验和提供更好内容。
作为H5领域渠道平台的研究者,赵九州提出了关于H5行业的几项独特见解:
1.H5不是一个技术驱动型产业:内容和运营驱动有利于用户习惯从APP切换到H5的时间培养;
2.O2O可能不是H5的最佳赛道:H5先要变革获取信息的方式,其次才是改变用户生活方式;
3.H5不应只有商业化内容:行业需要一起做生态,别急着赚快钱;
4.云来模式可能只是个过渡形态;
5.H5游戏爆发的关键点——社交:依附于大渠道强推、做手游换皮是不可能出现爆款的;
6.鼓吹H5颠覆APP为时尚早:创新与颠覆总是从边缘再到核心,H5与APP将长期处于共生互补状态。
7.H5可能不是个产业:和LBS、博客一样,会成为整个互联网的基础建设。
火速轻应用作为移动互联网第一款H5内容分发平台,专注于Web App与H5游戏的聚合分发。致力于成为下一代手机娱乐中心,成为微信以外第二个超级App。
作为投过H5领域两家公司——磊友科技与火速网络的创新工场,从资本方的角度为大家现场剖析了H5行业的创业前景。
H5产业链可以简单分为3部分:渠道、工具、产品。资本市场对于新技术崛起的领域,会考虑一定的风险性,VC们早期倾向布局工具和渠道。然而,等行业发展一定阶段,基础工作完成后,投资点应该发生在产品领域。这是真正好的创业机会。之前的渠道与工具,在做一个基础的工作。整个行业的爆发需要杀手级的应用,引领产业发展。
姜证严建议,当下H5领域创业者,可以将更多关注重点放在H5的产品和技术。他相信如果这个时间点,在产品层面有非常好的想法,更容易获得资本的认可。
等好产品出来,提炼、抽取,也可以转到后端做引擎或重新考虑做渠道,这样创业的成功流程会更高。他提醒大家,当下的时间点,在渠道与工具领域创业要慎重,除非有特别好的点实现。
可以预测,当下及未来一段时间,H5会一直成为创新创业的热点,在生态重建和产业链不断完善的过程中,也会有更好的发展和更广泛的应用。
本次创客论沙龙的各位重量级嘉宾从技术、行业、内容、资本等方面进行了专业且实用的分享。多角度为现场的H5领域从业者及兴趣爱好者解读H5的现状与发展。希望有志于在H5领域有所作为的创业者能够获得更多启发,理性看待H5行业发展,并努力共建H5良性生态。
*请认真填写需求信息,我们会在24小时内与您取得联系。