1. 元素及标签闭合

• 所有具有开始标签和结束标签的元素都要写上起止标签；
• 某些允许省略开始标签或和束标签的元素亦都要写上；
• 空元素标签都不加 “/”字符。
  空元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

推荐

<div>
    <p>这是一段文字，有始有终，浏览器能正确解析</p>
</div>

<br>

不推荐

<div>
    <p>这是一段文字，有始无终，浏览器亦能正确解析
</div>

<br/>

2. 书写风格

(1) 缩进

使用soft tab，4个空格。

(2) 大小写

HTML标签名、类名、标签属性和大部分属性值统一用小写。
meta标签某些属性等内容可大小写混合。

推荐

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="UTF-8">

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

不推荐

<meta HTTP-EQUIV="X-UA-Compatible" CONTENT="IE=edge,chrome=1" CHARSET="UTF-8">

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

<DIV CLASS="DEMO"></DIV>

(3) 元素属性

元素属性值使用双引号(“ “)，而不是单引号(‘ ‘)。
推荐：

<!-- 推荐 -->
<input type="text">

<input type="radio" name="name" checked="checked">

<!-- 不推荐 -->
<input type=text>

<input type=‘radio‘ name=‘name‘>

(4) 代码嵌套

• 每个块级元素独立一行，内联元素可选，不必须。

推荐

<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>

(5) 纯数字输入框

type属性使用tel，而不是number。

<!-- 推荐 -->
<input type="tel">

<!-- 不推荐 -->
<input type="number">