服务热线:
13215994088
您当前的位置:网站首页 > 资讯中心
资讯中心更多 >

风口上的HTML5,今年的发展方向会有哪些?

 2014年下半年,微信捧火了HTML5小游戏,自此国内各行各业开始对HTML5保持持续高涨的关注。2015年是国内HTML5行业迅速发展的一年,在媒体大肆渲染“互联网寒冬”之际,HTML5作品的生产数量和传播广度却居高不下,为寒冬增添一把热火。   如图,根据百度指数对关键词“HTML5”搜索趋势结果,2015年“HTML5”的指数约是2014年的1.5倍;而HTML5的简单说法“H5”在2015年的检索量是前一年的2倍多,直逼“HTML5”。   2015年,国内HTML5的传播仍以移动端为主,但简单的翻页这种低层次的设计已经不再适应大部分受众的需求,HTML5平台也开始由简单的工具应用逐步转型。其中,发展得比较快的是面向商企用户的iH5,自主研发引擎,并于2015年年底添加即时通讯功能和线上交易机制。   为什么是HTML5?   Web应用开发新标准   HTML5,第五版超文本标记语言,于2014年10月由万维网联盟(W3C)发布为正式推荐标准。它是HTML自1991年问世以来,最具变革价值的技术规范,历经多年修订与完善才制定完成。   过去,Web开发面临两种困境:   (1)不少人质疑Flash的安全性等问题,却找不到替代它的合适插件;   (2)工程师们抱怨PC端和移动端应用的多次开发,仍旧得为微软、苹果、安卓等系统设计不同方案。   而HTML5提供了良好的解决方案。与JavaScript、CSS等紧密结合后,HTML5能使浏览器不需要类似Flash的插件也能实现桌面应用的交互效果,它的跨平台可用性更令应用的一次开发成为可能。   如上图,Youtube使用HTML5的video元素进行标记后,网页不需要第三方插件就能播放音视频等。因此,HTML5的兴起具有非常深远的意义,它已经从简单的标记语言化身为Web应用开发的先驱。   HTML5应用现状   从硬件角度来看,国内手机和平板两种移动设备应用最广,PC端次之,紧接着是电视和游戏设备。   从软件角度来看,桌面浏览器对HTML5的支持高于移动浏览器,最高可达95%;而从整体上而言,移动浏览器对HTML5的支持却优于桌面浏览器。   HTML5具有较好的浏览器向后兼容性,开发者能对浏览器不支持的情形设计各种各样的回退方案。因此,HTML5页面的实际显示性能与开发者、制作平台密切相关。   2015年,越来越多公司在HTML5品牌推广上进行布局。6至7月份起,鸡汤、自媒体等个人作品呈下降趋势,商企用户作品则保持高速增长。在商业需求的驱动下,HTML5页面设计的目的性更强,获得最好传播效果的基本是经过一定时间策划,在团队操作下有针对性地进行投放的企业案例。   相对应地,原有HTML5平台也进行了大面积升级。从平台性质而言,HTML5平台可分为轻营销模板类、功能引擎类和基础工具类三种,分别以易企秀、白鹭引擎和iH5为代表。   三类HTML5平台的特点如下——   (1)轻营销模板类:提供类似PPT页面切换的HTML5制作工具,通常面向C端(个人)用户,部分为B端(企业)用户。该类平台的数量较大,只适用于轻度营销,所能提供的页面动态效果局限于翻页。   (2)功能引擎类:提供HTML5网页的开发引擎,通常面向B端用户。该类平台主要提供基于Canvas(画布)的游戏引擎,适用于轻游戏的开发,依赖于开发者。   (3)基础工具类:提供用于页面交互的HTML5可视化编辑工具,主要面向B端用户,部分为C端用户。该类平台只有iH5,采用自主研发的闭源引擎,应用领域广泛,涵盖轻度营销、重度营销、媒体电商内容应用、视频、动画、游戏等方面。   与浏览器多采用谷歌开源引擎的状况相近,国内HTML5平台基本使用国内外开源框架或引擎。但和浏览器面向网页内容显示,只需提供高性能的技术支持不同,HTML5平台面向的是HTML5制作或开发,需要对网页质量负责。因此,使用开源框架或引擎意味着这些HTML5平台进一步拓展业务会比较被动,容易面临同质化的困境。   三类HTML5平台的对比   因为整体上移动端浏览器对HTML5的支持优于PC端,2015年HTML5平台主要面向移动端网页的制作和开发。   如上表,三种HTML5平台以PC网站、APP和软件三种形式提供制作或开发工具,成品为网页或HTML5源码。由表可见:   (1)轻营销模板类HTML5平台只能做轻度营销,能实现翻页等简单动效,分为场景展示、电子出版和动画制作三种。如下图为易企秀桌面编辑界面,该类平台最大的共同点在于工具结构以页面为基础,与软件PowerPoint架构相近,能通过增减页面、使用功能组件和点击快捷菜单来调整内容。   (2)功能引擎类HTML5平台的用户专指性很强,主要是有开发经验的技术人员。下图为Egret Wing软件设计师视图下的基本架构,使用HTML5引擎把基础代码流程化,再借助第三方集成开发环境Adobe Air构建可视化工具,就能通过让用户使用软件组件来简化开发过程。   (3)基础工具类HTML5平台提供底层交互型产品,开发目的、设计原理和实现思路都以交互为基础,国内只有iH5。iH5于2015年9月上线,提供HTML5制作工具、工具培训和作品交易等服务。它本质上封装了DOM(文档对象模型)引擎的一个集成开发环境,使用者以设计师为主,适合广告公司、大型媒体公司和公司市场部等使用。   如上图,iH5提供的是舞台、屏幕、页面、多媒体素材、事件、数据库等对象组件,而不是构建好的模块组件。在提供可视化编辑的前提上,它最大程度还原了HTML5页面的开发过程,具有较高的拓展性。由于提供底层交互功能,它的应用领域较广泛,能用于微信推广、网站建设、轻游戏设计、轻APP开发和视频交互等多个方面。   同样是HTML5规范,对HTML5技术与性能的取舍成为国内HTML5平台工具定位和提供服务的差别所在。   HTML5行业发展的趋势   伴随着HTML5兴起的是Flash的没落,HTML5能打败在多媒体领域称霸多年的Flash,除了移动设备的跨平台性和较好的多媒体支持外,它的应用范围也广于Flash。比如,Flash动画作品的复用性极低,基本没有模板市场,而HTML5却能作为基础填充材料,用来制作报纸图文等模板。   参考Flash发展的演化路径并结合HTML5的新特性,HTML5近几年会在重度内容、网页游戏、垂直领域解决方案和内容直接填充四个方面有所突破。   (1)内容往重度化方向发展。   重度营销并不完全意味着大项目、高预算、长周期、大团队,而是相对轻度营销以用户生产内容为主,它更注重专业内容的生产。在用户对页面交互能力和HTML5拓展功能的要求提高之际,轻度营销的市场份额会逐渐降低,往重度营销内容转化。   (2)网页游戏往交互游戏方向发展。   尽管HTML5游戏具备无需下载、包含社交属性、开发成本低等优势,但如果没有充分利用HTML5的新特性,加强移动游戏的交互能力,它很难在游戏市场中异军突起。由此,网页游戏未来更有可能结合HTML5优良的通信功能,往跨屏互动等交互特征更明显的形式发展。   (3)垂直领域解决方案往在线应用方向发展。   与HTML5行业密切相关的垂直行业主要包括在线教育、电商和流媒体三种类型。   以世界最大的在线课程平台Coursera为例,授课视频即使用HTML5实现“课间小测”。如下图,在Coursera网站上,当视频播放到特定节点时会出现与课程相关的问题,提供用户选择答案,记录答题情况并反馈答题结果。   (4)传媒业往内容直接填充方向发展。   国内HTML5制作工具基本都提供模板服务,这与HTML5网页较强的复用性有关。网页基础架构设计完成后,修改源码中各元素的参数便能替换素材、改变对象属性,因此HTML5网页能用于制作基础填充材料。在HTML5模板的帮助下,新媒体内容能通过应用母版进行编辑,用户只需后期进行图文内容的替换,因此很有可能成为传媒业转型的契机。   反观国内不同类型的HTML5平台,只有以HTML5提供的新特性为根本,着眼于底层交互才可能适应各行各业对网页开发的需求。因此,基于HTML5元素和属性进行设计的基础工具,未来更有机会占领尽可能多的市场份额。

当下对HTML5的产品思考

HTML5从质疑到重视 对当下H5的产品思考  2014年10月底,HTML5标准规范终于制定完成,并已公开发布。八年来,HTML5从饱受质疑到逐渐受到重视,经历了诸多起起落落,到现在这最后一只靴子也终于落地了。(相关技术介绍可阅读我的另一篇分享HTML5游戏发展和引擎介绍)。 “Adobe这家公司太懒,而Flash迟早被HTML5取代”,四年前,乔帮主炮轰Flash,给HTML5社区打了一针强心剂。但各家浏览器都有各自的小算盘,为了开发兼容性和响应性良好的网页,开发者和设计师仍然要为不同的浏览器适配版本。 标准分化的问题,在HTML5游戏被提出来的那天起就一直存在着,显然如果没有一个统一的Web平台,HTML5游戏也必将是空中楼阁。那如今,HTML5游戏的发展又如何呢? 一句话,其实过得并不好!或许当初吸引了太高的期望,而移动端HTML5技术的发展滞后于游戏的表现需求,各个浏览器的标准不统一导致碎片化也加剧了这个问题。 先看看市场份额:2014年占移动游戏用户比例达到23%(这个数据明显乐观,可能把一些支持运营的互动小游戏也计算在内)。付费率约1.3%,ARPU值较低,约1.1元,跟Banner广告收入近似。(数据来自Talking Data) 再看看HTML5的游戏类型:绝大部分是休闲益智类游戏,靠用户量来提升营收,缺少中重度游戏。游戏品质受制于硬件和HTML5标准的发展,表现力较差,画面效果粗糙,在移动网络会有非常多的加载延迟。产品周期大多呈爆发式、话题式,生命周期极短,现象级产品居多,主要是社交分享所转化的点击,呈指数级增长。 但同时我们也能看到一些变化:首先是渠道,HTML5游戏的导量方式不同于传统的手游分发渠道,由于缺少有影响力的Game Portal入口,所以更加依赖在社交网络上的传播,或者附着在APP中发布。 其次是产品形式: (1)常规游戏:桌面和手机游戏,也就是我们常见的HTML5轻游戏; (2)企业品牌展示:与企业形象展示结合,将品牌元素灵活的植入到游戏中; (3)客户积分消耗:玩家需扣除在企业运营活动中积攒的积分来为游戏“付费”,或购买道具(单向消耗)。 可见现阶段国内大部分HTML5游戏还是**进行辅助运营的补充工具,远未成为主流,这可能跟HTML5本身的技术平台有关,与**的运营需求比较契合。 毋庸置疑,HTML5是种新技术,相比于其它成熟的端游、页游、手游等平台,HTML5能带给玩家什么呢?HTML5又会给游戏领域带来什么新的革新呢? 如果套用SAMR模型(替代、增强、改造、重塑),HTML5目前只能算是已有游戏技术的替代方案,而它产生的一种增强,或者说优势就是:“即点即玩”,只要打开一个链接就可以愉快的玩耍,无论你是在电脑前,还是在手机上,甚至在未来的电视旁,都无需任何插件。 在桌面市场,Flash Player和Unity Player几乎是浏览器的标配,且已耕耘多年,HTML5很难有所作为,所以HTML5的广大战场仍然在移动端。 有些HTML5游戏为了在标准碎片化中突出重围,改用了Hybrid模式(混合HTML5和Native),采用APK或IPA安装包的方式发布,但由于游戏本身表现力欠佳,如果内容也没啥亮点的话那也是凶多吉少,很难与其它原生技术制作的游戏竞争,而呼声很高的《巴哈姆特之怒》后劲不足渐渐被人淡忘也是一个佐证,玩家最终关注的还是体验和游戏品质。 不过,随着HTML5标准的发布,WebGL、WebAudio、Web RTC等各种完善的组件加入,大量游戏引擎和开发工具的发布,许多酷炫的中重度游戏开始在酝酿,有开发商甚至喊出“Your browser will be a gaming consoles!”的口号。未来HTML5有望成为各个智能电视的标准前端框架,从而低成本的实现统一,云游戏的时代才真正到来,而这虽然是美好的展望但也是极有可能发生的。 HTML5仍是很有潜力的一种技术,“点开即玩的无缝游戏体验”仍然有很强的市场需求。整个市场对HTML5的期望值仍然很高。随着微信小游戏的风靡,《围住神经猫》、《试试你有多色》也狠让用户尝了一回鲜,但是仍然缺少能吸引玩家长久留存的中重度游戏,或许这也正是HTML5游戏需要证明自己的契机。 对微信而言,由于目前HTML5游戏还缺少一个完善的发布平台,神经猫的“小打大闹”让我们看到了微信作为一个HTML5游戏门户的潜力。由于微信浏览器本身对HTML5的支持已非常完善,如果附加更多游戏相关的特性,比如支付、登录、分享,甚至专为游戏做的优化等,将会成为下一代HTML5游戏引擎的强势标准,同时也可以与海量用户结合,进一步提升用户粘性。 目前比较缺乏低成本、便捷的HTML5游戏分发渠道,Game Portal或许在未来也有很大的市场,这也是许多创业者关注的焦点。

HTML5改变我们未来生活

HTML 5:足以改变我们未来生活的十个方面 HTML5代表着Web发展的未来方向。无论大家身为开发人员还是高级用户,关于这一Web编程新基础的种种态势都值得各位高度关注。 如果大家还没有意识到,那我们先要强调一句——Web世界已经彻底改变了。时至今日,网络银行、实时视频聊天以及短视频共享已经成为Web领域的立足根基,而接下来还将有更多极具突破性的趋势及成果不断涌现。正因为如此,这一根基才需要迎接进一步升级。 超文本标记语言(简称HTML)正是浏览器所使用的语言。作为原本立足于面向文档的标准通用标记语言(简称SGML)的衍生产物,HTML在其早期的四个版本中只需要满足最初学术性用户对于Web功能的需求。但随着用户对于各类功能的进一步渴望——从安全加密传输到视频媒体——API、SDK、插件库以及外部应用程序全部被融入到了HTML当中,从而在最大程度上迎合个人及企业用户对Web提出的要求。因此2004年,Web超文本应用技术工作组(简称WHATWG)开始着手构建一套新的HTML版本,这就是HTML 5。 2014年10月28日,万维网联盟(简称W3C)——此前曾联手WHATWG共同开发出相关标准——发布了作为稳定推荐版本的HTML 5方案,换言之这套方案已经“彻底完成”。现在我们已经能够立足于自身系统,充分享受由HTML 5所带来的种种便利。 但这些便利具体包括什么呢?实际效果可能取决于大家到底身为开发人员抑或是普通用户。对于开发人员而言,HTML 5能够显著简化大家的日常工作——相较于HTML 4.1及以下版本而言,这是因为后者包含大量我们早已弃之不用的插件及额外内容。这绝对是件好事,不过从短期角度出发,我们仍然需要考量其它一些后续问题。 对用户来说,日常生活则会得到简化,这是因为由上述插件所带来的安全漏洞及兼容性问题将不复存在,因此我们再也用不着为了正常浏览网络内容而积累丰富的安全经验。此外,浏览器的使用体验也将被拓展到更多设备平台之上,这将使得桌面设备与移动设备拥有更为统一的观看感受。谁不喜欢这样呢,对吧? 值得着重强调的是,HTML 5是一套尚处于早期发展阶段的标准。这意味着其前进道路上还将迎来多次飞跃,并将沿途带来诸多惊喜。正是考虑到这一点,我们认为它能够切实帮助整个业界以新的方式完成Web页面的构建工作。 如果大家本身正是HTML 5编程人员,那么前面提到的内容对您来说肯定属于陈词滥调了——而且大家当然也会希望能从我们这得到点更加新鲜有料的消息。希望各位能在评论栏中阐述您的体会与规划,相信这一切都将成为HTML 5向HTML 5.1进化的重要信息依托(这一升级将从明年正式开始)。好了,闲言少叙,咱们马上进入正题。 HTML5是一种新型语言 从HTML到HTML 4.2,HTML的每一次迭代都以SGML为基础——也就是由IBM公司在上世纪六十年**发出的这款文档描述语言。尽管HTML一直在不断发展演进,但其最为根本的出发点始终保持不变。然而如今这一情况得到了扭转。HTML 5是一种全新语言,不再立足于SGML。对于Web用户来说,这不会对他们的正常使用产生任何影响——大部分普通用户可能根本没听说过SGML,也不知道以此为基础会对HTML产生怎样的影响。不过对于开发人员而言,这意味着多年来在常用标签以及功能领域建立起的“肌肉记忆”需要再次更新甚至从头学习。这倒并不一定是件坏事,不过请各位记住,我们必须要在最后期限之前完成适应与学习,否则就会被历史的洪流所吞没。 好消息是,HTML 5仍然能够向下兼容其它早期HTML版本,因此去年才刚刚开始的代码编写工作仍然能够在今年提供正常的页面显示效果。这种延续性确实值得称道,不过根据经验,我们可以想见会有不少企业由于懒得升级而继续停滞不前。千万别这么做:不要再依赖于剪切加粘贴了,请从头开始重新开发新的HTML 5代码。事实最终会证明,这才是最明智的应对之道。 我们需要一款新的浏览器 还记得我们刚刚提到过的HTML 5向下兼容能力吧?这种兼容能力的确存在,但需要注意的是,面向HTML 4以及更早版本打造的浏览器方案将无法与HTML 5顺利对接。如果大家所在的企业一直将某套早期特定浏览器版本作为标准(没错,那些仍然在坚持使用IE浏览器早期版本的朋友,批评的就是你),那么HTML 5已经发出了冲锋的号角——是时候马上动手推动升级工作了。 目前的各大主流浏览器版本都支持HTML 5。它们在安全水平与可靠性方面也要比早期版本好得多。所以马上作出规划,别再坐以待毙啦! 新的浏览器折衷途径 好的,如果您(或者您所在企业的CIO)对于采用“全新浏览器”始终保持固执的态度,那么咱们也可以通过折衷的办法加以解决。大家可以在早期HTML代码当中将HTML 5代码定义为块元素,并将HTML 5元素插入其中。这确实能够奏效,甚至效果还相当不错。但我敢肯定,大家自己对此不会太满意。 只要有合理的原因作为依托,大家完全可以通过以上方式暂解燃眉之急——无需升级即可拥抱HTML 5,简直机智!除非…… 大家仍然坚持使用IE 8之前的陈旧浏览器版本。在这种情况下,各位一定会遇到麻烦,因为微软公司并不允许我们在样式当中定义未知代码。在这种情况下,JavaScript也能够起到折衷的作用(大家在搜索引擎中输入‘HTML 5’再加上‘the siv’即可),但这无疑会让问题更为复杂,而且我们都知道最终会带来怎样的结果——对吧? 视频播放更加轻松 在HTML 4上实现视频播放实在令人有些抓狂。这并不是说大家不知道该如何解决,但最糟糕的是仅有的几种可能性解决办法没有一样能够依靠语言本身来完成。换言之,所有工作都得依托于插件。虽然在大多数情况下,我们最终也能得到预期的效果,但相信每位朋友——无论是开发人员还是普通用户——都曾在浏览器上看到由视频引发的沮丧小脸图标,这代表着某款插件出了问题、需要更新或者暂时不可用。 HTML 5能够避免上述所有问题,因为现在视频能够作为媒体类型在语言内部直接加以定义。打算在自己的页面当中引入一段视频?在HTML 5中完成这项工作,其难度跟在HTML 4中插入一幅静态图片差不多。如果大家曾经花过大量时间研究如何向可定制视频播放器里添加代码,那么如今轻松易行的HTML 5视频页面编写方式绝对能让您长出一口恶气。而对于普通用户来说,这些可爱的短视频内容也将拥有更为稳定的播放效果。 现在HTML 5面对的几个主要问题是:并不是所有浏览器都能够为任何视频媒体类型提供支持。不过总体而言,只要大家坚持使用新的WebM视频格式,那么整个开发流程应该不会遇到任何阻碍。 动画已被包含于其中 不知道还有多少朋友记得自己为了在Web页面当中加入酷炫的动画效果而被迫学习Flash?如果大家没有接触过Flash,那就必须得跟专门的设计人员进行配合——后者会在原本稳定的页面当中加入大段神秘代码,而这有可能引发各类潜在问题。不过痛苦的时光已经过去,如今几乎每个人(包括Adobe公司在内)都对HTML 5的新能力感到振奋。 HTML 5当中包含有我们在页面内创建动画效果时所需要的全部功能。大家甚至可以在无需引入任何外部代码的前提下实现复杂的3D动画,这一点非常值得称道。此外,与早先的实现方式相比,如今的内置功能也把安全性与可靠性水平推向了新的高度。很显然,对于每一位开发人员来说,安全性与可靠性都跟开发成果的自身品质紧密相关。 另一大进步:我们用不着再考虑自己的页面会显示在哪些设备之上了。任何一款支持HTML 5的浏览器都能在全部设备上正常显示各位精心设计出的动画效果。 视频通话全面来临 动画效果当然很酷,不过基于浏览器的视频通话与协作模式如今亦可通过名为WebRTC(即Web实时通信)的协议得到实现——这几乎从根本上改变了游戏规则。尽管并不严格隶属于HTML 5协议范畴,但HTML 5浏览器确实能够发挥WebRTC所带来的功能优势。 想象一下,只需要三行代码即可为自己的网站带来视频会议功能——这是多么令人振奋的目标。不是做梦,现在我们已经可以通过WebRTC实现这一点。不过由于尚处于早期发展阶段,WebRTC仍然存在几个尚未解决的问题。首先就是其中的一项安全漏洞有可能影响到某些VPN。另外就是,WebRTC实际上是一套点到点系统——其调用不一定需要经由中央服务器。虽然这样的设计能够有效降低数据中心的实际负荷,但却有可能给全局网络流量带来难以控制的影响。这要么会带来大量小型数据流,要么会让未考虑到此类状况的网络规划模型面临沉重的传输负担。 但这个问题几乎肯定能够得到解决,因为WebRTC极具现实意义,业界根本不可能忽略其核心价值之上的这一点点瑕疵。将其引入HTML 5代码库,协作与客户支持工作将成为Web开发当中毫不费力即可完成的任务。 古董级语言仍能正常起效 .……而且我们也需要这样的结果。从JavaScript到Python,我们仍然需要使用这些工具来接入数据库、完成复杂的操作与处理流程、并对现实世界中的设备进行操控。它们也依旧能与HTML 5顺畅协作,从而继续为广大开发人员及普通用户效力。现在,我们需要对与这些语言相关的标签进行认真核对——因为大部分标签都在HTML 5当中经过了修改。但归根结底,它们仍然有效。 不过大部分浏览器插件以及我们过去已经习惯的外部工具就没那么好运了,特别是那些负责处理富媒体对象的方案。好消息是,HTML 5如今单靠自身就能实现全部媒体类型的原生处理,因此大家也将因此节约下可观的时间与精力。 设备平台差异仍然不容忽视 如果能够宣布HTML 5已然解决了由不同屏幕尺寸以及功能差异所带来的各类问题,我们当然会为之振奋——但遗憾的是,实际情况并非如此。虽然我们已经能够以前所未有的方式在不同设备之间顺畅往来,但开发人员仍然无法保证自己在台式机屏幕上设计出的页面成果同样能在智能手机上拥有良好表现。不同浏览器与设备平台之间存在着巨大差异,特别是在HTML 5兼容水平方面。页面将依旧需要查询浏览器及设备类型,而后再载入对应的方案及版本。对不起,现实就是这么残酷…… HTML5全面针对移动设备 前面刚刚提到,我们仍然需要认真思考用户在查看页面时实际使用的设备类型。而作为老牌语言家族的新成员,HTML 5当然也很清楚如今世界正逐步向移动平台倾斜。有了HTML 5,大家用不着再将移动设备当成是被全面阉割过的二等公民——我们完全可以编写动态代码,并使其在相当一部分移动设备的屏幕之上得到正常显示。 好消息是,我们向页面当中添加的全部要素,从视频到动画再到动态尺寸元素,在理论上都能够得到良好显示——即使某些设备上的显示尺寸偶尔有些奇怪。 那么最终结论是什么?别忙着抛弃自己的设备测试流程,也别想当然地认为每个人都会像咱们自己一样,在27寸显示器上查看Web页面。正如Steve Martin的经典语录,“让我们从小处着手。” HTML5相当复杂,但这是件好事 相较于HTML 4甚至是Flash,HTML 5都显得有些复杂甚至不易亲近。但这是件好事,因为这意味着HTML 5拥有充足的力量与功能,足以成为企业客户在构建基于浏览器的复杂而强大的应用程序时所需依靠的页面描述语言。这才是看待HTML 5的正确方式——它更像是一种应用程序语言,而非单纯的页面描述语言。 目前网络上有成百上千个相关站点,能够帮助大家学习HTML 5的对应知识,另有大量专业培训机构也为我们准备了理想的教程方案。从现在开始,HTML 5开始定义Web的未来发展方向,正如HTML当初定义网站页面之时一样。 大家是否已经准备好迎接HTML 5的降临了?您是否已经开始学习这一新型语言?希望各位能在评论栏中谈谈自己的情况。您的所见所想,包括您对于HTML 5的评价——无论好坏——都将极具参考价值。

HTML5语义化总结

 Html语义化理解   1、什么是HTML语义化?   基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等>   根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。   2、为什么要语义化?   为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;   用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;   有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;   方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;   便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。   3、写HTML代码时应注意什么?   尽可能少的使用无语义的标签div和span;   在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;   不要使用纯样式标签,如:b、font、u等,改用css设置。   需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);   使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。   表头和一般单元格要区分开,表头用th,单元格用td;   表单域要用fieldset标签包起来,并用legend标签说明表单的用途;   每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。   4、HTML5新增了哪些语义标签   HTML5的目标:书写更简洁的HTML代码,创建更简单的Web程序。   另人激动的新特性如下:新的html标签和属性,完全支持CSS3,视频和音频标签,2D/3D绘图,本地存储,本地SQL数据库。   为什么要引入语义元素:让开发人员更直观地了解页面每部分的功能表,同时搜索引擎以及视觉障碍人士使用的屏幕阅读器也能更方便地识别页面的每一部分。   区块标签:   标签article:表示包含于一个文档、页面、应用程序或网站中的一段独立的内容,也就是说,它能够独立地被发布或重新使用。   运用   一些使用article的例子:一片博客、一个论坛帖子、一篇新闻报道、一个用户评论。   标签header   一般被放置在页面的顶部,或者页面中某个区块元素的顶部,包含整个页面或某个区块的标题、简介等信息。   一个文档中可以包含多于一个的header标签;header标签不一定非要显示在页面的上方,它的内容决定这里需要使用header标签,位置并不重要;可以为body,article,section和aside增加header元素。   标签footer   一般被放置在页面的底部,或者页面中某个区块元素的底部。   标签nav   表示页面的导航,可以通过导航连接到网站的其他页面,或当前页面的其他部分。   搜索引擎或屏幕阅读器会根据nav标签确定网站内容,不是任何一组超链接都适合放在nav标签中。   标签aside   包含的内容不是页面的主要内容,具有独立性,是对页面内容的补充。   一些使用aside的例子:页面侧边栏;广告;友情链接;文章引语(内容摘要)。   标签section   一个主题性的内容分组,通常包含一个头部(header),可能还会有一个尾部(footer)。   标签div和section的比较:标签div应用更广泛,只要你想为一个区域定义一个样式,就可以使用div标签;标签section包含的内容是一个明确的主题,通常有标题区域。   内容分组标签:   标签main   显示页面的主体内容;每个页面只能包含一个main标签;main标签中不包含网站标题、logo、主导航、版权声明等信息。   标签figure   定义媒介内容的分组,以及它们的标题。   标签figcaption   定义figure元素的标题。   文本级别的语义标签:   标签time   HTML5的新标签。表示一个日期,或者一个时间,或者同时表示一个日期和时间值。   标签i和b   HTML4中已经存在,在HTML5中被赋予了新的语义化功能的标签。   标签i   在HTML4中,是修饰文字样式的,将文字显示为斜体文本;在HTML5中,表示强调不同的情绪或声音,也可以表示技术术语、生物分类、来自另一种语言的成语或习语、一个想法等等。   标签b   在HTML4中,是修饰文字样式的,将文字显示为粗体文本;在HTML5中,表示文档中的关键字、商品名称等。   标签em和strong   在HTML4中就已经有了语义化的功能。   标签em:emphasis 强调,标签中的内容是用来强调的重点内容,会被浏览器显示成斜体文本。   标签strong:表示非常重要、严重性或内容的紧迫性;会被浏览器显示成粗体文本。   使用建议:如果你只是单纯的想把文字的样式显示为斜体或粗体,请不要使用这几个语义标签,W3C建议我们要在CSS样式表中定义文字样式。
共22条 共3页 第1页 首页 上一页 1 2 3 下一页 尾页

版权所有 © 2017 郑州方果电子科技有限公司

做网站:方果科技 营业执照展示 豫ICP备16029994号