最近整理了一份HTML/CSS/JS编码规范，供大家参考。
根据W3C标准，img标签要写alt属性，如果没有就写一个空的。但是一般要写一个有内容的，根据图片想要表达的意思，因为alt是在图片无法加载时显示的文字。如下不太好的写法：
更好的写法：
这里就不用告诉用户它是一个Logo了，直接告诉它是ABC Compay就好了。再如：
可改成：
如果图片显示不出来，就直接显示用户的名字。
有些人偷懒就直接写个空的alt那也可以，但是在一些重要的地方还是要写一下，毕竟它还是有利于SEO.
为什么？因为写了也没用，还显得你不懂html规范，我们不是写XHTML。常见的单标签有img、link、input、hr、br，如下不好的写法：
应改成：
如果你用React写jsx模板，它就要求每个标签都要闭合，但是它始终不是原生html.
自己添加的非标准的属性要以data-开头，否则w3c validator会认为是不规范的，如下不好的写法：
应改成：
如下不好的写法：
更常见的是td没有写在tr里面：
如果你写得不规范，有些浏览器会帮你矫正，但是有些可能就没有那么幸运。因为标准并没有说如果写得不规范应该怎么处理，各家浏览器可能有自己的处理方式。
有时候可能会直接在ul里面写一个div或者span，以为这样没关系：
这样写也是不规范的，不能直接在ol里面写span，ol是一个列表，它的子元素应该都是display: list-item的，突然冒出来个span，你让浏览器如何自处。所以写得不规范就会导致在不同的浏览器会有不同的表现。
同样，tr的直接子元素都应该是td，你在td里面写tr那就乱了。
如果你用了section/aside/article/nav这种标签的话，需要在里面写一个h1/h2/h3之类的标题标签，因为这四个标签可以划分章节，它们都是独立的章节，需要有标题，如果UI里面根本就没有标题呢？那你可以写一个隐藏的标题标签，如果出于SEO的目的，你不能直接display: none，而要用一些特殊的处理方式，如下套一个hidden-text的类：
使用section的好处是可以划分章节，如下代码：
就会被outline成这样的大纲：
Listing Detail
House InfomationLOCATIONBUILDINGListing Picture
可以使用html5 outliner进行实验，可以看到，我们很任性地使用了多个h1标签，这个在html4里面是不合法的。
例如下面的写法是不合法的：
a标签是一个行内元素，行内元素里面套了一个div的标签，这样可能会导致a标签无法正常点击。再或者是span里面套了div，这种情况下需要把inline元素显式地设置display为block，如下代码：
这样就正常了。
设置页面的渲染模式为标准模式，如果忘记写了会怎么样？忘记写了会变成怪异模式，怪异模式下很多东西渲染会有所不同，怪异模式下input/textarea的默认盒模型会变成border-box，文档高度会变成可视窗口的高度，获取window的高度时就不是期望的文档高度。还有一个区别，父容器行高在怪异模式下将不会影响子元素，如下代码：
在标准模式下div下方会留点空白，而在怪异模式下会。这个就提醒我们在写邮件模板时需要在顶部加上<!DOCType html>，因为在本地开发邮件模板时是写html片段，没有这个的话就会变成怪异模式。
由于邮件客户端多种多样，你不知道用户是使用什么看的邮件，有可能是用的网页邮箱，也有可能用的gmail/outlook/网易邮箱大师等客户端。这些客户端多种多样，对html/css的支持也不一，所以我们不能使用高级的布局和排版，例如flex/float/absolute定位，使用较初级的table布局能够达到兼容性最好的效果，并且还有伸缩的效果。
另外邮件模板里面不能写媒体查询，不能写script，不能写外联样式，这些都会被邮件客户端过滤掉，样式都得用内联style，你可以先写成外联，然后再用一些工具帮你生成内联html。
写完后要实际测一下，可以用QQ邮箱发送，它支持发送html格式文本，发完后在不同的客户端打开看一下，看有没有问题，如手机的客户端，电脑的客户端，以及浏览器。
由于你不知道用户是用手机打开还是电脑打开，所以你不能把邮件内容的宽度写死，但是完全100%也不好，在PC大屏幕上看起来可能会太大，所以一般可以这样写：
最外面的table宽度100%，里面的table有一个max-width:600px，相对于外面的table居中。这样在PC上最大宽度就为600px，而在手机客户端上宽度就为100%。
但是有些客户端如比较老的outlook无法识别max-width的属性，导致在PC上太宽。但是这个没有办法，因为我们不能直接把宽度写死不然在手机上就要左右滑了，也不能写script判断ua之类的方法。所以无法兼容较老版本outlook.
需要套很多层的，一般有两种情况，一种是切图不太会，需要套很多层来维持排版，第二种是会切图，但是把UI拆解得太细。像以下布局：
我会这么写：
因为它是一个列表，所以外面用ul/li作为容器，里面就两个div，一个图片的float: left，另外一个文字的容器，这样就可以了。不用套很多层，但是有一些是必要的，你写得太简单的话，扩展性不好，例如它是一个列表那你就应该使用ul/ol，如果你要清除浮动，那你可能需要套一个clearfix的容器。
如果有一块是整体，它整体向右排版，那么这一块也要套一个容器，有时候为了实现一些效果，可能也要多套一个容器，例如让外面的容器float，而里面的容器display: table-cell。但是你套这些容器应该都是有价值，如果你只是为了在功能上看起来整齐划一，区分明显好像没太大的意义。
通常来说，在html里面直接写script和style是一种不好的实践，这样把样式、结构和逻辑都掺杂在一起了。但是有时候为了避免闪屏的问题，可能会直接在相应的html后面跟上调整的script，这种script看起来有点丑陋，但是很实用，是没有办法的办法。
样式不能写在body里，写在body里会导致渲染两次，特别是写得越靠后，可能会出现闪屏的情况，例如上面的已经渲染好了，突然遇到一个style标签，导致它要重新渲染，这样就闪了一下，不管是从码农的追求还是用户的体验，在body里面写style终究是一种下策。
同样地script不要写在head标签里面，会阻碍页面加载。
而CSS也推荐写成style标签直接嵌在页面上，因为如果搞个外链，浏览器需要先做域名解析，然后再建立连接，接着才是下载，这一套下来可能已经过了0.5s/1s，甚至2——3秒。而写在页面的CSS虽然无法缓存，但是本身它也不会很大，再加gzip压缩，基本上在50k以内。
如下，如果是英文的网页，应该这么写：
第一种表示它是英文的网页，第二种表示它是美国英语的网页，加上这个的好处是有利于SEO和屏幕阅读器使用者，他可以快速地知道这个网页是什么语言的，如果是中文可以这么写：
如下，一般charset的meta标签要写在head标签后的第一个标签：
一个原因是避免网页显示unicode符号时乱码，写在前面是因为w3c有规定，语言编码要在html文档的前1024个字节。如果不写的话在老的浏览器会有utf-7攻击的隐患，具体可以自行查阅资料，只是现在的浏览器基本都去掉了对utf-7编码的支持了。
charset的标签写成html5的这种比较简洁的写法就行了，不需要写成html4这种长长的：
据我所查，就算是IE6也支持那种简短的写法，虽然它不是一个html5浏览器。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60019.shtml
