前言
对于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 ..等？
总结
这个系列会连载, 所以后面会基于这个步骤完成整个学习流程的经验总结。