一.代码优化概述
关于代码优化的知识是纯理论的知识，学习的很枯燥。在学到CSS时，不免遇到CSS+div进行代码优化的知识，因此在网上看了一些关于这方面的知识，简单的整合一下，梳理自己所了解的代码优化问题。所谓代码优化是指对程序代码进行等价（指不改变程序的运行结果）变换。程序代码可以是中间代码，也可以是目标代码。等价的含义是使得变换后的代码运行结果与变换前代码运行结果相同。优化的含义是最终生成的目标代码短（运行时间更短、占用空间更小），时空效率优化。原则上，优化可以在编译的各个阶段进行，但最主要的一类是对中间代码进行优化，这类优化不依赖于具体的计算机。简单地说，就是在不改变程序运行效果的前提下，对被编译的程序进行等价变换，使之能生成更加高效的目标代码。
二.那么对于我们学习Web前端开发的网页制作来说有哪些要求呢？
(1)尽量采用div+css布局您的页面，div+css布局的好处是让搜索引擎爬虫能够更顺利的、更快的、更友好的爬完您的页面；div+css布局还可以大量缩减网页大小，提高浏览的速度，使得代码更简洁、流畅、更容易放置更多内容。
(2)尽量缩减您的页面大小，因为搜索引擎爬虫每次爬行您的站点时，存储数据的容量有限，一般建议100KB以下，越小越好，但不能小于5KB。网页大小减少还有一个好处，能够促使您的站点形成巨大的内部链接网。
(3)尽量少用无用的图片和flash。内容索引所派出的搜索引擎爬虫，不认识图片，只能根据图片“ALT,TITLE”等属性的内容判断图片的内容。对于flash搜索引擎爬虫更是视而不见。
(4)尽量满足w3c标准，网页代码的编写满足W3C标准，能够提升网站和搜索引擎的友好度，因为搜索引擎收录标准，排名算法，都是在W3C标准的基础上开发的。
(5)尽量更深层次套用标签h1、h2、h3、h4、h5…..，让搜索引擎能够分辨清晰网页那一块很重要，那一块次之。
(6)尽量少用JS，JS代码全部用外部调用文件封装。搜索引擎不喜欢JS，影响网站的友好度指数。
(7)尽量不使用表格布局，因为搜索引擎对表格布局嵌套3层以内的内容懒的去抓取。搜索引擎爬虫有时候也是比较懒的，望各位一定要保持代码和内容在3层以内。
(8)尽量不让CSS分散在HTML标记里，尽量封装到外部调用文件。如果CSS出现在HTML标记里，搜索引擎爬虫就要分散注意力去关注这些对优化没有任何意义的东西，所以建议封装到专用CSS文件中。
(9)清理垃圾代码，要把代码编辑环境下敲击键盘上的空格键所产生的符号；把一些默认属性代码，不会影响显示的代码；注释语句如果对代码可读性没有太大影响，清理这些垃圾代码，会减少不少的空间。
一个网页是由多种语言组成的，最基础的是HTML，CSS和JS。那么代码优化对于这些的要求又是什么？
三.html优化
html代码是最为基础的网站制作语言，对于网站优化来说，html代码也有一定的影响，是特别需要注意的优化细节之一。
(1)title标签
title标签就是网页的标题，是一个对于网站优化有很大影响的html标签，每个页面都必须有且内容不同！基本格式为
网页标题。(2)META元素
meta元素在浏览器界面是无法看到的html标签，对于优化有影响的主要有两个，一个是关键字（keywords）、一个是描述（description）。其实，这两个标签随着seoer的胡乱使用，对于网站优化已经没有多少用处了，你完全可以不用设定，但我们还是习惯性的设置一下较为妥当。关键字，设定与本页内容相关的主关键词一到三个，之间用英文状态下的逗号分割。需要注意的是，不要再滥用关键字，除了给搜索引擎不好的印象外别无他用。描述还是很有用的一个东东了，虽然对于网站的优化排名么有多大的影响，但会作为搜索引擎展示网站索引的一个依据，可以把你的主关键字链接起来组合成一段通顺的话，一般60到80字即可。格式为:
(3)h标签
h标签在html代码中是“标题”的意思，就如一篇文章，标题是文章最为重要的一个对象，也是搜索引擎在排名时重点考虑的一个对象。html中的h标签一共有六个，分别是h1/h2/h3/h4/h5/h6，分别代表不同的级别，我们称之为一级标题、二级标题……当然，一级标题具备更多的权重。需要注意的是h标签是块级元素，默认是粗体显示，独占一行，前后会有空行。当然，你可以利用css来改变这些效果。
关于h标签的使用，需要根据实际情况来使用，不可任意滥用。如一篇文章，不可能出现多个一级标题，所以h1，在同一个页面中只能出现一次，而h2等则可以出现多次，根据你需要表现的内容的重要程度，分别使用不同的h标签即可。特别注意，h标签中最好出现关键字！还有就是，随其自然，万不可刻意地用h标签来处理某些关键字！
基本格式为：
(4)加强和强调
strong被认为是“加强”，em被认为是“强调”，也就是这两个标签是有特殊含义的，这对于网站优化至关重要。多数时候，我们在优化网站时会对关键字进行突出，这时使用strong或em就比使用B或者I好很多，特别谨记！
(5)alt和title
alt是图像中的注释，title是图像或链接的标题，这两者对于优化，尤其是图像的优化至关重要，但也不要滥用！
一般在插入图像时，我们在alt中设置图像的描述内容，其中可以包含关键字但不要故意堆砌，title则当作图像标题来处理。特别需要注意的是，这些内容是不可以重复的！也就是说，当你的页面中有多张图像，你不能每张图像的描述和标题都设置成一样的，这样很容易被搜索引擎惩罚！
除此之外，title属性在a标签中也有所使用，只是有些泛滥了，视觉效果也不好，影响用户体验，所以笔者并不推荐，除非你的a标签中的内容是一张图片。
(6)缩写abbr(目前我没有遇到过)
这个标签是自定义的一种缩写方式，可以利用它合理的添加一些关键字，同样不要滥用。如下所示：
公司的产品涉及石雕、铜雕、浮雕、镂雕等各种雕刻形式。
(7)canonical标签
Canonical(权威链接标记)是09年，Google，Yahoo及Microsoft三大搜索引擎联合推出了一个旨在减少重复内容的一个建议，并不是命令，也就是说这个标签搜索引擎可能不遵守。国内最大的中文搜索引擎百度也已经支持
Canonical标签。
部分搜索引擎引入了Link的一个新属性Canonical。A页面声明B为权威链接，B声明C为权威网页，则搜索引擎会认为C是A和B共同的首选权威版本。此时Canonical标签起到了301重定向的作用。只能作用于同一个域名所在的网址，不能作用于不同域名上的重复内容。也就是说如果文章被其它网站抄袭，也不会因为这个标签而给你的原文章带来权重。如果是跨站，可以使用301重定向。该链接标签可用于定义相对地址，也可用于定义绝对地址。但为了保险起见，建议使用绝对地址。
使用方法：为网页指定权威链接（authoritative|canonical URL），以解决副本内容（duplicate content）问题。
使用样式：
四.CSS优化
于网站排名优化来说，css的几乎没有任何影响，但往大的方向如网站优化来说，样式表css的优化就至关重要了，其主要作用即是提高网页的响应速度。
(1)外链css
css的使用有多种方式，一是嵌入式，即在html标签中直接定义样式表，如下所示:
Outside now its raining,and tears are falling from my yes…
还有一种是直接定义在页面头部的如下：<styletype="text/css">p{ background:#f1f1f1;color:#333;line-height:20px;} 这两种方式都是把css写在当前html中，这样会造成hml文档变大，降低网页的响应速度，所以我们需要外链css，将所有与本页面相关的样式写入到该样式表中：
(2)精简css
对于这一点需要一定的css能力才可以做到了。所谓精简，指的是用尽可能少的样式代码实现整个网页的样式效果，需要充分利用css的继承和综合使用，举一个简单的例子来说明。如页面中的链接，全部不需要下划线、大部分为12像素，但链接的颜色并不相同，个别的字体效果也不相同，我们就可以这样来写：
a{ text-decoration:none; font-size:12px;}/定义通用a样式/
a.a_red{ color:#e00;}
a.a_blue{ color:#009;}
a.a_menu{color:#fff;font-size:14px;font-weight:bold;}/针对特殊a标签只指定特殊样式/
因为css的继承作用，a_red和a_blue都具备没有下划线、12像素这一样式，而a_menu同样具备没有下划线，但因指定了大小，就不再继承12像素的指定而使用14像素。
(3)整合css
一般情况下，前端制作人员喜欢把通用样式写成一个文件，把专用样式写成另一个文件以便各个页面调用。如笔者，就喜欢把页面通用样式（包括通用的布局样式、文字样式等）写在common.css中，而把专用的写在另一个样式表中。如首页，我们就需要调用common.css和index.css两个样式表文件。这样做，对于前端来说是正确的。但对于优化，却不太好。多一个文件调用就需要多一次请求，当然也会多耗费一点时间。所以，在网站制作完成后，我们需要把页面的所有样式合并大一起以提高网页的响应速度！但需注意，合并css不利于网站后期整改，权衡利弊各取所需吧，具体是否合并还需根据你的实际情况而定。
(4)压缩css
压缩css其实很简单，就是去掉多余的空格和换行。实现起来也非常的简单，网上有很多工具，请自行搜索“css压缩”即可找到很多在线压缩工具。同上面一点，压缩后的css不便于后期整改，需要自己权衡取舍。
五.JavaScript优化编辑
javascript代码对于网站排名优化同样没有多大影响，但从网站优化的角度来看却是至关重要的一步优化操作，优良的javascript代码可以大幅度提升网页的响应速度！
(1)外链js代码
js代码跟css的使用差不多，都有三种方式：
内部定义：confirm
头部插入：
外链调用：
(2)精简js代码
这一点需要更为专业的js技术才能做到，尽可能根据需要实现的效果编写js，而不用从网上找一段代码直接拿来用，网上的代码很多功能很全，从而质量很大，而其中的很多功能对于我们要实现的效果是没有任何用处的，所以广拓企业网站建议你针对需要实现的效果定制js以便得到更为精简的代码，从而提高网页的响应速度。
(3)压缩js代码
对于这点，网上也有很多的工具，请百度查询“js压缩工具”即可。
(4)置底js代码
一般情况下，我们都是把js放到head之间的，这种方式在页面加载时即会加载，当然也就导致响应速度的降低，百度站长平台建议把js放到页面最底部，也就是