Bootstrap HTML编码标准

语法

  • 用两个空格来替代制表符(tab) -- 这是仅有能保证在所有环境下取得共同展示的办法。
  • 嵌套元素应当缩进一次(即两个空格)。
  • 关于特点的界说,保证悉数运用双引号,绝不要运用单引号。
  • 不要在自闭合(self-closing)元素的尾部增加斜线 -- 中清晰阐明这是可选的。
  • 不要省掉可选的完毕标签(closing tag)(例如,</li></body>)。

实例:

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="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/csstext/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 标准不需求。

更多信息请参阅 :

元素的布尔型特点假如有值,便是 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 生成的标签让内容变得不易查找、修改,而且下降功能。能防止时尽量防止。