本文作为小白入门级，相对基础，是写给现在想了解一点前端知识的设计师同行们。文章把前端相关的术语都用设计师熟悉的东西解释一遍（比如<body>比喻成画布），通俗易懂幽默风趣，绝对是小白入门的好教程！
前言还是要一点的：很多人一听前端两个字，就以为是写网页的，其实前端包括很多，不仅仅是标签加样式那些东西。如果按10级来评的话，不知道你们想象的那些东西有没有占两成，
今天把以前的一些东西整理出来，给需要的人。作为web转行做设计师的人，我会尽量用设计师能理解的角度来讲，如有不足及错误请指正但勿喷。
一、使用工具
工具的话，DW我想大家是最熟悉的吧，对设计师来说光看图标就觉得亲切有木有？
二、初识html
后缀为“.html”的文件即为网页的文件格式，默认为使用浏览器打开。有时候会遇到诸如“.htm”之类的格式其实也是差不多的。就像jpg也有jpeg的叫法一样。
这段代码是必不可少的，不同版本的DW可能会有些不同，但是作用是一样的，相当于在新建一个PS文档的时候，至少有一个图层。这些代码规定了一些浏览器读取所需要的规范，为你写入内容奠定了基础。
想要显示的内容都装在<body></body>标签内，它就是html画布，在画布以外放置东西，可能会看不见，也可能出错。
实战案例演示
你习惯了在PS里移动鼠标？那现在要换个方式了，把你想要DW做的事情变成一行行命令。
<div></div>
<div style="width:200px; height:200px; background-color:#c93; "></div>
style="width:200px; height:200px; background-color:#c93; "
如果没有这一句，那就像在白色画布上画了一个白色的矩形，你将会看不到你的盒子。
上图中的小孩如果我们要用html标记语言来描述的话，大概是这个样子：<人 style=”年龄：10岁; 肤色:黄色; 性别:男；”></人>，当然，不可能酱紫写啦，标签及标签属性是不允许有中文的。
所以，得到如下样式书写规范，多练习画几个盒子吧（可以尝试更改宽高及背景颜色）：
如果你是个乖孩纸，做了上面的练习，多画了几个盒子，你会发现，所有的盒子不管右边空格有多宽，新的盒子总是另起一行。你只规定了大小，并没有告诉盒子要“站”在哪里。
1）靠左而且会占与其自身高度一样的空间（前提是你已经规定了宽高，否则为0）
好啦，到最后看看能不能不看示例自己敲出来吧。内容不多只是为了入门，之后会不间断更新争取讲多一点。
有一种方法叫用文本文档写html，但是宝宝不想跟你们说，怕误人子弟。哈哈……
下一篇讲“征服霸道div，用矩形模仿网页布局”，宝宝看看有没有人给赞！呜呜……几千字也不是好敲的。
