Bootstrap HTML编码规范总结

 摘自: http://www.runoob.com,纯粹是为了加强Bootstrap框架的学习

语法:

  1.用两个空格来代替制表符tab--为了在不同的浏览器和系统作用下展现一致。

  2.嵌套元素应当缩进一次(即2个空格);

  3.对属性的定义全部用双引号,绝不用单引号。

  4.不要在自闭合(self-closing)因素的尾部添加斜线,这个基于HTML5的规范

  5.不要省略可选的结束标签(closing tag)如</li> or </body>

 第一、  HTML5 DOCTYPE    标准模式(standard mode)确保浏览器展现一致:

   <!DOCTYPE html>

   <html>

<head></head>

<body></body>

   </html>

第二、语言属性,建议为html根元素指定lang属性,有利于语音合成工具的发音和翻译工具采用正确的翻译规则:

<!DOCTYPE html>

   <html lang="zh-CN"> //EN   语言代码表

<head></head>

<body></body>

   </html>

第三、IE兼容模式,如无特殊要求,建议采用edge mode在<meta>标签设置:即告知IE采用最新的支持模式:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">   //IE8引入:X-UA-Compatible  最高:Edge

第四、字符编码:有利于文档字符一致,避免html中使用字符实体标记(character entity):通常是utf-8:

<head>

  <meta charset="UTF-8" >

</head>

第五、引入css和javascript文件,在html5中默认type为text/css和text/javascript.所有可省略:

<link rel="stylesheet" href="css-code.css">//引入样式

<style>

//in document css

</style>

<script src="js-code.js"></script>

第六、实用为王,遵循html标准和语意,代码尽量少和简单。

第七、属性顺序。提高阅读性:

1.class

2.id ,name

3.data-*

4.src, for,type,href

5.title alt

6.aria-*,role

因class是用于标识高度可复用组件,因此放第一位,id具体标识具体组件慎用排第二:

<a class="..." id="a_*" data-model="toggle" href="#">

跳转

</a>

<input class="form-control" type="text">

<img src="..." title="image" alt="hello">

第八、布尔(boolean)型属性:

1、在XHTML中要求赋值,HTML5中不需要

有值为true,没有则为false,如果属性存在,其值必须是空字符串或[...]属性的规范名称,并且不要在收尾添加空白符。即不用赋值:

<input type="text" disabled>

<input type="checkbox" value="2" checked>

<select >

  <option value="8"  selected>8</option>

</select>

第九、减少标签的数量,效果不变:

<span class="avatar">

  <img src="...">

</span>

更好的方式:<img class="avatar" src="...">

第十、Javascript生成的标签:不易被查找编辑和降低性能尽量避免生成

原文地址:https://www.cnblogs.com/professional-NET/p/4728851.html