Part One 可视化部分——Perceived and cognition

一、Visiual Perception

1、Constany:恒常性

2、相对值——感知系统基于相对判断，而非绝对判断

3、双目感知——真实世界

单目感知（Monocular Cue）—— 电脑屏幕（缺少三维信息）

4、Seeing Is Not Beliving

二、Cognition

1、conceptual interpretation affects memory

2、we rely on prior

三、Gestalt Theory(格式塔理论)

1、起源

2、内容

四、Color

1、人眼可以感受到的光谱范围为400nm~700nm

2、主要的色彩系统

RGB加色，CMYK、 RYB减色

【1】RGB Color Space

【2】HSL Color Space

【3】Lab Color Space

2、选色工具

ColorBrewer   网址

 

Part Two HTML & CSS 

 

一、背景

1、编译语言 & 标记语言

2、HTML & CSS & JavaScript

二、环境配置

1、开发环境

【1】Node.js：能够在服务器端运行JS；跨平台的JS运行环境；https://nodejs.org/zh-cn/

【2】NPM：Node.js自带的包管理工具；更换淘宝源；npm config set registry —— http://registry.npm.taobao.org/

2、编辑器推荐

【1】VS Code：小巧清爽；适用于各种语言的代码编辑；免费

【2】Webstorm：重量IDE（集成开发环境）；功能强大；集成对应语言的各类插件

三、HTML入门

1、HTML简介

• HTML : Hyper Text Markup Language (超文本标记语言)
• HTML 不是一种编程语言，而是一种标记语言 (markup 
language)
• 标记语言是一套标记标签 (markup tag)，用来描述网页

超文本：
•超越文本限制：可以加入图片、声音、动画、多媒体等内容
•超级链接文本：可以从一个文件跳转到另一个文件，与世界各地
主机的文件连接

2、HTML结构

3、HTML入门

【1】HTML标签

  HTML标签分为两种等级：块级元素 和 行内元素

    块级元素：独占一行，不能与其他任何元素并列；能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%；

                 如<div></div>、 <p></p>

    行内元素：与其他行内元素并排；不能设置宽高，默认的宽度就是文字的宽度；如：<a></a> 、<b></b>、<span></span>

【2】SVG简介

三、CSS入门

1、CSS简述

2、CSS选择器

3、CSS引入方式和样式覆盖

4、CSS样式属性