整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

为什么使用 HTML 5?

TML 5 是最新的超文本标记语言 (HTML),它是用于描述网页内容和外观的标准编程语言。如今,所有主要浏览器(ChromeSafariFirefoxOpera 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超越FlashSilver 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=500pxautoplay/>

10. 地理位置支持

在地理定位的帮助下,我们可以轻松地找出我们在世界上的位置,并轻松地与人们分享这些信息。过去,如果我们想首先检测客户端设备的位置,我们必须查看客户端 IP 地址、你的无线网络连接、手机的基站和纬度和经度。但是对于 HTML5,已经开发了一组 API,它们可以有效地允许客户端设备(即你的手机、IP 甚至你的桌面浏览器)使用你的 HTML5 兼容浏览器直接可用的 JavaScript 检索地理定位信息。

HTML5 改进并增强了浏览体验。那么为什么不为你的网站和移动应用程序采用 HTML 5 呢?


了解更多

端在使用DIV+CSS布局时,通常需要通过为div命名的方式,来区分网页中不同的模块。在HTML5中布局方式有了新的变化,HTML5中增加了新的结构标签,如header标签、nav标签、article标签等,具体介绍如下。

1. header标签

HTML5中的header标签是一种具有引导和导航作用的结构标签,该标签可以包含所有通常放在页面头部的内容。header标签通常用来放置整个页面或页面内的一个内容区块的标题,也可以包含网站Logo图片、搜索表单或者其他相关内容。其基本语法格式如下:

<header>

  <h1>网页主题</h1>

    ...</header>

在上面的语法格式中,<header></header>的使用方法和<div class="header"></div>类似。

注意:

在HTML网页中,并不限制header标签的个数,一个网页中可以使用多个header标签,也可以为每一个内容块添加header标签。

2. nav标签

nav标签用于定义导航链接,是HTML5新增的标签,该标签可以将具有导航性质的链接归纳在一个区域中,使页面元素的语义更加明确。nav标签的使用方法和普通标签类似,例如下面这段示例代码:

<nav>

  <ul>

        <li><a href="#">首页</li>

        <li><a href="#">公司概况</li>

        <li><a href="#">产品展示</li>

        <li><a href="#">联系我们</li>

  </ul></nav>

在上面这段代码中,通过在nav标签内部嵌套无序列表ul来搭建导航结构。通常一个HTML页面中可以包含多个nav标签,作为页面整体或不同部分的导航。具体来说,nav标签可以用于以下几种场合。

● 传统导航条:目前主流网站上都有不同层级的导航条,其作用是跳转到网站的其他主页面。

● 侧边栏导航:目前主流博客网站及电商网站都有侧边栏导航,目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。

● 页内导航:它的作用是在本页面几个主要的组成部分之间进行跳转。

● 翻页操作:翻页操作切换的是网页的内容部分,可以通过点击“上一页”或“下一页”切换,也可以通过点击实际的页数跳转到某一页。

除了以上几点以外,nav标签也可以用于其他导航链接组中。需要注意的是,并不是所有的链接组都要被放进nav标签,只需要将主要的和基本的链接放进nav标签即可。

3. footer标签

footer标签用于定义一个页面或者区域的底部,它可以包含所有放在页面底部的内容。在HTML5出现之前,一般使用<div class="footer"></div>标签来定义页面底部,而现在通过HTML5的footer标签可以轻松实现。与header标签相同,一个页面中可以包含多个footer标签。

4. article标签

article标签代表文档、页面或者应用程序中与上下文不相关的独立部分,该元素经常被用于定义一篇日志、一条新闻或用户评论等。一个article标签通常有它自己的标题(可以放在header标签中)和脚注(可以放在footer标签中),例如下面的示例代码。

<article>

    <header>

    <h1>秋天的味道</h1>        
    
    <p>你想不想知道秋天的味道?它是甜、是苦、是涩...</p>

  </header>

    <footer>           
    
    <p>著作权归XXXXXX公司所有...</p>

  </footer></article>

需要注意的,在上面的示例代码中还缺少主体内容。主体内容通常会写在header和footer之间,通过多个section标签进行划分。一个页面中可以出现多个article标签,并且article标签可以嵌套使用。

5. section标签

section标签表示一段专题性的内容,一般会带有标题,主要应用在文章的章节中。例如,新闻的详情页有一篇文章,该文章有自己的标题和内容,因此可以使用article标签标注,如果该新闻内容太长,分好多段落,每段都有自己的小标题,这时候就可以使用section标签把段落标注起来。在使用section标签时,需要注意以下几点:

● section不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时,应该使用div标签。

如果article标签、aside标签或nav标签更符合使用条件,那么不要使用section标签。

● 没有标题的内容模块不要使用section标签定义。

值得一提的是,在HTML5中,article标签可以看作是一种特殊的section标签,它比section标签更具有独立性,即section标签强调分段或分块,而article标签强调独立性。如果一块内容相对来说比较独立、完整时,应该使用article标签;但是如果想要将一块内容分成多段时,应该使用section标签。

6. aside标签

aside标签用来定义当前页面或者文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等有别于主要内容的部分。aside标签的用法主要分为两种:

● 被包含在article标签内作为主要内容的附属信息。

● 在article标签之外使用,作为页面或网站的附属信息部分。最常用的的使用形式是侧边栏。

| 本刊见习记者 赵姝焱

编辑 | 崔婧

当一种新的颠覆式技术出现,是投靠大平台还是坚持走独立的道路?

HTML5(下称H5)火了。在多数人还没完全弄清楚什么是H5时,它已悄无声息地潜入移动端,并渐呈燎原之势火速席卷微信朋友圈。

以前,H5页面在朋友圈的分享还是一些公众号的文章,但很快,企业就嗅到了商机。他们发现把会议邀请、活动策划等商业信息制作成有趣的H5页面,或者是制作一个H5小游戏,通过用户分享后传播效率更高。

当然,作为一项新兴技术,H5绝不仅仅是卡片式营销或小游戏而已,它将催生新的应用生态圈。这直接吸引了互联网巨头的不断靠拢,百度直达号、腾讯QQX5内核、搜狐快

站……他们都试图把H5作为开山之斧,重寻往昔霸主辉煌。

最积极的还是创业公司,在互联网革命风云变幻之际,它们正在谋求崛起。

在北京老城区的胡同里,一家创业公司在经历了PC互联网转型阵痛后,正努力探寻移动时代H5创业方向的另一种可能。

流量入口:移动时代浏览器没戏

这家名为“火速网络科技”的公司,目前专注于打造H5内容分发平台。创始人赵九州说,这已是他们的第三次创业了。

此前,赵九州团队一直做浏览器。2011年,从知名开源论坛软件Discuz!的公司出来后,他们做了“财猫浏览器”,以提供网购返利为主要功能。用户通过该浏览器从淘宝、京东等大型电商网站购物可获5%~50%的高额现金返利。

两年后,他觉察到PC浏览器在移动时代没什么想象空间,再加上360浏览器和淘宝的封杀屏蔽,于是决定转型做移动端火速浏览器。不过做了一段时间后,赵九州发现自己遇到了很严重的瓶颈。

他解释说,PC时代,流量是一切,浏览器是入口型的应用,处于搜索引擎上游。然而到了移动时代,浏览器功能弱化,只能解决搜索的长尾需求。此前用户对浏览器的大量需求,比如看新闻和视频,已经被相应的App替代。

“连百度和360都会出单独的搜索App,如果做得足够好,理论上完全可以实现移动端浏览器的所有功能。”赵九州断言,“微博和微信加入搜索功能后,也使大量用户不再单纯

依靠浏览器来获取信息。”

另一方面,赵九州觉得浏览器产品本身也出了问题,同质化已经达到前所未有的地步。省流量、速度快,这些方面谁都不存在绝对优势;比安全、比炫酷,竞争已经脱离了产品和技术本身。“UC、搜狗、360、百度、QQ、猎豹……这么多浏览器,差别到底在哪儿呢?其实它们靠营销、渠道,甚至砸钱来竞争。”

换言之,他们原来做产品的思路“不好使”了。 赵九州相信移动端肯定有个超级流量入口,只不过未必是浏览器的形态。他决定回到做浏览器的初心—做流量入口。

用户痛点:满足需求才是核心

赵九州发现,大量信息和服务类应用出现重复、泛滥和搁置的现象,用户的低频次、长尾需求并没有得到充分满足。他相信在智能手机人口红利消退的情况下,解决单一领域低频需求的产品会逐渐消亡,未来将是平台化的互联网状态。

2014年,他暂停了已经开发好的移动端火速浏览器,试图找出新的承载未来手机超级流量入口的产品形态。为此,赵九州团队开始深入研究移动端用户的行为习惯,最终基于H5技术开发出火速轻应用,专注于HTML5内容、Webapp与H5 game的聚合分发,并提出三个产品理念:产品去本地化、内容去中心化、场景去搜索化。

第一,产品去本地化。“用户手机里安装的上百个App,一天能用到的平均不超过20个,常用的更是没几个。”赵九州说,“用户对于智能手机的使用已达到成熟期。”因此,火速轻应用把低频、长尾需求的服务类App以Web形式存在云端,应用时点击手机桌面快捷方式即可,这样可以减少占据空间和资源。

第二,内容去中心化。在移动互联网时代,人们不再关注信息来自哪里,而是更多关注消息和节目本身。火速轻应用不再去分发一个个站点的入口,而只推送最终内容给用户。对于版权问题,赵九州表示,由于给用户推荐的内容直接指向内容源,所以与合作方之间没有版权纠纷。“我们扮演快递的角色,类似PC时代的好123,把用户指引到合适的地方。”

第三,场景去搜索化。搜索与发现是两种获取信息的机制。移动时代,更贴合用户需求的做法是让他们无明确目的地发现内容。火速轻应用没有设置搜索框,赵九州解释,这是因为他发现用户在移动端不喜欢打字,只喜欢“点”。他希望将“点击”做到极致。

基于以上理念,火速轻应用希望在移动时代颠覆浏览器,以更好的形态满足用户需求。

火速轻应用对H5的思考得到了资本认可。2015年1月21日,火速轻应用宣布获得创新工场千万级人民币的A轮融资。创新工场投资总监姜证飞认为:“作为一项新兴技术,目前H5的发展还比较受局限,应以用户需求为切入点做产品,根据其本身特性顺势而为。”

运营之道:从培养用户习惯做起

2014年7月,“围住神经猫”游戏三天获访一亿次的神话令国内H5行业看到了希望。2015年1月,微信开放JS-SDK接口,对H5发展起到了推波助澜的作用。此后,H5被视作新的机遇,创业者纷纷投身其中。

在前不久刚结束的第十届全球移动游戏大会H5分论坛上,渠道、发行、CP齐聚一堂,热烈讨论H5游戏的未来。圆桌论坛环节,大家意见一致:H5游戏大有可为,只期待下一

个爆款。

就在同行们大呼“形势一片大好”之时,赵九州却有不一样的思考。在他看来,H5不是一个技术驱动型产业,内容和运营的驱动才是正确方向,“用户习惯从App切换到H5需要时间”。为此,火速轻应用开发出“蜻蜓”和“云游”两款产品,希望借此培养用户习惯。

“蜻蜓”是一款免费的H5开发工具,可让开发者在5分钟内搭建一个轻应用。火速轻应用希望通过这种零成本接触H5的形式,让更多用户参与其中。

“云游”也是火速轻应用培养用户习惯的一项工具。它为众多App提供H5内容的合作频道,无须下载火速轻应用客户端即可在其他App里直接体验H5内容。“我们做一个内容源,让用户更简单地接触H5。”赵九州说。

创业危机:夹缝中突围

赵九州认为,H5会像LBS、SNS一样,成为互联网的基础建设。火速轻应用正在做的就是一步步夯实这项基础建设、影响用户,希望有朝一日改变移动互联网格局。

然而,在巨头云集的互联网生态下,创业公司的种种努力依然举步维艰。互联网巨头纷纷打造超级App,试图保住PC时代的霸主地位。

以微信为例,这个目前国内用户量最大的超级App,作为孕育H5萌芽的肥沃土壤,也在一步步扼杀H5创业公司的发展空间。2014年9月前后,开发者们发现,微信开始主动限制H5应用在朋友圈中传播。“标准目前还比较模糊,我们的经验是IP访问数量达到十几万左右,就会被限制传播,微信公众账号的用户也不被允许导流至各自客户端。”

“围住神经猫”神话再难复制,H5开发者有如困兽,在夹缝中寻找突围之路。赵九州坚信,任何一个产品的商业模式都必须是独立的。“依附于大平台,你成长的天花板完全取决于别人。如果别人有战略变动,你就会非常受影响。事实告诉我们,只能突围出去。”

目前,火速轻应用正从最初在微信规则下传递影响力、获取用户,逐步转变成与微信建立合作关系,同时快速在微信之外的渠道发展自身竞争力。此外,他们也在尝试与硬件厂商合作,甚至有计划开发第三方ROM。

“巨头们现在还不敢对H5做太深入的尝试,因为他们不知道能不能成功。这对于创业公司来讲,是个绝佳的空窗期。我们要尽力在巨头进入之前,做出自己的竞争力和壁垒。”赵九州苦笑着说,“创业公司必须学会干脏活、累活,这是困境,也是机遇。”

版权所有:本文作者赵姝焱,编辑崔婧,文章为原创,本刊版权所有,如需转载请与zzyyanan联系,未经授权,转载必究。