Vue.js 3移动应用开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.3　移动端Web和HTML

现在的移动端Web都是基于HTML 5技术来进行开发的，由于HTML 5新增了许多特性，并且现在流行的浏览器几乎全部都支持HTML 5，因此使得移动端Web可以跨平台应用。比如HTML 5的音频和视频标签能够正确地访问播放媒体；HTML 5提供的Web Storage使得本地存储更加方便，能够提高性能；Canvas使得更好的交互体验和动画效果更易实现；HTML 5语义化标签的提供使其拥有更好的SEO（Seanch Engine Optimication，搜索引擎优化），使得搜索引擎、应用市场、浏览器等都成为HTML 5的流量入口。

HTML 5是最新的HTML标准，是专门为承载丰富的Web内容而设计的，并且无须额外的插件。它也是跨平台的，可以在不同类型的硬件（比如PC、平板、手机、电视机等）之上运行，并且提供了许多新元素、新特性和新的API。接下来介绍HTML 5的一些重要的特性。

首先，HTML 5提供了许多语义标签元素，比如<header>、<footer>、<article>和<section>等，这些语义标签可以使开发者更加方便、清晰地构建页面结构和布局。HTML 5也删除了一些不常用的标签元素，比如<font>、<frame>、<center>、<applet>等标签。表1.1为详细的新增的语义标签的作用介绍，图1.1所示为利用语义化标签进行的页面布局。

表1.1　HTML 5语义标签

图1.1　语义化布局

HTML 5中也对原来的表单属性进行了一些增强，新增了许多更加方便的表单属性，能够更好地进行输入控制与验证，如表1.2~表1.4所示。表1.2列举了HTML 5新增的表单元素，表1.3列举了HTML 5新增的表单属性，表1.4列举了HTML 5的input输入框新增的输入特性。

表1.2　HTML 5新增的表单元素

表1.3　HTML 5新增的表单属性

表1.4　input输入框新增的属性

HTML 5的Canvas绘图和SVG绘图也是两个关键的特性。<canvas>标签用于通过脚本（通常是JavaScript）动态绘制图形，它是依赖于分辨率的，放大到一定程度会出现失真，不支持事件处理器，比较合适图像密集的游戏。而SVG是指可伸缩矢量图形，用于绘制矢量图形，不依赖于分辨率，放大后不会产生模糊的效果，支持事件处理器，但相对来说不适合游戏应用。

Canvas有许多API，可方便快速地绘制任何图形。下面利用Canvas的API绘制一段文字和一个宽200px、高100px的蓝色矩形框，代码如下：

    <body>
    <canvas id="canvas" width="400"height="400"></canvas>
　
    <script type="text/javascript">
    window.onload = function() {
             var canvas =document.getElementById("canvas");
             var ctx =canvas.getContext("2d");
　
             ctx.font ="30px Times New Roman";
             ctx.fillText("Hello Canvas!", 10, 35);
　
             ctx.fillStyle="#0000ff";
             ctx.fillRect(50, 100, 200, 100);
    }
    </script>
    </body>

上述代码解析：

首先获取画布和上下文：

    var canvas =document.getElementById("canvas");
    var ctx =canvas.getContext("2d");

然后通过ctx.font设置字体，通过ctx.fillText设置文本内容和坐标，更改填充颜色则通过ctx.fillStyle来实现，最后通过fillRect来绘制一个坐标为（50，100）的填充矩形。效果如图1.2所示。

图1.2　Canvas案例

HTML 5还提供地理定位，使用getCurrentPosition()方法来获取用户的位置。HTML 5还有拖放API、Web Worker、本地存储等功能，其中本地存储主要涉及两个API—localstorage和sessionStorage。

总的来说，HTML 5这些新特性更加方便于移动端Web的开发。

上一章目录下一章