我们今天来继续有意思且能看得懂的代码。

上几篇有说到前端包含HTML、CSS、JS，其中HTML相当于矩形工具或者文字工具所做的一个简单图层(只有初始的模样)，而CSS就如图层样式、混合选项、滤镜等的增效操作，js类似PS中的动作、批处理等效率操作。 

一般静态的项目结构如下图，我们也会按照以下结构来分解。

HTML

一个最简单的HTML结构如下图：

它由一些必须的英文单词组成，有些你认识，不认识的多数是缩写。如上图，我们逐行来解释一下：

其他常用标签中闭合标签有:div、p、a、span、header、section、table、canvas、h1-h6、ul、li、footer等，篇幅限制不做具体解释了，可去w3school去细看。

以上标签中有块级元素「div、p、header、section、h1-h6」和行内元素「a、span、strong、i」等区分，块级元素各自独立占据一行，类似PS中图层面板中的图层，一般一行只能显示一个图层，而行内元素是在横排一行显示，类似PS图层面板中的图层加了蒙版，一行有多个元素。不过html中的行内元素和块级元素是可以互相转化。

块级元素

块级元素转化为行内元素

CSS

css不像html有基础代码，css可以是html中的一段代码，也可以是一个独立的css文件（如style.css）并且初始代码可以为空。上面html的例子中的绿色和黄色，以及宽高大小等都是由css去控制。

css的规则一个属性对应一个值，具体到写法规则由一下两种：

推荐的写法是第一种且引用独立css文件，js也是类似，提倡独立引用，如下图的html中引入：

css的属性和值写法的规则了解之后，我们可以来一个文字描述题，比如，设计师做了一个黑色背景，垂直左右居中一个单词“PS”，PS的字号是30px，白色。

那么接着上面的例子就可以在style.css文件中输入以下代码：

css的属性非常多，本篇不做深入，可去 css.doyoe.com 去看文档。

css目前已经发展到基本稳定的css3，拥有很多的新属性，为此也产生了很多效率工具，如sass、less、postcss等，让css有了逻辑和继承的用法，但同时也让css变得复杂了，为了方便理解我们按照css的写法讲解。

JavaScript

牛逼的技术都有小名，Photoshop的小名叫PS，javascript的小名叫js，小名更易传播。但JS比PS难很多了，首先就不是可视化界面，全英文，通常大家比较晕前端就是因为JS这个复杂的技术。

html和css的写法都很固定，但是js除了基本语法规则之外，最难的是逻辑和功能实现。这里我们以jquery库的方法来讲解，简单很多，虽然已经不那么流行了。有小伙伴问过jquery与js的关系，就如现在流行的vue或者react一样，他们都是基于js去实现的操作框架，定义了很多方法和功能，引入框架之后，除了基本的语法规则遵循js，其他都是按照框架定义的方法去书写代码了。

比如我们还看上例，现在需求是：点击PS之后，把PS修改成PhotoShop，其他样式不变。

上图简单解释一下：$(function(){     })是jquery的启动函数，为了保证良好的体验一般都会把执行代码放入其内部，比如这个点击事件“click”。

这个点击事件依次解释为先获取PS的外层元素“p”标签，然后执行点击事件click，function内部的即为点击之后要做的事，这里是修改文字为PhotoShop。

这里新增了一个关键字：事件。除了点击“click”事件，常见的事件有：移动鼠标“onmouseover”、移开鼠标“onmouseout”、浏览器已完成页面的加载“onload”、元素改变“onchange”，在js中使用的时候去掉对应事件的on即可。

更改页面文字也比较常见，如现在需要点击之后增加一串文件，原文字还保留。

本文介绍了一些基础的规则和代码，例子的代码编辑工具为sublime text 3，推荐大家体验代码的时候使用HBuilder（代码提示全且预览也方便），html的预览比较简单，直接点击或者拖放到浏览器里即可。因为设计师更关注的是页面显示和动效部分，所以下文会着重讲css3动画以及响应式布局等。

PS：本系列的前端开发部分快结束了，欢迎关注公众号「全栈设计邦」一起学习交流。