HTML页面设计需要注意的细节问题

细节的地方也会大大地影响性能
服务器君一共花费了2372.496 ms进行了6次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议
  1. 不能少了DOCTYPE,浏览器根据你申明的DOCTYPE决定页面渲染规则,如果不声明,不同的浏览器显示效果可能不一样。
  2. 在<title>之前加上<meta>标签说明页面所用的编码。否则可能导致部分浏览器显示的页面标题为乱码。
  3. <style>应该放在<head>标签内。否则会导致页面在下载完成之前不美观,而且在下载完<style>的内容以后浏览器还要对页面重新进行渲染,会影响用户体验。
  4. CSS中尽量避免使用表达式。否则在每次页面内容改变(比如javascript动态添加或删除元素,改变浏览器窗口大小)时,浏览器都会重新计算表达式的值。一种可以替代的方法是用javascript在window.onload中动态判断并确认样式。用户端的资源我们也应该珍惜。
  5. 在使用javascript改变页面元互的显示效果时,尽量用className属性更改。应该尽量避免用element.style.color = "#ff0000"之类的语句,尤其是在一次更改多次属性的时候。这样做有两个理由:方便维护和节约客户端资源。使用className改更的时候,页面只需要重新渲染一次,而且style属性更改时,每次都要重新渲染,这比开销是很大的。
  6. <script />标签应该紧靠在</body>标签之前。浏览器在下载<script>中的内容时,不会同时下载其它内容(图片、flash、<script>后面的html文档等),如果使用了较多的外部script文件,有可能导致用户失支继续等待页面显示的耐心。

一个简单的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>示范</title>
  <meta name="keywords" content="test,示范" />
  <link rel="Stylesheet" type="text/css" href="common.css" />
  <style type="text/css">
  .test{border:1px solid #ff0000;}
  .dom{width:200px;height:100px;}
  .notdom{width:202px;height:102px;}
  </style>
</head>
<body>
  <div id="main" class="test"></div>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(function(){
        if($.support.boxModel){
            $("#main").addClass("dom");
        }else{
            $("#main").addClass("notdom");
        }
    });
  </script>
</body>
</html>  

本文地址:http://www.nowamagic.net/librarys/veda/detail/1225,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/1225

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《PHP经典实例(第2版)》 斯克拉(David Sklar) (作者), 切贝特伯格(Adam Tracbtenberg) (作者), 李松峰 (译者), 秦绪文 (译者), 李丽 (译者)

PHP经典实例(第2版)能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边,大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起,足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中,您可以更加方便地找到各种编程问题的解决方案,《PHP经典实例(第2版)》中内容涵盖了:表单处理;Session管理;数据库交互;使用Web服务。

更多计算机宝库...