本文将围绕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、元素的基本结构
：头部和底部各一个标签，表示网页内容的开始和结束；
与
两组标签，相当于PS中的空白图层，没有内容信息；标签才是网页内容的主题部分。那空白图层为什么不删掉，留着不碍事吗？
这个并不是多余的部分，这是HTML的基本格式，要遵循它的规则，代码才能正常运转，所以必须有。
2、网页内容的主体部分
在
标签内，包含着页面显示出来所有内容，里面包含着许多鼠标在代码上面经过时，左侧网页元素会出现对应的高亮状态，每一行代码都会与网页元素一一对应。
这与设计上的“图层”和“画布”的关系相同。
四、Styles（样式）
Styles（样式），可以简单概括为“效果”
每一个或一组元素，Styles面板都会显示相应的效果代码。
就像在PS里，既可以给图层添加图层样式，也可以给分组添加，每个元素都可以拥有它独立的样式效果。
上图左侧为样式效果（图层样式），右侧为盒子模型（Box model）；
红色英文部分的意思分别是：颜色、行高、字号、底部外边距、空白。
盒子模型（Box model）主要是解释元素尺寸和间隔的概念。
设计上可以通过栅格来规范内容布局排版，而前端开发则需要借助“盒子模型”来制定元素尺寸和间隔的概念。
从核心至外层氛围四格部分：元素（Element）、内边距（Padding）、边框（Border）、外边距（Margin）。
元素（Element）：指最基础的元素如，文字、icon或图片本身的外边界尺寸；
内边距（Padding）：指元素的外边界到其他子元素之间的间距；
边框（Border）：指围绕在元素周围的路径；
外边距（Margin）：指元素的外边界到相邻元素之间的间距。
通常情况下，边框与元素是重叠在一起的，也就是元素会填充整个边框，只会显示元素、内边框和外边框三种颜色。如下图显示。
总结
我们将一个前端的知识，通过拆分、转化，用设计角度去学习分析，其实发现HTML也并不是想象中的难（如果不是让我写），只要找到一个比较合适的切入点去学习，就能快速的理解一个全新的知识。
希望以上内容能在项目开发中提供一点帮助。
以上。
5
作品
1
粉丝
23
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册