From 16b632ecfadadb0de19e43b1962dd546a09ea6b1 Mon Sep 17 00:00:00 2001
From: qcc <qiucong@qiucong.xin>
Date: Thu, 20 Jun 2019 11:18:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=97=A0jira=20fix:=20=E7=BB=99bi.html?=
 =?UTF-8?q?=E4=B8=AD=E7=9A=84html=E6=A0=87=E7=AD=BE=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/js/base/demo.html.js      |  20 +++
 demo/js/config/base.js         |   4 +
 dist/2.0/fineui.css            | 235 ++++++++++++++++++++++++++++++++
 dist/base.css                  | 235 ++++++++++++++++++++++++++++++++
 dist/bundle.css                | 235 ++++++++++++++++++++++++++++++++
 dist/demo.js                   |  25 +++-
 dist/fineui.css                | 235 ++++++++++++++++++++++++++++++++
 src/css/base/single/html.css   | 235 ++++++++++++++++++++++++++++++++
 src/less/base/single/html.less | 240 +++++++++++++++++++++++++++++++++
 9 files changed, 1463 insertions(+), 1 deletion(-)
 create mode 100644 demo/js/base/demo.html.js
 create mode 100644 src/css/base/single/html.css
 create mode 100644 src/less/base/single/html.less

diff --git a/demo/js/base/demo.html.js b/demo/js/base/demo.html.js
new file mode 100644
index 000000000..73f92f53a
--- /dev/null
+++ b/demo/js/base/demo.html.js
@@ -0,0 +1,20 @@
+Demo.Html = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-html"
+    },
+    render: function () {
+        return {
+            type: "bi.vertical",
+            items: [{
+                type: "bi.html",
+                text: "<h1>在bi.html标签中使用html原生标签</h1>"
+            }, {
+                type: "bi.html",
+                text: "<ul>ul列表<li>list item1</li><li>list item2</li></ul>"
+            }],
+            hgap: 300,
+            vgap: 20
+        };
+    }
+});
+BI.shortcut("demo.html", Demo.Html);
\ No newline at end of file
diff --git a/demo/js/config/base.js b/demo/js/config/base.js
index 0c4eaaded..d4fa19205 100644
--- a/demo/js/config/base.js
+++ b/demo/js/config/base.js
@@ -14,6 +14,10 @@ Demo.BASE_CONFIG = [{
     pId: 2,
     text: "bi.icon_label",
     value: "demo.icon_label"
+}, {
+    pId: 2,
+    text: "bi.html",
+    value: "demo.html"
 }, {
     pId: 2,
     text: "title提示",
diff --git a/dist/2.0/fineui.css b/dist/2.0/fineui.css
index 7d9e8f453..22cd6e964 100644
--- a/dist/2.0/fineui.css
+++ b/dist/2.0/fineui.css
@@ -3386,6 +3386,241 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
   line-height: 21px;
   border: none;
 }
+.bi-html article,
+.bi-html aside,
+.bi-html details,
+.bi-html figcaption,
+.bi-html figure,
+.bi-html footer,
+.bi-html header,
+.bi-html hgroup,
+.bi-html nav,
+.bi-html section,
+.bi-html summary {
+  display: block;
+}
+.bi-html audio,
+.bi-html canvas,
+.bi-html video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+.bi-html audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+.bi-html [hidden] {
+  display: none;
+}
+.bi-html html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+.bi-html html,
+.bi-html button,
+.bi-html input,
+.bi-html select,
+.bi-html textarea {
+  font-family: sans-serif;
+}
+.bi-html body {
+  margin: 0;
+}
+.bi-html a:focus {
+  outline: thin dotted;
+}
+.bi-html a:active,
+.bi-html a:hover {
+  outline: 0;
+}
+.bi-html h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+.bi-html h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+.bi-html h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+.bi-html h4 {
+  font-size: 1em;
+  margin: 1.33em 0;
+}
+.bi-html h5 {
+  font-size: .83em;
+  margin: 1.67em 0;
+}
+.bi-html h6 {
+  font-size: .75em;
+  margin: 2.33em 0;
+}
+.bi-html abbr[title] {
+  border-bottom: 1px dotted;
+}
+.bi-html b,
+.bi-html strong {
+  font-weight: bold;
+}
+.bi-html blockquote {
+  margin: 1em 40px;
+}
+.bi-html dfn {
+  font-style: italic;
+}
+.bi-html mark {
+  background: #ff0;
+  color: #000;
+}
+.bi-html p,
+.bi-html pre {
+  margin: 1em 0;
+}
+.bi-html code,
+.bi-html kbd,
+.bi-html pre,
+.bi-html samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+.bi-html pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.bi-html q {
+  quotes: none;
+}
+.bi-html q:before,
+.bi-html q:after {
+  content: '';
+  content: none;
+}
+.bi-html small {
+  font-size: 75%;
+}
+.bi-html sub,
+.bi-html sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+.bi-html sup {
+  top: -0.5em;
+}
+.bi-html sub {
+  bottom: -0.25em;
+}
+.bi-html dl,
+.bi-html menu,
+.bi-html ol,
+.bi-html ul {
+  margin: 1em 0;
+}
+.bi-html dd {
+  margin: 0 0 0 40px;
+}
+.bi-html menu,
+.bi-html ol,
+.bi-html ul {
+  padding: 0 0 0 40px;
+}
+.bi-html nav ul,
+.bi-html nav ol {
+  list-style: none;
+  list-style-image: none;
+}
+.bi-html ul {
+  list-style: disc;
+}
+.bi-html li {
+  list-style-type: disc;
+}
+.bi-html img {
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+}
+.bi-html svg:not(:root) {
+  overflow: hidden;
+}
+.bi-html figure {
+  margin: 0;
+}
+.bi-html form {
+  margin: 0;
+}
+.bi-html fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+.bi-html legend {
+  border: 0;
+  padding: 0;
+  white-space: normal;
+  *margin-left: -7px;
+}
+.bi-html button,
+.bi-html input,
+.bi-html select,
+.bi-html textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: baseline;
+  *vertical-align: middle;
+}
+.bi-html button,
+.bi-html input {
+  line-height: normal;
+}
+.bi-html button,
+.bi-html html input[type="button"],
+.bi-html input[type="reset"],
+.bi-html input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+  *overflow: visible;
+}
+.bi-html button[disabled],
+.bi-html input[disabled] {
+  cursor: default;
+}
+.bi-html input[type="checkbox"],
+.bi-html input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  *height: 13px;
+  *width: 13px;
+}
+.bi-html input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.bi-html input[type="search"]::-webkit-search-cancel-button,
+.bi-html input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+.bi-html button::-moz-focus-inner,
+.bi-html input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+.bi-html textarea {
+  overflow: auto;
+  vertical-align: top;
+}
+.bi-html table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
 .x-icon.b-font {
   margin: auto;
   width: 100%;
diff --git a/dist/base.css b/dist/base.css
index 9531fd8e1..a9e68b3e1 100644
--- a/dist/base.css
+++ b/dist/base.css
@@ -1231,6 +1231,241 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
   line-height: 21px;
   border: none;
 }
+.bi-html article,
+.bi-html aside,
+.bi-html details,
+.bi-html figcaption,
+.bi-html figure,
+.bi-html footer,
+.bi-html header,
+.bi-html hgroup,
+.bi-html nav,
+.bi-html section,
+.bi-html summary {
+  display: block;
+}
+.bi-html audio,
+.bi-html canvas,
+.bi-html video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+.bi-html audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+.bi-html [hidden] {
+  display: none;
+}
+.bi-html html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+.bi-html html,
+.bi-html button,
+.bi-html input,
+.bi-html select,
+.bi-html textarea {
+  font-family: sans-serif;
+}
+.bi-html body {
+  margin: 0;
+}
+.bi-html a:focus {
+  outline: thin dotted;
+}
+.bi-html a:active,
+.bi-html a:hover {
+  outline: 0;
+}
+.bi-html h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+.bi-html h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+.bi-html h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+.bi-html h4 {
+  font-size: 1em;
+  margin: 1.33em 0;
+}
+.bi-html h5 {
+  font-size: .83em;
+  margin: 1.67em 0;
+}
+.bi-html h6 {
+  font-size: .75em;
+  margin: 2.33em 0;
+}
+.bi-html abbr[title] {
+  border-bottom: 1px dotted;
+}
+.bi-html b,
+.bi-html strong {
+  font-weight: bold;
+}
+.bi-html blockquote {
+  margin: 1em 40px;
+}
+.bi-html dfn {
+  font-style: italic;
+}
+.bi-html mark {
+  background: #ff0;
+  color: #000;
+}
+.bi-html p,
+.bi-html pre {
+  margin: 1em 0;
+}
+.bi-html code,
+.bi-html kbd,
+.bi-html pre,
+.bi-html samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+.bi-html pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.bi-html q {
+  quotes: none;
+}
+.bi-html q:before,
+.bi-html q:after {
+  content: '';
+  content: none;
+}
+.bi-html small {
+  font-size: 75%;
+}
+.bi-html sub,
+.bi-html sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+.bi-html sup {
+  top: -0.5em;
+}
+.bi-html sub {
+  bottom: -0.25em;
+}
+.bi-html dl,
+.bi-html menu,
+.bi-html ol,
+.bi-html ul {
+  margin: 1em 0;
+}
+.bi-html dd {
+  margin: 0 0 0 40px;
+}
+.bi-html menu,
+.bi-html ol,
+.bi-html ul {
+  padding: 0 0 0 40px;
+}
+.bi-html nav ul,
+.bi-html nav ol {
+  list-style: none;
+  list-style-image: none;
+}
+.bi-html ul {
+  list-style: disc;
+}
+.bi-html li {
+  list-style-type: disc;
+}
+.bi-html img {
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+}
+.bi-html svg:not(:root) {
+  overflow: hidden;
+}
+.bi-html figure {
+  margin: 0;
+}
+.bi-html form {
+  margin: 0;
+}
+.bi-html fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+.bi-html legend {
+  border: 0;
+  padding: 0;
+  white-space: normal;
+  *margin-left: -7px;
+}
+.bi-html button,
+.bi-html input,
+.bi-html select,
+.bi-html textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: baseline;
+  *vertical-align: middle;
+}
+.bi-html button,
+.bi-html input {
+  line-height: normal;
+}
+.bi-html button,
+.bi-html html input[type="button"],
+.bi-html input[type="reset"],
+.bi-html input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+  *overflow: visible;
+}
+.bi-html button[disabled],
+.bi-html input[disabled] {
+  cursor: default;
+}
+.bi-html input[type="checkbox"],
+.bi-html input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  *height: 13px;
+  *width: 13px;
+}
+.bi-html input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.bi-html input[type="search"]::-webkit-search-cancel-button,
+.bi-html input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+.bi-html button::-moz-focus-inner,
+.bi-html input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+.bi-html textarea {
+  overflow: auto;
+  vertical-align: top;
+}
+.bi-html table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
 .x-icon.b-font {
   margin: auto;
   width: 100%;
diff --git a/dist/bundle.css b/dist/bundle.css
index 7d9e8f453..22cd6e964 100644
--- a/dist/bundle.css
+++ b/dist/bundle.css
@@ -3386,6 +3386,241 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
   line-height: 21px;
   border: none;
 }
+.bi-html article,
+.bi-html aside,
+.bi-html details,
+.bi-html figcaption,
+.bi-html figure,
+.bi-html footer,
+.bi-html header,
+.bi-html hgroup,
+.bi-html nav,
+.bi-html section,
+.bi-html summary {
+  display: block;
+}
+.bi-html audio,
+.bi-html canvas,
+.bi-html video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+.bi-html audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+.bi-html [hidden] {
+  display: none;
+}
+.bi-html html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+.bi-html html,
+.bi-html button,
+.bi-html input,
+.bi-html select,
+.bi-html textarea {
+  font-family: sans-serif;
+}
+.bi-html body {
+  margin: 0;
+}
+.bi-html a:focus {
+  outline: thin dotted;
+}
+.bi-html a:active,
+.bi-html a:hover {
+  outline: 0;
+}
+.bi-html h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+.bi-html h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+.bi-html h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+.bi-html h4 {
+  font-size: 1em;
+  margin: 1.33em 0;
+}
+.bi-html h5 {
+  font-size: .83em;
+  margin: 1.67em 0;
+}
+.bi-html h6 {
+  font-size: .75em;
+  margin: 2.33em 0;
+}
+.bi-html abbr[title] {
+  border-bottom: 1px dotted;
+}
+.bi-html b,
+.bi-html strong {
+  font-weight: bold;
+}
+.bi-html blockquote {
+  margin: 1em 40px;
+}
+.bi-html dfn {
+  font-style: italic;
+}
+.bi-html mark {
+  background: #ff0;
+  color: #000;
+}
+.bi-html p,
+.bi-html pre {
+  margin: 1em 0;
+}
+.bi-html code,
+.bi-html kbd,
+.bi-html pre,
+.bi-html samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+.bi-html pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.bi-html q {
+  quotes: none;
+}
+.bi-html q:before,
+.bi-html q:after {
+  content: '';
+  content: none;
+}
+.bi-html small {
+  font-size: 75%;
+}
+.bi-html sub,
+.bi-html sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+.bi-html sup {
+  top: -0.5em;
+}
+.bi-html sub {
+  bottom: -0.25em;
+}
+.bi-html dl,
+.bi-html menu,
+.bi-html ol,
+.bi-html ul {
+  margin: 1em 0;
+}
+.bi-html dd {
+  margin: 0 0 0 40px;
+}
+.bi-html menu,
+.bi-html ol,
+.bi-html ul {
+  padding: 0 0 0 40px;
+}
+.bi-html nav ul,
+.bi-html nav ol {
+  list-style: none;
+  list-style-image: none;
+}
+.bi-html ul {
+  list-style: disc;
+}
+.bi-html li {
+  list-style-type: disc;
+}
+.bi-html img {
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+}
+.bi-html svg:not(:root) {
+  overflow: hidden;
+}
+.bi-html figure {
+  margin: 0;
+}
+.bi-html form {
+  margin: 0;
+}
+.bi-html fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+.bi-html legend {
+  border: 0;
+  padding: 0;
+  white-space: normal;
+  *margin-left: -7px;
+}
+.bi-html button,
+.bi-html input,
+.bi-html select,
+.bi-html textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: baseline;
+  *vertical-align: middle;
+}
+.bi-html button,
+.bi-html input {
+  line-height: normal;
+}
+.bi-html button,
+.bi-html html input[type="button"],
+.bi-html input[type="reset"],
+.bi-html input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+  *overflow: visible;
+}
+.bi-html button[disabled],
+.bi-html input[disabled] {
+  cursor: default;
+}
+.bi-html input[type="checkbox"],
+.bi-html input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  *height: 13px;
+  *width: 13px;
+}
+.bi-html input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.bi-html input[type="search"]::-webkit-search-cancel-button,
+.bi-html input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+.bi-html button::-moz-focus-inner,
+.bi-html input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+.bi-html textarea {
+  overflow: auto;
+  vertical-align: top;
+}
+.bi-html table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
 .x-icon.b-font {
   margin: auto;
   width: 100%;
diff --git a/dist/demo.js b/dist/demo.js
index ee568df16..543d484b6 100644
--- a/dist/demo.js
+++ b/dist/demo.js
@@ -338,7 +338,26 @@ BI.shortcut("demo.image_button", Demo.Button);Demo.Button = BI.inherit(BI.Widget
         };
     }
 });
-BI.shortcut("demo.text_button", Demo.Button);Demo.IconLabel = BI.inherit(BI.Widget, {
+BI.shortcut("demo.text_button", Demo.Button);Demo.Html = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-html"
+    },
+    render: function () {
+        return {
+            type: "bi.vertical",
+            items: [{
+                type: "bi.html",
+                text: "<h1>在bi.html标签中使用html原生标签</h1>"
+            }, {
+                type: "bi.html",
+                text: "<ul>ul列表<li>list item1</li><li>list item2</li></ul>"
+            }],
+            hgap: 300,
+            vgap: 20
+        };
+    }
+});
+BI.shortcut("demo.html", Demo.Html);Demo.IconLabel = BI.inherit(BI.Widget, {
     props: {
         baseCls: "demo-bubble"
     },
@@ -3370,6 +3389,10 @@ BI.shortcut("demo.value_chooser_pane", Demo.ValueChooserPane);Demo.BASE_CONFIG =
     pId: 2,
     text: "bi.icon_label",
     value: "demo.icon_label"
+}, {
+    pId: 2,
+    text: "bi.html",
+    value: "demo.html"
 }, {
     pId: 2,
     text: "title提示",
diff --git a/dist/fineui.css b/dist/fineui.css
index 20faf1ac8..bfd05d5db 100644
--- a/dist/fineui.css
+++ b/dist/fineui.css
@@ -3386,6 +3386,241 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
   line-height: 21px;
   border: none;
 }
+.bi-html article,
+.bi-html aside,
+.bi-html details,
+.bi-html figcaption,
+.bi-html figure,
+.bi-html footer,
+.bi-html header,
+.bi-html hgroup,
+.bi-html nav,
+.bi-html section,
+.bi-html summary {
+  display: block;
+}
+.bi-html audio,
+.bi-html canvas,
+.bi-html video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+.bi-html audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+.bi-html [hidden] {
+  display: none;
+}
+.bi-html html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+.bi-html html,
+.bi-html button,
+.bi-html input,
+.bi-html select,
+.bi-html textarea {
+  font-family: sans-serif;
+}
+.bi-html body {
+  margin: 0;
+}
+.bi-html a:focus {
+  outline: thin dotted;
+}
+.bi-html a:active,
+.bi-html a:hover {
+  outline: 0;
+}
+.bi-html h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+.bi-html h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+.bi-html h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+.bi-html h4 {
+  font-size: 1em;
+  margin: 1.33em 0;
+}
+.bi-html h5 {
+  font-size: .83em;
+  margin: 1.67em 0;
+}
+.bi-html h6 {
+  font-size: .75em;
+  margin: 2.33em 0;
+}
+.bi-html abbr[title] {
+  border-bottom: 1px dotted;
+}
+.bi-html b,
+.bi-html strong {
+  font-weight: bold;
+}
+.bi-html blockquote {
+  margin: 1em 40px;
+}
+.bi-html dfn {
+  font-style: italic;
+}
+.bi-html mark {
+  background: #ff0;
+  color: #000;
+}
+.bi-html p,
+.bi-html pre {
+  margin: 1em 0;
+}
+.bi-html code,
+.bi-html kbd,
+.bi-html pre,
+.bi-html samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+.bi-html pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.bi-html q {
+  quotes: none;
+}
+.bi-html q:before,
+.bi-html q:after {
+  content: '';
+  content: none;
+}
+.bi-html small {
+  font-size: 75%;
+}
+.bi-html sub,
+.bi-html sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+.bi-html sup {
+  top: -0.5em;
+}
+.bi-html sub {
+  bottom: -0.25em;
+}
+.bi-html dl,
+.bi-html menu,
+.bi-html ol,
+.bi-html ul {
+  margin: 1em 0;
+}
+.bi-html dd {
+  margin: 0 0 0 40px;
+}
+.bi-html menu,
+.bi-html ol,
+.bi-html ul {
+  padding: 0 0 0 40px;
+}
+.bi-html nav ul,
+.bi-html nav ol {
+  list-style: none;
+  list-style-image: none;
+}
+.bi-html ul {
+  list-style: disc;
+}
+.bi-html li {
+  list-style-type: disc;
+}
+.bi-html img {
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+}
+.bi-html svg:not(:root) {
+  overflow: hidden;
+}
+.bi-html figure {
+  margin: 0;
+}
+.bi-html form {
+  margin: 0;
+}
+.bi-html fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+.bi-html legend {
+  border: 0;
+  padding: 0;
+  white-space: normal;
+  *margin-left: -7px;
+}
+.bi-html button,
+.bi-html input,
+.bi-html select,
+.bi-html textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: baseline;
+  *vertical-align: middle;
+}
+.bi-html button,
+.bi-html input {
+  line-height: normal;
+}
+.bi-html button,
+.bi-html html input[type="button"],
+.bi-html input[type="reset"],
+.bi-html input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+  *overflow: visible;
+}
+.bi-html button[disabled],
+.bi-html input[disabled] {
+  cursor: default;
+}
+.bi-html input[type="checkbox"],
+.bi-html input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  *height: 13px;
+  *width: 13px;
+}
+.bi-html input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.bi-html input[type="search"]::-webkit-search-cancel-button,
+.bi-html input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+.bi-html button::-moz-focus-inner,
+.bi-html input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+.bi-html textarea {
+  overflow: auto;
+  vertical-align: top;
+}
+.bi-html table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
 .x-icon.b-font {
   margin: auto;
   width: 100%;
diff --git a/src/css/base/single/html.css b/src/css/base/single/html.css
new file mode 100644
index 000000000..2120acf32
--- /dev/null
+++ b/src/css/base/single/html.css
@@ -0,0 +1,235 @@
+.bi-html article,
+.bi-html aside,
+.bi-html details,
+.bi-html figcaption,
+.bi-html figure,
+.bi-html footer,
+.bi-html header,
+.bi-html hgroup,
+.bi-html nav,
+.bi-html section,
+.bi-html summary {
+  display: block;
+}
+.bi-html audio,
+.bi-html canvas,
+.bi-html video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+.bi-html audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+.bi-html [hidden] {
+  display: none;
+}
+.bi-html html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+.bi-html html,
+.bi-html button,
+.bi-html input,
+.bi-html select,
+.bi-html textarea {
+  font-family: sans-serif;
+}
+.bi-html body {
+  margin: 0;
+}
+.bi-html a:focus {
+  outline: thin dotted;
+}
+.bi-html a:active,
+.bi-html a:hover {
+  outline: 0;
+}
+.bi-html h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+.bi-html h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+.bi-html h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+.bi-html h4 {
+  font-size: 1em;
+  margin: 1.33em 0;
+}
+.bi-html h5 {
+  font-size: .83em;
+  margin: 1.67em 0;
+}
+.bi-html h6 {
+  font-size: .75em;
+  margin: 2.33em 0;
+}
+.bi-html abbr[title] {
+  border-bottom: 1px dotted;
+}
+.bi-html b,
+.bi-html strong {
+  font-weight: bold;
+}
+.bi-html blockquote {
+  margin: 1em 40px;
+}
+.bi-html dfn {
+  font-style: italic;
+}
+.bi-html mark {
+  background: #ff0;
+  color: #000;
+}
+.bi-html p,
+.bi-html pre {
+  margin: 1em 0;
+}
+.bi-html code,
+.bi-html kbd,
+.bi-html pre,
+.bi-html samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+.bi-html pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.bi-html q {
+  quotes: none;
+}
+.bi-html q:before,
+.bi-html q:after {
+  content: '';
+  content: none;
+}
+.bi-html small {
+  font-size: 75%;
+}
+.bi-html sub,
+.bi-html sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+.bi-html sup {
+  top: -0.5em;
+}
+.bi-html sub {
+  bottom: -0.25em;
+}
+.bi-html dl,
+.bi-html menu,
+.bi-html ol,
+.bi-html ul {
+  margin: 1em 0;
+}
+.bi-html dd {
+  margin: 0 0 0 40px;
+}
+.bi-html menu,
+.bi-html ol,
+.bi-html ul {
+  padding: 0 0 0 40px;
+}
+.bi-html nav ul,
+.bi-html nav ol {
+  list-style: none;
+  list-style-image: none;
+}
+.bi-html ul {
+  list-style: disc;
+}
+.bi-html li {
+  list-style-type: disc;
+}
+.bi-html img {
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+}
+.bi-html svg:not(:root) {
+  overflow: hidden;
+}
+.bi-html figure {
+  margin: 0;
+}
+.bi-html form {
+  margin: 0;
+}
+.bi-html fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+.bi-html legend {
+  border: 0;
+  padding: 0;
+  white-space: normal;
+  *margin-left: -7px;
+}
+.bi-html button,
+.bi-html input,
+.bi-html select,
+.bi-html textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: baseline;
+  *vertical-align: middle;
+}
+.bi-html button,
+.bi-html input {
+  line-height: normal;
+}
+.bi-html button,
+.bi-html html input[type="button"],
+.bi-html input[type="reset"],
+.bi-html input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+  *overflow: visible;
+}
+.bi-html button[disabled],
+.bi-html input[disabled] {
+  cursor: default;
+}
+.bi-html input[type="checkbox"],
+.bi-html input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  *height: 13px;
+  *width: 13px;
+}
+.bi-html input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.bi-html input[type="search"]::-webkit-search-cancel-button,
+.bi-html input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+.bi-html button::-moz-focus-inner,
+.bi-html input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+.bi-html textarea {
+  overflow: auto;
+  vertical-align: top;
+}
+.bi-html table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/src/less/base/single/html.less b/src/less/base/single/html.less
new file mode 100644
index 000000000..0af012d03
--- /dev/null
+++ b/src/less/base/single/html.less
@@ -0,0 +1,240 @@
+@import "../../index";
+
+.bi-html {
+	article,
+	aside,
+	details,
+	figcaption,
+	figure,
+	footer,
+	header,
+	hgroup,
+	nav,
+	section,
+	summary {
+		display: block
+	}
+	audio,
+	canvas,
+	video {
+		display: inline-block;
+		*display: inline;
+		*zoom: 1
+	}
+	audio:not([controls]) {
+		display: none;
+		height: 0
+	}
+	[hidden] {
+		display: none
+	}
+	html {
+		font-size: 100%;
+		-webkit-text-size-adjust: 100%;
+		-ms-text-size-adjust: 100%
+	}
+	html,
+	button,
+	input,
+	select,
+	textarea {
+		font-family: sans-serif
+	}
+	body {
+		margin: 0
+	}
+	a:focus {
+		outline: thin dotted
+	}
+	a:active,
+	a:hover {
+		outline: 0
+	}
+	h1 {
+		font-size: 2em;
+		margin: .67em 0
+	}
+	h2 {
+		font-size: 1.5em;
+		margin: .83em 0
+	}
+	h3 {
+		font-size: 1.17em;
+		margin: 1em 0
+	}
+	h4 {
+		font-size: 1em;
+		margin: 1.33em 0
+	}
+	h5 {
+		font-size: .83em;
+		margin: 1.67em 0
+	}
+	h6 {
+		font-size: .75em;
+		margin: 2.33em 0
+	}
+	abbr[title] {
+		border-bottom: 1px dotted
+	}
+	b,
+	strong {
+		font-weight: bold
+	}
+	blockquote {
+		margin: 1em 40px
+	}
+	dfn {
+		font-style: italic
+	}
+	mark {
+		background: #ff0;
+		color: #000
+	}
+	p,
+	pre {
+		margin: 1em 0
+	}
+	code,
+	kbd,
+	pre,
+	samp {
+		font-family: monospace, serif;
+		_font-family: 'courier new', monospace;
+		font-size: 1em
+	}
+	pre {
+		white-space: pre;
+		white-space: pre-wrap;
+		word-wrap: break-word
+	}
+	q {
+		quotes: none
+	}
+	q:before,
+	q:after {
+		content: '';
+		content: none
+	}
+	small {
+		font-size: 75%
+	}
+	sub,
+	sup {
+		font-size: 75%;
+		line-height: 0;
+		position: relative;
+		vertical-align: baseline
+	}
+	sup {
+		top: -0.5em
+	}
+	sub {
+		bottom: -0.25em
+	}
+	dl,
+	menu,
+	ol,
+	ul {
+		margin: 1em 0
+	}
+	dd {
+		margin: 0 0 0 40px
+	}
+	menu,
+	ol,
+	ul {
+		padding: 0 0 0 40px
+	}
+	nav ul,
+	nav ol {
+		list-style: none;
+		list-style-image: none
+	}
+	ul {
+		list-style: disc;
+	}
+	li {
+		list-style-type: disc;
+	}
+
+	img {
+		border: 0;
+		-ms-interpolation-mode: bicubic
+	}
+	svg:not(:root) {
+		overflow: hidden
+	}
+	figure {
+		margin: 0
+	}
+	form {
+		margin: 0
+	}
+	fieldset {
+		border: 1px solid #c0c0c0;
+		margin: 0 2px;
+		padding: .35em .625em .75em
+	}
+	legend {
+		border: 0;
+		padding: 0;
+		white-space: normal;
+		*margin-left: -7px
+	}
+	button,
+	input,
+	select,
+	textarea {
+		font-size: 100%;
+		margin: 0;
+		vertical-align: baseline;
+		*vertical-align: middle
+	}
+	button,
+	input {
+		line-height: normal
+	}
+	button,
+	html input[type="button"],
+	input[type="reset"],
+	input[type="submit"] {
+		-webkit-appearance: button;
+		cursor: pointer;
+		*overflow: visible
+	}
+	button[disabled],
+	input[disabled] {
+		cursor: default
+	}
+	input[type="checkbox"],
+	input[type="radio"] {
+		box-sizing: border-box;
+		padding: 0;
+		*height: 13px;
+		*width: 13px
+	}
+	input[type="search"] {
+		-webkit-appearance: textfield;
+		-moz-box-sizing: content-box;
+		-webkit-box-sizing: content-box;
+		box-sizing: content-box
+	}
+	input[type="search"]::-webkit-search-cancel-button,
+	input[type="search"]::-webkit-search-decoration {
+		-webkit-appearance: none
+	}
+	button::-moz-focus-inner,
+	input::-moz-focus-inner {
+		border: 0;
+		padding: 0
+	}
+	textarea {
+		overflow: auto;
+		vertical-align: top
+	}
+	table {
+		border-collapse: collapse;
+		border-spacing: 0
+	}
+}
\ No newline at end of file