标签，就知道该页面所表达的主题就是

标签内的信息。如果整个页面都是

和标签，搜索引擎抓不住重点不推荐的情况：

Title

Listelement1

列表元素2

列表元素3

推荐案例：//使用

标签作为标题，使用

或
标签作为列表

标题

• 列表元素1
• 列表元素2
• 列表元素3
统一使用html5文档类型统一使用html5文档类型，格式如下。主要作用是告诉浏览器使用最新的规范来解析语法，避免出现怪异现象。不要将所有标签都大写，即使是doctype标签。html指定基本属性为了保持更好的浏览器兼容性，需要添加以下基本属性。基本属性：1.为文档指定lang属性，帮助语音合成工具确定其应采用的发音，帮助翻译工具确定其翻译时应遵守的规则等。2.charset属性告诉vagrant用什么编码格式来显示网页。如果不指定该属性，在Safari等部分浏览器中会出现中文乱码。打开网页，这个也可以指定其他版本比如IE=7。用例：向多媒体元素添加后备我们需要向多媒体元素添加附加信息。主要原因包括：由于网络原因，可能无法下载图片等多媒体。如果考虑屏幕阅读器，多媒体需要使用附加信息才能被阅读器识别。不推荐：推荐方案：标签属性处理方案1、HTML属性的属性顺序应该按照下面给出的顺序排列，以确保代码的易读性。classid,namedata-*src,for,type,href,valuetitle,altrole,aria-*推荐案例：Examplelink类用于标识高度可重用的组件，So它应该在列表的顶部。id用于标识特定组件，应谨慎使用（例如，页面内的书签），因此排在第二位。2、约定html布尔属性的布尔属性值部分如disabled、checked、readonly、required等值可以省略，可以是布尔类型，可以等于属性名，这里统一约定使用省略属性值的格式。推荐案例：3.将属性值用双引号引起来。属性值可以用单引号或双引号引起来。约定用双引号包起来。推荐案例：aaaaaa
标签嵌套闭包所有标签必须正确嵌套和关闭，可以使用W3C验证器检测代码。弃用的情况：

标签嵌套错误

//-------------------------------

标签未关闭

推荐案例：

标签正确使用

根据功能模块添加注释，合理添加注释阅读和编码会更容易。建议根据功能或模块添加注释。添加注释的格式建议如下：1.注释成对出现，注释格式与html元素相同，即末尾添加/结束注释。2.音符成对出现，音符中标明了开始和结束。内容和样式分离HTML只关注内容，不关注样式页面的。我们选择html标签是考虑哪些标签更适合这部分内容，而不是哪些标签样式可以为我们节省一些css代码。常见错误如下：错误使用style属性添加样式错误使用表现元素b标签、i标签等添加样式表格错误使用cellpadding、border等属性设置样式错误使用
newlinecssspecificationfilereference1、不使用@importcss引入样式文件有两种方式，一种是link元素，另一种是@import。建议只在打包工具中使用@import引入mixin等公共样式文件，在html中使用代替@import。2.引用资源去掉引号引用资源可以加引号也可以不加引号，统一约定不加引号。不推荐case:div{background-image:url("./poster.png");}推荐case:div{background-image:url(./poster.png);}3.在head中引用css文件element避免在页面样式标签中引用样式或直接在元素上内联样式。您应该提取样式并将它们放在单独的css文件中。原因是因为内容和样式分离，易于维护和管理，css文件可以缓存，重用等。*符号处理css代码避免使用*，因为它标识了浏览器支持的所有html属性。以css代码重置为例。不推荐的情况：*{margin:0;padding:0;}推荐大小写：body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul{margin:0;padding:0;}说明：推荐案例代码略多，但是性能比上面的方法要好。渲染时只匹配body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul里面的元素，这些元素有margin和padding，需要重新设置。span等其他元素不需要处理内外边距。避免无意义的选择器不推荐的情况：.header#logoimg{width:200px;...}推荐案例：#logoimg{width:200px;...}说明：要注意避免使用一些无意义的css代码，比如上面案例中的#logo优先级已经很高了，在前面加上.header选择器是多余的。并且建议元素的嵌套不要超过3层。过多的嵌套会使代码臃肿，降低浏览器的解析效率。不推荐提取常用代码case:.btn-default{cursor:pointer;背景图像：无；边框：1px实心透明；填充：6px12px；字体大小：14px；颜色：#333；背景色：#fff；border-color:#ccc;}.btn-primary{cursor:pointer;背景图像：无；边框：1px实心透明；填充：6px12px；字体大小：14px；：#286090；border-color:#204d74;}推荐大小写:.btn{cursor:pointer;背景图像：无；边框：1px实心透明；填充：6px12px；字体大小：14px；行高：1.42857143；边界半径：4px；-webkit-用户选择：无；-moz-用户选择：无；-ms-用户选择：无；用户选择：无；}.btn-default{颜色：#333;背景色：#fff；边框颜色：#ccc;}.btn-primary{颜色：#fff;背景色：#286090；border-color:#204d74;}描述：尝试提取通用样式，可以在模块内或全局共享。上面的例子是bootstrap框架源码的按钮样式的一部分。.btn-default样式和.btn-primary样式的区别只是不同状态下的颜色不同，其他代码是一样的。举一个全局分享的案例：//单行文字溢出显示一个省略号.text-ellipsis{overflow:hidden;空白：nowrap；text-overflow:ellipsis;}css命名约定中有一句话叫看名字就知道意思，css的命名应该根据大多数人的习惯和功能模块。1.不推荐命名格式。Case://css名称以驼峰命名。textEllipsis{溢出：隐藏；空白：nowrap；text-overflow:ellipsis;}推荐用例：//cssnamesareseparatedby-.text-ellipsis{overflow:hidden;空白：nowrap；text-overflow:ellipsis;}2.常用命名建议Head:headerTail:footerNavigation:navNavigationbar:navbarSub-navigation:subnavContentPeripheralcontainer:wrapper/containersidebar:sidebarloginbar:loginbarlogo:logoadvertisement:banner页面正文：主要热点：热点新闻：新闻下载：下载菜单：菜单子菜单：子菜单搜索：搜索版权：版权内容：内容标签：标签文章列表：列表提示信息：tipsTitle：标题指南：指南服务：服务注册：regsiterstatus:statussummary:summary属性的写法建议按照一定的顺序写css，不一定像下面推荐的那样，根据个人习惯，不要乱。位置属性（position,top,right,z-index,display,float）框模型属性（width,height,padding,margin,border）文本相关（font,line-height,letter-spacing,color,text-align）背景相关（background）和其他属性（opacity）是动画属性（animation，transition等）0和unit。如果属性值为0，则无需为0添加单位。不推荐的情况：.header{margin:0px;padding:0px;}推荐案例：.header{margin:0;padding:0;}浏览器前缀处理为了提高兼容性，需要添加浏览器前缀，把没有前缀的版本放在最后。另一种解决方案是使用第三方库，例如Autoprefixer，在开发过程中自动添加前缀。推荐案例：header{display:-webkit-box;显示：-ms-flexbox；display:flex;}写格式的所有css规则都需要换行，多组选择器之间需要换行。建议您使用格式化工具或插件。不推荐的情况：.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#fff;文字修饰：无；背景色：#337ab7；outline:0;}推荐案例：.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#fff;文字修饰：无；背景色：#337ab7；outline:0;}其他注意事项尽量少用id名，以免出现不可控的问题。使用《css揭秘》等书籍或博客提供hack技巧时，每条规则的末尾必须加分号，一定要加注释说明清楚，当我们的自定义组件与框架组件同名时，我们应该加我们自己的工作组或项目的特定前缀来区分它们。例如案例：//bootstrapframestyleisnamedtable...//自定义framestyle可以命名为dms-table，其中dms是projectteam的缩写...总结制定规范可以减少我们的无畏思维，写出高质量的代码，减少后期维护的成本。希望大家重视。更多信息请参考：bootstrap开发规范