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