#jdf html规范
版本 日期 说明
v1.0 2013-12-2 初版
## 目的 本文定义了HTML和CSS的格式和样式规则,旨在改善代码协作编码,代码质量和规范基本结构. ## 适用人员 所有前端开发人员或涉及到前端代码的开发人员 ## 文件的名称 要有实际意义,可读性强,能够代表代码区块的功能 ## 文件的编码 全站默认为utf-8 ## html-总体结构 * doctype * 编码 * 根据业务需要,添加必不可少的keywords,description,title * 基本原则:先分析布局,划分框架,然后规划结构,最后编写代码 ## html-书写布局 * 缩进-使用4个空白符的制表位进行缩进 * 应该按照设计稿的依次顺序,从上至下,从左至右书写 * 两个模块间用空行隔开,使代码看起来比较清晰 * 元素嵌套时,尽量采用一个元素占用一行的原则,如下不太好

    • ## html-元素和属性格式 * 标签都要闭合 * 元素和属性全部小写 * 合理嵌套,如下不合理

    this istest

    * 对非空元素,必须使用结束标签,如下有未结束元素

    this is test

    i am a boy * 属性值必须在引号中,如 , * 非成对标记必须以 "/>" 结尾,如
    ,

    , ## html-元素和属性建议 * 一段文字段落可以用p * 项目列表可以用ul,ol或者dl,尽量避免使用div * 数据类展示可以使用table,表格头使用thead,尾部使用tfoot * 元素加重可以使用strong,em * 代码片断使用pre,code * 标题使用h1,h2,h3-h6 * 图片元素img要添加title,以及合理添加width和height,减少reflow,并提高体验 * 在截断元素加上完事的title * radio前面最好添加label,让文字也可选中radio,如 * 避免在页面中使用style属性 * 避免使用多层class,如
    * 建议省略style和script的type属性,如 ## html-命名规范 * 总体采用中划线"-"的形式,如detail-list * 避免使用方向命名,如left,right,top,bottom等 ## html-命名参考
    login 登陆 about-me 关于我们
    usercenter 用户中心 copyright 版权信息
    my-order 我的订单 after-sales-service 售后服务
    site-map 网站导航 contact-us 联系我们
    search-input 搜索输入框 add-to-cart 加入购物车
    ## html-注释 * 单行,放在元素上边,如

    这是测试的

    * 注释区块,注意结束时加"/" ... ## html-常用转义 显示说明 | 实体名称 不断行的空白格 |   < | 小于 | < > | 大于 | > ' | 单引号 | ' © | 版权 | © ® | 已注册商标 | ® ™ | 商标（美国） | ™ × | 乘号 | × ÷ | 除号 | ÷ ## html-hack 可以在头部添加如下代码,可以对IE的版本进行区分