方建筑史对于网页设计的进化有重大参考意义。作为一种艺术形式，两者都遵循以下事实：

1. 它们是人们前往的地方。
2. 它们都承担着这件务实的工作。
3. 科技的演进在限制着工程技术。
4. 还有，它们至今绝对仍属于艺术范畴。

在这些限制条件下，两者的演化路径惊人相似，都建立在过去的基础上，以近似的方式产生影响。如果想知道网页设计将去向何方，可以看看建筑领域发展到了什么地步。

1. 新石器时代

简单、有限的结构

巨石阵，公元前3000-2000年；W3.org，1992年

除了稍微调整了尺寸和位置，它只是把东西摆在相应的地方。

2. 古典建筑

秩序与均衡，略带修饰

巴特农神庙，公元前437年；Yahoo.com，1996年

古典建筑时代精炼了对称与层级，采用了泾渭分明的区域划分，承担不同的用途。所用媒介（石头、像素）的外观也效仿先前的材质：石质的三竖线装饰象征着木质横梁，就像用3D按钮表现物理按键。

3. 罗马式建筑

更厚重的形式与更圆润的边缘

玛丽亚拉赫修道院，公元1093年；Apple.com，2000年

柔化边缘的同时，罗马式建筑时期也加厚了隔墙——菜单和按钮也一样——创造更庞大、厚重、易点击的形式。

4. 哥特式建筑

华丽、令人着迷

兰斯大教堂，公元1211年；Maroon5.com，2005年

CSS和FLash就是网页设计中的彩色玻璃。基本元素到位，我们就开始选用看似不可能的材料。哥特式建筑将石头变为反重力的壮举，令人屏息。虽然如今难以记得，那些早年的Flash和CSS网站，仅凭像素就使我们惊异不已。

没错，我将早期的Maroon 5网站与兰斯大教堂进行了对比。

5. 文艺复兴时期建筑

干净、精确、合乎逻辑

维琴察圆顶别墅，公元1567年；Rdio.com，2012年

这就是我们如今的阶段，近年来的“扁平式设计”趋势，与文艺复兴时期建筑惊人相似。文艺复兴建筑呼吁古典逻辑的回归。简单的几何学形式取代了华丽的复杂度。设计变得更干净。人们开始发表新准则的论述，一切都在变化。

接下来，我开始走进未来…

6. 巴洛克式建筑

扭曲一切准则

罗马圣卡罗教堂，公元1638年；未定义，2017年

合乎逻辑、保持精确的乐趣只持续了这么久。最终我们开始打破规则。在建筑设计中，这意味着真正打破部分古典元素，将他们扭曲成某种复杂的形式。与文艺复兴时期的理性主义相比，巴洛克式设计更富于情感和戏剧性。

我们在网页设计上会怎么做？这很难说。只要再等等，它几年内就会显现。

7. 新古典主义

Harkening back to the past

聆听过去

先贤祠（巴黎），公元1790年；未定义，2022年

一切周而复始。一旦获得足够的进展，我们会开始赞美最初的经典，全面复古。只要一定时间。新古典主义网页设计就在遥远的前方——虽然旧时代的Yahoo网站在我们看来很逊，并不庄严。但是6、7年后呢？它可能又很酷了。

8. 在那之后，谁知道呢？

我们大概知道了。它会类似于新罗马主义或是新哥特式的形式。总之是某些新形式。艺术会持续以复活重生的形式延续自身。最终呢？新的科技和新世界观会到来，我们如今是无法想象的。

然后一切开始变得神奇超然。

#专栏作家＃

可乐橙，微信公众号：可乐橙（colachangreen）。人人都是产品经理专栏作家，UI/UX设计师，关注互联网，关注科技。现居杭州，与小伙伴们正在创业途中。或许不是一名优秀的设计师，至少是个快乐的设计师。

转载请保留上述作者信息并附带本文链接

作者信息：Mike Sall

Product Science at @Medium

ypeScript 是 JavaScript 的一个超集，它添加了静态类型检查功能。这不仅可以提高开发效率，还能在编写代码阶段发现潜在错误，为大型项目或团队协作提供更强的规模化支持。本文将详细介绍 TypeScript 中的数据类型，包括基础类型、任意类型、联合类型、类型别名、枚举、数组、元组、高级类型及示例。

基础类型

布尔值

最基本的数据类型是简单的 true/false 值，它在 TypeScript 里叫做 boolean。

let isDone: boolean=false;

数字

与 JavaScript 一样，TypeScript 里的所有数字都是浮点数。这些数字的类型是 number。

let decimal: number=6;
let hex: number=0xf00d;
let binary: number=0b1010;
let octal: number=0o744;

字符串

另一种基础部分是字符串。如同 JavaScript，TypeScript 也使用双引号 (") 或单引号 (') 表示字符串。

let color: string="blue";
color='red';

数组

TypeScript 像 JavaScript 一样可以操作数组元素。有两种方式可以定义数组。第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：

let list: number[]=[1, 2, 3];

第二种方式是使用数组泛型，Array<元素类型>：

let list: Array<number>=[1, 2, 3];

元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

let x: [string, number];
x=["hello", 10];

枚举

enum 类型是对 JavaScript 标准数据类型的一个补充。使用枚举类型可以为一组数值赋予友好的名字。

enum Color {Red, Green, Blue}
let c: Color=Color.Green;

Any

有时候，我们会需要在编程阶段还不清楚类型的变量指定一个类型。这些值可能来自于动态的内容，比如来自用户输入或第三方库。这种情况下，我们可以使用 any 类型来标记这些变量。

let notSure: any=4;
notSure="maybe a string instead";
notSure=false; // okay, definitely a boolean

高级类型

联合类型

联合类型表示一个值可以是几种类型之一。用竖线（|）分隔每个类型，所以 number | string | boolean 表示一个值可以是 number，string，或 boolean。

let multiType: number | string | boolean;
multiType=20; // okay
multiType="hello"; // okay
multiType=false; // okay

字面量类型

你可以通过指定一个变量只能是几个字面量之一来缩小它的范围来进一步控制类型。

let literalType: "hello" | "world" | 42;
literalType="hello"; // okay
literalType=42; // okay
// literalType="anythingElse"; // Error: Type '"anythingElse"' is not assignable to type '"hello" | "world" | 42'.

类型别名

类型别名用来给一个类型起一个新名字。类型别名有时和接口很像，但是可以作用于原始值，联合类型，元组以及其它任何你需要手写的类型。

type StringOrNumber=string | number;

function processValue(value: StringOrNumber) {
    // ...
}

类型推论

TypeScript 会在没有明确的指定类型的时候推测出一个类型，即“类型推论”（Type Inference）。

let someValue="this is a string";
// `someValue` is inferred to be of type `string`

类型断言

有时你会遇到这样的情况，你会比 TypeScript 更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言像是其他语言里的类型转换，但是不进行特殊的数据检查和解构。

let someValue: any="this is a string";
let strLength: number=(someValue as string).length;

小结

在 TypeScript 的宏大世界中，了解不同的数据类型及其用法是构建强健和类型安全应用程序的基础。本文提供了基础类型和高级类型的详细描述及充足的示例，希望能够帮助您更好地理解和掌握 TypeScript 数据类型的使用。随着 TypeScript 带给我们的不断创新和改进，我们可以构建更加健壮和维护性更强的代码，最终提高我们软件开发的效率和质量。

绍

他们是由W3C推荐的前端三件套，并且互相之间可以很好地配合

• HTML:Hyper Text Markup Language超文本标记语言，|框架
• CSS:Cascading Style Sheets层叠样式表，Cascading Style Sheets显示样式
• JS:JavaScript脚本|监听时间，执行函数

学习

• W3C
• 菜鸟教程

常用软件，语言文件相关格式 .html文件/文件夹

HBuilder X

.html文件 格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 关于网页的一些属性 -->
		<!-- css样式 -->
	</head>
	<body>
		<!-- 主体内容 -->
	</body>
</html>

文件夹

刚学半年web，只是写个作业可以这么用吧(●’?’●)
前为名字，后为文件格式

项目名 文件夹
	images 文件夹
	css 文件夹
    	网站名1.css
    	...
    html 文件夹 也可以直接把每个网站卸载更外面一层
    	网站名1.thml
    	...

标签

html的内容由一个个标签 嵌套或并列 组成
标签用 <标签名>内容</标签名> 或者 <标签名/>

文字可以直接输入，标签只不过是用来控制他们的 位置和显示效果 的

通用的标签主要
前者较为普遍；后者教为特殊

结构相关

主要用来定一个区域来 划分更小的区域或者直接写入内容。
使用时用前者。

1. 通用的结构标签有div和span
2. div更普遍一些
3. span一般用在刚开始不需要显示的内容上，但可以被div替代

有许多特殊的标签，他们没有特别之处，只是特别拎出来以方便理解文件的整个结构
如

最后两个detail和summary通常是相互配合的。

上面这些都是有着特殊用处的标题，可以用下面的这些替代，但使用时相对复杂一些

内容相关

主要用来直接写入内容。
使用时前后使用方法的皆有
空行之前的表示重要
用前者的有

table te td th是相互配合组成一个表格的,table>tr>td

li必须在ol或ul内。通常用ul li

表单可以用作问卷等
input属性typr value

用后者的有

img video audio使用时需要更多的属性，比如URL路径等
以video为例：<video src="路径" autoplay="autoplay" controls="controls"/>
依次表示 URL路径 自动播放 显示播放器控件
他们有各自的属性
都必须有src属性以表示路径，img只需要src即可显示
各自可以在属性里选择width和height以显示宽度和高度（这两个在css 属性里介绍）
video和audio（他们有一样的可选属性）的其他可选属性在下面显示,一般一个只有一个可选择的值，那个值就是名字自己(言下之意就是，只写自己需要的属性)

preload的值
auto：默认值，直接加载 音频/视频
metadata：仅加载 音频/视频 元数据
none：不加载 音频/视频

class/id

用于标签的定义
class表示类，可以用于很多类似的标签，以方便使用一样的css样式
id是唯一的，可以为独特的标签单独使用样式

css样式

css一共有3段：选择器{属性:值;…}
样式有3种添加的方法

1. 直接在标签后面写，如<div style="具体样式">这时候选择器不需要写了
2. 写在head的style标签内<style>写如css</style>，可以在style同时写入多个不同的样式
3. 写在单独的css格式文件中，在head中添加<link href="文件路径" type="text/css" rel="stylesheet"/>引入css外部样式

选择器

子元素选择器

div>p
选中选中div中的p子元素（没有中间层的关系）

相邻兄弟选择器

div+p
选中跟在div后的p

不相邻兄弟选择器

div~p
选中前面有相同父元素的div 的p

属性选择器

| 属性选择器 | 介绍，有红字是因为|竖线在编辑器里是特殊字符，在代码块内才能正常显示 |
|–|–|
| [属性] | 具有该属性的 |
|[属性=某值]|属性=某值的|
|[属性~=某值]|属性=用空格分隔的字词列表，某值是其中一个值
|[属性|=某值]|属性=用|分隔的字词列表，某值是其中一个值
|[属性^=某值]|具有该属性，以 某值 开头
|[属性$=某值]|具有该属性，以 某值 结尾
|[属性*=某值]|具有该属性，包含 某值

伪类选择器

这类选择器全部按前面（一部分）选择器的介绍，紧跟在后面，以":"(冒号)为标识符（即以它开头，可以看成选择器的一部分）
以下均不写冒号

伪元素

用法：紧跟在后面，用两个":“作为标识符（也可以只用一个，但两个更好）。css样式里需包含content属性，值为带引号的字符（当然也可以什么都不写）
如：div:after{content=”";}

属性及含义

先讲一些主要的值

长度

用途：广泛
用法：有数字和单位组成：200px

当数字为0时，单位可有可无

使用频率：px最常用，其次em
单位有绝对和相对之分

时间

用途：属性transition(变化时间)
用法：数字+单位：200ms
使用频率：都常用

角度

用途：
用法：数字+单位：120deg
使用频率：第一个deg最常用

颜色

用途：color，background(-color)
用法：值
使用频率：2和-1最为常用，-1代表最后一个

字符串

只在属性font-family中用到，定义字体类型

{font-family="微软雅黑"}

也可以不用双引号

{font-family=微软雅黑}

属性概要

长度表示一栏：

1：值完全用长度表示，下面不再具体介绍
其他值的类型：值不能用长度表示，能用其他的较规范的表示表示
0：值不能用长度表示，也无法用其他规范的值表示
＞1：有多个值，都用长度表示（同时出现多个值：长度可变）

position 定位

display 显示

block，none，grid较为常用

grid和flex可以去网上找资料学习

grid布局

着重介绍一下grid布局
含义：可以方便地进行网格状的布局，而后可以随意组合，分配给子元素
有许多属性和它配合使用（前提：display:grid，至少与前3个一起使用，前4个可以更美观地表示）

flex布局

着重介绍一下flex布局
含义：可以方便地进行弹性布局，尤其是垂直对齐的问题
有许多属性和它配合使用（前提：display:flex）
| 属性 | 含义
|–|–|–|
|flex-direction| 决定主轴的方向
| justify-content | 子元素在主轴方向上的分布方式
| align-items | 子元素在副轴方向上的分布方式

inline-block布局

overflow 溢出处理

不设置这个属性，它可能会在区域之外显示

margin/border/padding 外边距/边框/内边距

分别代表 外边距/边框/内边距
他们都可以用4个长度值表示，分别代表 上右下左 的长度

也可以有auto值，即自动，它会使两边相等
如 margin:0 auto;
它的左右两边是相等的

后面的值可以省略，但至少有第一个值

第4个值（左）省略，则=第2个值（右）
第3个值（下）省略，则=第1个值（上）
第2个值（右）省略，则=第1个值（上）

他们的四个值可以单独设置，以margin为例子
margin-top，margin-right，margin-bottom，margin-left

float/text-align 浮动/左右对齐

clear 清除浮动

先清除上一个区域来的浮动（float），而后可以设置自己的浮动

background 背景

属性自由书写,其中的属性可以缺少一些或调换顺序

下面是两个较频繁使用的格式

• 背景色: background: background-color
• 背景图片: background: url(“”) background-repeat background-position;

有多个子属性

javascript

<script type="text/javascript">
	变量及赋值
	计算语句
	函数
	事件
</script>

一定有事件，因为没有事件，js就没有什么意义

变量

所有类型的变量 都用 var 变量名=值; 来定义

数据类型

赋值及计算语句

运算符

基本计算语句

事件

一个事件只能绑定一个函数，如果一个事件要做多件事情，都放到一个函数里
表达形式：(被触发)对象.事件属性=…

不只是a有事件属性，其他的标签都有事件属性
事件属性有很多，根据可以触发者（比如鼠标，键盘，窗口）的不同分类
只列举常用的
鼠标触发：onclick（点击），onmouseover（鼠标再其上，和选择器hover有点像，但有不同）
窗口触发（被触发对象必须是window）：onload（窗口完成后）

动态绑定
写在js样式里，被包含在其他的事件的函数中绑定
对象需要给出
参照函数的三种绑定方式
静态绑定
直接在标签里绑定，这时候对象就是自己这个标签
参照函数的第2种
比如 <p onclick="函数名(参数)">

函数(function)

函数里的组成与js的组成成分一致

• 变量及赋值
• 计算语句
• 函数
• 事件

函数定义的3种方式

1. function 函数名(参数){函数体}
2. var 函数名=function (参数){函数体}
3. function (){函数体}

参数可以有多个，定义时不需要声明类型，只需要参数名即可

第2种定义方式可以让定义在标签内的事件连结到这个函数

事件绑定

前两种定义方式

1. 无参：事件=函数名;

不需要 (参数)

2. 有参：事件=function(){ 函数名(参数); }

需要用到匿名函数
直接用 事件=函数名(参数); 的结果
是 直接触发事件

第3种定义方式一般直接赋给内部的事件，即 事件=function (){函数体}