Lesson 15
Web UI
Browser
是什么？
UI
机制
HTML + CSS + JS -> Browser -> Native API 跨平台的界面描述文件 App Mac / Windows
名词
| JS | JavaScript |
|---|---|
| JSON | JavaScript Object Notation |
| CSS | Cascading Style Sheets |
HTML
preview
1 <button>点我啊</button>
语法
html 语法 是跟 xml 类似的
跨平台
html 应该是跨平台的
| .class | JVM | System |
|---|---|---|
| .html | Browser | System |
跨平台好不好，全看 browser 好不好
demo
1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> Hi, ZZAX</body></html>
基本结构
<1 2 3 4 5 6 <l><head> ... 描述，基本上不会影响显示</head><body> 界面上希望看到的东西</body>ml>
body 中的重要的一些 标签
p, h1, h2, h3, h4, h5, h6 -> label div -> view / pane
分工
html 负责 数据 和 基本结构
css 负责 美化 和 动画
js 负责 功能 与 事件响应
CSS
文件链接
link ...
基本语法
File =
<RuleGroup>*
RuleGroup =
<Selector> {
<Rule>*
}
Rule =
<Attribute>: <Value>;
