建站知识

大唐开课html5的应用价值和学习方向

标签:   | 作者:fanxin | VISITORS: | 来源:未知
25
Feb
2018

对参加html5培训的初学者而言,了解html5发展趋势很有必要,正如:增强发展自信和决心,更有利于学习html5技术!html5的应用价值如下:

  微信推出html5应用市场

  作为最大的移动使用场景,微信对html5的态度一直受到关注。未来是html5的天下,我相信微信将更加开放对html5的支持。比较大的可能是,微信今年将推出H5应用市场。

  手机页游3D化是大趋势

  随着硬件能力的提升、WebGL标准化的普以及手机页游的逐渐成熟,大量开发者需要创作更加精彩的3D内容。

  html5移动营销新玩法多

  游戏化、场景化、跨屏互动,html5技术满足了广告主对移动营销的大部分需求,从形式到功能、到传播。

  动漫元素用html5强化创意

  html5技术的成熟,将带来动漫产业的升级。动漫元素本身可通过html5来强化创意,动漫形式将具有富媒体的高度交互、MV影音功能,为读者提供更加场景化的阅读体验。

  轻应用、WebApp、微站

  轻应用、WebApp、微站html5开发移动应用更灵活。采用html5技术的轻应用、WebApp以其开发成本低、周期短、易推广等优势,将迅速普及。

  移动视频、在线直播领潮流

  目前移动视频播放技术的短板在于:一、它需要沉重的挂件和繁琐的操作;二、它很难提供高清的视频传输与播放。当各种体育、个人秀直播越来越流行时,这两个短板便愈发的明显了。html5技术将会革新视频数据的传输方式,让视频直播更加高清流畅。而且,视频还将与网页真正的融为一体,让用户看视频如浏览动图一般简单轻松。此外,html5可以为视频实现任意平台播放,甚至是人画交互。移动视频或成为html5领域的爆发点之一。

  资源复用,html5重刷IP市场

  IP概念时下已经火的不能再火,围绕IP的争夺战也异常激烈,动辄千万费用。

  html5为IP的发光创造了一条新的途径:创作成本极低的html5游戏和动漫,可以让更多的文娱创作接受市场检验,自造IP变得更加便捷。

  许多成熟的IP资源,可以用html5再复用一遍,比如《金庸奇侠传》,做了单机游戏、网游、手游,依然可以再做一个html5版,事实上大家都在这么操作了。

  WebVR让VR从贵族走向大众化

  WebVR就是通过html5将虚拟现实场景嵌入到网页,目前已受到谷歌、Facebook等巨头的拥护。据悉,Web扩展了VR的使用范围,很多生活化的内容纳入了VR的创作之中,如实景旅游,新闻报道、虚拟购物等,其内容展示、交互都可以由html5引擎轻松创建出来。

为什么要学习HTML5


HTML5定义了一系列新元素,如新语义标签、智能表单、多媒体标签等,可以帮助开发者创建富互联网应用,还提供了一些新的Javascript API,如地理定位、重力感应、硬件访问等,可以在浏览器内实现类原生应用,甚至结合Canvas我们可开发网页版游戏。 
HTML5的设计目的是为了在移动设备上支持多媒体,它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言。

HTML5的优势有很多,比如:更聪明的存储,更具有语义化的标签,对视频和音频的支持等等。。。最重要的是,HTML5是未来的趋势。

HTML5的改进:

新元素 
新属性 
完全支持 CSS3 
Video 和 Audio 
2D/3D 制图 
本地存储 
本地 SQL 数据 
Web 应用 
等等


新增的语义化标签

HTML5新增了一些标签,也移除了一些标签。


目前兼容性比较好的常用的新标签有:

<header>    表示页眉,一般用在文档头部
<nav>       表示导航,一般用于导航区域
<section>   表示区块,定义了某个区域
<article>   表示文章,一般用于表示文章(评论,博客...)
<aside>     表示侧边栏,一般和article一起用,表示文章的侧边栏
<figure>    表示独立的流内容(图像、图表、照片、代码等等)
.....
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        header {
            width: 1000px;
            height: 50px;
            background: red;
            margin: 0 auto;
            color: white;
            text-align: center;
        }

        nav {
            width: 1000px;
            height: 50px;
            background: blue;
            color: white;
            text-align: center;
            margin: 0 auto;
        }

        section {
            margin: 0 auto;
            width: 1000px;
            height: 500px;
            color: white;
            text-align: center;
            margin: 0 auto;
        }

        aside {
            float: left;
            width: 300px;
            height: 500px;
            background: green;
            color: white;
            text-align: center;
            margin: 0 auto;
        }

        article {
            float: right;
            height: 500px;
            width: 700px;
            color: white;
            text-align: center;
            background: pink;
            margin: 0 auto;
        }

        footer {
            width: 1000px;
            height: 50px;
            background: gray;
            color: white;
            text-align: center;
            margin: 0 auto;
        }

    </style>
</head>
<body>
<!--头部-->
<header>头部</header>
<nav>导航</nav>

<!--主题-->
<section>
    <!--侧边栏-->
    <aside>侧边栏</aside>
    <!--文章-->
    <article>文章</article>
</section>
<!--底部-->
<footer>底部</footer>
</body>
</html>

语义元素

HTML5 添加了很多语义元素如下所示:

标签 描述
<article> 定义页面独立的内容区域。
<aside> 定义页面的侧边栏内容。
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command> 定义命令按钮,比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框,比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释(中文注音或字符)。
<rt> 定义字符(中文注音或字符)的解释或发音。
<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节(section、区段)。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。
相关新闻
首页 | 网站建设 | 网站模板 | 定制设计 | 建站知识