ylbtech-Bootstrap-Other：HTML编码规范
1.返回顶部
1、

Bootstrap HTML编码规范

语法

  • 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
  • 嵌套元素应当缩进一次（即两个空格）。
  • 对于属性的定义，确保全部使用双引号，绝不要使用单引号。
  • 不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
  • 不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。

实例：

<!DOCTYPE html>

<html>

  <head>

    <title>Page title</title>

  </head>

  <body>

    <img src="data:images/company-logo.png" alt="Company">

    <h1 class="hello-world">Hello, world!</h1>

  </body>

</html>

HTML5 doctype

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。

实例：

<!DOCTYPE html>

<html>

  <head>

  </head>

</html>

语言属性

根据 HTML5 规范：

强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。

更多关于 lang 属性的知识可以从 此规范 中了解。

这里列出了语言代码表。

<html lang="zh-CN">

  <!-- ... -->

</html>

IE 兼容模式

IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

字符编码

通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。

<head>

  <meta charset="UTF-8">

</head>

引入 CSS 和 JavaScript 文件

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。

HTML5 spec links

<!-- External CSS -->

<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->

<style>

  /* ... */

</style>

<!-- JavaScript -->

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

实用为王

尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

属性顺序

HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

  • class
  • id, name
  • data-*
  • src, for, type, href
  • title, alt
  • aria-*, role

class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。

<a class="..." id="..." data-modal="toggle" href="#">

  Example link

</a>

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

<img src="..." alt="...">

布尔（boolean）型属性

布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。

更多信息请参考 WhatWG section on boolean attributes：

元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。

如果一定要为其赋值的话，请参考 WhatWG 规范：

如果属性存在，其值必须是空字符串或 [...] 属性的规范名称，并且不要在首尾添加空白符。

简单来说，就是不用赋值。

<input type="text" disabled>

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

<select>

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

</select>

减少标签的数量

编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。请看下面的案例：

<!-- Not so great -->

<span class="avatar">

  <img src="...">

</span>

<!-- Better -->

<img class="avatar" src="...">

JavaScript 生成的标签

通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
11.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

Bootstrap-Other：HTML编码规范的更多相关文章

  1. 8.Bootstrap CSS编码规范

    Bootstrap CSS编码规范 本节的介绍内容为 Bootstrap 中的 CSS 编码规范. 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择 ...

  2. 7.bootstrap HTML编码规范

    Bootstrap HTML编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格). 对于属性的定义,确保全部使用双 ...

  3. 前端编码规范，个人感觉bootstrap总结的不错，拿出来给大家分享

    前端编码规范,个人感觉bootstrap总结的不错,拿出来给大家分享 http://codeguide.bootcss.com/#html-doctype HTML 语法 HTML5 doctype ...

  4. Bootstrap编码规范

    黄金定律 永远遵循同一套编码规范 -- 可以是这里列出的,也可以是你自己总结的.如果你发现本规范中有任何错误,敬请指正.通过 open an issue on GitHub为本规范添加或贡献内容. 不 ...

  5. 前端HTML与CSS编码规范

    HTML 语法 HTML5 doctype 语言属性(Language attribute) 字符编码 IE 兼容模式 引入 CSS 和 JavaScript 文件 实用为王 属性顺序 布尔(bool ...

  6. Day7:掌握APICloud应用管理相关服务的配置使用和相关API，包括：应用发布、版本管理、云修复、闪屏广告等。理解APICloud APP优化策略和编码规范；了解APICloud多Widget管理机制和SuperWebview的使用

    主要内容: 1. 应用发布 1.1 云编译 1.2 全包加密 网页全包加密:对网页中全包的html,css,javascript代码进行加密,加密后的网友代码都是不可读的,并且不能通过常用的格式化工具 ...

  7. Bootstrap-Other：CSS编码规范

    ylbtech-Bootstrap-Other:CSS编码规范 1.返回顶部 1. Bootstrap CSS编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致 ...

  8. Android的编码规范

    一.Android编码规范 1.学会使用string.xml文件 在我看来,当一个文本信息出现的次数大于一次的时候就必须要使用string.xml 比如一个保存按钮 , 不规范写法: <Butt ...

  9. PHP 高级编程(1/5) - 编码规范及文档编写

    PHP 高级程序设计学习笔记20140612 软件开发中的一个重要环节就是文档编写.他可以帮助未来的程序维护人员和使用者理解你在开发时的思路.也便于日后重新查看代码时不至于无从下手.文档还有一个重要的 ...

随机推荐

  1. MSSQL 重建索引（在线重建、控制最大处理器数 、MAXDOP ）

    一.什么情况下需要重建索引 1.碎片过多(参考值:>20%) 索引碎片如何产生,请移步至< T-SQL查询高级—SQL Server索引中的碎片和填充因子> 2.填充度过低(参考值: ...

  2. POJ 2337 Catenyms

    http://poj.org/problem?id=2337 题意: 判断给出的单词能否首尾相连,输出字典序最小的欧拉路径. 思路: 因为要按字典序大小输出路径,所以先将字符串排序,这样加边的时候就会 ...

  3. springboot p6spy 打印完整sql

    调试时打印出sql的需求,太正常不过了,mybatis也提供了这样的功能: mybatis: configuration: log-impl: org.apache.ibatis.logging.st ...

  4. 一起动手打造个人娱乐级linux

    我们使用电脑,一直以来用的都是windows,但是对于像我这种爱折腾的人来说,尝试使用linux系统应该是一种不错的体验.说到linux,许多人可能都没听过,或者知道的人对它印象是这样的: 然而,li ...

  5. 动态规划-House Robber

    2018-04-29 20:20:56 House Robber问题是leetcode上经典的系列题,这里对其中的题目做一个讲解. 198. House Robber 问题描述: 问题求解: 本质上就 ...

  6. JavaScript--语法4--函数1

    JavaScript--语法4--函数1 一.心得 二.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " ...

  7. python 正则表达式详解

    正则表达式是一个很强大的字符串处理工具,几乎任何关于字符串的操作都可以使用正则表达式来完成,作为一个爬虫工作者,每天和字符串打交道,正则表达式更是不可或缺的技能,正则表达式的在不同的语言中使用方式可能 ...

  8. Hadoop异常

    org.apache.hadoop.mapred.InvalidInputException: Input path does not exist: hdfs://xxx:49000/user/had ...

  9. 各种排序算法思想复杂度及其java程序实现

    一.冒泡排序(BubbleSort)1. 基本思想: 设排序表长为n,从后向前或者从前向后两两比较相邻元素的值,如果两者的相对次序不对(A[i-1] > A[i]),则交换它们, 其结果是将最小 ...

  10. 根据rowid查找所属的对象号、文件号、块号、行号-还是简单一点吧

    select rowid,       dbms_rowid.rowid_object(rowid) obj#,       dbms_rowid.rowid_block_number(rowid) ...