导读：
随着html5的逐渐深入人心，html5和xhtml截然相反的态度，造成了前端开发者的困惑，如何保持html代码的兼容性、简洁性、未来适用性，称为今天我们这篇文章的主要目的。
原则
1.规范 。保证您的代码规范，趋html5，远xhtml，保证结构表现行为相互分离。
2.简洁。保证代码的最简化，避免多余的空格、空行，保持代码的语义化，尽量使用具有语义的元素，避免使用样式属性和行为属性。任何时候都要用尽量简单、尽量少的元素解决问题。
3.实用。遵循标准，但是不能以牺牲实用性为代价。
4.忠诚。选择一套规范，然后始终遵循。不管代码由多少人参与，都应该看起来像一个人写的一样。
语法
1.小写。html标签、html属性全部小写。
2.嵌套。所有元素必须正确嵌套。
3.闭合。双标签必须闭合，单标签（自关闭标签）不闭合。
注释
1.详尽注释。解释代码解决问题、解决思路、是否为新鲜方案等。
2.模块注释。github建议不使用模块结束注释。
3.待办注释。
文档
1.文档类型使用html5标准文档类型，文档类型声明之前，不允许出现任何非空字符。不允许添加强制改变文档模式。
2.html元素上指定lang属性。显示页面语言，有助于语言合成工具来确定怎样发音，以及翻译工具决定使用的规则，等等。
3.指定明确的字符编码。让浏览器轻松、快速的确定适合网页内容的渲染方式。
4.IE兼容模式。Internet Explorer 支持使用兼容性 标签来指定使用什么版本的 IE 来渲染页面。如果不是特殊需要，通常通过 edge mode 来通知 IE 使用最新的兼容模式。
- <meta http-equiv="X-UA-Compatible" content="IE=Edge">
5.head部分的顺序：a.元素，b. 需要的js文件（eg. Moddernizr or HTML5 Shiv），c.
元素，d.样式表。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">6.可以使用IE条件注释的方式兼容IE，但是不要添加额外的样式表。</p>
<div class="dp-highlighter bg_html" style="font-family: Consolas, 'Courier New', Courier, mono, serif; width: 936.53125px; overflow: auto; padding-top: 1px; line-height: 26px; white-space: normal; margin: 18px 0px !important; background-color: rgb(231, 229, 220);">
<div class="bar" style="padding-left: 45px;">
<div class="tools" style="padding: 3px 8px 10px 10px; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108); background-color: rgb(248, 248, 248);">
<b>[html]</b> view plaincopy<img alt="在CODE上查看代码片" height="12" src="http://static.nbla.cn/Uploads/image/2017-04-01/14910301695099.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" style="border: none; max-width: 100%; position: relative; top: 1px; left: 2px;" width="12"><img alt="派生到我的代码片" height="12" src="https://code.csdn.net/assets/ico_fork.svg" style="border: none; max-width: 100%; position: relative; top: 2px; left: 2px;" width="12">
<div style="position: absolute; left: 441px; top: 1777px; width: 18px; height: 18px; z-index: 99;"> </div>
</div>
</div>
<ol class="dp-xml" start="1" style="padding: 0px; border: none; list-style-position: initial; list-style-image: initial; color: rgb(92, 92, 92); margin: 0px 0px 1px 45px !important; background-color: rgb(255, 255, 255);">
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="comments" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 130, 0); background-color: inherit;"><!--bad--></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><!--[if IE8]<span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">link</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">rel</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"stylesheet"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">href</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"/Assets/styles/IE8.css"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><![endif]--<span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><!--[if IE7]<span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">link</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">rel</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"stylesheet"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">href</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"/Assets/styles/IE7.css"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><![endif]--<span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> </span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="comments" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 130, 0); background-color: inherit;"><!--good--></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="comments" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 130, 0); background-color: inherit;"><!--[if IE8]><html class="ie8" lang="zh-cn"><![endif]--></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="comments" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 130, 0); background-color: inherit;"><!--[if IE7]><html class="ie7" lang="zh-cn"><![endif]--></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
</ol>
</div>
<h2 style="margin: 0px; padding: 0px; font-family: Arial; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">
属性</h2>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">1.双引号属性值，不要使用单引号。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">2.省略type属性。使用style、link、script，不用指定type属性，因为 text/css 和 text/javascript 分别是他们的默认值。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">3.省略Boolean属性值。Boolean属性不用添加取值，disabled,checked,selected等。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">4.省略url类属性资源协议头。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">5.属性顺序。html属性应该按照特定的顺序出现以保证易读性。class->id,name->data-*->src,for,type,href->title,alt->aria-*,role。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">6.多媒体元素添加替代属性。图像增加alt属性，音视频增加替代文字。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">7.不手动设置tabindex属性，让浏览器自动设置。</p>
<h2 style="margin: 0px; padding: 0px; font-family: Arial; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">
元素</h2>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">1.避免冗余标签。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">2.避免JS生成标签。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">3.段落文字应该用<p>，避免使用<br>。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">4.列表项放<ul>、<ol>、<dl>，不要使用一系列的<div>或<p></p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="text-indent: 2em;">5.<input>使用for属性绑定<label>。</span></p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">6.使用<label>标签包裹radio或checkbox和他们的文字，不用再使用for属性。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">7.使用单选、复选替代下拉菜单。（radio or checkbox instead of select menu）</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">8.form button应制定type类型，使用type="submit"、type="reset"或type="button"。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">9.首要的表单按钮首先出现(在DOM中)，尤其是适用多个提交按钮的场合。视图中显示的顺序可以利用css修改。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="text-indent: 2em;">10.有效使用<thead>、<tfoot>、<tbody>、<th>（scope属性）。可以把<tfoot>放<tbody>前提高加载速度。</span></p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);"> </p>
<div class="dp-highlighter bg_html" style="font-family: Consolas, 'Courier New', Courier, mono, serif; width: 936.53125px; overflow: auto; padding-top: 1px; line-height: 26px; white-space: normal; margin: 18px 0px !important; background-color: rgb(231, 229, 220);">
<div class="bar" style="padding-left: 45px;">
<div class="tools" style="padding: 3px 8px 10px 10px; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108); background-color: rgb(248, 248, 248);">
<b>[html]</b> view plaincopy<img alt="在CODE上查看代码片" height="12" src="http://static.nbla.cn/Uploads/image/2017-04-01/14910301695099.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" style="border: none; max-width: 100%; position: relative; top: 1px; left: 2px;" width="12"><img alt="派生到我的代码片" height="12" src="https://code.csdn.net/assets/ico_fork.svg" style="border: none; max-width: 100%; position: relative; top: 2px; left: 2px;" width="12">
<div style="position: absolute; left: 441px; top: 2538px; width: 18px; height: 18px; z-index: 99;"> </div>
</div>
</div>
<ol class="dp-xml" start="1" style="padding: 0px; border: none; list-style-position: initial; list-style-image: initial; color: rgb(92, 92, 92); margin: 0px 0px 1px 45px !important; background-color: rgb(255, 255, 255);">
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">table</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">summary</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"This is a chart of invoices for 2011."</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">thead</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">tr</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">th</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">scope</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"col"</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">Table header 1</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">th</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">th</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">scope</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"col"</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">Table header 2</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">th</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">tr</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">thead</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">tfoot</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">tr</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">td</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">Table footer 1</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">td</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">td</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">Table footer 2</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">td</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">tr</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">tfoot</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">tbody</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">tr</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">td</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">Table data 1</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">td</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">td</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">Table data 2</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">td</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">tr</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">tbody</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">table</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
</ol>
</div>
<h2 style="margin: 0px; padding: 0px; font-family: Arial; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">
格式</h2>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">1.soft tab。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">2.嵌套缩进。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">3.删除行尾空格。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">4.块元素、列表元素、表格元素都放在新行。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">5.inline元素视情况换行。</p>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);">6.努力保持每行长度小于80列，如果太长可换行。</p>
<div class="dp-highlighter bg_html" style="font-family: Consolas, 'Courier New', Courier, mono, serif; width: 936.53125px; overflow: auto; padding-top: 1px; line-height: 26px; white-space: normal; margin: 18px 0px !important; background-color: rgb(231, 229, 220);">
<div class="bar" style="padding-left: 45px;">
<div class="tools" style="padding: 3px 8px 10px 10px; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108); background-color: rgb(248, 248, 248);">
<b>[html]</b> view plaincopy<img alt="在CODE上查看代码片" height="12" src="http://static.nbla.cn/Uploads/image/2017-04-01/14910301695099.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" style="border: none; max-width: 100%; position: relative; top: 1px; left: 2px;" width="12"><img alt="派生到我的代码片" height="12" src="https://code.csdn.net/assets/ico_fork.svg" style="border: none; max-width: 100%; position: relative; top: 2px; left: 2px;" width="12">
<div style="position: absolute; left: 441px; top: 3149px; width: 18px; height: 18px; z-index: 99;"> </div>
</div>
</div>
<ol class="dp-xml" start="1" style="padding: 0px; border: none; list-style-position: initial; list-style-image: initial; color: rgb(92, 92, 92); margin: 0px 0px 1px 45px !important; background-color: rgb(255, 255, 255);">
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="comments" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 130, 0); background-color: inherit;"><!--bad--></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">img</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">class</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"block_element"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">id</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"unicorn"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">src</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"http://cl.ly/image/1a1u013e002z"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">alt</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"unicorn, rainbows, poop and stuff"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">width</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"500"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">height</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"400"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">/></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="comments" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 130, 0); background-color: inherit;"><!--good--></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">img</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">class</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"block_element"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">id</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"unicorn"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">src</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"http://cl.ly/image/1a1u013e002z"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">alt</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"unicorn, rainbows, poop and stuff"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">width</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"500"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">height</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"400"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
<li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li>
</ol>
</div>
<p style="margin: 0px; padding: 0px; text-indent: 2em; font-family: Arial; font-size: 14px; line-height: 26px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;">关于编码规范，没有标准答案，没有正确对错，只有更合理、更有效。</span></p>
<div class="clearfix divider_dashed333"></div>
<div class="lh24 f12 mt20 bb1e pb20">
<div class="fr" style=" padding-right: 20px">
<ul class="paginationa my_ajax">
<li id="fav_bKYk1q6nzaqnBAX_bottom"><a href="javascript:;" class="arfav"
data-info_id="bKYk1q6nzaqnBAX"
data-info_title="前端开发规范之html编码规范"
data-info_num="11">收藏(<span
id="ar_fav">14</span>)</a></li>
<li id="zan_bKYk1q6nzaqnBAX_bottom"><a href="javascript:;" class="arzan"
data-info_id="bKYk1q6nzaqnBAX"
data-info_title="前端开发规范之html编码规范"
data-info_num="11">赞(<span
id="ar_zan">65</span>)</a></li>
<li id="bao_bKYk1q6nzaqnBAX_bottom"><a href="javascript:;" class="arbao"
data-info_id="bKYk1q6nzaqnBAX"
data-info_title="前端开发规范之html编码规范"
data-info_num="11">举报</a></li>
</ul>
</div>
<span class="f12 blue_lighten mr10 fr" style="width: 200px;">
<span class="lh24 f12 c9 fl">分享到：</span>
<div class="bdsharebuttonbox bdshare_t bds_tools get-codes-bdshare fl"><a href="#"
class="bds_qzone"
data-cmd="qzone"
title="分享到QQ空间"></a><a
href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#"
class="bds_tqq"
data-cmd="tqq"
title="分享到腾讯微博"></a><a
href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#"
class="bds_weixin"
data-cmd="weixin"
title="分享到微信"></a><a
href="#" class="bds_more" data-cmd="more"></a></div>
</span>
</div>
<div class="clearfix divider_dashed333"></div>
</div>
<div class="clearfix"></div>
<div style="padding:0px 20px;">
<div class="one_half">
<div class="about_author">
<a href="https://www.nbla.cn/article/_8NokZ2o8DeLBJlY.html">grunt前端打包——css篇</a>
<br/>
前端打包的工具有很多，我用的习惯的就是这个grunt，无论是你要在github上做开源，还是让自己的项目变得更易于维护，grunt都是首选。
网上的安装教程非常多了，这里就只是介绍一下都有哪些好用的插件。
1：grunt-contrib-less
less,可以让css变得更简单，更易于维护，他可以定义常量，可以转换单位，还可以计算颜... </div>
</div>
<div class="one_half last">
<div class="about_author">
<a href="https://www.nbla.cn/article/_wJ1k42QQ7y239mG.html">Android单点触控对图片进行平移，缩放，...</a>
<br/>
相信大家使用多点对图片进行缩放，平移的操作很熟悉了，大部分大图的浏览都具有此功能，有些app还可以对图片进行旋转操作，QQ的大图浏览就可以对图片进行旋转操作，大家都知道对图片进行缩放，平移，旋转等操作可以使用Matrix来实现，Matrix就是一个3X3的矩阵，对图片的处理可分为四个基础变换操作，Translate(平移变换)、R... </div>
</div>
<div class="clearfix margin_top5"></div>
<div class="one_half">
<div class="popular-posts-area">
<ul class="recent_posts_list">
<li><span><a href="https://www.nbla.cn/article/_Rn49A2daAnL0e8G.html"><img src="http://static.nbla.cn/Uploads/image/2017-08-30/15040541894004.jpg?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="Java开发者必备的六款工具对于初入行的Java开发人员来说，寻找合..." /></a></span><a href="https://www.nbla.cn/article/_Rn49A2daAnL0e8G.html">Java开发者必备的六款工具对于初入行的Java开发人员来说，寻找合适的工具是困难的，并且是浪费时间的。而今天我们将列出六款Java程序员必备的工具，其中包括Notepad++、XML Marker、SQL Developer、Jad、Eclipse和Keytool。</a>
<i>Aug 30, 2017</i>
</li><li><span><a href="https://www.nbla.cn/article/_517nzqg8RbMXR4o.html"><img src="http://static.nbla.cn/Uploads/image/2017-08-30/15040541835149.jpg?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="10大炫酷的HTML5文字动画特效欣赏 " /></a></span><a href="https://www.nbla.cn/article/_517nzqg8RbMXR4o.html">10大炫酷的HTML5文字动画特效欣赏 </a>
<i>Aug 30, 2017</i>
</li><li><span><a href="https://www.nbla.cn/article/_AK8vyLx64wMezmX.html"><img src="http://static.nbla.cn/Uploads/image/2017-08-30/15040541722114.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="如何在 CentOS 7.0 安装 Websvn " /></a></span><a href="https://www.nbla.cn/article/_AK8vyLx64wMezmX.html">如何在 CentOS 7.0 安装 Websvn </a>
<i>Aug 30, 2017</i>
</li><li><span><a href="https://www.nbla.cn/article/_OdBRl2BX4gqK5n9.html"><img src="http://static.nbla.cn/Uploads/image/2017-08-30/15040542075314.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="10款Web程序员必备的CSS工具" /></a></span><a href="https://www.nbla.cn/article/_OdBRl2BX4gqK5n9.html">10款Web程序员必备的CSS工具</a>
<i>Aug 30, 2017</i>
</li>
</ul>
</div>
</div>
<div class="one_half last">
<div class="popular-posts-area">
<ul class="recent_posts_list">
<li><span><a href="https://www.nbla.cn/article/_BZP1bqNPg52OjRA.html"><img src="http://static.nbla.cn/Uploads/image/2017-04-01/14910303279288.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="使用 Docker 搭建 Java Web 运行环境 原料做法品尝总结" /></a></span><a href="https://www.nbla.cn/article/_BZP1bqNPg52OjRA.html">使用 Docker 搭建 Java Web 运行环境 原料做法品尝总结</a>
<i>Feb 12, 2017</i>
</li><li><span><a href="https://www.nbla.cn/article/_ZKNWxLrpneM3B98.html"><img src="http://static.nbla.cn/Uploads/image/2017-08-30/15040542138500.jpg?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="移动应用中的AR开发，5款最受欢迎工具推荐！关于增强现实的概念..." /></a></span><a href="https://www.nbla.cn/article/_ZKNWxLrpneM3B98.html">移动应用中的AR开发，5款最受欢迎工具推荐！关于增强现实的概念，相信大家早已耳熟能详，且之前也有多篇文章专门介绍了比较火的AR应用，这从另一方面也反映出了AR技术开始普及的趋势。所以，在这里，我们介绍5款最受欢迎的用于移动应用中增强现实开发的工具。</a>
<i>Aug 30, 2017</i>
</li><li><span><a href="https://www.nbla.cn/article/_WQjyNMzAwxqGmvl.html"><img src="http://static.nbla.cn/Uploads/image/2017-08-30/1504054196964.jpg?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="50 个最棒的 jQuery 日历插件，很齐全了！ " /></a></span><a href="https://www.nbla.cn/article/_WQjyNMzAwxqGmvl.html">50 个最棒的 jQuery 日历插件，很齐全了！ </a>
<i>Aug 30, 2017</i>
</li><li><span><a href="https://www.nbla.cn/article/_lkz8Q2wRBgMyVGR.html"><img src="http://static.nbla.cn/Uploads/image/2017-04-01/14910313664256.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="Android自定义控件系列之圆形进度条的实现 " /></a></span><a href="https://www.nbla.cn/article/_lkz8Q2wRBgMyVGR.html">Android自定义控件系列之圆形进度条的实现 </a>
<i>Feb 20, 2017</i>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix margin_top7"></div>
<div class="footer1 bggraph1">
<div class="container">
<div class="one_fourth">
<ul class="faddress">
<li id="myfooter">
<div class="logo"><a href="http://www.nbla.cn" id="logo"><span></span></a></div>
</li>
<li> php迷，一个php技术的分享社区，专属您自己的技术摘抄本、收藏夹。</li>
<li>在这里……</li>
</ul>
</div>
<div class="one_fourth">
<div class="ftags">
<h3 class="nocaps">Tags</h3>
<ul>
<li><a href="#">共同学习</a></li>
<li><a href="#">发现</a></li>
<li><a href="#"> 收藏</a></li>
<li><a href="#"> 分享</a></li>
<li><a href="#"> 共享</a></li>
<li><a href="#">共鸣</a></li>
<li><a href="#">专注</a></li>
<li><a href="#">共同进步</a></li>
</ul>
</div>
</div>
<div class="one_fourth">
<div class="twitter_feed">
<h3 class="nocaps">About</h3>
<div class="left"><i class="fa fa-twitter fa-lg"></i></div>
<div class="right">
<a href="javascript:;" target="_blank">特别鸣谢</a>
<a href="javascript:;" target="_blank">使用协议</a><br/><br/>
<a href="javascript:;" target="_blank">意见反馈</a>
<a href="javascript:;" target="_blank">网站投稿</a>
</div>
</div>
</div>
<div class="one_fourth last">
<!-- <h3 class="nocaps">We Group</h3> -->
<img src="https://www.nbla.cn/Template/Home/images/php_wx.jpg"
style="float:left;width: 110px; text-align: center;">
<img src="https://www.nbla.cn/Template/Home/images/php_xcx.jpg"
style="float:left;width: 110px; text-align: center;margin-left: 20px">
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="copyright_info">
<div class="container">
<div>
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱 <a href="https://beian.miit.gov.cn" target="_blank">冀ICP备18013926号-2</a>
</div>
</div>
</div>
<a href="#" class="scrollup">Scroll</a>
</div>
<script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/universal/jquery.js"></script>
<script src="https://www.nbla.cn/Template/Home/js/style-switcher/jquery-1.js"></script>
<script src="https://www.nbla.cn/Template/Home/js/style-switcher/styleselector.js"></script>
<script src="https://www.nbla.cn/Template/Home/js/mainmenu/bootstrap.min.js"></script>
<script src="https://www.nbla.cn/Template/Home/js/scrolltotop/totop.js" type="text/javascript"></script>
<script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/mainmenu/sticky.js"></script>
<script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/mainmenu/modernizr.custom.75180.js"></script>
<script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/lightbox/jquery.fancybox.js"></script>
<script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/lightbox/custom.js"></script>
<script src="https://www.nbla.cn/Template/Home/js/mainmenu/fhmm.js"></script>
<script type="text/javascript">
$('.dropdown-toggle').dropdownHover().dropdown();
$(document).on('click', '.fhmm .dropdown-menu', function (e) {
e.stopPropagation()
});
</script>
<script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/customs.js"></script> <script src="https://www.nbla.cn/Template/Home/js/form/jquery.form.min.js"></script>
<script>
var baseUrl = 'https://www.nbla.cn/ajax/act';
</script>
<script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/custom.js"></script>
</body>
</html>
