1. HTML基础规范—整体结构
1.1 文件应以<!doctype html>首行定格开始，这句话告诉浏览器这是一个什么文件，我们推荐使用<!doctype html>。
1.2 必须在head元素内部的meta标签内声明文档的字符编码charset, 如：<meta charset="UTF-8">，这句代码告诉浏览器应该此HTML文件使用的字符集是什么，如果不加此行代码，那么在浏览器中可能显示为乱码。
1.3 页面的title是极为重要的不可缺少的一项。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>示例1</title> 6 </head> 7 <body> 8 9 </body> 10 </html>
1.4 结构顺序和视觉顺序基本保持一致
?按照从上至下、从左到右的视觉顺序书写HTML结构。
?有时候为了便于索取引擎抓取，我也会将重要内容在HTML结构顺序上提前，因为搜索引擎抓取网页内容是自上而下的，所以将重要的内容在HTML结构顺序上提前可便于抓取重要内容。
?用div代替table布局，可以使HTML更具有灵活性，也方便利用css控制。
? table不建议用于布局，但表现具有明显表格形式的数据，table还是首选项。
1.5 结构、表现、行为三者分类,避免内联。
?使用link将css文件引入，并置于head中。注意：一般我们不适用@import来引入外部css文件。
?使用script将js文件引入，并置于body底部，js文件最后加载，HTML会最先加载，用户体验会更好。注意：并不是所有的js文件都要放置与body底部，如果我们需要使用js文件动态修改meta元素内容时，需要将js文件引入head标签中。
1.6 保持良好的树形结构
?每一个块级元素都另起一行，每一行都使用tab缩进对齐。如果不是块级元素，比如几个行内元素，我们把它写在一行即可。注意：html、head、body以及body下的几个第一级标签(即直接子元素)不缩进，其他的都正常缩进。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>示例1</title> 6 </head> 7 <body> 8 <h1>缩进问题</h1> 9 <div>我是块级元素</div> 10 <div> 11 <div> 12 <p>我是段落标签</p> 13 </div> 14 </div> 15 </body> 16 </html>
1.7 其他问题
-
- 结构上如果可以并列书写，就不要嵌套。例如：如果可以写成<div></div><div></div>那么就不要写成<div><div></div></div>
-
- 如果结构已经可以满足视觉和语义的要求，那么就不要有额外的冗余的结构。例如：比如<div><h2></h2></div>已经能满足要求，那么就不要再写成<div><div><h2></h2></div></div>
-
- 一个标签上应用的类名不要过多，越少越好。例如：<div class="class1 class2 class3 class4"></div>
-
- 对于一个语义化的内部标签，应该尽量避免使用类名。例如：li标签中的itm应去除：<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>
1.8 Renderer
<meta http-equiv="X-UA-Compatible" content="edge,chrome=1" />
或者<meta http-equiv="X-UA-Compatible" content="edge" />
chrome=1值，目的是触发Google Chrome Frame，不过现在Google已经抛弃Google Chrome Frame了，因此也不用这样写了。
<meta name="renderer" content="webkit|ie-comp|ie-stand">
content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。 若页面需默认用极速核，增加标签：<meta name=”renderer” content=”webkit” /> 若页面需默认用ie兼容内核，增加标签：<meta name=”renderer” content=”ie-comp” /> 若页面需默认用ie标准内核，增加标签：<meta name=”renderer” content=”ie-stand” />
这里发现一个问题，官方给的信息里结尾是“>”，实际测试时不起作用，这时只要把结尾改为“ />”（注意 / 前面有空格）。
2. HTML基础规范—代码格式
2.1 说明文案的注释方法
-
- 开始注释：<!--注释文案-->
- 结束注释：<!--/注释文案-->
- 允许只有开始注释。
1 <div class="public-header"> 2 <div class="public-container clearfloat"> 3 <div class="header-logo"><a href="javascript:;"></a></div><!-- a也可以，但是，同一级：要么内联要么块级 --> 4 <ul class="header-nav clearfloat"> 5 <li class="item"><a href="javascript:;">Our Story</a></li><!--不建议直接给li进行命名--> 6 <li class="item"><a href="javascript:;">Menu</a></li> 7 <li class="item"><a href="javascript:;">Reservations</a></li> 8 <li class="item"><a href="javascript:;">News</a></li> 9 <li class="item"><a href="javascript:;">Reviews</a></li> 10 </ul> 11 </div><!-- 没有高度的，所以要加浮动 --> 12 </div><!-- 1. 公共头 -->
2.2 严格嵌套
（1）应当以最严格的XHTML script标准来嵌套，不如内联元素不能包含块级元素等。
（2）正确闭合标签且必须闭合。
2.3 严格的属性
（1）属性和值全部小写，每个属性都必须有一个值,每个值必须加双引号。
（2）没有值的属性必须使用自己的名称作为值（checked、disabled、readonly、selected等等）。
（3）可以省略style标签和script标签的type属性。
3. HTML基础规范—HTML内容语义
1.加强资源型内容的可访问型和可用性。
比如在img标签内加入alt属性，在audio内加入文案和链接等等。
2.加强不可见内容的可访性
比如背景图片的文字应该同时卸载HTML中，并使用css使其不可见，有利于搜索引擎抓取你的内容，也可在css失效的情况下看到内容。
3.适当使用实体（以实体代替与HTML语法相同的字符，避免浏览器解析错误）
常用的HTML字符实体(建议使用实体):
常用的字符实体（不建议使用实体）:
4. HTML基础规范—正确闭合HTML标签
自闭和标签和闭合标签应该按照要求书写。标签不要交叉嵌套。
如下的这几种写法不符合规范，应该严格禁止：
<!-- 错误：非自闭合标签没有结束标签 --><a href="demo.html" title="demo">simple
<!-- 错误：非自闭合标签使用自闭合标签的语法 --><a href="demo.html" title="demo" />
<!-- 错误：自闭合标签使用非自闭合标签的语法 --><img src="demo.png" alt="demo"></img>
当元素的起始标签和结束标签不在同一个元素的内容中时，则会出现交叉嵌套。应该严格禁止标签之间的交叉嵌套。
下面的例子中起始标签“<span>”在元素div的内容中，而结束标签“</span>”则在div元素的内容之外：
<!-- 错误： 起始标签“<span>”在元素div的内容中，结束标签“</span>”则在div元素的内容之外 --><div>foo <span>bar</div> baz</span>
一般通过编写层次缩进良好的HTML代码能够最大化避免出现这样交叉嵌套的错误代码。
5. HTML基础规范—停止使用不标准的标签和属性
标签没有实际的语义，仅仅是用于设置样式
不推荐使用单纯设置样式的标签，如：basefont、big、center、font等。应该通过CSS设置样式，让HTML标签功能更单一。不推荐的示例如下：
<!--不推荐代码：不推荐使用单纯设置样式的标签，应该通过CSS设置样式--><font color=blue>don‘t use it!</font><big>don‘t use it!</big><center>don‘t use it!</center>
不推荐在HTML标签中添加样式属性，如：iframe、img、input、div等标签中的align属性，body标签上的background属性，td和tr标签上的height、width、nowrap、bgcolor、valign等属性，iframe标签中的frameborder、marginheight、scrolling等属性。此类属性应该废弃，并通过添加CSS样式来实现相同的效果。不推荐的示例如下：
<!—不推荐代码：标签中添加border、width、height等样式属性--><img src=”#” alt=”demo” border=”1” width="194" height="37" /><div id="focusViwer" align=center> </div>
不推荐使用 <blink> 或<marquee> (闪动,滚动)。这两个标签的职能已经超出了HTML本身，并且也存在浏览器的兼容问题。以如今的审美来说，这两个标签实现的效果丑陋无比，如果一定要这样的效果，可以通过JavaScript代码来实现，并且效果会更好，如：可以使用jQuery Marquee插件 。不推荐的示例如下：
<!--不推荐代码：效果丑陋，并且存在浏览器兼容问题，不推荐使用，如果需要实现这样的效果，可以通过JavaScript代码来实现，并且效果会更好--><blink>don‘t use it!</blink><marquee scrollamount=3 scrolldelay=100 >don‘t use it</marquee>
6. HTML基础规范—其他
书写链接地址时, 必须避免重定向，例如：href=”http://baidu.com/”, 即须在URL地址后面加上“/”；
引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;
能以背景形式呈现的图片，尽量写入css样式中;
书写过程中，考虑向后扩展性。
原文地址：https://www.cnblogs.com/chenqilin-516/p/10328444.html