Bootstrap HTML编码规范
语法
1、用两个空格来代替制表符(Tab)--这是唯一能保证在所有的环境下获得一致展现的方法。
2、嵌套元素应当缩进一次(即两个空格)。
3、对于属性的定义,属性值确保全部都用双引(避免使用单引号)。
4、不要在自动闭合元素后面加上斜线--HTML5规范中明确说明这是可选的。
5、不要省略可选的结束标签。
实例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible"content="IE=edge" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet"href="bootstrap-3.3.5/dist/css/bootstrap.min.css" />
</head>
<body>
<img src="Images/chrome-logo.jpg"alt="chrome-logo" />
<h2 class="help-block">Hello Bootstrap</h2>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
</body>
</html>
语言属性
根据html5规范
强烈建议为html根元素指定lang属性,从而为文档设置正确的语言
IE兼容性
IE支持通过特定的meata标签来确定绘制当前页面所应该采用的IE版本,除非有强烈的特殊要求,否则最好设置为edge mode.从而得知IE采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible"content="IE=edge" />
字符编码
通过明确声明字符编码
能够确保浏览器快速并容易的判断页面内容的渲染方式,这样做的好处是,可以避免在html使用字符实体标签,从而全部与文档编码一致。
引入css与javascript文件
根据html5规范,在引入css与javascript文件时一般不需要设备type的属性,因为text/css和text/javascript是分别是他们的默认值 。
实用为王
尽量遵循html标准和语义,但是不要牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
属性顺序
html属性应当按到以下给出的顺序依次排列,确保代码的易读性。
1、class
2、id,name
3、data-*
4、src、for、type、href
5、title、alt
6、aria-*、role
class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位。
布尔型(Booleam)属性
布尔型属性可以在声明时不进行赋值,XHTML要求进行赋值,但HTML5规范中不需要。
元素的布尔型属性如果有值就是true ,如果没有就是false.
减少标签的数量
编写thm代码l时,尽量避免多余的父元素,很多时候,需要用到迭代和重构来实例。
JavaScript 生成的标签
通过 JavaScript 生成的标签让内容变得不易查找、编辑,并且降低性能。能避免时尽量避免。