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 (四个空格)进行缩进；

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

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

• 注释统一使用/* */；

• 命名：

  • sdfsdf

  • 依据其内容、功能来命名，而不是其表现形式；

  • 类名使用小写字母，以中划线(相比下划线可少按一次shift)分割；

  • id使用驼峰命名法；

  • 不允许使用拼音；

• 样式声明顺序按下面的例子做分组处理：

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

作者：漓漾li
链接：https://www.jianshu.com/p/430175cf1ffa