年做了大量的 HTML5 项目,遇到了很多坑。在这个过程中学到了一些之前不具备的知识,所以这篇文章就简单分享一下这方面的话题。
传统的MPA
首先,说一个比较古老的东西,叫做 MPA。
MPA 的全称是 Multi-page Application,意思是整个应用(站点)由多个完整的 html 构成。用户在页面 1 点击跳转,需要向服务端请求页面 2,请求成功后渲染。而用户返回时,相当于是点击了浏览器的返回,页面退回到之前的历史记录,并重新加载出来。
在这样的模式下,页面间切换慢、不流畅的问题比较突出,尤其是在移动端。
同时,它还产生了几个小问题:
SPA
随着对移动端体验需求的提高以及技术的进步,另一种模式 SPA(Single-page Application)逐渐成为主流。
SPA 简单来说,就是原来在 MPA 中的多个 html,现在被放在了一个 html 中,并被分成若干个片段。跳转、返回的本质变成了分段的「隐藏」与「显示」。跳转不需要反复对服务端进行请求,从而使得页面与页面之间切换更加快速流畅。
在这样的机制下,跳转与返回完全由代码控制,所以可以通过代码定义页面转场的效果、返回。
在设计转场动画时,我们需要留意的是导航栏是 Native 的还是 HTML5 的。如果导航栏是 Native 的,那 HTML5 页面不包括导航栏,它相当于是网页外的元素,不在转场效果的设计范围内。
WebView
说 HTML5 的跳转,就不得不说 WebView。简单来说,WebView 是在 App 中用于显示 web 内容的容器。上文提到的 MPA 和 SPA,都装在了这个叫做 WebView 的容器中。
用户点击页面中的元素进行跳转,除了前面的两种方式外,还有第三种:新打开 WebView 的方式。在这样的方式下,跳转的本质是 HTML5「告诉」Native,由 Native 执行打开新 WebView,并在新 WebView 中加载页面。
因为 Native 的机制,打开新 WebView 的同时,之前的 WebView 会被自然、完整地保留。所以这时,之前的几个问题就变为:
不过需要注意的地方是,打开新 WebView 是一个资源消耗比较大的操作。如果我们在设计一个流程时,需要比较多的连续使用这种方式,需要和研发同学进行充分的沟通。
比较特殊的Replace
前述的三种跳转,都会产生历史记录。MPA、SPA 的历史记录是在 HTML5 中产生,新开 WebView 中的记录是在 Native 中产生。
在 MPA 或 SPA 中,如果跳转时使用 Replace 方法,它会用新页面替换之前的页面,历史记录中没有之前页面的记录。
这是一种特殊的跳转方式,在设计一些不可逆的流程时可考虑使用。
多页面回退
了解了上述的几种机制后,我们来看一个小的应用场景──多页面回退。
我们在实际业务中,经常会有这样的需求。假设我们有 1、2、3 三个页组成的一个流程,在页面 3 上有个「完成」按钮点击回到页面 1。在不同的交互模式下,实现这样的跳转有着不同的机制。
1. SPA模式下的正常跳转
这种模式是 3 个页面都在一个 WebView 中。点击页面 3 中的「完成」按钮,回退 -2 ,即回退 2 步历史记录,到页面 1。
2. 新打开WebView
打开新 WebView 又分三种方式。
如果我们把 3 个页面,拆分到 2 个 WebView 中,如下图,点击完成按钮,即关闭自身所在的 WebView。
同样是打开新的 WebView,如果我们按如下图的方法拆分会稍微复杂。这时点击完成按钮,首先关闭自身所在的 WebView,当页面 2「意识」到自己重新被展现时,自动退回 1 步到页面 1。
每次打开新的 WebView,这时点击完成,回退的本质是 HTML5「告诉」Native 关闭多个 WebView。需要特别注意的是,HTML5 中实现这种方式不是天然具备的,它需要 Native 具有一次关闭多个 WebView 的能力。所以我们在设计方案时,需要了解清楚自家的 Native 是否有这样的能力。
总结
以上,简单说了几种 HTML5 的跳转方式。这些跳转方式,没有绝对的对与错,我们在设计方案时,需要根据实际的业务需求与技术的限制,来整体考虑解决方案。
根据个人经验,也有几点小帖士分享给大家:
av元素是什么?
Nav元素用于定义导航链接,是HTML5新增的元素,该元素可以将具有导航性质的链接归纳在一个区域中,使页面元素的语义更加明确。其中的导航元素可以链接到站点的其他页面或者当前页的其他部分。
Nav元素可以用作页面导航的链接组,在导航链接组里面有很多的链接,点击每个链接可以链接到其他页面或者当前页面的其他部分,并不是所有的链接组都要被放在Nav元素里面,只需要把最主要的、基本的、重要的放在Nav元素里面即可。
比如说页脚底部如果有个版权声明,不建议使用Nav元素,而建议使用footer元素是最合适的。一个页面中可用多个Nav元素作为整体或者不同部分的导航
示例代码:
Nav元素示例代码
在上面这段代码中,通过在Nav元素内部嵌套无序列表ul来搭建导航结构。通常一个HTML页面中可以包含多个Nav元素,作为页面整体或不同部分的导航。
具体来说Nav元素可以用的场景如下:
1.传统导航条:目前主流网站上都有不同层级的导航条,其作用是跳转到网站的其他主页面。
2.侧边栏导航:目前主流博客网站及电商网站都有侧边栏导航,目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。
3.页内导航:它的作用是在本页面几个主要的组成部分之间进行跳转。
4.翻页操作:翻页操作切换的是网页的内容部分,可以通过单击“上一页”或“下一页”切换,也可以通过单击实际的页数跳转到某一页。
除此Nav元素也可以用于其他重要的、基本的导航链接组中。并不是所有的链接组都要被放进Nav元素,只需要将主要的和基本的链接放进Nav元素即可。
meta主要用于设置网页中的一些元数据,元数据不是给用户看 charset 指定网页的字符集 name 指定的数据的名称 content 指定的数据的内容
keywords 表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
description 用于指定网站的描述
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/>
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
将页面重定向到另一个网站
title标签的内容会作为搜索结果的超链接上的文字显示
<title>Document</title>
header 表示网页的头部 main 表示网页的主体部分(一个页面中只会有一个main) footer 表示网页的底部 nav 表示网页中的导航 aside 和主体相关的其他内容(侧边栏) article 表示一个独立的文章 section 表示一个独立的区块,上边的标签都不能表示时使用section
div 没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素
span 行内元素,没有任何的语义,一般用于在网页中选中文字
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<span></span>
使用ol标签来创建无序列表,使用li表示列表项
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
使用ul标签来创建无序列表,使用li表示列表项
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
使用dl标签来创建一个定义列表, 使用dt来表示定义的内容,使用dd来对内容进行解释说明
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
</dl>
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</li>
</ul>
超链接可以让我们从一个页面跳转到其他页面, 或者是当前页面的其他的位置
使用 a 标签来定义超链接
<a href="https://www.baidu.com">超链接</a>
指定跳转的目标路径
值可以是一个外部网站的地址
也可以写一个内部页面的地址
超链接是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素
用来指定超链接打开的位置
_self 默认值 在当前页面中打开超链接
_blank 在一个新的要么中打开超链接
<a href="07.列表.html" target="_blank">超链接</a>
将#作为超链接的路径的展位符使用
javascript:; 来作为href的属性,此时点击这个超链接什么也不会发生
将超链接的href属性设置为#,这样点击超链接以后 页面不会发生跳转,而是转到当前页面的顶部的位置
跳转到页面的指定位置,只需将href属性设置 #目标元素的id属性值
<a href="#bottom">去底部</a>
<br><br>
<a href="#p3">去第三个自然段</a>
<br><br>
<p>
内容多一点
</p>
<a href="#">这是一个新的超链接</a>
<br><br>
<a href="javascript:;">这是一个新的超链接</a>
<br><br>
<a id="bottom" href="#">回到顶部</a>
img标签来引入外部图片,img标签是一个自结束标签
属性:src 属性指定的是外部图片的路径(路径规则和超链接是一样的)
alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会图片无法加载时显示
<img src="./img/1.gif" alt="松鼠">
用于向当前页面中引入一个其他页面
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
audio 标签用来向页面中引入一个外部的音频文件的
<audio src="./source/audio.mp3" controls autoplay loop></audio>
除了通过src来指定外部文件的路径以外,还可以通过source来指定文件的路径
<audio controls>
<!-- 对不起,您的浏览器不支持播放音频!请升级浏览器!-->
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>
与 audio 相似
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
<table border="1" width='50%' align="center">
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td rowspan="2">D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td colspan="2">C4</td>
</tr>
</table>
<table border="1" width='50%' align="center">
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
</table>
border-spacing: 0px;
border-collapse: collapse;
<input type="text" name="username">
<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
<select name="haha">
<option value="i">选项一</option>
<option selected value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
<input type="submit" value="注册">
<form action="target.html">
<input type="text" name="username" value="hello" readonly>
<br><br>
<input type="text" name="username" autofocus>
<br><br>
<input type="text" name="b">
<br><br>
<!-- <input type="color"> -->
<br><br>
<!-- <input type="email"> -->
<br><br>
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通的按钮 -->
<input type="button" value="按钮">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
<!--
我是注释中的注释 注释不能嵌套
-->
<!doctype html>
*请认真填写需求信息,我们会在24小时内与您取得联系。