HTML代码编写的一些建议

HTML的一些规范
服务器君一共花费了289.540 ms进行了7次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议
  1. 一般要写兼容IE6,IE7和 Firefox 的网页,最省事的方法就先写适合 IE7 的样式,因为 IE7 和 Firefox 很接近,这样判断浏览器兼容的工作量就能减小到最少。
  2. 逐步叠加的方式,如果需要用这个样式的模块很多,并且会存在些许的不同,千万不要把样式一步写到位,最好把框架性的先写好,细节性的留到第二个步骤,甚至第三个步骤,当然最好步骤不要超过三步,这样很不利于维护。 由若干个二级定义对一级定义进行补充,这样的既可以减少代码,又可以减少繁多的 class 命名。
  3. 从总到分。顺序应该是这样:总体需要用到的 >> 结构 >> 模块 >> 二级模块 >> 细节;并且这个文档最不容易修改的处于最上端,频繁用于修改的在末端。最忌讳即兴发挥,这样写出的东西经不起推敲,稍有变化就要忙得乱成一团。结构性的东西应该慎重精细。
  4. 尽量把能够放在一组的小图标或者图片放在一个图片文件里,这样的好处有很多。
    • 图片文件的总量会变小;
    • 利于下载,太多的小图片下载效果是不理想的,常常会发现这个图片出来,那个没出来,这样在写样式的时候只需要写一个总体的,对于具体的要显示的只需要标一个位置,非常省时间,样式也很精炼;
    • 显而易见,这样做非常便于管理,替换或新增的时候工作量很小。
  5. 切图的原则,应该切大的图绝不切小,应该切小的绝不切大,能够用颜色代替的绝不切图。把一个大图切成很多份并不一定能够加快页面的显示速度,相反会浪费很多不必要的带宽。不光要控制图片文件的多少,还要考虑到这样切会不会造成页面增加许多额外的代码。
  6. 图片的命名规则,定一个规则,准备用一辈子。这样以后你看CSS文档的时候,你只要看到某个图片名称的时候,你不需要看太多你就知道这个图片的用途、位置;这样可以最大限度的保证样式的重用性。
  7. 在该不该用表格的问题上,我的态度是,涉及多行多列的特别是列宽有不固定的,坚决用表格,这个没啥好讨论的,千万不要为了 div 而 div,用一大陀 CSS 去模仿一个表格是很极端的行为。当然也有例外的,需要灵活处理,但千万别模仿什么表格。
  8. 尽可能不把样式直接写到元素的标签里(除非这个样式出现的机率特别小,有相当程度的偶然性),把样式直接写到元素标签里是一种工作范畴意义上的无政府行为,非常不负责。
  9. 尽量不要用 ID 来定义或索引样式,ID 的唯一性比较高,且用 ID 索引样式效率非常低而且兼容性的问题也比较明显。

总之所有的一切都为了精简,为了效率,也为了重用。

页面规范

样式和程序不一样,样式主要是为了界面呈现,因此样式的命名和界面的表现是紧密联系在一起的。这边我主要写一个放大的结构,基本上这个结构会满足90%的需求。但是如果要做到精炼,还是要根据具体的需求来调整,避免过多的冗余。

  1. 文件定义:必须是
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
  3. 全局包括:字符编码,文字大小,字体,背景,行距;链接最好不要放到全局里定义,IE6环境下会有奇怪的问题;
  4. 公用的包括:button(按钮),input(输入框),textArea(文本域),space(间隔);
  5. 根据页面的结构,页面大致分为五个部分:顶部、左栏、中栏、右栏、底部;class 的名称分别定义为:top, left, middle, right, bottom ;
  6. divBtn, divBtnL, divBtnM, divBtnR(DIV模拟按钮),menu, menuL, menuM, menuR(菜单)
  7. <div class="divBtn">
            <div class="divBtnL"></div>
            <div class="divBtnM">默认</div>
            <div class="divBtnR"></div>
    </div>
    <div class="divBtnOv">
            <div class="divBtnL"></div>
            <div class="divBtnM">悬停</div>
            <div class="divBtnR"></div>
    </div>
    <div class="divBtnSe">
            <div class="divBtnL"></div>
            <div class="divBtnM">选中</div>
            <div class="divBtnR"></div>
    </div>
    <div class="divBtnSv">
            <div class="divBtnL"></div>
            <div class="divBtnM">选中状态下悬停</div>
            <div class="divBtnR"></div>
    </div>
    

    由父节点直接控制子节点,菜单的四种状态和 divBtn 类似,divBtn 的结构也可以是完全嵌套型的,节点相应地可以增减,视需求而定,但是 class 的定义不变。

  8. 分页的基本结构
  9. <div class="pager">
            <a class="pageFir" href="javascript:;"> </a><!--首页-->
            <a class="pagePre" href="javascript:;"> </a><!--上一页-->
            <span class="pageNum">
                    <a class="pageSe" href="javascript:;">1</a><!--选中页-->
                    <a href="javascript:;">2</a>
                    <a href="javascript:;">3</a>
                    <a href="javascript:;">4</a>
                    <a href="javascript:;">5</a>
            </span>
            <a class="pageNxt" href="javascript:;"> </a><!--下一页-->
            <a class="pageLst" href="javascript:;"> </a><!--末页-->
            <span class="pageIpt"><input maxLength="3" value="" /></span><!--跳转框-->
            <a class="pageBtn" href="javascript:;"> </a><!--跳转按钮-->
    </div>
    

    注:“ ”不可以省略。

  10. 页面是由模块组成,模块的基本结构是一个九宫格(这个九宫格的结构和网上的说法不太一样,有多种变化,但我们样式的命名不变):modTL, modTM, modTR, modML, modMM, modMR, modBL, modBM, modBR.。弹出框的基础结构也是由九宫格组成:optTL, optTM, optTR, optML, optMM, optMR, optBL, optBM, optBR.。
  11. <div class="mod mod2 …"><!--这里可以附加更多CLASS来改变整体的表现-->
            <div class="modTL"></div><!--这里可以插入图标-->
            <div class="modTM"></div><!--这里可以插入标题-->
            <div class="modTR"></div><!--这里可以插入操作按钮-->
            <div class="modML">
                    <div class="modMM">
                            <div class="modMR"></div>
                    </div>
            </div>
            <div class="modBL"></div>
            <div class="modBM"></div>
            <div class="modBR"></div>
    </div>
    

    弹出框和mod的结构一致。

  12. 表格,基本上我们定义表格也会依照最直观的方式给它定义样式。如例:
  13. <table border="0" cellpadding="0" cellspacing="0" class="table">
            <tbody>
                    <tr class="th">
                            <td class="td1">名称</td>
                            <td class="td3">改名</td>
                            <td class="td3">删除</td>                                                                
                    </tr>
                    <tr class="tr">
                            <td class="td1">名称</td>
                            <td class="td3">改名</td>
                            <td class="td3">删除</td>                                                                
                    </tr>
                    <tr class="trOv">
                            <td class="td1">名称</td>
                            <td class="td3">改名</td>
                            <td class="td3">删除</td>                                                                
                    </tr>
                    <tr class="trSe">
                            <td class="td1">名称</td>
                            <td class="td3">改名</td>
                            <td class="td3">删除</td>                                                                
                    </tr>
            </tbody>
    </table>
    

    注:tbody 绝对不可以省略。不要对这样的命名表示不理解,正如我先前所说,class 和程序不一样,样式最大的优越性是可以无限制地公用,并且可以通过父级控制各种呈现。因此定义的名称不要和具体的目标联系起来,不要管它用来做什么,你只要知道它是个什么就够了。

  14. 组合规则
    • 元素的界面呈现状态分为四种:默认、悬停、选中、选中的悬停状态。如有个CLASS名称叫“xx”,那它的四种状态分别为:xx, xxOv, xxSe, xxSv 。
    • 如果写一个结构,这个结构具有一定意义上的公用性和广泛性,那我们在定义CLASS名称的时候就要考虑这组样式的名称的统一,如:menu, menuL, menuM, menuR。
  15. HTML 元素的排序规则,一般我们使用的HTML元素包括:div, p, ul, table, span, input, select。基本上 div, table, ul, p 都属于结构性比较强的元素,而 span, input 则是比较弱的元素,因此不允许有 span 嵌套 div, table 等等的情况出现,span 可以嵌套 input, 可以嵌套 span。程序员在写页面的时候可以先不考虑界面呈现,按照这样的规则,把数据直接绑定到 HTML 元素的节点上。

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

不打个分吗?

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

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

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

大家都在看

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

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

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

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

《C程序设计语言(第2版新版)》 克尼汉 (作者), 等 (作者, 译者), 徐宝文 (译者)

《C程序设计语言》(第2版新版)是由C语言的设计者Brian W.Kernighan和Dennis M.Ritchie编写的一部介绍标准C语言及其程序设计方法的权威性经典著作。全面、系统地讲述了C语言的各个特性及程序设计的基本方法,包括基本概念,类型和表达式、控制流、函数与程序结构、指针与数组、结构、输入与输出、UNIX系统接口、标准库等内容。

更多计算机宝库...