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

标签： | 作者：DT范福州网站建设 | TIMES:2018-02-25

对参加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>    表示独立的流内容（图像、图表、照片、代码等等）
.....

<!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>`	`规定在文本中的何处适合添加换行符。`

下一篇：小白自学HTML5如何从入门到精通