HTML之编码规范

img 标签要写 alt 属性

根据 W3C 标准，img 标签要写 alt 属性，如果没有就写一个空的。但是一般要写一个有内容的，根据图片想要表达的意思，因为 alt 是在图片无法加载时显示的文字。如下不太好的写法：

<img src="company-logo.svg" alt="ABC Company Logo" />

更好的写法：

<img src="chime-logo.svg" alt="ABC Company" />

这里就不用告诉用户它是一个 Logo 了，直接告诉它是 ABC Compay 就好了。再如：

<img src="user-head.jpg" alt="User Portrait" />

可改成：

<img src="user-head.jpg" alt="Bolynga Team" />

如果图片显示不出来，就直接显示用户的名字。
有些人偷懒就直接写个空的 alt 那也可以，但是在一些重要的地方还是要写一下，毕竟它还是有利于 SEO.

单标签不要写闭合标签

为什么？因为写了也没用，还显得你不懂 html 规范，我们不是写 XHTML。常见的单标签有 img、link、input、hr、br，如下不好的写法：

<img src="test.jpg"></img><br/>
<input type="email" value=""/>

应改成：

<img src="test.jpg" /><br />
<input type="email" value="" />

如果你用 React 写 jsx 模板，它就要求每个标签都要闭合，但是它始终不是原生 html.

自定义属性要以 data-开头

自己添加的非标准的属性要以 data-开头，否则 w3c validator 会认为是不规范的，如下不好的写法：

<div count="5"></div>

应改成：

<div data-count="5"></div>

td 要在 tr 里面，li 要在 ul/ol 里面

如下不好的写法：

<div>
  <li></li>
  <li></li>
</div>

更常见的是 td 没有写在 tr 里面：

<table>
  <td></td>
  <td></td>
</table>

如果你写得不规范，有些浏览器会帮你矫正，但是有些可能就没有那么幸运。因为标准并没有说如果写得不规范应该怎么处理，各家浏览器可能有自己的处理方式。

ul/ol 的直接子元素只能是 li

有时候可能会直接在 ul 里面写一个 div 或者 span，以为这样没关系：

<ol>
  <span>123