前言
對於XAML或者HTML來講, 他們本質上都是作為一種標記語言, 它們都是主要用於描述程序用戶界面而存在。這樣說來, 只要我們對某種標記語言熟悉, 那么學習其他類似的標記語言, 無非就是表達形式和語法的差異。
為了搞清楚這點, 我們需要做的就是捋清楚WPF當中的聲明方式方法, 然后類推找到HTML中相同的實現方法, 以及HTML當中新的一些概念。
總結WPF
那么下面將總結一下WPF的核心特征, 當然這並不包括所有內容, 如下所示:
- .XAML文件名結尾
- XAML文件中可以聲明命名空間
- 各類常用的布局容器, 如: Grid、StackPanel、WrapPanel、DockPanel等
- 樣式Style, 可以設置條件觸發器、修改控件外觀、
- 控件模板和數據模板的支持, 靈活的修改控件外觀以及數據呈現外觀
- 動畫支持, 包含普通類型的動畫以及高級幀動畫的支持
了解了這一點之后, 再來討論HTML+CSS該如何學習, 很顯然會思路就會比較清晰, 那么可以歸納一下幾點:
1.我們需要掌握HTML CSS的聲明的方式, 了解HTML的文件結構
2.掌握不同類型的布局容器使用方法
3.了解HTML中如何聲明不同類型的控件元素
4.了解HTML中如何修改元素的外觀, 可能就需要了解CSS
5.了解HTML中使用什么方法可以自定義元素的外觀、數據呈現方式
6.了解HTML如何創建動畫, 創建復雜類型的動畫
注意: 這並不是意味着, 我在WPF當中存在的概念, 一定在HTML可以找得到, 也可能沒有, 因為WPF中XAML也只是界面的表達部分, 其中的數據綁定、MVVM、
動畫等支持也是WPF框架中集成的功能, 所以我們也不必糾結HTML中是否存在這些概念, 重點的是找出它們兩者的差異, 輕松掌握它。
學習HTML+CSS
那么既然有了一個初步的學習歸納, 我們可以分為幾個步驟來學習這些內容, 所以作為軟件工程師, 我們既要學習和解決問題的能力, 還需要探索總結的精神。
當大家看到這個文章的時候, 其實我和你們是一個起點, 那么下面將總結該系列的學習路線和方法:
第一步:
- 了解HTML的文件結構和聲明方法
- 掌握HTML中核心的布局方法
第二步:
- 掌握如何定義各種外觀樣式, 例如: 文本顏色, 背景顏色, 邊距, 對齊方式,
- 實現常見的UI界面布局以及樣式, 加強HTML的各種語法熟練度
- 實現復雜功能: 模板？動畫？
第三步:
- 創建一個靜態站點, 可以直接瀏覽器打開, 實現各種復雜的效果, 各種跳轉切換。
最后:
而我之所以學習HTML這部分, 主要是考慮到使用Blazor框架的需求, 當然大家也可以學習不同類型的框架, 例如: ng vue ..等？
總結
這個系列會連載, 所以后面會基於這個步驟完成整個學習流程的經驗總結。