前端小生的进阶之路 -> HTML5编码规范

　　小生刚刚踏进Web前端的圈子，从此文开始一点一滴地记录自己的学习历程，希望通过写博客分享自己在学习过程中的心得，若能因此结识志同道合的朋友和大牛们，并有所收获，那就再好不过了。请多指教啦！

 

HTML5编码规范

　　作为当前大热的一门技术，投向HTML5怀抱的人数与日俱增，作为一名程序员，良好规范的编码风格不仅能体现程序员的素养，而且也能为程序日后的修改维护省下不少事。因此了解HTML5的编码规范是非常有必要的。

规范

• 书写符合W3C标准的代码
• 书写代码时，应严格遵循结构、样式、行为的绝对分离
• 使用语义化标签，保证程序的可读性，严禁不分情况地大量使用div等无语义标签
• 保证代码简洁，层次分明。避免出现无意义的空格以及空行，在符合规范的前提下尽量减少代码量，使用简单的标签

格式

 

　　1.换行

　　多层标签嵌套时，应避免在一行内书写代码，合理使用换行并配合缩进使代码结构层次分明

1.  <!-- bad -->
    <div><p>编码规范</p></div>
    
    <!-- good -->
    <div>
        <p>编码规范</p>
    </div>

　　2.缩进

　　关于缩进，空格和Tab键的两党之争就没有停止过，缩进两个空格还是四个空格也是各有各的说法，更多的是从个人习惯的角度出发。使用空格键进行缩进的好处是在任何环境下查看代码都能保证代码的表现是一致的，Tab则不然。而在编码的时候显然是按一次Tab比按几次空格更方便，不管怎么样,最重要的是不要混用,不要混用以及不要混用!因为小生的习惯是使用soft tab，所以这里就规定使用四个空格的Tab为一个缩进层级（具体使用哪种方案就因人而异了，公司规定或个人习惯决定）

　　3.小写

　　虽然HTML不区分大小写，但是为了规范代码，以下两种情况要使用小写：

　　3.1　　HTML的标签名以及属性必须小写

　　3.2　　命名id和class的时候要使用小写字母，并在不缺失语义以及不冲突的情况下尽量简短

　　4.引号

　　使用双引号包围属性值，禁止使用单引号以及不使用引号

<!-- bad -->
<table cellpadding='5'>
    <tr>
        <td>
        </td>
    </tr>
</table>

<!-- good -->
<table cellpadding="5">
    <tr>
        <td>
        </td>
    </tr>
</table>

　　5.闭合

　　双标签必须闭合,单标签不允许闭合

<!-- bad -->
<div>HELLO WORD
<br />

<!-- good -->
<div>HELLO WORD</div>
<br>

 

注释

　　在一些关键代码处添加必要的注释进行解释可以提高代码的可读性,也使得程序更易于修改和维护

<!-- 搜索引擎优化 -->
 <meta name="Keywords" content="搜索关键字">
 <meta name="Description" content="页面内容的简单描述">

 

　　待办事项用TODO进行注释

...
<!-- TODO:将来此处会出现一段改变世界的代码←_← -->

图片

　　img的src和alt属性值不能为空,src属性值为空会导致部分浏览器重新刷新页面,而填写alt属性值可以在图片加载失败时给用户提供一些信息

<img src="http://cdnq.duitang.com/uploads/item/201502/14/20150214184434_ZTj8N.gif" alt="此处不能为空哦,万一图片加载失败我就不知道这是什么图片了" />

　　给img添加width和height属性可以避免文档内容在浏览器加载页面的时候发生移动从而影响用户体验

多媒体文件

　　在支持HTML5的浏览器中播放视频和音频文件的时候,应当优先使用<video>和<radio>标签,并注意格式

　　音频格式:MP3、WAV、Ogg

　　视频格式：MP4、WebM、Ogg

 

注:以上内容都是小生在学习过程中看过的资料中整理出来的,还不够完善,以后还会不定期更新,如有错漏,请评论告诉小生。