木桶原理□□很适用于◉网站设计，一个网站◥的好坏取□□决于网站✦服务器、网站程序、页面设计、HTML代码、网站内容、维护，这六大部□□分相当于△围成一个□□□木桶的六□□块木板，决定网站□□□□性能的不□□是最长的□□那块木板，而是最短□□的那块，因为，如果网站□□□服务器或□□□□宽带连通□□□性不好，再好的网□□站放在那□□里也是打□□不开；而如果网□□□□站程序很□□□糟糕，让页面执□□□行5秒以上才□□□□显示页面，这也让用▲户无法忍□□□受 ；而网站页□□面设计的□□□不好或者□□网站无有□□价值的内□□容，就算用户□□看了你的□□□□网站，也会选择□□立即离开； 而HTML代码决定◎了网站最□□□□终传递给□□□用户的页◈面浏览效□□果，如果做不□□□□好，则会前功□□□尽弃。所以，OETY欧亿□□□提醒大家□□□不要让HTML代码成为□□□网站设计□□□中的短板。


影响HTML代码的元□□□素无外乎HTML、CSS、JS，所以需要□□从这三方□□□面着手，只要这些□□都做好了，页面代码□□就会成为□□□□网站设计□□中的长板。做好这些□□□需要注意□□以下几点：

注意页面代码的执行顺序
HTML页面是从□□□上到下执□□□□行的，注意到这✦一点，让网站主•要的内容❖优先显示□□出来，而其他的□□□□广告、流量统计□□□□代码等则□□放在最后。

网站整体布局
很多人，尤其是初●学者大量•使用Table标签，原因可能♦是对其他□□□□标签不熟□□悉或使用□□其他标签□□□□不能做到□□很好的浏❖览器兼容◣性，可是，有没有发□□□□觉，一个Table所使用的□□□□代码不但□□□□比较多、加载比较□□□慢、不易控制✦而且修改□□□维护难，所以尽量□□使用DIV来构架整●体布局。

HTML标签的选用
标签是HTML的基本元□□□素，OETY欧亿□□呼吁用最□□□适合的标◈签表达相◆应的内容，如网站的□□□□名称用H1标签，列表用UL或OL标签等， 很多人对DIV+CSS布局存在□□□误解，认为DIV+CSS布局的网□□□□站不能用Table，其实上面□□□□所说的是★整体布局，如果内容◆是表格，当然用Table比较好。

样式都应放在单独的CSS文件里
当HTML代码和样□□式都混在□□□一起的时□□候，对网站的□□修改维护□□会带来非✦常大的麻★烦，而把样式□□□放在单独□□□□的CSS文件里调□□□用，可以提高△样式的重□□用性、让HTML代码非常□□□清晰有条△理，而且CSS文件是有□□缓存的，打开第二□□个页面就▽不用重新♦下载，可以提高□□□页面打开○速度。

Javascript代码应尽量放在页面底部
同CSS文件一样，JS文件也最□□好放在单□□□□独的文件♦里调用。因为HTML页面是顺□□□序解析，中间加载JS代码，会导致页□□□面加载的□□速度变慢，如果没有◎必要，最好把JS代码放在□□□页面底部，尤其是流□□□□量统计代□□□□码、在线客服□□□代码、分享代码♦等。

尽量合并CSS和JS文件
页面引用▽一个CSS文件或JS文件需要□□建立一个□□请求，而请求越□□多，页面加载□□□□越慢，所以，尽量减少□□□□页面请求□□□数量，合并页面□□□的CSS文件和JS文件可以□□□□加快页面□□□□加载速度。

压缩CSS和JS文件
网上有很□□□多相应的CSS文件和JS文件压缩▼工具，主要是去□□掉其中的☆空格和换○行，可以减少□□□□文件的大□□□□小，从而减少□□□宽带流量，加快页面□□显示。

图片大小声明
如果图片□□大小不做•定义，则页面需□□□要重新渲★染，会影响页•面加载速□□□□度，所以给页□□□面的每个□□□□图片加上□□大小吧。

注意浏览器兼容性
现在国内□□□□使用的浏▲览器主要□□是IE系列（IE6、IE7、IE8、IE9）和FireFor浏览器，当网站代♦码写完后，应尽量测□□□试多个浏▲览器，如果发现□□□不兼容，可以采用CSS HACK手段使其◢兼容，一般只要□□写法规范，注意一些□□□特殊标签▼的使用，都会兼容。

用JS加载需要点击或者过段时间才显示的内容
很多情况▲下，如图片切□□换，几张大图，如果页面□□□打开时就□□□加载，速度会大□□□打折扣，而如果开□□□□始只加载●第一张，然后等其◉他元素都□□□加载完后◆才加载其□□他图片，则可以让□□页面打开◣速度增快□□□□很多。

使用图片ALT属性
搜索引擎□□□只识别文♦字，不能识别◇图片，不过能识□□别图片标▽签的ALT属性，为了让页□□□面对搜索□□引擎更友□□□好，给每个图▽片加上ALT属性说明□□□吧。

不要忘记Keywords和Description属性
这两个标□□□□签虽然对丨页面浏览□□□□无影响，但是对搜✦索引擎很□□□□重要，跟前面图◣片的alt属性一样，都是为了□□□□让网站对□□搜索引擎□□□更友好。


综上所述，理解HTML代码的加♦载顺序，用最简短◈的代码让□□页面最快□□□□的打开，而且完美□□□□运行在各▲种浏览器□□□□上，HTML代码书写□□就不会成□□□为网站设□□□□计中短板。