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属性；