文档介绍：Html基础规范
html标签、样式表统一使用小写字母;
避免多余样式和标签,避免大量全局css控制,浪费浏览器性能;
样式表不拆分过多,推荐只使用一个主样式表,图标可以合并则使用css sprite
,面向对象写样式,高度复用避免大量冗余、代码缩写、css选择器不累赘,尽量不超三层;
Css命名必须有易阅读规则,考虑他人合作时可读,灵活控制任意对象并易于维护是最终目标;
CSS不写在页面上或行内,不将样式写入js,一律不写style属性否则难维护;
预处理潜在威胁,如图片尺寸过大撑破布局、文章自带格式破坏布局、连带影响、浏览器bug导致的问题;
文件/class采用主流分段命名方式,命名从功能模细化或根据统一特征命名,如user-info-name,采用横杠不使用下划线;默认不缩写名称,可适当缩写便于阅读识别, ,大框架css命名统一遵循top、header、main、container、footer的规则;多层嵌套推荐命名:top》container或者top>top-container
 
WEB端,Html页面优先使用XHTML标准,动态页面如jsp坚持将DOCTYPE放第一行避免样式错乱;如使用float样式,使用则需要clear清除,否则容易导致布局错乱,替代方案为display:inline-block、display:table等结合宽度控制使用或者使用百分比;
推荐页头设置:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1-">
<html xmlns="9/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-patible" content="IE=edge,chrome=1">
WAP端,各个手机平台对HTML5和CSS3支持较好,优先使用HTML5规范和CSS3布局,布局优先全兼容无限大尺寸设备,针对小屏幕设备做响应式布局处理即CSS3的media query;全局字体尺寸设置100%,小字尺寸使用small值或80%,使用rem单位替代em,尺寸使用百分比、rem控制,不确定性内容不固定宽高,同时考虑可扩展和布局保护;
推荐页头设置:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-patible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=, maximum-scale=, user-scalable=no" />
<meta name="renderer" content="webkit">
推荐页头设置:
头:header
内容:container/c