DOCTYPE 声明

HTML 文件必须加上 DOCTYPE 声明,并统一使用 HTML5 的文档声明:

<!DOCTYPE html>

页面语言 LANG

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

推荐使用属性值 cmn-Hans-CN(简体, 中国大陆),但是考虑浏览器和操作系统的兼容性,目前仍然使用 zh-CN 属性值。

<html lang="zh-CN"></html>

更多地区语言参考:

zh-SG 中文 (简体, 新加坡) 对应 cmn-Hans-SG 普通话 (简体, 新加坡)
zh-HK 中文 (繁体, 香港) 对应 cmn-Hant-HK 普通话 (繁体, 香港)
zh-MO 中文 (繁体, 澳门) 对应 cmn-Hant-MO 普通话 (繁体, 澳门)
zh-TW 中文 (繁体, 台湾) 对应 cmn-Hant-TW 普通话 (繁体, 台湾)

语言代码列表

HTML 代码大小写

HTML 标签名、类名、标签属性和大部分属性值统一用小写。

推荐:

<div class="demo"></div>

不推荐:

<div class="DEMO"></div>

<DIV class="DEMO"></DIV>

类型属性

不需要为 CSS、JS 指定类型属性,HTML5 中默认已包含。

推荐:

<link rel="stylesheet" href="" />
<script src=""></script>

不推荐:

<link rel="stylesheet" type="text/css" href="" />
<script type="text/javascript" src=""></script>

特殊字符引用

文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。

在 HTML 中不能使用小于号 “<” 和大于号 “>” 特殊字符,浏览器会将它们作为标签解析,若要正确显示,在 HTML 源代码中使用字符实体

推荐:

<a href="#">more&gt;&gt;</a>

不推荐:

<a href="#">more>></a>

代码缩进

  • 统一使用两个空格进行代码缩进,使得各编辑器表现一致(各编辑器有相关配置)

  • 用两个空格来代替制表符(tab)

代码嵌套

  • 元素嵌套规范,每个块状元素独立一行,内联元素可选

  • 嵌套元素应当缩进一次(即两个空格)

推荐:

<div>
  <h1></h1>
  <p></p>
</div>
<p><span></span><span></span></p>

不推荐:

<div>
  <h1></h1><p></p>
</div>    
<p> 
  <span></span>
  <span></span>
</p>

段落元素与标题元素只能嵌套内联元素

推荐:

<h1><span></span></h1>
<p><span></span><span></span></p>

不推荐:

<h1><div></div></h1>
<p><div></div><div></div></p>

属性风格

对于属性的值的定义,确保全部使用双引号,绝不要使用单引号。

推荐:

<div class="demo"></div>

不推荐:

<div class='demo'></div>

属性顺序

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

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

推荐:

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

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

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

布尔(boolean)型属性

布尔型属性在声明时不需要赋值。元素的布尔型属性如果有值,就是 true,如果没有值,就是 false。

推荐:

<input type="text" disabled>

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

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

不推荐:

<input type="text" disabled="true">

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

<select>
  <option value="1" selected="selected">1</option>
</select>
Copyright © Sodo Tech 2014-2018 all right reserved,powered by Gitbook最后更新: 2019-01-11 17:14

results matching ""

    No results matching ""