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生成的标签:不易被查找编辑和降低性能尽量避免生成

时间: 2024-10-05 05:20:36

Bootstrap HTML编码规范总结的相关文章

Bootstrap HTML编码规范

语法 1.用两个空格来代替制表符(Tab)--这是唯一能保证在所有的环境下获得一致展现的方法. 2.嵌套元素应当缩进一次(即两个空格). 3.对于属性的定义,属性值确保全部都用双引(避免使用单引号). 4.不要在自动闭合元素后面加上斜线--HTML5规范中明确说明这是可选的. 5.不要省略可选的结束标签. 实例: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content

bootstrap css编码规范

1.1.  语法 1.        用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 2.        为选择器分组时,将单独的选择器单独放在一行. 3.        为了代码的易读性,在每个声明块的左花括号前添加一个空格. 4.        声明块的右花括号应当单独成行. 5.        每条声明语句的 : 后应该插入一个空格. 6.        为了获得更准确的错误报告,每条声明都应该独占一行. 7.        所有声明语句都应当以分号

HTML/CSS编码规范

HTML编码规范 code { font-family: "PT Mono", Menlo, "Courier New", monospace; padding: 2px 4px; font-size: 85%; color: #d44950; background-color: #f7f7f9; border-radius: .2rem; } .dec, .var {color: #606;} .pln {color: black;} .tag {color: #

转: bootstrap编码规范~~useful

>> HTML: > 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 对于属性的定义,确保全部使用双引号,绝不要使用单引号. ~~~回归html4的松散包容特性,并非xml的一种实现 不要在自闭和(self-closing)元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的. ~~~html5 自闭合标签 /结尾不是必须的 不要省略可选的结束标签(closing tag)(例如,</li> 或 </body>

Bootstrap编码规范

黄金定律 永远遵循同一套编码规范 -- 可以是这里列出的,也可以是你自己总结的.如果你发现本规范中有任何错误,敬请指正.通过 open an issue on GitHub为本规范添加或贡献内容. 不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. HTML 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格). 对于属性的定义,确保全部使用双引号,绝不要使用单引号. 不要在自闭合(self-clo

我的未来编码规范

.Net 命名规范 文件夹.实体命名统一使用英文定义,以大驼峰命名法.不宜过长可简拼,具有可读性. 变量命名使用英文定义,以小驼峰命名法.不宜过长可简拼,具有可读性. Student 增删改查方法命名统一规范. a)         各种查询 GetXXXX/GetXXByXX 获取XXXX信息. 例如GetUserList 获取用户信息集合(多条)/GetUserByName.GetUserListByAge等. FindByXX 查找 定义通用的查找方法时候使用. 例如FindByOID 通

cs编码规范

HTML 语法 HTML5 doctype 语言属性(Language attribute) 字符编码 IE 兼容模式 引入 CSS 和 JavaScript 文件 实用为王 属性顺序 布尔(boolean)型属性 减少标签的数量 JavaScript 生成的标签 CSS 语法 声明顺序 媒体查询(Media query)的位置 带前缀的属性 单行规则声明 简写形式的属性声明 Less 和 Sass 中的嵌套 注释 class 命名 选择器 代码组织 黄金定律 永远遵循同一套编码规范 -- 可以

java编码规范

右括号") "与其后面的关键字之间,关键字与其后面的左括号"("或"{"之间,以及"}"与"{"之间,要以一个空格隔开:除". "外,所有二元操作符的前.后要加空格:在逗号后边加一个空格. 说明: 一个紧跟着括号的关键词应该被空格分开: 空白应该位于参数列表中逗号的后面: 所有的二元运算符,除了".",应该使用空格将之与操作数分开.一元操作符和操作数之间不应该加空格,

我也学php:编码规范/翻译自PSR

PHP社区百花齐放,拥有大量的函数库.框架和组件.PHP开发者通常会在自己的项目中使用若干个外部库,因而PHP代码遵循或尽量接近同一个代码风格就非常重要,可以让开发者方便地把多个代码库集成在自己的项目中. 框架互操作组(即PHP标准组)发布了一系列代码风格推荐标准,即PSR-0,PSR-1,PSR-2和PSR-3. 不要让这些名称所混淆,这些推荐仅是一些被其它项目所遵循的规则,如Drupal, Zend, Symfony, CakePHP, phpBB, AWS SDK, FuelPHP, Li