zoukankan      html  css  js  c++  java
  • 【转】shopEx 页面编码规范和标签规范 id和class命名规范

    今天看到 shopEx 的页面编写规范吗,感觉对一般的页面代码编写也有借鉴意义。
    转自:http://wiki.zx.shopex.cn/advance/html.html

    页面编码规范和标签规范

    1.页面统一utf-8编码,如果中文不能正常显示,请用editplus打开,另存,编码选utf-8。友情提示:模板代码当中很多莫名其妙的换行都可能跟编码有关!

    2.DTD统一加<!DOCTYPE html>

    3.页面中引入样式或js时,不需要加类型声明:(html5 规范)

    <link rel="stylesheet" href="..." />
    <style>...</style>
    <script src="..."></script>
    <script></script>
    

    4.所有编码均遵循 xhtml 标准,包括标签、属性、属性名全部小写,属性值用 "" (双引号)引起来,标签要闭合,非单标签要加对应的结束标记,单标签以" />"结束。提醒:IE下的页面变形很多都与标签未闭合有关系。

    5.标签要按顺序合理嵌套。如:

    <p><b></p></b>
    须修改为:
    <p><b></b></p>
    

    6.<div>里可以包含<p>,但是<p>里不允许包含<div>。类似的还有<ul>和<ol>里不允许包含<li>以外的标签。

    7.<li>标签必须被<ul>或<ol>包裹,<dt>和<dd>必须被<dl>包裹。

    8.<input>和<button>必须指明默认的type,form必须有默认的method,可避免在不同浏览器下产生的差异。

    9.按钮用<button>而不用<input />。

    10.前台不用table做布局。

    11.html功能块之间写明注释,注释亦精不亦多。如:

    <!-- sample START -->
    <div id="sample">
    		...
    </div>
    <!-- /sample END -->
    

    12.视情况为链接添加title,图片要添加alt及title。

    13.把css调用写在头部,js尽量写在尾部。

    14.不在html中混合js及event事件。

    15.模仿a链接点击样式可用class="pointer"或class="lnk",尽量少用javascript:void(0);伪协议,避免ie6出错。

    16.明确指定图片的width和height。不仅对seo有用,对因各种原因无法显示图片的情况下,也能保持布局样式不变。

    17.通过给元素设置自定义属性来存放与 JS 交互的数据,属性名格式为 data-xx (例如:data-lazyload-url) 。

    id和class命名规范

    1.id 和 class 的命名总规则为:内容优先,表现为辅。首先根据内容来命名,比如 main-nav。如果根据内容找不到合适的命名,可以再结合表现来定,比如 skin-blue, present-tab,col-main。

    2.id 和 class 名称可采用连字结符连接与驼峰式写法相结合,i比如 recommend-presents,pictureList-item。d必须使用下划线进行连接,如product_title。class必须使 用连字符进行连接,如productItem-lists。这样容易区分,同时对脚本调试有帮助。

    3.id 和 class 名称中只能出现 26 个英文字母、数字、下划线"_"和连字符"-",任何其它字符都是不被允许使用的。

    4.id 和 class 尽量用英文单词命名。对于某些产品特色词汇,也可以使用拼音,其它任何情况下都禁止使用拼音。

    5.系统级前台class名称都以 ex 开头,比如 ex-goods-detail.尽量不要超过三级。

    .ex-goods-detail{
            190px;
            };
    

    6.在不影响语义的情况下,id 和 class 名称中可以适当采用英文单词缩写,比如 col, nav, hd, bd, ft 等,但切忌自造缩写。

    7.id 和 class 名称中的第一个词必须是单词全拼或语义非常清晰的单词缩写,比如 present, col-ttl。

  • 相关阅读:
    工作中遇到新知识应该怎么办
    Java中的集合
    JSTL学习(二)自定义标签库
    别跟我扯依赖注入
    经典算法的分析
    Debian
    C 底层细节【转】
    C文件操作 【转】
    利用strstr和sscanf解析GPS信息
    算法学习建议 ACM()转
  • 原文地址:https://www.cnblogs.com/xiangniu/p/2258917.html
Copyright © 2011-2022 走看看