原则
1.规范。保证代码规范，趋html5,远xhtml，保证结构表现行为相互分离。
2.简洁。保证代码的最简化，避免多余的空格、空行，保持代码的语义化，尽量使用具有语意的元素，避免使用样式属性和行为属性。任何时候都要用尽量简单、尽量少的元素解决问题。语义化：比如head元素来定义头部标题，p元素来定义文字段落，用a元素来定义链接锚点等等。
有根据有目的地使用html元素，对于可访问性、代码重用、代码效率来说意义重大。
3.实用。遵循标准，但是不能以牺牲实用性为代价。
4.忠诚。选择一套规范，然后始终遵循。不管代码由多少人参与，都应该看起来像一个人 的一样。
语法
1.小写。html标签、html属性全部小写。
2.嵌套。所有元素必须正确嵌套。
3.闭合。双标签必须闭合，单标签（自关闭标签）不闭合。
错误书写：
<br/> <hr/>
正确书写：
<br> <hr>
注释
1.详尽注释。解释代码解决问题、解决思路、是否为新方案等。
2.模块注释。建议不使用模块结束注释。
html文件中的注释：
<div class="news"> 建议不使用结束模块的注释，因为这样太丑，并且加重文件负荷
jsp文件中的注释：
<%-- --%>
3.待办注释。
<%-- TODO:待办事项 --%>
文档
1.文档类型使用html5标准文档类型，文档类型声明之前，不允许出现任何非空字符。不允许添加<meta>强制改变文档模式。
推荐使用 HTML5 的文档类型声明 <!DOCTYPE html> （建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限）
2.html元素上指定lang属性。显示页面语言，有助于语言合成工具来确定怎样发音，以及翻译工具决定使用的规则，等等。
3.指定明确的字符编码。让浏览器轻松、快速的确定适合网页内容的渲染方式。
4.IE兼容模式。Internet Explorer支持使用兼容性<meta>标签来指定使用什么版本的IE来渲染页面。如果不是特殊需要，通常通过edge mode来通知IE使用最新的兼容模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
5.head部分的顺序：a.<meta>元素，b.<title>元素，c.样式表。
6.可以使用IE条件注释的方式兼容IE，但是不要添加额外的样式表。
错误的书写：`
`
正确的书写：
<html class="ie8" lang="zh-cn"> <![endif] --> <html class="ie7" lang="zh-cn"> <![endif] -->
7.现在双核浏览器：360、搜狗、QQ等浏览器可以让网页默认使用webkit内核渲染，代码如下：
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> //使用chrome内核渲染。没有则以最高版本IE渲染
属性
1.双引号属性值，不要使用单引号。
2.省略type属性。使用style、link、script，不用指定type属性，因为text/css和text/javascript分别是他们的默认值。
3.省略Boolean属性值。Boolean属性不用添加取值，disabled,checked,selected等。
4.省略url类属性资源协议头。
5.属性顺序。html属性应该按照特定的顺序出现以保证易读性。class->id,name,自定义属性->data-->src,for,type,href->title,alt->aria-,role。
6.自定义属性。自定义属性格式为hyphone-开头，后跟原生属性，如：
<div hyphone-id="id" hyphone-name="name" hyphone-width="width"></div>
7.多媒体元素添加替代属性。图像增加alt属性，音视频增加替代文字。
元素
1.避免冗余标签。
2.段落文字用<p>，避免使用<br>。
3.列表项放在<ul>、<ol>、<dl>，不要使用一系列的<div>或<p>。
4.form button应制定type类型，使用type="submit"、type="reset"或type="button"。
5.table布局中有效使用<thead>、<tbody>、<th>。可以把<tfoot>放在<tbody>前提高加载速度。
格式
1.soft tab【2个英文格式的空格】。
2.嵌套缩进。
3.删除行位空格。
4.块元素、列表元素、表格元素都放在新行。
5.inline元素视情况换行。
6.努力保持每行长度小于120列，如果太长可换行。
如果由于换行的空格引发了不可预计的问题，那将所有元素并入一行也是可以接受的，格式警告总好过错误警告。
错误书写:`
<img class="block-element" id="unicorn"
src="http://hyphoneit.com/images/img.jpg" alt="unicron,
rainbows, poop and stuff"`
正确书写:
`
<img
class="block-element"
id="unicorn"
src="http://hyphoneit.com/images/img.jpg"
alt="unicron, rainbows, poop and stuff"`
脚本加载
出于性能考虑,脚本异步加载很关键。
一段脚本放置在<head>内，比如<script src="hyphone.js"></script>，其加载会一直阻塞DOM解析，直至它完全地加载和执行完毕。这会造成页面显示的延迟。特别是一些重量级的脚本，对于用户体验来说是一个巨大的影响。
异步加载脚本可缓解这种性能影响。
如果只需兼容IE10+，可将html5的async属性加至脚本中，它可防止阻塞DOM的解析，甚至可以将脚本引用写在<head>里也没有影响。
如需兼容老旧的浏览器，实践表明可使用动态注入的脚本加载器。可以考虑使用yepnope或labjs。注入脚本的一个问题是:一直要等到CSS对象文档已就绪，它们才开始加载（短暂滴再CSS加载完毕之后），这就对需要及时触发的JS造成一定的延迟，多少也影响了用户体验。
综上所述，兼容老旧浏览器（IE9-）时，应遵循以下规则：
脚本引用写在body结束标签之前，并带上async属性。
title,alt->aria-*,role。
>6.自定义属性。自定义属性格式为hyphone-开头，后跟原生属性，如：
>>>> <div hyphone-id="id" hyphone-name="name" hyphone-width="width"></div> >>
>7.多媒体元素添加替代属性。图像增加alt属性，音视频增加替代文字。
#元素
>1.避免冗余标签。
>2.段落文字用<p>，避免使用<br>。
>3.列表项放在<ul>、<ol>、<dl>，不要使用一系列的<div>或<p>。
>4.form button应制定type类型，使用type="submit"、type="reset"或type="button"。
>5.table布局中有效使用<thead>、<tbody>、<th>。可以把<tfoot>放在<tbody>前提高加载速度。
#格式
>1.soft tab【2个英文格式的空格】。
>2.嵌套缩进。
>3.删除行位空格。
>4.块元素、列表元素、表格元素都放在新行。
>5.inline元素视情况换行。
>6.努力保持每行长度小于120列，如果太长可换行。
>如果由于换行的空格引发了不可预计的问题，那将所有元素并入一行也是可以接受的，格式警告总好过错误警告。
>错误书写:
>>>> <img class="block-element" id="unicorn" >> src="http://hyphoneit.com/images/img.jpg" alt="unicron, >> rainbows, poop and stuff" >> > >>
>正确书写:
>>>> <img >> class="block-element" >> id="unicorn" >> src="http://hyphoneit.com/images/img.jpg" >> alt="unicron, rainbows, poop and stuff" >> > >>
#脚本加载
>出于性能考虑,脚本异步加载很关键。
>>一段脚本放置在<head>内，比如<script src="hyphone.js"></script>，其加载会一直阻塞DOM解析，直至它完全地加载和执行完毕。这会造成页面显示的延迟。特别是一些重量级的脚本，对于用户体验来说是一个巨大的影响。
>异步加载脚本可缓解这种性能影响。
>>如果只需兼容IE10+，可将html5的async属性加至脚本中，它可防止阻塞DOM的解析，甚至可以将脚本引用写在<head>里也没有影响。
如需兼容老旧的浏览器，实践表明可使用动态注入的脚本加载器。可以考虑使用yepnope或labjs。注入脚本的一个问题是:一直要等到CSS对象文档已就绪，它们才开始加载（短暂滴再CSS加载完毕之后），这就对需要及时触发的JS造成一定的延迟，多少也影响了用户体验。
>综上所述，兼容老旧浏览器（IE9-）时，应遵循以下规则：
>>脚本引用写在body结束标签之前，并带上async属性。
这虽然在老旧浏览器中不会异步加载脚本，单它只阻塞了body结束标签之后的DOM解析，这就大大降低了其阻塞影响。而在现代浏览器中，脚本将在DOM解析器发现body尾部的script标签才进行加载，此时加载属于异步加载，不会阻塞DOM解析。
推荐书写方法：
<!DOCTYPE html> <head> <link rel="stylesheet" href="hyphone.css"> </head> <body> <script src="hyphone.js" async></script> </body> </html>
关注点分离
理解web中如何和为何区分不同的关注点，这很重要。这里的关注点主要指的是：信息（HTML结构）、外观（CSS）和行为（JavaScript）。为了使它们成为可维护的干净整洁的代码，我们要尽可能的将它们分离开来。
严格地保证结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系。即，尽量在文档和模板中只包含结构性的HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本中。在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。
清晰的分层意味着：
1.不使用超过一到两张样式表（common.css, self.css）
2.不使用超过一到两个脚本（学会用合并脚本）
3.不使用行内样式（<style>.no-good{}</style>）
4.不在元素上使用style属性（<hr style="border-top:5px solid black">）
5.不使用行内脚本（<script>alert('no good')</script>）
不使用表象元素（<b>、<u>、<center>、<font>）
不使用表象class名（red，left，center）
错误书写：
<!DOCTYPE html> <head> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="grid.css"> <link rel="stylesheet" href="type.css"> <link rel="stylesheet" href="modules/user.css"> </head> <body> <h1 style="font-size:3rem"></h1> <b>海枫科技</b> <center>海枫科技</center> <script> alert('海枫科技'); </script> <div class="red">海枫科技</div> </body> </html>
正确书写:
<!DOCTYPE html> <head> <link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="modules/user.css"> </head> <body> <h1 class="title"></h1> <div class="sub-title">海枫科技</div> <span class="comment">海枫科技</span> <div class="important">海枫科技</div> <script src="hyphone.js" async><script> </body> </html>
HTML内容至上
不要让非内容信息污染了你的HTML。现在貌似有一种倾向：通过HTML来解决设计问题，这是显然不对的。HTML就应该只关注内容。
HTML标签的目的，就是为了不断地展示内容信息。不要引入一些特定的HTML结构来解决一些视觉设计问题
不要讲img元素当做专门用来做视觉设计的元素
不推荐的书写：
<span class="text-box"> <span class="square"></span> Hellow Hyphone! </span> .text-box > .square{ display: inline-block; width: 1rem; height: 1rem; background-color: red; }
推荐书写：
<span class="text-box"> Hellow Hyphone! </span> .text-box:before{ content: ""; display: inline-block; width: 1rem; height: 1rem; background-color: red; }
图片和SVG图形能被引入到HTML中的唯一理由是它们呈现出了与内容相关的一些信息。
不推荐的书写：
<span class="text-box">  Hellow Hyphone! </span>
推荐书写：
<span class="text-box"> Hellow Hyphone! </span> .text-box:before{ content: ""; display: inline-block; width: 1rem; height: 1rem; background: url(square.svg) no-repeat; background-size: 100%; }
命名规范
文件名称命名统一用小写的英文字母，不得包含汉字空格数字和特殊符号等，遵循两个原则：1.方便理解；2.方便查找。
不推荐
产品.html index_%.html about-us.html 1.html
推荐
product.html index.html about.html
