踩過許多坑后，送你這份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元素示例代碼

在上面這段代碼中，通過在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>

在線咨詢

上一篇：網頁前端基礎教程06-HTML中body屬性和表格詳解，收藏
下一篇：HTML 表格

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商