UI设计师需要会编程吗？快速入门HTML/CSS — (上)

有不少同学讨论过，在找工作时老是看见招聘信息要求懂代码，觉得是不是要懂代码才可以当UI设计师，为什么做设计还需要编程？

为了解决这个问题，我们就来分享一个有关设计师和 "编程" 的系列干货，用所有人能看懂的讲解方式，帮助大家掌握这门基础，再也不会被这类招聘要求难倒。

1.1 UI设计师和编程的关系

理论上来说，术业有专攻，现代团队只有分工明确才有生产效率。但为什么要求设计师也要懂 “编程” 呢？

简单概括就是代码的实现逻辑是制约UI设计的重要因素，掌握得越多，对于设计可用性的理解也就越深。就像建筑设计必须需要了解工程力学、产品设计必须了解材料学和生产工艺。

任何设计行业只懂画图的设计师注是定残缺的，莫得灵魂的，因为设计是建立在一系列限制下的视觉解决方案。

所以对于UI设计师来说，要求具备一定的 “编程” 能力，并不过分。但编程范围这么广，是不需要我们精通万国语言的，只需要掌握网页前端的基础即可，即 HTML 和 CSS。

简单来说，网页视觉样式的呈现和排版是通过这两种代码实现的。HTML是用来梳理网页内容类型的标记，而CSS是控制不同内容外观的脚本。

再深入解释，就是一个常规的网站，想要为用户提供正常的服务，就包含两个部分，客户端（前端）和服务器端（后端）。前端负责我们设备中呈现出来的网页样式、布局、交互内容，而后端则主要是远程服务器上对数据进行处理和传输。

常见的例子就是在网页中登录账号，需要通过前端展示的页面内容进行输入，信息会上传给服务器做验证，服务器再将验证结果返回给客户端然后进入下一步操作。

HTML 和 CSS 它们最大的特点，就是 —— 简单。严格意义上来讲，它们都不是 ”编程语言“，因为它们无法完成高级编程语言的条件运算、函数定义等处理。而在前端中，这部分任务是交给 Javascript 语言来完成的，那就是另外一个话题了。

所以设计师掌握 HTML 和 CSS 的入门基础，是非常容易的事情，且可以获得远超投入的收益：

•    具备前端开发思路，了解页面的实现过程

•    降低和程序员沟通的成本，提升协作效率

•    提高设计稿落地性，加快项目执行进程

下面，我们就更具体的介绍一下 HTML 和 CSS 的基础概念。

1.2 HTML的基本认识

HTML 也叫做超文本标记语言，是一种对内容进行结构化标记的工具。比如我们在一个 TXT 文档中，输入了下面两行文字：

•    超人的干货上新

•    关于HTML和CSS入门详解

对于我们来讲，这两段文字的身份分别是 ”标题“ 和 ”正文“，但对于电脑来说，它们都只是一系列文本而已。所以，我们需要赋予它们合法的 ”身份“，让电脑可以正确对待他们。

而 HTML 的标签，就是赋予它们对应身份的铭牌，在 HTML 下的展示就会是这样，<h1>内是标题，<p>内是正文：

•    <h1>超人的干货上新</h1>

•    <p>关于HTML和CSS入门详解</p>

这和我们日常写作、笔记时使用的 Markdown 逻辑是非常近似的，只是语法上有一定的区别，且 HTML 提供了更多的功能，包扩输入框、单选、多选、布局等类型的标签。

有了身份的标识，我们才可以使用 CSS 或者 JS 来对这些身份的人发号师令，这就是 HTML 最基本的作用。并且，HTML 还会通过标签的相互包含，来完成对内容层级结构的制定，我们会在后面具体展开讨论。

当然，HTML 代码需要在 HTML 文档中才能起作用，否则我们在 doc、txt 中写 HTML 代码和标签是没有意义的，这需要我们新建一个 txt 文件，将后缀改成 .html，来完成文档的创建。

之后，对它右键使用文本编辑器打开，就可以输入有关的代码内容了，比如：

•    <h1> Hello World！</h1>

输入完之后，再双击用浏览器打开这个文档，你就可以看见文字对应的显示效果了，这就是你的第一段代码，是不是特别容易？

1.3 CSS的基本认识

上面的案例中，Hello World 是一段黑色的标题，但我想修改它的大小、色彩、粗细、位置怎么办？

这就需要更改它对应的属性了，在最初，这种更改的只需要用 HTML 的功能就可以完成，但效率实在是太低了（后面也会说），于是，分离出了 CSS 作为专门控制样式的替代品。

对于 HTML 的每一个标签和元素，都包含一系列的属性和默认值，比如我们在 Sketch 中置入一个正方形，那么它肯定就会包含位置、长宽、色彩、描边、圆角等属性，我们可以通过在属性面板中对它们分别进行设置来实现样式的变更。

而 CSS 的实现原理，就是指定元素的属性并赋予对应值的过程。比如还是上面的案例，我想要将它的字色（font-color）改成红色，字号（font-size）改成50px，那么就可以添加这些内容：

•    font-color: red;

•    font-size: 50px;

学习 CSS，也就是学习在网页中，元素具体包含哪些属性，以及这些属性可以如何进行设置的方法上，将本来通过在软件中使用属性面板进行的操作对等到通过输入代码的方式完成。

1.4 学习的准备工作

了解了它们的基本概念，接下来，我们就要为具体的学习做准备工作了。对于 HTML CSS 来说，准备工作相当的简单，核心只有两件事：浏览器、编辑器。

HTML 文档本身并没有什么特别的，只是一个 HTML 后缀的文本文件而已，需要用浏览器打开才能显示出具体内容。比如把标题文本渲染成 40px 大小、黑色、加粗的效果。

而这个渲染过程，更准确的讲是由浏览器内核完成的，就像浏览器的操作系统，而市面上主流的浏览器有下面这三类：

•    Trident：微软 IE 为首使用的内核

•    Blink：谷歌 Chrome 使用的内核

•    Webkit：苹果 Safari 为首使用的内核

之所以提这个，原因是因为浏览器的内核拥有对前端代码的解释权，而不同的内核对相同的代码解释起来有差异。就像同一段英文，你用牛津英汉和朗文当代词库的翻译结果是不会完全一致的。而这就是前端工程师针对浏览器的适配工作之一。

作为设计师来说，我们不需要具体去研究它们差异的细节，意识到有这个问题即可。所以为了确保我们后续的演示和你们自己学习的顺畅，请确保使用 Chrome 浏览器进行学习。

接着就是代码编辑器了，代码编辑器就是一个专门用来写代码的工具，虽然我们可以用 Windows 自带的文本工具写 (MacOS 的文本编辑器比较特殊，具体见视频)，但那个写起来太不得劲了，没有对不同的代码元素进行区分，缺乏阅读感。

所以，根据我自己的使用经验，墙裂推荐一款非常适合设计师学习前端的软件 Brackets，它搭配 Chrome 浏览器可以实现代码所见即所得的功效。

http://brackets.io

声明一点，学习前端一定要记得远离 Adobe Dreamweaver (DW) 这个工具，因为它完全是个累赘，不仅软件体积大，使用起来卡顿，效果视图问题极多，最终会演变成从学习代码变成在学习软件。和很多设计师学做原型结果变成在学 Axure 的大量鸡肋功能一样效率低下。

2.1 HTML 的语法

2.1.1 HTML 标签

我们知道 HTML 的主要作用是标记元素的类型，这个标记的专业术语叫做 ”标签“（HTML TAG）。标签由三个概念组成，分别为标签名、尖括号、结束标签。

在上一篇中，我们做过的演示，标题和一段正文，是由 h1 和 p 两个标签组成。

结束标签是 HTML 中的重要内容，忘记添加结束标签会引发一系列问题。

2.1.2 HTML 属性

不同的标签，会包含一些特殊的 HTML 属性，这个属性和我们所说的 CSS 属性不完全相同，比如一个链接标签 <a>，如果我们只给出一个起始和结束标签是没意义的，还需要添加具体的网址进去，这样才有意义，于是我们会这么写：

属性的添加方法，就是在起始标签的名称后面添加 ——  属性名 = ”值“。

不同的标签类型包含的属性会有差异，比如一个 h1 标签就不能为它添加链接。但是，一个标签会包含多个属性，所以我们也可以在一个标签内添加好几个属性。

比如我们可以制定让上面的链接在新窗口中打开，那么我们可以添加一个新的属性和值进去：

感兴趣的同学可以在编辑器中进行操作看一看前后的效果。

2.1.3 HTML 层级

HTML 还有一个非常重要的语法特点，就是它非常注重标签的层级关系。一个起始标签和结束标签中除了普通文本以外，还可以在中间嵌套一些别的标签。

比如一个标题，它同时也是链接，那我们可以这么写：

也就是说，a 标签是包含在 h 标签下的子标签，而 h 是 a 的父标签。

当然这个例子很简单，在更复杂的情况下，一个内容卡片中包含了标题、副标题、正文、查看更多、点赞、分享，前三个元素是一个层级，后三个元素一个层级，那么它们就会写成这样：

div 是一个比较特殊的标签类型，我们可以把它先理解成一个编组，而上面这种代码的结构，就类似我们在设计软件中创建的图层编组树桩结构。

在 HTML 中，正确的层级结构是非常重要的概念，不仅包含实际画面的效果，也包含内容逻辑上的从属关系。而我们在输入代码过程中，通常会将对文本样式做编排，即将上级标签的中间添加一个换行符，并为下级标签添加一个 tab 缩进，实现更直观的层级结构。

掌握了这些内容，那么我们就基本知道 HTML 书写的方式了，可以学习下一步了。

2.2 HTML文档结构

设计过 UI 界面的同学应该都知道，每次开始界面具体内容设计前，我们要先做一些全局的谋划和置入官方组件元素，比如状态栏、首页指示器、底部导航栏、页边距等信息。

而我们创建一个标准的网页文件，也需要做对应的准备工作，那就是提前把页面的结构创建好。当然，这些结构就不是设计素材了，而是对应的页面标签。下面是一个常规 HTML 文档的标准结构：

2.2.1 <!DOCTYPE html>

这是一个特殊的标签，在 HTML 所有标签中，有一些标签是不需要结束标签的。比如这个，是一个标准网页文档声明。用来告诉浏览器，该文档是一个 “正经文档” 以防在一些特殊情况下被错误识别成其它类型的文件。

当然，大家可以不用纠结具体的细则，只要每次在文档顶部添加这段代码即可。

2.2.2 html 标签

HTML 标签则是一个顶级标签，所有 HTML 中出现的代码元素都会包含到这个标签内。

HTML 的标签从开始到结束传达给浏览器文档内 HTML 元素的起点和终点，是一个常规网页中必备的标签元素，不能忘记添加。

2.2.3 head 标签

head 标签是网页的头部标签，它并不是指网页样式中的头部，而是代码、文档的头部。

多数情况下，我们要添加一些不展示在具体页面内容中的全局信息时，就会添加到这个标签中来。比如后面要介绍的两个标签，以及调用外部的代码、文件、统计信息等。

2.2.4 meta 标签

meta 标签是一个用来声明当前 html 文档元信息的标签，例如页面的字符编码类型，页面的搜索引擎关键字。

meta 也是一个不需要结尾标签的特殊标签，因为它声明的方式是通过属性和值来完成的，比如：

这三行分别代表了：

1.声明页面使用 utf-8 的文字编码，没有这个声明的话中文可能乱码

2.声明了页面的搜索关键字信息超人、UI、设计，协助搜索引擎收录定向

3.声明了页面的简介信息，搜索结果页面中可以看见

meta 这个标签比较特殊，在我们学习中，只要声明第一条即可，其它可以暂时忽略。

2.2.5 Title 标签

Title 标签是一个用来声明页面标题的标签，作为浏览器页面选项卡上显示的页面标题。

2.2.6 body 标签

这是页面主体的标签，标签内包含的相关内容就是展示用户可见元素的区域。

我们要实现页面的视觉、交互、排版，就要在 body 标签内编辑。后续我们学习的 HTML 标签，就以包含在 body 中的标签为主。

2.3 文本类型标签

2.3.1 一般文本格式标签

首先我们从最基本的文本类标签开始学起，这是最没有理解成本的标签类型。我们把常见的文本标签罗列出来大家看一看：

<h1> - <h6>：1级标题-6级标题

<p>：表示一个正文的段落

<b> ：仅仅加粗文本字重，没别的意思

<strong>：加重文字权重和凸显，同时加粗

<i>：仅仅定义文字斜体，没别的意思

<em> ：定义需要注意的文字，同时倾斜

<del>：定义删除线文字

<br/>：换行符，类似word中的换行效果

这些标签作为身份标识的作用想必不用介绍了，通常只要了解一点，h1 标签内部一般不用再包含一些标识文本的内容，而对于 p 标签来说就可以往下级添加其它标签配合。

比如一段文案：“超人老师独家秘笈上线啦，只要98，不用998，赶紧来参加！”，我们可以写成这样：

通过这种方法，我们对一个段落内容的文本就可以做出不同的语义调整，“独家秘笈” 我们强调这个关键字的权重，“98” 仅仅只是加粗它，“998” 我们则用删除线抹掉。

2.3.2 列表标签

而在文本的段落类型里，还有一个重要的部分，就是列表。在正常我们打字编辑的时候，列表有两种，有序列表和无序列表，它们分别由 ul、ol 标签来标识。而仅仅定义一个列表是不够的，列表中还会包含对应的条目，所以它们中每个条目由 li 表示。

比如我们要创建一个 HTML CSS 课程的目录，作为一个有序列表（无序同理），它就可以这么写：

文本标签是比较直观的标签，它主要就是用来定义文本的使用类型，而只要大家稍微对 word 有一定的使用经验，就可以很快的理解。

2.4 链接/多媒体标签

链接我们上一节介绍过了，是 a 标签，可以通过 herf 属性制定线上网址或本地路径的方式进行跳转。而 a 标签内容的文字内容，则会变颜色以及多出下划线。

值得注意的是，链接是用来实现跳转功能的标签，而在我们的实际项目中，实现跳转的可不仅仅只有文字，还可能是整个段落，整个模块。

所以，使用这种效果的办法就是在这些内容的上级添加 a 标签，就可以实现超链接的跳转效果。

本小节介绍的第二个模块，是多媒体标签。多媒体内容就是一个页面中除了文字外的图片、音效、视频等内容，如下所示：

<img>：图像标签，用来显示位图的标签

<audio>：音频标签，可以嵌入一些类似mp3的音频文件进行播放

<video>：视频标签，可以嵌入类似avi、wmv、mp4等主流格式的视频

这三个标签中，图像标签比较特殊，因为它也是一个不需要添加结束标签的特殊标签。想要正确应用这三个标签，就需要了解一个重要的属性 —— src。

这是一个用来指定多媒体文件地址的属性，只输入 img 标签，浏览器虽然知道这里应该放张图片，但具体是什么图，它不能凭空脑补出来，所以，我们要用 src 属性来指定具体目标。

这里就牵扯到下一个重要的知识点，链接类型：绝对链接、相对链接。

绝对链接：比如链接到具体网址，比如 src=“supermancall.com/logo.png”

相对链接：相对当前HTML文档的位置，比如 src=“/img/logo.png”

绝对链接比较好理解，就是每张图片的一个固定门牌号地址。而相对链接则是对方基于你当前位置的方位。我们可以尝试创建一个 HTML，然后在这个文档同级目录创建一个 img 文件夹，然后在里面添加素材中的 logo，再输入下方的代码，你就可以看见 img 文件夹中的 logo 被正常显示在浏览器中：

所以，这就是切图的作用，把页面图片导出，然后通过代码对它进行调用。当然，文件的地址你可以根据根目录随意更改，每一个 “/” 就代表一级目录，如果 img 下方还创建了一个目录的话，那么 src 的值就应该是 img/chil/logo.png。

如果你想控制它们的大小，就可以通过 height、width 两个属性，比如下面代码：

而 audio 和 video 两个标签，使用 src 的方法相同，只是它们有结束标签，且规则相对来说更复杂，因为对我们来说用的不多，所以暂且跳过。

2.5 表单标签

表单标签 form，类似我们去银行填写申请信息的申请单，是收集用户选填的一系列数据的标签。

一个完整的 form 标签就是一张清单本身，但上面是空白的，所以，我们要在表单里指定一系列我们需要收集的条目，比如姓名、手机号、地址等信息。

而收集的条目和列表类似，也要由其它标签来完成：

<input>：一个标准的输入元素，类型由属性指定，可以输入文本、密码等

<textarea>：一个多行文本输入框

<select>：定一下拉选项列表

<button>：表单执行的按钮，类似注册或登录按钮

对于表单来说，最常用的就是 input 标签了，它也没有结束标签。用 type 属性可以来制定这个输入元素是哪种类型，比如下面的情况：

< input type="email">：指定邮箱输入框

< input type="password">：指定密码输入框

< input type="tel">：指定手机号输入框

< input type="date">：指定日期选择空间

< input type="button">：表单内应用的按钮

再用个完整的例子来解释，比如我们要注册一个账号，那么填写账号的表单，代码可以这么表示：

表单是一个对前端来说非常重要的标签类型，可用的标签其实远远不止展示的这些，对于我们而言，只要对这些基础标签有认识，了解整个表单的功能即可。

2.6 布局结构标签

最后一部分，我们要介绍的，就是专门用来进行内容布局和定义结构的标签，主要包含：

<div>：万能模块定义的标签， 用来组织不同的标签元素形成一个整体

<span>：行内内联元素，主要用来控制一些特殊的文本类型

<header>：页面的头部内容区域定义

<nav>：页面的导航栏区域定义

<article>：页面的正文内容区域定义

<aside>：页面的侧边栏内容区域定义

<footer>：页面的页脚内容区域定义

首先，介绍一下大名顶顶的 div，这是一个专门用来进行聚合内容的万能标签，类似 UI 设计软件中的 ”编组“ 功能，无论里面放了什么花里胡哨、乌七八糟的内容，都可以通过一个 div 标签将它们统一进行编组。

只要大家通过 chrome 随便打开一个网页，并通过右键 ”检查元素“ 查看它们代码的时候，就可以看到网页内容由大量的 div 元素叠加组成。

而 span 标签和 div 有点类似，但它并不定义大的模块，往往是在一段文本或者一系列复杂文字内容中，定义某些特殊的字符或段落。

而在往下的几个标签，header、nav、article、aside、footer 等，则是 HTML5 中更新的具有明确应用范围的 div，更强的语义化（更容易在代码中被开发者识别）。比如下面这种常见的网页框架：

而我们用比较标准的 HTML 代码来实现上方页面的话，就可以这么编写：

当然，为了省事，我们也可以直接将上方的所有标签都替换成 div 也是没问题的。div 是方便我们在整个页面代码中更好的规范内容的层级和从属关系，它们本身不能影响页面内容的样式，但方便我们在后续的开发过程中调整网页的模块位置和样式。

2.7 小结

了解完上面这些内容，那么你就基本掌握了 HTML 入门的基础知识了。

再回到起点，我们总结一下，HTML 就是通过标签，定义元素的身份，并通过标签叠加标签的形式，来建立父子层级的结构，和实际的页面设计层级相对应。

HTML 的学习只要背好并熟练应用这些标签即可，而不涉及到很复杂的编程概念，是不是非常的简单？如果需要进一步的查看和了解 HTML 的话，可以查看下方W3C的官方手册。

https://www.w3school.com.cn/tags/index.asp

---