工程化 - 规范化 - HTML规范

目录

嵌套

http自适应

标签属性顺序

属性必填项

属性禁填项

图片命名

---

嵌套

//bad
<div>
    <h1></h1><p></p>
</div>  
<p> 
    <span></span>
    <span></span>
</p>

// good
<div>
    <h1></h1>
    <p></p>
</div>  

<p><span></span><span></span></p>

http自适应

静态域名一律去除http头，浏览器会自动补全。

<style>
//CSS背景图片 
.bg{background: url(//game.gtimg.cn/images/cf/cp/a20161021sqjs/hd.jpg) no-repeat;}
</style>
//链接URL
<a href="//cf.qq.com/main.shtml">进入官网</a>
//图片SRC
<img src="//game.gtimg.cn/images/cf/web201610/logo.png">
//JS链接
<script src="//ossweb-img.qq.com/images/js/title.js"></script>

标签属性顺序

<div 
     v-if=""
     v-for="" 
     @event=""
     :val=""
     class="" 
     id="" 
     data-id="" [标签属性eg - src]  
     onclick="">
</div> 
// 事件放最后
这里配合下vue
if在最前面 原理同script会阻塞渲染引擎一样。
之后是按照这个顺序，vue的@事件放到第1/2位因为常用

属性必填项

1. <a title="" href="">标签title、href属性
2. PC端img图片必须填写width、height、alt属性
3. 移动端必须填写alt属性(有意义)

属性禁填项

// bad
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
<input type="tel" /> 

// good
<link rel="stylesheet" href="" >
<script src=""></script>
<input type="tel"> // 所以自闭合标签不要带结束分隔符

图片命名

 // bad
 weixin-qrcode  //头像
 
 // good
 bg.jpg          //背景图片
 mod-bg.jpg      //模块背景
 sprites.png     //精灵图
 btn-start.png   //开始按钮
 ico-play.png    //修饰性图片

公共模块：
wx_mod_btn_goodlist@2x.png
wx_mod_btn_goodlist.png
mod_btn_goodlist.png 

非公共模块：
wx_btn_goodlist@2x.png
wx_btn_goodlist.png
btn_goodlist.png

参考腾讯网易前端手册