木桶原理很适用于网站设计,一个网站的好坏取决于网站服务器、网站程序、页面设计、HTML代码、网站内容、维护,这六大部分相当于围成一个木桶的六块木板,决定网站性能的不是最长的那块木板,而是最短的那块,因为,如果网站服务器或宽带连通性不好,再好的网站放在那里也是打不开;而如果网站程序很糟糕,让页面执行5秒以上才显示页面,这也让用户无法忍受 ;而网站页面设计的不好或者网站无有价值的内容,就算用户看了你的网站,也会选择立即离开; 而HTML代码决定了网站最终传递给用户的页面浏览效果,如果做不好,则会前功尽弃。所以,方维网络提醒大家不要让HTML代码成为网站设计中的短板。
影响HTML代码的元素无外乎HTML、CSS、JS,所以需要从这三方面着手,只要这些都做好了,页面代码就会成为网站设计中的长板。做好这些需要注意以下几点:
注意页面代码的执行顺序
HTML页面是从上到下执行的,注意到这一点,让网站主要的内容优先显示出来,而其他的广告、流量统计代码等则放在最后。
网站整体布局
很多人,尤其是初学者大量使用Table标签,原因可能是对其他标签不熟悉或使用其他标签不能做到很好的浏览器兼容性,可是,有没有发觉,一个Table所使用的代码不但比较多、加载比较慢、不易控制而且修改维护难,所以尽量使用DIV来构架整体布局。
HTML标签的选用
标签是HTML的基本元素,方维网络呼吁用最适合的标签表达相应的内容,如网站的名称用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代码书写就不会成为网站设计中短板。
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/1646.html