整合营销服务商

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

免费咨询热线:

踩过许多坑后,送你这份H5交互的页面跳转方式总结

年做了大量的 HTML5 项目,遇到了很多坑。在这个过程中学到了一些之前不具备的知识,所以这篇文章就简单分享一下这方面的话题。

传统的MPA

首先,说一个比较古老的东西,叫做 MPA。

MPA 的全称是 Multi-page Application,意思是整个应用(站点)由多个完整的 html 构成。用户在页面 1 点击跳转,需要向服务端请求页面 2,请求成功后渲染。而用户返回时,相当于是点击了浏览器的返回,页面退回到之前的历史记录,并重新加载出来。

在这样的模式下,页面间切换慢、不流畅的问题比较突出,尤其是在移动端。

同时,它还产生了几个小问题:

  • 跳转动画:页面间的跳转无法实现转场动画效果。
  • 如果前一个页比较长,用户滑动到页面比较靠下方的位置后点击,返回时,页面无法默认停留在原位置。
  • iOS 右滑返回产生问题,从页面 1 跳转到页面 2,再从页面 2 跳转到页面 3,右滑返回,会直接回到页面 1 前的页。

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 之间的跳转动画来决定。
  • 返回后页面停留在原位置:完美支持。
  • iOS 右滑返回:完美支持。

不过需要注意的地方是,打开新 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 的跳转方式。这些跳转方式,没有绝对的对与错,我们在设计方案时,需要根据实际的业务需求与技术的限制,来整体考虑解决方案。

根据个人经验,也有几点小帖士分享给大家:

  • 前后逻辑交织不复杂的单个页面,可以考虑使用新 WebView 打开跳转。
  • 如果是一个任务型的流程,可以考虑将一个任务流包在一个 WebView 中,在任务内使用 SPA 跳转。不同的任务使用不同的 WebView。保持任务之间的关系清晰明了。
  • 设计上需要着重表现页面间转场动画的效果,优先考虑使用 SPA 跳转。
  • 为防止流程过于复杂,尽量不要自定义关闭、返回的行为。保持关闭为默认的关闭行为,保持返回为默认的返回行为。

av元素是什么?

Nav元素用于定义导航链接,是HTML5新增的元素,该元素可以将具有导航性质的链接归纳在一个区域中,使页面元素的语义更加明确。其中的导航元素可以链接到站点的其他页面或者当前页的其他部分。

Nav元素可以用作页面导航的链接组,在导航链接组里面有很多的链接,点击每个链接可以链接到其他页面或者当前页面的其他部分,并不是所有的链接组都要被放在Nav元素里面,只需要把最主要的、基本的、重要的放在Nav元素里面即可

比如说页脚底部如果有个版权声明,不建议使用Nav元素,而建议使用footer元素是最合适的。一个页面中可用多个Nav元素作为整体或者不同部分的导航

示例代码:

Nav元素示例代码

在上面这段代码中,通过在Nav元素内部嵌套无序列表ul来搭建导航结构。通常一个HTML页面中可以包含多个Nav元素,作为页面整体或不同部分的导航。

具体来说Nav元素可以用的场景如下:

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

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

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

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

除此Nav元素也可以用于其他重要的、基本的导航链接组中。并不是所有的链接组都要被放进Nav元素,只需要将主要的和基本的链接放进Nav元素即可。

.标签

1.1meta标签

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">

将页面重定向到另一个网站

1.2title标签

title标签的内容会作为搜索结果的超链接上的文字显示

<title>Document</title>

1.3标题

  • h1 ~ h6 一共有六级标题
  • 从h1~h6重要性递减,h1最重要,h6最不重要
  • h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1
  • 标题元素是块元素
  • <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

  • hgroup标签用来为标题分组,可以将一组相关的标题同时放入到hgroup
  • <hgroup>
    <h1>回乡偶书二首</h1>
    <h2>其一</h2>
    </hgroup>
  • 其他标签
    • p标签表示页面中的一个段落
    • <p>在p标签中的内容就表示一个段落</p>
    • em标签用于表示语音语调的一个加重
    • <p>今天天气<em></em>不错!</p>
    • strong表示强调,重要内容!
    • <p>你今天必须要<strong>完成作业</strong></p>
    • blockquote 表示一个长引用
    • <blockquote>
      这句话我是从来没有说过的!
      </blockquote>
    • q表示一个短引用
    • 子曰<q>学而时习之,乐呵乐呵!</q>
    • br标签表示页面中的换行
    • <br>

1.4布局标签

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>

1.5列表

1.1.1分类

1.1.1.1有序列表

使用ol标签来创建无序列表,使用li表示列表项

<ul>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ul>

1.1.1.2 无序列表

使用ul标签来创建无序列表,使用li表示列表项

<ol>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ol>

1.1.1.3定义列表

使用dl标签来创建一个定义列表, 使用dt来表示定义的内容,使用dd来对内容进行解释说明

<dl>
       <dt>结构</dt>
       <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
       <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
       <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
   </dl>

1.1.1.4列表之间可以互相嵌套

<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>

1.6超链接

1.6.1 作用

超链接可以让我们从一个页面跳转到其他页面, 或者是当前页面的其他的位置

1.6.2 定义

使用 a 标签来定义超链接

<a href="https://www.baidu.com">超链接</a>

1.6.3 属性

1.6.3.1属性1:href

指定跳转的目标路径

值可以是一个外部网站的地址

也可以写一个内部页面的地址

超链接是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素

1.6.3.2 属性2:target

用来指定超链接打开的位置

_self 默认值 在当前页面中打开超链接

_blank 在一个新的要么中打开超链接

<a href="07.列表.html" target="_blank">超链接</a>

1.6.4其他

将#作为超链接的路径的展位符使用

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>

1.7图片标签

img标签来引入外部图片,img标签是一个自结束标签

属性:src 属性指定的是外部图片的路径(路径规则和超链接是一样的)

alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会图片无法加载时显示

<img src="./img/1.gif" alt="松鼠">

1.8内联框架

用于向当前页面中引入一个其他页面

  • src 指定要引入的网页的路径
  • frameborder 指定内联框架的边框
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音视频标签

1.8.1音频

audio 标签用来向页面中引入一个外部的音频文件的

1.8.1.1 属性

  • controls 是否允许用户控制播放
  • autoplay 音频文件是否自动播放
    • 如果设置了autoplay 则音乐在打开页面时会自动播放
  • loop 音乐是否循环播放
<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>

1.8.2视频

与 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>


2.表格table

  • 在table中使用tr表示表格中的一行,有几个tr就有几行
  • 在tr中使用td表示一个单元格,有几个td就有几个单元格
  • rowspan 纵向的合并单元格
  • colspan 横向的合并单元格
<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>

长表格

  • 可以将一个表格分成三个部分:
    • 头部 thead
    • 主体 tbody
    • 底部 tfoot
  • th 表示头部的单元格
<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: 指定边框之间的距离
border-spacing: 0px;
  • border-collapse: collapse; 设置边框的合并
border-collapse: collapse;
  • 如果表格中没有使用tbody而是直接使用tr,那么浏览器会自动创建一个tbody,并且将tr全都放到tbody中tr不是table的子元素

3.表单(form)

  • 使用form标签来创建一个表单
  • action 表单要提交的服务器的地址
  • 数据要提交到服务器中,必须要为元素指定一个name属性值
<input type="text" name="username">
  • 单选按钮
    • 像这种选择框,必须要指定一个value属性,value属性最终会作为用户的填写的值传递给服务器
    • checked 可以将单选按钮设置为默认选中
<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="注册">

属性

  • autocomplete="off" 关闭自动补全
  • readonly 将表单项设置为只读,数据会提交
  • disabled 将表单项设置为禁用,数据不会提交
  • autofocus 设置表单项自动获取焦点
<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>

4.注释

<!--
我是注释中的注释 注释不能嵌套
-->

5.属性

  • 属性,在标签中(开始标签或自结束标签)还可以设置属性
  • 属性是一个名值对(x=y)
  • 属性用来设置标签中的内容如何显示
  • 属性和标签名或其他属性应该使用空格隔开
  • 属性不能瞎写,应该根据文档中的规定来编写,有些属性有属性值,有些没有。如果有属性值,属性值应该使用引号引起来

6.文档声明

<!doctype html>