Jerry 從 2014 年加入 SAP成都研究院 CRM Fiori 開發團隊之後開始接觸 SAP UI5，曾經在 SAP 社群和“汪子熙”微信公眾號上發表過多篇關於 SAP UI5 工作原理和原始碼解析的文章。

在 Jerry 這篇文章[對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？](https://blog.csdn.net/i042416/article/details/116347763) 曾經提到，Jerry 也是從 SAP UI5 菜鳥一路走過來，深知只有 ABAP 開發背景的開發者，向 SAP UI5 開發領域轉型的不易，因此我在業餘時間設計了這份適合 SAP UI5 初學者的學習教程，把開發一個完整的 SAP UI5 應用的流程，拆分成若干個步驟，力求每個步驟裡，把涉及到的知識點都涵蓋到。這些知識點可能不像我的 UI5 原始碼分析系列文章那麼深入，但力求淺顯易懂，便於 SAP UI5 初學者理解。

本教程每一個步驟的原始碼，都存放在我的 [Github](https://github.com/wangzixi-diablo/ui5-tutorial) 上，分別用資料夾 01，02，03 等等來標識。

![](https://img-blog.csdnimg.cn/img_convert/488cdb59964819dea0a23f918c5deca1.png)

每一個步驟均是前一步驟的基礎上，新增了若干新特性。建議零基礎或者對 SAP UI5 知之甚少的初學者，按照順序從第一個步驟開始循序漸進地學習，把這些程式碼下載到本地，配合教程的文字講解，自己動手，以加深理解。

大家如果對教程的每個步驟有任何疑問，歡迎在教程對應的步驟文章裡給我評論，進行留言。

SAP UI5 是一個用於開發企業級 Web 應用的前端框架，基於 HTML 和 JavaScript.

作為教程的第一步，我們需要了解最基礎的 HTML 知識。

請大家在電腦上任意新建一個資料夾，將其命名，比如我取的名稱為 Walkthrough. 進入 Walkthrough 資料夾，再新建一個資料夾名叫 01，代表本教程的第一個步驟。

進入 01 資料夾，新建一個 webapp 資料夾。這個名稱是 web 應用約定俗成所使用的，大家都傾向於用這個名稱，當然你要是想用其他名稱也沒有問題。

進入 webapp，新建一個 index.html 檔案，將下面的程式碼貼上進去:

```html

<div>Hello World</div>

```

儲存，使用 Chrome 瀏覽器開啟，就能看到如下頁面：

![](https://img-blog.csdnimg.cn/img_convert/afb7f751a2c9aab6f4dfecc486e2d6da.png)

那麼本教程的第一個步驟就成功完成了。

這個簡單的 HTML 頁面，有如下四個關鍵點：
![](https://img-blog.csdnimg.cn/img_convert/fd149caf613ac08532a8eb52cce584dd.png)

關於這些關鍵字的詳細介紹，請在我這篇文章裡繼續閱讀：[SAP UI5 初學者教程之一：Hello World](https://jerry.blog.csdn.net/article/details/120612455)

SAP UI5 初學者教程之一：Hello World 試讀版

相關文章