web标准与前端开发 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第四天

一.基本原则

符合web标准（UTF-8，HTML5），语义化html（HTML5新增要求，减少div和span等⽆特定语义的标签使⽤)结构表现⾏为分离，兼容性优良.页⾯性能⽅⾯，代码要求简洁明了有序，尽可能的减⼩服务器负载，保证最快的解析速度

二.⽂件命名规范

1. html，css，js，lib，images⽂件均存放⾄项⽬的⽬录中。如果使⽤相关前端框架，根据框架的⽂件格式进⾏合理布局。
2. 所有⽂件夹及⽂件使⽤英⽂命名。
3. html⽂件：⼊⼝⽂件使⽤index.html。如果有对应的设计组设计原稿，需要将对应的设计稿和html⽂件命名⼀致并合理存放。
4. css⽂件命名：后缀.css。通⽤initial.css，初始化base.css，⾸页index.css，其他页⾯按照对应的html命名。
5. Js⽂件命名：英⽂命名，后缀.js.通⽤common.js，初始化base.js。 其他页⾯按照对应的html命名。

三.HTML规范

• 1、⽂档类型声明及编码：统⼀为html5声明类型。书写时利⽤IDE实现层次分明的缩进（默认缩进4空格）。
• 2、⾮特殊情况下CSS⽂件放在body部分标签后。⾮特殊情况下⼤部分JS⽂件放在标签尾部（如果需要界⾯未加载前执⾏
• 的代码可以放在head标签后）避免⾏内JS和CSS代码。
• 3、所有编码需要遵循html（XML）标准，标签&属性&属性命名必须由⼩写字母及下划线数字组成，且所有标签必须闭合，包括
• br()，hr()等。属性值⽤双引号。
• 4、引⼊JS库⽂件，⽂件名须包含库名称及版本号及是否为压缩版，⽐如jquery-1.4.1.min.js。引⼊插件，⽂件名格式为库名称+插件名
• 称，⽐如jQuery.bootstrap.js。
• 5、书写页⾯过程中，请考虑向后扩展性。class&id参见css书写规范.
• 6、需要为html元素添加⾃定义属性的时候，⾸先要考虑下有没有默认的已有的合适标签去设置，如果没有，可以使⽤须以"data-"为前缀来
• 添加⾃定义属性，避免使⽤"data："等其他命名⽅式。
• 7、语义化html，如标题根据重要性⽤h*(同⼀页⾯只能有⼀个h1)，段落标记⽤p，列表⽤ul，内联元素中不可嵌套块级元素。
• 8、尽可能减少div多层级嵌套。
• 9、书写链接地址时，必须避免重定向。
• 10、在页⾯中尽量避免使⽤style属性，即style="…"。
• 11、必须为含有描述性表单元素(input，textarea)添加label，如姓名：须写成：姓名：
• 12、能以背景形式呈现的图⽚，尽量写⼊css样式中。
• 13、重要图⽚必须加上alt属性。给重要的元素和截断的元素加上title。
• 14、给区块代码及重要功能(⽐如循环)加上注释，⽅便后台添加功能。
• 15、特殊符号使⽤：尽可能使⽤代码替代：⽐如<(<)&>(>)&空格()&»(»)等等。

四.CSS规范

• 编码规范为utf-8。
• 协作开发及分⼯：i会根据各个模块，同时根据页⾯相似程序，事先写**体框架⽂件，分配给前端⼈员实现内部结构&表现&⾏为。共⽤
• css⽂件base.css由i书写，协作开发过程中，每个页⾯请务必都要引⼊，此⽂件包含reset及头部底部样式，此⽂件不可随意修改。
• class与id的使⽤：id是唯⼀的并是⽗级的，class是可以重复的并是⼦级的，所以id仅使⽤在⼤的模块上，class可⽤在重复使⽤率⾼及
• ⼦级中。id原则上都是由我分发框架⽂件时命名的，为JS预留钩⼦的除外。
• 为JS预留钩⼦的命名，请以js_起始，⽐如：js_hide，js_show。
• class与id命名：⼤的框架命名⽐如header/footer/wrapper/left/right之类的在2中由i统⼀命名.其他样式名称由⼩写英⽂&数字&来组
• 合命名，如i_comment，fontred，width200。避免使⽤中⽂拼⾳，尽量使⽤简易的单词组合。总之，命名要语义化，简明化
• 规避class与id命名(此条重要，若有不明⽩请及时与i沟通)：a）通过从属写法规避，⽰例见d。b）取⽗级元素id/class命名部分命名，
• ⽰例见d。c）重复使⽤率⾼的命名，请以⾃⼰代号加下划线起始，⽐如i_clear。d）a，b两条，适⽤于在2中已建好框架的页⾯，如，要在
• 2中已建好框架的页⾯代码中加⼊新的div元素，按a命名法则：...，样式写法：#mainnav.firstnav{.......}按b命名法则：...，样式写
• 法：.main_firstnav{.......}
• css属性书写顺序，建议遵循：布局定位属性-->⾃⾝属性-->⽂本属性-->其他属性.此条可根据⾃⾝习惯书写，但尽量保证同类属性写在
• ⼀起.属性列举：布局定位属性主要包括：display&list-style&position（相应的top，right，bottom，left）＆float&clear＆visibility＆
• overflow；
• ⾃⾝属性主要包括：

• width&height&margin&padding&border&background。
  

• ⽂本属性主要包括：

• color&font&text-decoration&text-align&vertical-align&white-space&其他&content。