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

前言

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

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

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

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

二、基础认知

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

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

三、车架+底盘

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

除了标记名之外，标记还可以包含一些属性，用于描述标记的一些特性和属性。例如，标记用于插入图像，可以包含 src（图像的 URL）、alt（图像的说明文字）等属性。HTML 标记语言非常强大和灵活，可以通过各种标记和属性来实现各种不同的功能和效果，例如创建表格、列表、链接、表单等等。

三、车身

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

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

复制代码

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

1. plaintextCopy code
   
2. p { color: blue; }

复制代码

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

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

复制代码

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

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

四、常规的网页布局

1. 盒模型布局：

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

2. 浮动布局：

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

3. 定位布局：

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

4. 弹性布局：

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

5. 网格布局：

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

五、栅格栏

前端中的栅格布局可以通过使用 CSS 框架来实现，比如 Bootstrap、Foundation 等。这些框架都提供了栅格系统的封装，使得开发者可以通过简单的 HTML 和 CSS 代码，实现网页的栅格布局。 以 Bootstrap 为例，可以通过在 HTML 中使用<div>元素和一些预定义的类来创建栅格布局。具体实现步骤如下：

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

六、发动机和传动系统

JavaScript 是一种基于对象和事件驱动的脚本语言，用于在网页中添加动态和交互性。它是一种解释型语言，可以直接在浏览器中运行，而不需要编译成机器码。JavaScript 可以用于处理网页中的各种事件和数据，例如鼠标点击、表单提交、页面加载等等，从而实现动态效果和交互特性。JavaScript 最初是由 Netscape 公司开发的，最初被称为 LiveScript，后来改名为 JavaScript。现在，JavaScript 已经成为 Web 前端开发的核心语言之一，被广泛用于网页交互、动态效果、数据处理等方面。JavaScript 是一种灵活、易学、易用的语言，它支持面向对象的编程风格，同时也支持函数式编程风格。可以帮助开发人员更加高效地完成各种任务。

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