【经验技巧】HTML与设计师的那些事

本文将围绕web前端技术与设计的相通点进行讨论，旨在帮助设计师快速理解和使用HTML

写在前面

在某个时间段里，我对HTML这个东西非常着迷，感觉像发现了新大陆。

对设计师来说，这可以算是新大陆，毕竟不是同一个领域上的知识，一个代码编织的世界。在日常项目开发中，特别是在项目后期进行视觉实现的检查，监督产品视觉的实现质量时，HTML是一个非常实用的工具。

下面内容，是我请教了前端大神，并结合了我个人的理解，希望通过设计的交流方式给大家分享一下我的心得。

技术互相渗透，不求甚解，如有错误，请指正。

（本内容只是设计师在日常项目中使用的比较多的部分，并不涵盖HTML的所有内容。）

--------------------------------------------------------------------

大纲：

1、设计师如何快速理解HTML

2、初步认识开发者工具

3、Elements（元素）

4、Styles（样式）

--------------------------------------------------------------------

一、设计师如何快速理解HTML

网上的解释是：html，全称Hypertext Markup Language，也就是“超文本链接标示语言”。HTML文本是由 HTML命令组成的描述性文本，HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。

从设计的角度看，我们并不会接触到太多功能，只是把常用的部分，提炼出与设计相通的关键词，方便理解。

把相应的关键词置入到对应的模块，就得到了下面的样子

初步看来，HTML并不是很复杂，跟设计差不多，完全在设计上的射程范围之内。

二、初步认识开发者工具

页面布局样式与整体功能划分。

选择按钮：激活选择按钮之后，可以在网页上选择和查看元素，鼠标经过元素时气泡中会显示元素的属性和尺寸；

视窗切换：切换不同终端视窗，查看页面在不同终端的预览效果；

菜单栏：开发者 工具 的主要内容；

更多：可以切换开发者工具的布局样式，共有四种，分别是上下窗口、左侧窗口、底部窗口和右侧窗口；

关闭：关闭开发者工具面板

我们重点关注的内容是 Elements（元素）和 Styles（样式）。

不要误以为这是两个独立的板块，实际上Styles是附加在Elements上的，就像图层样式是附在图层上，不是两个独立的个体；

右侧的正方形色块是Styles（样式）中的其中一种，主要是控制元素与元素之间的距离。

三、Elements（元素）

元素区域是最基础、最重要的部分，所有页面上展示出来的内容都是基于此板块，与设计中的画布和图层的关系完全一致。

我们可以忽略代码的意思和写法，只要理解它的结构即可。

1、元素的基本结构