前台代码规范总结

作者 : 开心源码 本文共1158个字,预计阅读时间需要3分钟 发布时间: 2022-05-11 共68人阅读

html语义化

  • 为什么要语义化

    • 在没有css的情况下,页面也可以呈现出内容结构;

    • 有利于SEO有助于爬虫住区更多的有效信息,爬虫依赖于标签来确定上下文和各个关键字的权重;

    • 方便其余设施解析:屏幕阅读器、盲人阅读器、移动设施,以更有意义的方式渲染网页。

  • 如何实现语义化

    • 尽可可以少的用div、span等无语义的标签,只作为布局框架用;

    • 不要用纯样式标签,如b(文本加粗)、font(规定字体格式)、u(下划线文本)、i(规定斜体文本)等,用css代替;

    • 需要强调的文本放在strong(语义更强)或者em标签中,其携带的默认样式最好使用css代替。

    • 每个input的说明文本都要使用label标签包裹起来,并设置label的for属性为input的id让其相关联。

    • 能用W3C HTML Validator验证并规范代码。

css规范

  • CSS页面文件,其文件名与HTML文件名一致;

  • 用soft tab (四个空格)进行缩进;

  • 每个属性生命末尾后都要加分号;

  • 注意空格的用(不在详解);

  • 注释统一用/* */;

  • 命名:

    • 依据其内容、功可以来命名,而不是其体现形式;
    • 类名用小写字母,以中划线(相比下划线可少按一次shift)分割;
    • id用驼峰命名法;
    • 不允许用拼音;
      • sdfsdf
  • 样式公告顺序按下面的例子做分组解决:

      .declaration-order {      display: block;      float: right;      position: absolute;      top: 0;      right: 0;      bottom: 0;      left: 0;      z-index: 100;        border: 1px solid #e5e5e5;      border-radius: 3px;      width: 100px;      height: 100px;        font: normal 13px "Helvetica Neue", sans-serif;      line-height: 1.5;      text-align: center;        color: #333;      background-color: #f5f5f5;        opacity: 1;  }
  • 尽量将媒体查询的规则靠近与他们相关的规则,不要将他们一起放到一个独立的样式文件中,或者者丢在文档的最底部,这样做只会让大家以后更容易不记得他们;

  • 避免用@import指令引入css文件,指令慢,并且添加额外请求;

  • 禁止用!important

  • 属性值0后不加单位;

  • 使用border:0代替border:none;

  • 尽量少使用*选择器。

图片规范

  • 图片用英文字母、数字与下划线的组合;
  • 要尽量压缩图片到最小;
  • 可用base64编码代替较小图片的链接,能节省一次请求;
  • 运使用css sprite技术集中小的背景图或者图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线。
  • 可使用W3C css Validator验证并规范css代码;
  • 必需为img标签增加alt属性;

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台代码规范总结

发表回复