通俗易懂！写给设计师看的前端基础知识科普

前言

随着互联网的不断发展，设计师和开发人员之间的界限越来越模糊。在过去，设计师只需要关注设计方面的工作，而开发人员只需要关注编程方面的工作。但现在，设计师需要具备一定的开发知识，以便更好地与开发人员合作，共同完成项目。接下来讲一些基础知识拆分为车架/外壳/动力系统进行讲解，希望通过具象化的策略帮助各位同行理解前端知识。

更多前端知识：

想让设计落地效果更好？5分钟帮你掌握前端基础知识！

编者按：设计师应该学习哪些前端基础知识，才能和工程师顺畅沟通？

阅读文章 >

一、设计师理解开发知识的难点

设计师可能不熟悉开发中使用的技术术语和概念，例如编程语言、技术框架、数据库等。这些术语和概念对于开发人员来说非常熟悉，但对于设计师来说可能比较陌生，需要花费一定的时间和精力去理解。

设计师可能对于某些技术实现的复杂性感到困惑或者无从下手。例如，设计师可能不了解如何使用代码实现某个功能，或者不知道如何集成不同的技术框架。这些问题需要通过学习和实践来逐步解决。

设计师可能无法理解开发人员使用的术语和技术，而开发人员可能难以理解设计师的想法和需求。在这种情况下，需要通过积极的沟通和协作来解决问题。

很多时候无法理解某些技术在实际应用中的优缺点，以及如何解决实际问题。在这种情况下，需要通过实践和学习来积累经验，并且与开发人员保持合作，共同解决问题。在实际工作中，设计师需要不断学习和掌握开发知识，以便更好地与开发人员协作，完成项目的开发和实现。同时，设计师也需要保持开放的心态和积极的态度，不断学习和探索，提高自己的专业素养和实践能力。

二、基础认知

常见的 WEB 端的基础开发分为 HTML，CSS 以及 JavaScript：

HTML：方便对网页的结构进行调整，这里具象化为车架还有底盘。
CSS：需要了解网页样式，例如：字体大小，颜色等等。这里具象为车。
JavaScript 基础：UI 设计师需要了解 JavaScript 的基本语法和常用 API，以便在设计过程中实现一些简单的交互效果和动画效果。这里比喻为发动机和传动系统。

三、车架+底盘

HTML 是 HyperText Markup Language（超文本标记语言）的缩写，是一种用于创建网页的标准标记语言。HTML 使用一系列标记（tag）来描述网页中的各种元素，例如文本、图像、链接、表格等等，通过浏览器解析这些标记，最终呈现出整个网页的样式和内容。HTML 标记通常由一对尖括号（< >）和一个标记名组成，名通常表示标记的类型，例如表示一个 HTML 文档的开始，表示文档的头部，表示文档的主体部分。

除了标记名之外，标记还可以包含一些属性，用于描述标记的一些特性和属性。例如，标记用于插入图像，可以包含 src（图像的 URL）、alt（图像的说明文字）等属性。HTML 标记语言非常强大和灵活，可以通过各种标记和属性来实现各种不同的功能和效果，例如创建表格、列表、链接、表单等等。同时，HTML 也是一门相对容易学习的编程语言，可以为初学者提供一个良好的入门门槛，帮助他们了解网页开发的基础知识和技能。

三、车身

CSS 是 Cascading Style Sheets（层叠样式表）的缩写，是一种用于描述网页样式的语言。CSS 可以为 HTML 文档中的各种元素（包括文本、图像、背景等）定义不同的样式和布局，从而改变它们在浏览器中的外观和行为。CSS 中的样式通常由一对花括号（{ }）和一些属性-值对组成，例如：

plaintextCopy code
h1 { color: red; font-size: 24px; }

这个样式表示将所有的 h1 标题颜色设为红色，字体大小为 24 像素。其中，color 和 font-size 是样式属性，red 和 24px 则是对应属性的值。这些属性和值的组合可以控制元素的字体、颜色、边框、内边距、外边距、定位等等方面的样式。CSS 还支持选择器的使用，可以根据元素的标签名、类名、ID 等属性来选择特定的元素，并对其应用样式。例如：

plaintextCopy code
p { color: blue; }

这个样式表示将所有的 p 段落文字颜色设为蓝色。而如果想仅对 class 为 content 的元素应用样式，可以这样写：

plaintextCopy code
.content { font-size: 16px; }

CSS 的强大和灵活性使得它成为现代网页设计中不可或缺的一部分。通过 CSS，设计师和开发人员可以轻松地控制网页中各个元素的外观和行为，从而实现丰富多样的视觉效果和交互特性。

除了基础的样式，还有栅格系统和开发的布局方式。

四、常规的网页布局

1. 盒模型布局：

基于盒模型的布局方式，即将网页上的每个元素看作一个盒子，通过设置盒子的宽、高、内边距、外边距、边框等属性，来控制元素在网页上的布局。

2. 浮动布局：

通过设置元素的浮动属性，使元素脱离文档流，从而实现多列布局等效果。

3. 定位布局：

通过设置元素的定位属性，来控制元素在网页上的位置，常用的有相对定位、绝对定位和固定定位等。

4. 弹性布局：

基于 CSS3 弹性盒子布局模型，通过设置元素的弹性属性，来实现网页的自适应布局。

5. 网格布局：

基于 CSS3 网格布局模型，通过设置网格列数和行数，以及各个网格元素的位置和大小，来实现网页的复杂布局效果。

五、栅格栏

前端中的栅格布局可以通过使用 CSS 框架来实现，比如 Bootstrap、Foundation 等。这些框架都提供了栅格系统的封装，使得开发者可以通过简单的 HTML 和 CSS 代码，实现网页的栅格布局。以 Bootstrap 为例，它的栅格系统基于一个 12 列的网格布局，可以通过在 HTML 中使用<div>

元素和一些预定义的类来创建栅格布局。具体实现步骤如下：

在 HTML 文件中引入 Bootstrap 的 CSS 和 JS 文件。
在 HTML 文件中使用<div>元素创建需要的栅格布局，将每一行分成 12 列。
根据需要，可以在<div>元素中嵌套其他元素，实现更复杂的布局。

通俗易懂！写给设计师看的前端基础知识科普

在这个例子中，我们使用了.container 来创建一个容器，.row 来表示一行，.col-6 和.col-3 来表示每个列的宽度。.col-6 表示该列占据 6 个网格，即栅格系统的 1/2 宽度，.col-3 表示该列占据 3 个网格，即栅格系统的 1/4 宽度。

根据需要，可以在<div>元素中嵌套其他元素，实现更复杂的布局。

通俗易懂！写给设计师看的前端基础知识科普

在这个例子中，我们在.col-6 元素中嵌套了一个.card 元素和一个.alert 元素，实现了一个简单的栅格布局。通过使用 Bootstrap 的栅格系统，开发者可以快速实现网页的栅格布局，提高开发效率。

六、发动机和传动系统

JavaScript 是一种基于对象和事件驱动的脚本语言，用于在网页中添加动态和交互性。它是一种解释型语言，可以直接在浏览器中运行，而不需要编译成机器码。JavaScript 可以用于处理网页中的各种事件和数据，例如鼠标点击、表单提交、页面加载等等，从而实现动态效果和交互特性。JavaScript 最初是由 Netscape 公司开发的，最初被称为 LiveScript，后来改名为 JavaScript。现在，JavaScript 已经成为 Web 前端开发的核心语言之一，被广泛用于网页交互、动态效果、数据处理等方面。JavaScript 是一种灵活、易学、易用的语言，它支持面向对象的编程风格，同时也支持函数式编程风格。JavaScript 可以与 HTML 和 CSS 无缝集成，通过 DOM（文档对象模型）和 BOM（浏览器对象模型）等 API，可以访问和操作网页中的各种元素和属性。JavaScript 还有很多优秀的框架和库，例如 jQuery、React、Vue.js 等，可以帮助开发人员更加高效地完成各种任务。同时，JavaScript 也在不断发展和改进，例如 ES6 和之后的版本，引入了许多新的语法和特性，使得 JavaScript 更加强大和易用。

其中动画是一个比较难实现的点。

七、动画

动画实现方案有以下

使用 CSS3 动画：CSS3 提供了丰富的动画效果，通过设置 animation 属性和关键帧，可以实现复杂的动画效果。在 JavaScript 中，可以通过操作 CSS 样式来控制 CSS3 动画的播放。
使用 JavaScript 定时器：JavaScript 提供了 setInterval()和 setTimeout()两个定时器函数，可以通过这两个函数来控制动画的播放。例如，可以使用 setInterval()函数来定时更新元素的位置从而实现动画效果。
使用 JavaScript 动画库：JavaScript 动画库如 GreenSock、Velocity.js 等提供了丰富的 API 和动画效果，可以帮助我们更方便地实现动画效果。