簡介,發展歷程,新特性,智慧型表單,繪圖畫布,多媒體,地理定位,數據存儲,多執行緒,新元素,canvas,多媒體,表單,語義和結構,已移除元素,優缺點,優點,缺點,技術要點,重要標記,程式接口,元素變化,標籤變化,事件屬性,異常處理,發展趨勢,
簡介
HTML5 技術結合了 HTML4.01 的相關標準並革新,符合現代網路發展要求,在 2008 年正式發布。HTML5 由不同的技術構成,其在網際網路中得到了非常廣泛的套用,提供更多增強網路套用的標準機。與傳統的技術相比,HTML5 的語法特徵更加明顯,並且結合了
SVG 的內容。這些內容在網頁中使用可以更加便捷地處理多媒體內容,而且 HTML5中還結合了其他元素,對原有的功能進行調整和修改,進行標準化工作。HTML5 在 2012 年已形成了穩定的版本。
發展歷程
HTML5是構建Web內容的一種語言描述方式。HTML5是網際網路的下一代標準,是構建以及呈現網際網路內容的一種語言方式.被認為是網際網路的核心技術之一。HTML產生於1990年,1997年HTML4成為網際網路標準,並廣泛套用於網際網路套用的開發。
圖1 HTML5在前五年(1990-1995),HTML經歷了多次修訂並經歷了許多擴展,主要是在歐洲核子研究中心首先託管,然後是
IETF。
隨著W3C的創建,HTML的發展再次改變了場地。 1995年第一次嘗試在HTML 3.0中擴展HTML,然後在1997年完成了一種稱為HTML 3.2的更實用的方法。同一年晚些時候,HTML 4.01很快就出現了。
第二年,W3C成員決定停止發展HTML,而是開始研究基於XML的等價物,稱為XHTML。這項工作始於XML中的HTML 4.01重新編寫,稱為XHTML 1.0,除了新的序列化之外沒有添加任何新功能,並且在2000年完成。在XHTML 1.0之後,W3C的重點轉向使其他工作組更容易在XHTML模組化的旗幟下擴展XHTML。與此同時,W3C還開發了一種與早期HTML和XHTML語言不兼容的新語言,稱之為XHTML 2.0。
大約在1998年停止HTML演變的時候,瀏覽器供應商開發的HTML部分API被命名並以DOM Level 1(1998年)和DOM Level 2 Core和DOM Level 2 HTML(從2000年開始)發布。最終於2003年)。這些努力隨後逐漸消失,2004年發布了一些DOM Level 3規範,但工作組在所有3級草案完成之前就已關閉。
2003年,作為下一代Web表單定位的技術XForms的出版引發了對HTML本身發展的新興趣,而不是尋找它的替代品。這種興趣來自於認識到XML作為Web技術的部署僅限於全新技術(如RSS和後來的Atom),而不是替代現有的已部署技術(如HTML)。
一個概念證明,可以擴展HTML 4.01的表單,提供XForms 1.0引入的許多功能,而不需要瀏覽器實現與現有HTML網頁不兼容的渲染引擎,這是第一個結果。重新興趣。在早期階段,雖然草案已經公開發布,並且已經從所有來源徵求意見,但該規範僅受Opera Software的著作權保護。
在2004年的W3C研討會上測試了HTML應該重新開放的想法,其中提出了HTML工作的一些原則(如下所述),以及上述早期草案提案,僅涉及與表單相關的功能,由Mozilla和Opera聯合推出的W3C。該提案被駁回,理由是該提案與之前選擇的網路發展方向相衝突; W3C的工作人員和成員投票決定繼續開發基於XML的替代品。
此後不久,Apple,Mozilla和Opera聯合宣布他們打算在一個名為WHATWG的新場地的保護下繼續努力。創建了一個公共郵件列表,草案已移至WHATWG站點。隨後將著作權修改為由所有三個供應商共同擁有,並允許重複使用該規範。
WHATWG基於幾個核心原則,特別是技術需要向後兼容,規範和實現需要匹配,即使這意味著更改規範而不是實現,並且規範需要足夠詳細,實現可以實現完整的互操作性,無需相互逆向工程。後一要求特別要求HTML規範的範圍包括先前在三個單獨的文檔中指定的內容:HTML 4.01,XHTML 1.1和DOM Level 2 HTML。它還意味著包含比以前被認為是標準更多的細節。
2006年,W3C表示有興趣參與HTML 5.0的開發,並於2007年組建了一個工作組,專門與WHATWG合作開發HTML規範。 Apple,Mozilla和Opera允許W3C在W3C著作權下發布規範,同時保留WHATWG網站上限制較少的許可版本。多年來,兩個小組在同一編輯下共同工作:Ian Hickson。在2011年,小組得出的結論是,他們有不同的目標:W3C希望為HTML 5.0推薦的功能劃清界限,而WHATWG希望繼續致力於HTML的生活標準,不斷維護規範和添加新功能。 2012年中期,W3C推出了一個新的編輯團隊,負責創建HTML 5.0推薦標準,並為下一個HTML版本準備工作草案。
新特性
HTML5將Web帶入一個成熟的套用平台,在這個平台上,視頻、音頻、圖像、動畫以及與設備的互動都進行了規範。
智慧型表單
表單是實現用戶與頁面後台互動主要組成部分,HTML5在表單的設計上功能更加強大。input類型和屬性的多樣性大大地增強了HTML可表達的表單形式,再加上新增加的一些表單標籤,使得原本需要JavaScript來實現的控制項,可以直接使用HTML5的表單來實現;一些如內容提示、焦點處理、數據驗證等功能,也可以通過THML5的智慧型表單屬性標籤來完成。
圖2 HTML5 繪圖畫布
HTML5的canvas元素可以實現畫布功能,該元素通過自帶的API結合使用JavaScript腳本語言在網頁上繪製圖形和處理,擁有實現繪製線條、弧線以及矩形,用樣式和顏色填充區域,書寫樣式化文本,以及添加圖像的方法,且使用JavaScript可以控制其每一個像素。HTML5的canvas元素使得瀏覽器無需Flash或Silverlight等外掛程式就能直接顯示圖形或動畫圖像。
多媒體
HTML5最大特色之一就是支持音頻視頻,在通過增加了<audio>、<video>兩個標籤來實現對多媒體中的音頻、視頻使用的支持,只要在Web網頁中嵌入這兩個標籤,而無需第三方外掛程式(如Flash)就可以實現音視頻的播放功能。HTML5對音頻、視頻檔案的支持使得瀏覽器擺脫了對外掛程式的依賴,加快了頁面的載入速度,擴展了網際網路多媒體技術的發展空間。
地理定位
現今行動網路備受青睞,用戶對實時定位的套用越來,要求也越來越高。HTML5通過引入Geolocation的API可以通過GPS或網路信息實現用戶的定位功能,定位更加準確、靈活。通過HTML5進行定位,除了可以定位自己的位置,還可以在他人對你開放信息的情況下獲得他人的定位信息。
數據存儲
HTML5較之傳統的數據存儲有自已的存儲方式,允許在客戶端實現較大規模的數據存儲。為了滿足不同的需求,HTML5支持DOM Storage和Web SQL Database 兩種存儲機制。其中,DOM Storage 適用於具有key/value對的基本本地存儲;而WebSQLDatabase是適用於關係型資料庫的存儲方式,開發者可以使用SQL語法對這些數據進行查詢、插入等操作。
多執行緒
HTML5利用Web Worker將Web應用程式從原來的單執行緒業界中解放出來,通過創建一個Web Worker對象就可以實現多執行緒操作。
JavaScript創建的Web程式處理事務都是在單執行緒中執行,回響時間較長,而當JavaScript過於複雜時,還有可能出現死鎖的局面。HTML5新增加了一個WebWorkerAPI,用戶可以創建多個在後台的執行緒,將耗費較長時間的處理交給後台面不影響用戶界面和回響速度,這些處理不會因用戶互動而運行中斷。使用後台執行緒不能訪問頁面和視窗對象,但後台執行緒可以和貞面之間進行數據互動。子執行緒與子執行緒之間的數據互動,大致步驟如下:①先創建傳送數據的子執行緒;②執行子執行緒任務,把要傳遞的數據傳送給主執行緒;③在主執行緒接受到子執行緒傳遞迴的訊息時創建接收數據的子執行緒,然後把傳送數據的子執行緒中返回的訊息傳遞給接收數據的子執行緒;④執行接收數據子執行緒中的代碼。
新元素
自1999年以後HTML 4.01 已經改變了很多,今天,在HTML 4.01中的幾個已經被廢棄,這些元素在HTML5中已經被刪除或重新定義。
為了更好地處理今天的網際網路套用,HTML5添加了很多新元素及功能,比如: 圖形的繪製,多媒體內容,更好的頁面結構,更好的形式 處理,和幾個api拖放元素,定位,包括網頁 應用程式快取,存儲,網路工作者,等。
canvas
標籤
| 描述
|
---|
<canvas>
| 標籤定義圖形,比如圖表和其他圖像。該標籤基於 JavaScript 的繪圖 API
|
多媒體
標籤
| 描述
|
---|
<audio>
| 定義音頻內容
|
<video>
| 定義視頻(video 或者 movie)
|
<source>
| 定義多媒體資源 <video> 和 <audio>
|
<embed>
| 定義嵌入的內容,比如外掛程式。
|
<track>
| 為諸如 <video> 和 <audio> 元素之類的媒介規定外部文本軌道。
|
表單
標籤
| 描述
|
---|
<datalist>
| 定義選項列表。請與 input 元素配合使用該元素,來定義 input 可能的值。
|
<keygen>
| 規定用於表單的密鑰對生成器欄位。
|
<output>
| 定義不同類型的輸出,比如腳本的輸出。
|
語義和結構
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>
| 規定在文本中的何處適合添加換行符。
|
已移除元素
以下的 HTML 4.01 元素在HTML5中已經被刪除:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
優缺點
優點
新一代網路標準能夠讓程式通過Web瀏覽器,消費者從而能夠從包括個人電腦、筆記本電腦、智慧型手機或平板電腦在內的任意終端訪問相同的程式和基於雲端的信息。HTML5允許程式通過Web瀏覽器運行,並且將視頻等目前需要外掛程式和其它平台才能使用的多媒體內容也納入其中,這將使瀏覽器成為一種通用的平台,用戶通過瀏覽器就能完成任務。此外,消費者還可以訪問以遠程方式存儲在“雲”中的各種內容,不受位置和設備的限制。
缺點
(1)開放性帶來的困擾
在從前網路平台上存在大量的專利產品,想要實現HTML5技術的大量套用首先就需要將這些專利性的產品變為開放式的產品,由於各種原因,當前面對這一問題還存在許多爭議。以視頻格式為例,兩大陣營對於視頻格式的設定存在爭議,一大陣營以蘋果為代表,另一大陣營則以Opera、火狐、谷歌為代表。WPEG陣營是蘋果所屬陣營,由於其自身全部使用的是這一種格式,所以堅持認為應當將此格式作為標準,而WebM陣營則認為由於WPEG格式的專利依然沒有解除,對於HTML5技術要求的開放性沒有達標,所以不同意將其作為標準格式。
(2)發展的速度有待提升
在HTML5中提出了一些從前HTML技術中不具有的新技術,但是有許多主流瀏覽器在長時間的發展過程中已經完成了此種技術的開發,在自身瀏覽器中實現了此種功能,就這一情況來說HTML5的發展速度方面存在一定的問題。同時由於HTML5的不成熟,當前關於HTML5的相關技術標準還沒有完全確定,所以在短時間想要將其投入大規模套用還比較困難。
(3)技術手段的不完善
由於HTML5技術中存在較為先進的本地存儲技術,所以其能做到降低應用程式的相應時問為用戶帶來更便捷的體驗。
技術要點
以下將對HTML5的技術要點進行介紹:
重要標記
<video>標記
定義和用法:
</video> 標籤定義視頻,比如電影片段或其他
視頻流。
<audio> 標記
定義和用法
</audio> 標籤定義聲音,比如音樂或其他
音頻流。
實例:
一段簡單的HTML5 音頻
<audio src="">
您的瀏覽器不支持 audio 標籤。
</audio>
<canvas> 標記
定義和用法:
<canvas> 標籤定義圖形,比如圖表和其他圖像。
HTML5 的 canvas 元素使用JavaScript 在網頁上繪製圖像。
畫布是一個矩形區域,您可以控制其每一像素。
canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。
實例:
通過 canvas 元素來顯示一個紅色的矩形:
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
程式接口
2. 定時媒體回放
3. 離線資料庫存儲
5. 拖拽控制
6. 瀏覽歷史管理
元素變化
新的解析順序新的元素:section, video, progress, nav, meter, time, aside, canvasinput
元素的新屬性:日期和時間,email, url。
新的通用屬性:ping, charset, async
全域屬性:id, tabindex, repeat。
移除元素:center, font, strike。
標籤變化
註:在下面表格中4:指在HTML 4.01 中定義了該元素 5:指在HTML 5 中定義了該元素
標籤
| 描述
| |
---|
<!--...-->
| 定義注釋
| 4
| 5
|
| 定義文檔類型
| 4
| 5
|
<a>
| 定義超連結
| 4
| 5
|
<abbr>
| 定義縮寫
| 4
| 5
|
| HTML 5 中不支持
| 4
| |
<address>
| 定義地址元素
| 4
| 5
|
<applet>
| 定義 applet(HTML 5 中不支持)
| 4
| |
<area>
| 定義圖像映射中的區域
| 4
| 5
|
<article>
| 定義 article
| | 5
|
<aside>
| 定義頁面內容之外的內容
| | 5
|
<audio>
| 定義聲音內容
| | 5
|
<b>
| 定義粗體文本
| 4
| 5
|
<base>
| 定義頁面中所有連結的基準URL
| 4
| 5
|
| HTML 5 中不支持,請使用CSS 代替
| 4
| |
<bdo>
| 定義文本顯示的方向
| 4
| 5
|
<big>
| 定義大號文本(HTML 5 中不支持)
| 4
| |
<blockquote>
| 定義長的引用
| 4
| 5
|
<body>
| 定義 body 元素
| 4
| 5
|
<br>
| 插入換行符
| 4
| 5
|
<button>
| 定義按鈕
| 4
| 5
|
<canvas>
| 定義圖形
| | 5
|
<caption>
| 定義表格標題
| 4
| 5
|
<center>
| 定義居中的文本(HTML 5 中不支持)
| 4
| |
<cite>
| 定義引用
| 4
| 5
|
<code>
| 定義計算機代碼文本
| 4
| 5
|
<col>
| 定義表格列的屬性
| 4
| 5
|
<colgroup>
| 定義表格列的分組
| 4
| 5
|
<command>
| 定義命令按鈕
| | 5
|
<datalist>
| 定義下拉列表
| | 5
|
<dd>
| 定義定義的描述
| 4
| 5
|
<del>
| 定義刪除文本
| 4
| 5
|
<details>
| 定義元素的細節
| | 5
|
<dfn>
| 定義定義項目
| 4
| 5
|
<dir>
| 定義目錄列表(HTML 5 中不支持)
| 4
| |
<div>
| 定義文檔中的一個部分
| 4
| 5
|
<dl>
| 定義定義列表
| 4
| 5
|
<dt>
| 定義定義的項目
| 4
| 5
|
<em>
| 定義強調文本
| 4
| 5
|
<embed>
| 定義外部互動內容或外掛程式
| | 5
|
<fieldset>
| 定義 fieldset
| 4
| 5
|
<figcaption>
| 定義 figure 元素的標題
| | 5
|
<figure>
| 定義媒介內容的分組,以及它們的標題
| | 5
|
<font>
| HTML 5 中不支持
| 4
| |
<footer>
| 定義 section 或 page 的頁腳
| | 5
|
<form>
| 定義表單
| 4
| 5
|
<frame>
| 定義子視窗(框架)(HTML 5 中不支持)
| 4
| |
<frameset>
| 定義框架的集(HTML 5 中不支持)
| 4
| |
<h1> to <h6>
| 定義標題1 到標題6
| 4
| 5
|
<head>
| 定義關於文檔的信息
| 4
| 5
|
<header>
| 定義 section 或 page 的頁眉
| | 5
|
<hgroup>
| 定義有關文檔中的 section 的信息
| 4
| 5
|
<html>
| 定義 html 文檔
| 4
| 5
|
<i>
| 定義斜體文本
| 4
| 5
|
<iframe>
| 定義行內的子視窗(框架)
| 4
| 5
|
<img>
| 定義圖像
| 4
| 5
|
<input>
| 定義輸入域
| 4
| 5
|
<ins>
| 定義插入文本
| 4
| 5
|
<keygen>
| 定義生成密鑰
| | 5
|
<isindex>
| 定義單行的輸入域(HTML 5 中不支持)
| 4
| |
<kbd>
| 定義鍵盤文本
| 4
| 5
|
<label>
| 定義表單控制項的標註
| 4
| 5
|
<legend>
| 定義 fieldset 中的標題
| 4
| 5
|
<li>
| 定義列表的項目
| 4
| 5
|
<link>
| 定義資源引用
| 4
| 5
|
<map>
| 定義圖像映射
| 4
| 5
|
<mark>
| 定義有記號的文本
| 4
| 5
|
<menu>
| 定義選單列表
| 4
| 5
|
<meta>
| 定義元信息
| 4
| 5
|
<meter>
| 定義預定義範圍內的度量
| | 5
|
<nav>
| 定義導航連結
| | 5
|
<noframes>
| 定義 noframe 部分(HTML 5 中不支持)
| 4
| |
<noscript>
| 定義 noscript 部分
| 4
| 5
|
<object>
| 定義嵌入對象
| 4
| 5
|
<ol>
| 定義有序列表
| 4
| 5
|
<optgroup>
| 定義選項組
| 4
| 5
|
<option>
| 定義下拉列表中的選項
| 4
| 5
|
<output>
| 定義輸出的一些類型
| | 5
|
<p>
| 定義段落
| 4
| 5
|
<param>
| 為對象定義參數
| 4
| 5
|
<pre>
| 定義預格式化文本
| 4
| 5
|
<progress>
| 定義任何類型的任務的進度
| | 5
|
<q>
| 定義短的引用
| 4
| 5
|
<rp>
| 定義若瀏覽器不支持 ruby 元素顯示的內容
| | 5
|
<rt>
| 定義 ruby 注釋的解釋
| | 5
|
<ruby>
| 定義 ruby 注釋
| | 5
|
<s>
| 定義加刪除線的文本(HTML 5 中不支持)
| 4
| |
<samp>
| 定義樣本計算機代碼
| 4
| 5
|
<script>
| 定義腳本
| 4
| 5
|
<section>
| 定義 section
| | 5
|
<select>
| 定義可選列表
| 4
| 5
|
<small>
| 定義小號文本
| 4
| 5
|
<source>
| 定義媒介源
| 4
| 5
|
<span>
| 定義文檔中的 section
| 4
| 5
|
<strike>
| 定義加刪除線的文本(HTML 5 中不支持)
| 4
| |
<strong>
| 定義強調文本
| 4
| 5
|
<style>
| 定義樣式定義
| 4
| 5
|
<sub>
| 定義下標文本
| 4
| 5
|
<summary>
| 定義 details 元素的標題
| | 5
|
<sup>
| 定義上標文本
| 4
| 5
|
標籤
| 描述
| 4:指在HTML 4.01 中定義了該元素 5:指在HTML 5 中定義了該元素
|
---|
<table>
| 定義表格
| 4
| 5
|
<tbody>
| 定義表格的主體
| 4
| 5
|
<td>
| 定義表格單元
| 4
| 5
|
<textarea>
| 定義 textarea
| 4
| 5
|
<tfoot>
| 定義表格的腳註
| 4
| 5
|
<th>
| 定義表頭
| 4
| 5
|
<thead>
| 定義表頭
| 4
| 5
|
<time>
| 定義日期/時間
| | 5
|
<title>
| 定義文檔的標題
| 4
| 5
|
<tr>
| 定義表格行
| 4
| 5
|
<tt>
| 定義打字機文本
| 4
| 5 |
<u>
| 定義下劃線文本(HTML 5 中不支持)
| 4
| |
<ul>
| 定義無序列表
| 4
| 5
|
<var>
| 定義變數
| 4
| 5
|
<video>
| 定義視頻
| | 5
|
<xmp>
| 定義預格式文本(HTML 5 中不支持)
| 4
| |
HTML 5標籤擁有屬性。在每個標籤的參考頁中可以找到相應的特殊屬性。這裡列出的屬性是通用於每個標籤的核心屬性和語言屬性(有個別例外)。
HTML 5標籤中的新屬性有:contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template
HTML 5 中不再支持的屬性:accesskey
事件屬性
HTML 5 元素可擁有事件屬性,這些屬性在瀏覽器中觸發行為,比如當用戶單擊一個HTML 5元素時啟動一段 JavaScript。下面列出的事件屬性,可以把它們插入 HTML 標籤來定義事件行為。
HTML 5 中的新事件屬性:onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。
HTML 5不再支持的 HTML 4.01 屬性:onreset。
異常處理
HTML 5(text/html)瀏覽器將在錯誤語法的處理上更加靈活。HTML 5在設計時保證舊的瀏覽器能夠安全的忽略掉新的HTML 5代碼。與HTML 4.01相比,HTML 5給出了解析的詳細規則,力圖讓不同的瀏覽器即使在發生語法錯誤時也能返回相同的結果。
發展趨勢
隨著計算機技術不斷發展,可以看到HTML5在未來的幾年內的發展將會是一個井噴式的增長。HTML5技術在未來幾年內發展將會以以下幾個形式表現:
1)HTML5技術的移動端方向。HTML5技術在未來主要發展的市場還是在移動端網際網路領域,現階段移動瀏覽器有套用體驗不佳、網頁標準不統一的劣勢,這兩個方面是移動端網頁發展的障礙,而HTML5技術能夠解決這兩個問題,並且將劣勢轉化為優勢,整體推動整個移動端網頁方面的發展;
2)Web核心標準提升。目前移動端網頁核心大多採用Web核心,相信在未來幾年內隨著智慧型端逐漸普及,HTML5在Web核心方面套用將會得到極大的凸顯;
3)提升Web操作體驗。隨著硬體能力的提升、WebGL標準化的普及以及手機頁游的逐漸成熟,手機頁游向3D化發展是大勢所趨;
4)網路行銷遊戲化發展。通過一些遊戲化、場景化以及跨屏互動等環節,不僅增加用戶遊戲體驗,還能夠滿足廣告主大部分的行銷需求,在推銷產品的過程中,讓用戶體驗遊戲的樂趣;
5)移動視頻、線上直播。HTML5將會改變視頻數據的傳輸方式,讓視頻播放更加流暢,與此同時,視頻還能夠與網頁相結合,讓用戶看視頻如看圖片一樣輕鬆。