整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
VvvebJs是一个开源的网页拖拽自动生成的JavaScript库，你可以以简单拖拽的方式生成自己需要的网页样式，内置jquery和Bootstrap，你可以拖拽相关的组件进行网页的构建，非常的方便，而且可以实时修改代码，功能丰富，使用简单，界面友好，特别适合一些专注于展示的网页设计，需要的朋友不可错过！
https://github.com/givanz/VvvebJs
默认情况下，编辑器附带Bootstrap 4和Widgets组件，可以使用任何类型的组件和输入进行扩展。
如下代码：
<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>
<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- builder code-->
<script src="libs/builder/builder.js"></script>
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>
<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script>
<script src="libs/builder/components-widgets.js"></script>
<script>
$(document).ready(function()
{
Vvveb.Builder.init('demo/index.html', function() {
//load code after page is loaded here
Vvveb.Gui.init();
});
});
</script>
要初始化编辑器，调用Vvveb.Builder.init。第一个参数是要加载以进行编辑的URL，它必须位于相同的子域中才能进行编辑。第二个参数是页面加载完成时调用的函数，默认情况下调用编辑器Gui.init();
Component Group是一个组件集合，例如Bootstrap 4组由Button和Grid等组件组成，该对象仅用于在编辑器左侧面板中对组件进行分组。例如，Widgets组件组只有两个组件视频和地图，并被定义为如下
Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/video"];
Component是一个对象，它提供可以在画布上放置的html以及在选择组件时可以编辑的属性，例如Video Component，具有Url和Target属性的html链接Component定义为：
Vvveb.Components.extend("_base", "html/link", {
nodes: ["a"],
name: "Link",
properties: [{
name: "Url",
key: "href",
htmlAttr: "href",
inputtype: LinkInput
}, {
name: "Target",
key: "target",
htmlAttr: "target",
inputtype: TextInput
}]
});
在Component属性集合中使用Input对象来编辑属性，例如文本输入，选择，颜色，网格行等。例如，TextInput扩展Input对象并定义为：
var TextInput = $.extend({}, Input, {
events: {
"keyup": ['onChange', 'input'],
},
setValue: function(value) {
$('input', this.element).val(value);
},
init: function(data) {
return this.render("textinput", data);
},
}
);
输入还需要一个在编辑器html（在editor.html中）定义为<script>标签的模板，其id为vvveb-input-inputname，例如对于文本输入为vvveb-input-textinput，定义：
<script id="vvveb-input-textinput" type="text/html">
<div>
<input name="{%=key%}" type="text" class="form-control"/>
</div>
</script>
以上是借助浏览器翻译工具，对官网的文档进行简单的翻译，可能会有些不够准确的地方，感兴趣的小伙伴可以直接查看相关文档！
VvvebJs是一个非常强大的网页可视化生成构建工具，让不懂网页设计的小伙伴们也能够通过拖拽来生成美观大方的网页出来，让设计网页就像设计图片一样，VvvebJs特别适合展示型网页，甚至可以不需要代码就能完成一项复杂的网页设计，总体来说，VvvebJs是一个值得尝试的工具！
文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如<html>），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。
历史
W3C制作的早期HTML标志
发展
蒂姆·伯纳斯-李
1980年，物理学家蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）在承包工程期间，为使CERN的研究人员使用并共享文档，他提出并创建原型系统ENQUIRE。1989年，伯纳斯-李在一份备忘录中提出一个基于互联网的超文本系统。他规定HTML并在1990年底写出浏览器和服务器软件。同年，伯纳斯-李与CERN的数据系统工程师罗伯特·卡里奥联合为项目申请资助，但未被CERN正式批准。在他的个人笔记中伯纳斯-李列举“一些使用超文本的领域”，并把百科全书列为首位。
HTML的首个公开描述出现于一个名为“HTML标签”的文件中，由蒂姆·伯纳斯-李于1991年底提及。它描述18个元素，包括HTML初始的、相对简单的设计。除了超链接标签外，其他设计都深受CERN内部一个以标准通用标记语言（SGML）为基础的文件格式SGMLguid的影响。这些元素在HTML 4中仍有11个存在。
伯纳斯-李认为HTML是SGML的一个应用程序。1993年中期互联网工程任务组（IETF）发布首个HTML规范的提案：“超文本标记语言（HTML）”互联网草案，由伯纳斯-李与丹·康纳利（英语：Dan Connolly (computer scientist)）撰写。其中包括一个SGML文档类型定义来定义语法。草案于6个月后过期，不过值得注意的是其对NCSA Mosaic浏览器自定义标签从而将在线图像嵌入的行为的认可，这反映IETF把标准立足于成功原型的理念。同样，戴夫·拉格特（英语：Dave Raggett）在1993年末提出的与之竞争的互联网草案“HTML+（超文本标记格式）”建议规范已经实现的功能，如表格与填写表单。
在HTML和HTML+的草案于1994年初到期后，IETF创建一个HTML工作组，并在1995年完成"HTML 2.0"，这是第一个旨在成为对其后续实现标准的依据的HTML规范。
在IETF的主持下，HTML标准的进一步发展因竞争利益而遭受停滞。自1996年起，HTML规范一直由万维网联盟（W3C）维护，并由商业软件厂商出资。不过在2000年，HTML也成为国际标准（ISO/ IEC15445：2000）。HTML 4.01于1999年末发布，进一步的勘误版本于2001年发布。2004年，网页超文本应用技术工作小组（WHATWG）开始开发HTML5，并在2008年与W3C共同交付，2014年10月28日完成标准化。
版本时间线
1995年11月24日
HTML 2.0作为IETF RFC 1866发布。追加RFC的附加功能：
1995年11月25日：RFC 1867（基于表单的文件上传）
1996年5月：RFC 1942（表格）
1996年8月：RFC 1980（客户端图像映射）
1997年1月：RFC 2070（国际化）
1997年1月14日
HTML 3.2作为W3C推荐标准发布。这是首个完全由W3C开发并标准化的版本，因IETF于1996年9月12日关闭它的HTML工作组。
最初代号为“威尔伯”（Wilbur），HTML 3.2完全去除数学公式，协调各种专有扩展，并采用网景设计的大多数视觉标记标签。由于两家公司达成了协议，网景的闪烁元素（英语：blink element）和微软的滚动元素（英语：marquee element）被移除。HTML对数学公式的支持最后成为另外一种被称为MathML的标准。
1997年12月18日
HTML 4.0作为W3C推荐标准发布。它提供三种变化：
严格，过时的元素被禁止。
过渡，过时的元素被允许。
框架集，大多只与框架相关的元素被允许。
最初代号“美洲狮”（Cougar）， HTML 4.0采用许多特定浏览器的元素类型和属性，并试图淘汰网景的视觉标记功能，将其标记为不赞成使用。HTML 4是遵循ISO 8879 - SGML的SGML应用程序。
1998年4月24日
HTML 4.0进行微调，不增加版本号。
1999年12月24日
HTML 4.01作为W3C推荐标准发布。它同样提供三种变化，最终勘误版于2001年5月12日发布。
2000年5月
ISO/IEC 15445:2000（"ISO HTML"，基于HTML 4.01严格版）作为ISO/IEC国际标准发布。在ISO中这一标准位于ISO/IEC JTC 1/SC 34（英语：ISO/IEC JTC 1/SC 34）域（ISO/IEC联合技术委员会1、小组委员会34 – 文档描述与处理语言）。
2014年10月28日
HTML 5作为W3C推荐标准发布。
草案时间线
HTML5的Logo
1991年10月
HTML标签，一个非正式CERN文件首次公开18个HTML标签。
1992年6月
HTML DTD的首个非正式草案， 后续有七个修订版（7月15日，8月6日，8月18日，11月17日，11月19日，11月20日，11月22日）。
1992年11月
HTML DTD 1.1（首个版本号，基于RCS修订版，版本号从1.1开始而非1.0），非正式草案。
1993年6月
超文本标记语言由IETF IIIR工作小组作为互联网草案（一个粗略的建议标准）。在被第二版代一个月后，IETF又发布6个草案，最终在RFC1866中发布HTML 2.0。
1993年11月
HTML+由IETF作为互联网草案发布，是超文本标记语言草案的一个竞争性提案。它于1994年5月到期。
1995年4月 （1995年3月编写）
HTML 3.0[33]被提议作为IETF的标准，但直到提案在五个月过期后（1995年9月28日）仍没有进一步的行动。它包含许多拉格特HTML+提案的功能，如对表格的支持、围绕数据的文本流和复杂的数学公式的显示。W3C开始开发自己的Arena浏览器作为HTML 3和层叠样式表的试验台（英语：Test bed），但HTML 3.0并没有获得成功。浏览器厂商，包括微软和网景，选择实现HTML3草案功能的不同子集并引入它们自己的插件（见浏览器大战）。
2008年1月
HTML5由W3C作为工作草案（链接）发布。虽然HTML5的语法非常类似于SGML，但它已经放弃任何成为SGML应用程序的尝试，除了一种替代的基于XML的HTML5序列，它已明确定义自己的“HTML”序列。
2011年 HTML5 – 最终征求
2011年5月，工作小组将HTML5推进至“最终征求”（Last Call）阶段，邀请W3C社区内外人士以确认本规范的技术可靠性。W3C开发一套综合性测试套件来实现完整规范的广泛交互操作性，完整规范的目标日期为2014年。2011年1月，WHATWG将其“HTML5”活动标准重命名为“HTML”。W3C仍然继续其发布HTML5的项目。
2012年 HTML5 – 候选推荐
2012年7月，WHATWG和W3C的工作产生一定程度的分离。W3C继续HTML5规范工作，重点放在单一明确的标准上，这被WHATWG称为“快照”。WHATWG组织则将HTML5作为一个“活动标准”（Living Standard）。活动标准的概念是从未完成但永远保持更新与改进，可以添加新特性，但功能点不会被删除。
2012年12月，W3C指定HTML5作为候选推荐阶段。 该阶段的标准为“两个100％完成，完全实现交互操作”。
2014年 HTML5 – 提案推荐与推荐
2014年9月，HTML5进入提案推荐阶段。
2014年10月28日，HTML5作为稳定W3C推荐标准发布，这意味着HTML5的标准化已经完成。
XHTML版本
XHTML是使用XML 1.0改写自HTML 4.01的独立语言。它不再被作为单独标准开发。
XHTML 1.0， 2000年1月26日作为W3C推荐标准发布。修订版于2002年8月1日发布，它提供与HTML 4.0和4.01相同的三个变化，这些变化被重新在XML中制定。
XHTML 1.1，基于XHTML 1.0 严格版，2001年5月31日 作为W3C推荐标准发布。修订版可使用模块化XHTML的模块，2001年4月10日作为W3C推荐标准发布。
XHTML 2.0为工作草案，但为支持HTML5与XHTML5的工作，此草案被放弃。 XHTML 2.0与XHTML 1.x不兼容，因此更确切的说这是一个XHTML风格的新语言而不是XHTML 1.x的更新。
在HTML5草案中规定一个XHTML语法，称为“XHTML5.1”。
标记
HTML标记包含标签（及其属性）、基于字符的数据类型、字符引用和实体引用等几个关键部分。HTML标签是最常见的，通常成对出现，比如<h1>与</h1>。这些成对出现的标签中，第一个标签是开始标签，第二个标签是结束标签。两个标签之间为元素的内容，有些标签没有内容，为空元素，如<img>。
HTML另一个重要组成部分为文档类型声明（英语：document type declaration），这会触发标准模式渲染。
以下是一个经典的Hello World程序的例子：
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
<html>和</html>之间的文本描述网页，<body>和</body>之间的文本为可视页面内容。标记文本<title>This is a title</title>定义了浏览器的页面标题。
文档标记类型<!DOCTYPE html>用于HTML5。 如果未进行声明，浏览器会使用“怪异模式”进行渲染。
元素
HTML文档由嵌套的HTML元素构成。它们用HTML标签表示，包含于尖括号中，如<p>
在一般情况下，一个元素由一对标签表示：“开始标签”<p>与“结束标签”</p>。元素如果含有文本内容，就被放置在这些标签之间。
在开始与结束标签之间也可以封装另外的标签，包括标签与文本的混合。这些嵌套元素是父元素的子元素。
开始标签也可包含标签属性。这些属性有诸如标识文档区段、将样式信息绑定到文档演示和为一些如<img>等的标签嵌入图像、引用图像来源等作用。
一些元素如换行符<br>，不允许嵌入任何内容，无论是文字或其他标签。这些元素只需一个单一的空标签（类似于一个开始标签），无需结束标签。
许多标签是可选的，尤其是那些很常用的段落元素<p>的闭合端标签。HTML浏览器或其他媒介可以从上下文识别出元素的闭合端以及由HTML标准所定义的结构规则。这些规则非常复杂，不是大多数HTML编码人员可以完全理解的。
因此，一个HTML元素的一般形式为：<tag attribute1="value1" attribute2="value2">''content''</tag>。一些HTML元素被定义为空元素，其形式为<tag attribute1="value1" attribute2="value2">。空元素不能封装任何内容。例如<br>标签或内联标签<img>。一个HTML元素的名称即为标签使用的名称。注意，结束标签的名称前面有一个斜杠“/”，空元素不需要也不允许结束标签。如果元素属性未标明，则使用其默认值。
例子
HTML文档的页眉：<head>...</head>。标题被包含在头部，例如：
<head>
<title>The Title</title>
</head>
标题：HTML标题由<h1>到<h6>六个标签构成，字体由大到小递减：
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
段落：
<p>第一段</p> <p>第二段</p>
换行：<br>。<br>与<p>之间的差异是br换行但不改变页面的语义结构，而p部分的页面成段。
<p>這是<br>一個<br>使用換行<br>段落</p>
链接：使用<a>标签来创建链接。href属性包含链接的URL地址。
<a href="https://zh.wikipedia.org/">中文維基百科的連結！</a>
注释：
<!-- This is a comment -->
注释有助于理解标记，但它不会在网页上显示。
HTML中存在以下几种类型的标记元素：
用于文本的结构式标记
例如，<h2>羽毛球</h2>将“羽毛球”定义为二级标题。结构式标记不指示任何特定的渲染，但大多数网页浏览器都会采用元素格式的默认样式。要在内容上实现进一步的风格可以使用层叠样式表（CSS）。
用于文本外观的表现式标记，不论其目的
例如，<b>粗体</b>表示视觉输出设备应将文本“粗体”加粗，但如果设备无法做到这一点（如朗读文本的听觉设备），就不会发生什么现象。在这种情况下，<b>粗体</b>与''斜体''也可能有相同的视觉效果，但在本质上它们更加语义化。如同<strong>加强文字</strong>与<em>强调文字</em>的区别。为支持CSS的使用，大多数表现式标记在HTML 4.0规范中不再被推荐使用。
超文本标记使文档的一部分链接到其他文档
锚元素在文档中创建超链接，其href属性设置链接的目标URL。例如：HTML标记<a href="https://zh.wikipedia.org/">中文维基百科</a>会将文字"中文维基百科"渲染为超链接。要将图片渲染为超链接，img元素要作为内容插入到a元素中：<a href="https://example.org"><img src="image.gif" alt="说明文字" width="50" height="50" border="0"></a>。
属性
大多数元素的属性以“名称-值”的形式成对出现，由“=”分离并写在开始标签元素名之后。值一般由单引号或双引号包围，有些值的内容包含特定字符，在HTML中可以去掉引号（XHTML不行）。不加引号的属性值被认为是不安全的[58]。有些属性无需成对出现，仅存在于开始标签中即可影响元素[6]，如img 元素的ismap 属性。
许多元素存在一些共通的属性：
id属性为元素提供了在全文档内的唯一标识。它用于识别元素，以便样式表可以改变其表现属性，脚本可以改变、显示或删除其内容或格式化。对于添加到页面的URL，它为元素提供了一个全局唯一标识，通常为页面的子章节。例如，ID "属性"对于https://zh.wikipedia.org/wiki/HTML#属性
class属性提供一种将类似元素分类的方式。常被用于语义化或格式化。例如，一个HTML文档可指定类<class="标记">来表明所有具有这一类值的元素都从属于文档的主文本。格式化后，这样的元素可能会聚集在一起，并作为页面脚注而不会出现在HTML代码中。类属性也被用于微格式的语义化。类值也可进行多声明。如<class="标记 重要">将元素同时放入標記与重要两类中。
style属性可以将表现性质赋予一个特定元素。比起使用id或class 属性从样式表中选择元素，“style”被认为是一个更好的做法，尽管有时这对一个简单、专用或特别的样式显得太繁琐。
title属性用于给元素一个附加的说明。 大多数浏览器中这一属性显示为工具提示（英语：Tooltip）。
lang属性用于识别元素内容的语言，它可能与文档的主要语言不同。例如，在中文文档中：
<p>法语<span lang="fr">c'est la vie</span>在法国的应用很普遍，意为“这就是生活” 。<p>
缩写元素abbr可用于说明一些属性：
<abbr id="ID" class="术语" style="color:purple;" title="超文本标记语言">HTML</abbr>
这个例子显示为HTML； 在大多数浏览器中，光标指向缩写时会显示标题文字“超文本标记语言”。
大多数元素采用与语言相关的属性dir 来指定文字方向，如 "rtl"采用从右到左的文本，比如阿拉伯语、波斯语以及希伯来语。
字符与实体引用
参见：XML与HTML字符实体引用列表和Unicode与HTML
在4.0版本中，HTML定义了一系列共252个字符实体引用和1,114,050个字元值参考。二者都支持单个字符通过简单的标记写入。文字字符与其对应的标记渲染的效果相同。
用这种方式“转义”字符的能力允许字符<与&（当分别被写作<和&时）被理解为字符数据而不是标记。例如<通常为标签的开头，&通常为字符实体引用与数字字符引用的开头；&或&或&将&作为元素的内容或属性的值。双引号字符"在不被用于属性值的标示时必须转义为"或"或"；相等地，当于单引号字符'不被用于属性值的标示时，也必须转义为'或'（或HTML5与XHTML文档中的'）。
如果文档作者忽略了转义这样的字符，一些浏览器会尝试通过上下文猜测他们的意图。如果结果仍为无效标记，这会使其他浏览器或用户代理难以访问到该文档，并使它们尝试使用搜索和索引来解析该文档。
那些难以输入或不在该文档字符编码中的字符也可通过转义来实现。例如通常只在西欧或南美的键盘出现的重音符e（é），可以在HTML文档中用作实体引用é 或数字引用é或é。 诸如UTF-8的Unicode字符编码与所有的现代浏览器兼容并允许直接访问全球书写系统几乎所有的字符 。
数据类型
HTML为元素内容定义了多种数据类型，如脚本数据、样式表数据以及许多属性值的类型，包括ID、名称、URI、数字长度单位、语言、媒体描述符颜色、字符编码、日期和时间等等。所有这些数据类型都是字符数据的特殊化。
文档类型声明
HTML文档需要以文档类型声明（英语：document type declaration）（英语非正式说法“doctype”）开头。在浏览器中，文档类型声明有助于确定渲染模式——特别是是否使用怪异模式。
文档类型声明的初衷是通过基于文档类型定义（DTD）的SGML工具来解析并验证HTML文档。
HTML5未定义DTD，所以在HTML5中文档类型声明更为简短：
<!DOCTYPE html>
HTML 4文档类型声明举例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
该声明引用HTML 4.01“严格”版的DTD。基于SGML的验证器可读取DTD，正确解析这些文档并执行验证。在现代浏览器中，一个有效的文档类型激活标准模式有别于怪异模式。
另外，HTML 4.01提供过渡型与框架集型的DTD。过渡型涵盖最广，它可整合当前以及老旧或“过时”的标签，而严格型DTD排除了过时的标签。框架集拥有所有构建框架所需的标签以及过渡型的标签。
语义化HTML
语义化HTML是一种编写HTML的方式，它强调编码信息的含义在其格式（样子）之上。HTML从创立之初就包括语义化标记，但也包括标识性标记如<font>、<i>和<center>标签。也存在一些语义上中立的span与div标签。自1990年代末层叠样式表开始应用于大多数浏览器，网页制作者就被鼓励使用CSS以便呈现与内容分离。
在2001年一次对语义网的讨论中，蒂姆·伯纳斯-李等人给出了一种的方法，使智能软件“代理人”可能有一天会自动抓取网页进行查找、过滤并将之前不相关的联系起来。这种代理甚至在现在也不普遍，但一些Web 2.0、混搭和价格比较网站的想法可能会结束。这些网页应用程序的混合与伯纳斯-李的语义代理人的之间主要区别基于以下事实：当前的聚合与信息混合通常由网页开发者设计，他们早已知道网络位置和他们希望混搭、比较与结合的特定数据的API语义。
网页代理的一个重要类型是网络爬虫或搜索引擎蜘蛛。这些软件代理依赖于它们发现的网页的语义清晰度，因为它们一天要使用各种技术与算法来读取和索引数百万个网页并给网页用户提供搜索工具，没有这些万维网的有效性就会大大降低。
为使搜索引擎蜘蛛评估它们在HTML文档中发现的文本片段的重要性，也为那些创建标记等混合的人与更多的自动化代理工具，HTML中的语义结构需要广泛一致地应用从而将文本的含义呈现给浏览者。
表示性标记在当前的HTML和XHTML推荐中不被鼓励使用，HTML5中则被视为非法。
好的语义化HTML也改善了网页文档的可访问性。例如，当屏幕阅读器或音频浏览器可以正确判定一个文档的结构时，视觉障碍用户不会再因阅读重复或无关的信息而浪费时间。
分发
HTML文档分发的方法和其他计算机文件相同。不过，它们最常通过网页服务器的超文本传输协议或电子邮件传输。
HTTP
万维网主要由从服务器通过HTTP协议向浏览器发送的HTML文档组成。但是，HTTP也可以被用于传输HTML之外的数据，例如图像、声音和其他内容。为使浏览器了解如何处理接收到的文档，在传输文档时必须同时传递文件类型。这种元数据包含MIME类型（对于HTML 4.01或更早版本是text/html，而对于XHTML 1.0或之后的版本是application/xhtml+xml），以及字符编码（参见HTML字符编码方式）。
在现在的浏览器中，和HTML文档一起发送的MIME类型影响文档的解读方式。和XHTML MIME类型一起发送的文档被认为是良构的XML，而语法错误会导致浏览器无法呈现文档。完全相同的文档如果和HTML MIME类型一起发送，则可能被正常显示，因为浏览器对HTML的语法检查更加松懈些。
W3C的推荐指出，遵循规定的推荐指引的XHTML 1.0文档可标记二者任一的MIME类型。XHTML 1.1还指出，XHTML 1.1文档应标有两种MIME类型。
HTML邮件
大多数图形电子邮件客户端允许使用HTML的子集（经常界限不清）提供格式化和无法使用纯文本的语义标记。这可能包括印刷信息，如彩色标题、强调和引用文本、内嵌图片和图表等。许多这样的客户包含一个编写HTML电子邮件消息的图形用户界面编辑器和一个用于显示的渲染引擎。在邮件中使用HTML受到了一些兼容性的批评，由于一些盲人或具有视觉障碍的人的访问问题，这种方式有利于伪装的钓鱼攻击。因其消息大小超过明文，所以它可混淆垃圾邮件过滤器。
命名规则
最常用的计算机文件扩展名为.html，通用缩写为.htm。它起源于某些早期操作系统与文件系统，如DOS以及FAT数据结构的局限性，它将文件扩展名限制为3个字母。
HTML应用程序
HTML应用程序（HTA；文件扩展名".hta"）是一个Microsoft Windows应用程序，它在浏览器中使用HTML和动态HTML提供应用程序图形界面。正规HTML文件被限制在浏览器的安全模型中，只能分别通过网页服务器和网页对象与站点Cookie进行通信和操作。HTA作为完全受信任的应用程序运行，因此拥有更多的权限，如创建/编辑/删除文件与注册表项。因为它们在浏览器安全模式之外操作，所以HTA不能通过HTTP执行，必须下载（就像EXE文件）并在本地文件系统执行。
所见即所得编辑器
所见即所得编辑器使用图形用户界面（GUI）显示HTML文档，常常类似于文字处理器，所以用户可以设计一切。编者面对的是文档，而不是代码，所以作者并不需要太多的HTML知识。这种所见即所得的编辑模式一直受到诟病，主要因为它生成的代码质量不高；也有人主张将其改变至WYSIWYM模型（所见即所指）。
年来，前端技术日新月异，前端已经不仅仅是网页，更多的开始由狭义向广义发展。
先后涌现出了具备后端能力的node，具备移动开发能力的react native，具备游戏渲染能力的cocos2d-js，以及iOS上的热修复技术JSPatch等等新技术。
咋一看，几乎各个端都被JavaScript攻陷，大有一统江湖之势。
究竟，JavaScript如何做到上天入地无所不能？JavaScript真的能一统江湖吗？
乱世出英雄：JavaScript的诞生故事要从JavaScript的由来说起。
高能瞎扯淡版，正经脸的同学可以忽略
有人的地方就有江湖，有江湖的地方就有纷争。
故事要从当年的浏览器之战说起。
时间回到1994年，
（→ 那时候我还是个宝宝~ #天真脸#）
景兄弟横空出世，并自带神器网景导航，战斗力爆表，势如劈竹，瞬时间威震天下。
一出世就武装到牙齿，武力值这么高还自带兵器，这个科学吗？
港真，我也觉得不科学，也许跟熊孩子哪吒、女汉子雅典娜是一个品种吧？
这一切北方的老前辈微软大湿，都看在眼里，不甘天下尽归景兄弟这个初出茅庐的毛孩子，大湿积淀多年，潜心修炼一年，终于带着大杀器IE 1.0出关了，誓于景兄弟争个高低。
自此景兄弟的网景导航 VS 微软大湿的IE 的军备战争开始。
景兄弟仔细掂量，微软大湿财大气粗，内功深厚，臣妾实在是办不到啊啊啊啊啊啊。
景兄弟紧急召集门人商议对策，有一门人曰：”以我们微薄之力硬磕，是万万使不得的。如今我们，一是宜施行合纵之策，抱大腿，组成联盟！二是避其锋芒，出奇招致胜。“
于是景兄弟依照此策略，一方面找到了当时德高为重的另一位前辈SUN，组成了开发者联盟。
（微软大湿：握草，联盟都粗来了，那我是不是得搞个部落？）
另一方面，景兄弟找到了锻造大师布兰登，请布大师帮忙升级兵器网景导航，大师就是大师，不费吹灰之力就完成了强化升级，然而布大师突发奇想，本来这是近距离攻击兵器，要是有多一个远距离攻击的能力那岂不是更好？Just do it. 想罢大师就加了一个远距离攻击的feature。于是有了自带远距离攻击能力的网景导航2.0。景兄弟一看这么流弊心里甚是欢喜，不过远距离攻击的技能叫做LiveScript，感觉不是特别Fashion。特然想到这不是跟SUN前辈联盟嘛，SUN家的Java正是独霸武林之时。不如把名字改成跟Java有关，蹭一把东风，蹭点光环。一拍脑袋，JavaScript！！！众门人一听：”好好好，JavaScript 流弊炫酷吊炸天！“
果然第一节下半场，景兄弟携强化过的网景导航2.0 战个痛快，那是杠杠的！人家一问，你咋还能远程攻击，你这个远程攻击用的是啥？答曰：JavaScript。“JavaScript，一定是跟SUN家Java是一个系列产品，一定很流弊！”#光环加成，各种膜拜脸#
微软大湿亏了一场，痛定思痛，也要搞远程攻击功能，果然不久，就祭出了同样带有远程攻击能力的IE 3.0，鉴于景兄弟的远程攻击叫做JavaScript，J开头的感觉应该比较流弊，所以微软大湿的叫做JScript。
然后战争就从地面贴身肉搏战，开始逐步升级到了远距离核战争。
正所谓，城门失火，殃及池鱼。这么打下去苦逼的是搬砖的页面仔，就是我这种，到处都是雷区，无处下脚。
最后到了1997年，“联合国安理会秘书长”艾玛（ECMA）出来调停，多方签署了“核不扩散条约”，约束各种远程攻击武器的使用，这才走上了正轨。
1995年SUN开发了Java技术，这是第一个通用软件平台。Java拥有跨平台、面向对象、泛型编程的特性，广泛应用于企业级Web应用开发和移动应用开发。Java也伴随着互联网的迅猛发展而发展，逐渐成为重要的网络编程语言。名噪一时。
1994年Netscape公司成立，并推出了自己的浏览器的免费版本 Netscape Navigator，很快就占有了浏览器市场。到了 1995 年，微软公司开始加入，并很快发布了自己的 Internet Explorer 1.0。
1995年，当时在Netscape就职的Brendan Eich（布兰登·艾克），正为Netscape Navigator 2.0浏览器开发的一门名为LiveScript的脚本语言，后来Netscape与Sun Microsystems组成的开发联盟，为了让这门语言搭上Java这个编程语言“热词”，将其临时改名为“JavaScript”，日后这成为大众对这门语言有诸多误解的原因之一。
JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与SUN达成协议的结果。
==> 所以，JavaScript和Java其实没有半毛钱关系。
JavaScript推出后在浏览器上大获成功，微软在不久后就为Internet Explorer 3.0浏览器推出了JScript，以与处于市场领导地位的Netscape产品同台竞争。JScript也是一种JavaScript实现，这两个
JavaScript语言版本在浏览器端共存意味着语言标准化的缺失，对这门语言进行标准化被提上了日程，在1997年，由Netscape、SUN、微软、宝蓝等公司组织及个人组成的技术委员会在ECMA（欧洲计算机制造商协会）确定定义了一种名叫ECMAScript的新脚本语言标准，规范名为ECMA-262。JavaScript成为了ECMAScript的实现之一。ECMA-262 第五版，即是ES5。
==> ECMA-262，包括ES5, ES6等是一个标准，JavaScript是ECMAScript的一个实现。
完整的JavaScript实现应该包含三个部分：
在网景导航2.0和IE 3.0出现之后的几年间，网景和微软公司不停的发布新版本的浏览器，支持更多的新功能。自此拉开了浏览器之战的序幕。这场浏览器之战到现在还在继续，以下一张图看清楚过程。
从浏览器之战可以看出，各家浏览器比拼的大致两个方面视觉体验（渲染排版）和速度（脚本运行）。
==> 所以一个完整的浏览器组成，至少包含两个部分：
补充一个市面常见浏览器的内核和JavaScript引擎搭配：
其他JavaScript引擎，Rhino，由Mozilla基金会管理，开放源代码，完全以Java编写，可以看做SpiderMonkey的Java版。
注意：webkit不单单只是一个排版引擎，webkit = 排版引擎 + JavaScript引擎。
==> 所以，JavaScript是动态语言，它的运行都是基于JavaScript引擎，引擎大都是由静态语言实现C++、Java、and so on。JavaScript的能力也是由引擎赋予。不管是浏览器环境中是window，亦或是node环境中的process，均是由引擎提供。
（番外：Mozilla的人不知道为啥特别喜欢猴子，经常以猴子命名技术，所以看到带Monkey的，十有八九估计是他们搞的。）
在浏览器环境中，DOM、BOM、window对象、setTimeout/setInterval，alert，console等方法均不是JavaScript自身具备的能力，而是浏览器native实现，然后通过JavaScript引擎注入到JS运行的全局上下文中，供JS使用。
鉴别方式，在调试器console中打出来，带有[native code]的即是：
讲道理：
JavaScript运行 → 依赖于JavaScript引擎 ← 浏览器集成了JavaScript引擎，同时通过JavaScript引擎注入native代码工JS脚本使用
发散一下思维，只要有JavaScript引擎，就能运行JS脚本，不管有没有浏览器！只是缺少浏览器提供的alert，window等方法。
既然浏览器可以往JavaScript引擎中注入代码，赋予JS脚本在网页中特殊的能力，同理我们可以自己集成JavaScript引擎，自己定义自己的方法往JavaScript引擎中注入，赋予JS更多更强的自定义能力！
注入的关键是：值类型相互对应，Obj映射class的一个实例，function映射一个句柄或者引用
JavaScript内部，所有数字都是以64位浮点数形式储存，即使整数也是如此
这就是说，在JavaScript语言的底层，根本没有整数，所有数字都是小数（64位浮点数）。容易造成混淆的是，某些运算只有整数才能完成，此时JavaScript会自动把64位浮点数，转成32位整数，然后再进行运算。由于浮点数不是精确的值，所以涉及小数的比较和运算要特别小心。尽量避免使用JavaScript做精准计算和密集计算。
根据国际标准IEEE 754，JavaScript浮点数的64个二进制位，从最左边开始，是这样组成的。
第1位：符号位，0表示正数，1表示负数
第2位到第12位：储存指数部分
第13位到第64位：储存小数部分（即有效数字）
符号位决定了一个数的正负，指数部分决定了数值的大小，小数部分决定了数值的精度。
IEEE 754规定，有效数字第一位默认总是1，不保存在64位浮点数之中。也就是说，有效数字总是1.xx…xx的形式，其中xx..xx的部分保存在64位浮点数之中，最长可能为52位。因此，JavaScript提供的有效数字最长为53个二进制位（64位浮点的后52位+有效数字第一位的1）。
内部表现公式：(-1)^符号位 1.xx…xx 2^指数位
精度最多只能到53个二进制位，这意味着，绝对值小于2的53次方的整数，即-(253-1)到253-1，都可以精确表示。
而大部分的后端语言，C++、Java、Python等的long型都是可以支持到64位，因此long型数据从后端语言传给JavaScript会发生低位截断。遇到这种情况一般使用String处理，如需要在JavaScript中做long型计算，需要自行实现计算器。
有了自行往JavaScript引擎中注入的想法，接下来就是分析可行性。
大部分是JavaScript引擎是使用C++编写，如果自己的程序使用的是C++可以很方便的进行注入，如果是OC，可以使用OC和C++混编的形式。
其他语言怎么破？
要在一门静态语言上与动态语言JavaScript相互调用，最便捷的方式是找到一个这门语言实现的JavaScript引擎（开源），直接进行集成，注入。如果没有，则需要使用多一层桥接，把这门语言的接口暴露给C++，再由C++实现的JavaScript引擎将接口注入供JavaScript使用。
服务端集成思路&实践：
我们都知道nodeJS，但是nodeJS的运行依赖于Google的V8 引擎，V8是C++实现，底层使用C++实现底层功能，比如网络，数据库IO，对外暴露一个构造器接口注入到上下文中，注意此处暴露的只是一个构造器接口而不是一个创建完的实例。然后实现了一个require的hook函数。当使用require加载一个JS模块时，跟网页中使用AMD 的require并无异样，当使用require加载系统库，既是C++的模块时，会调用暴露出来的构造器接口，得到一个实例对象。不管是装载JS模块还是装载C++模块，得到的都可以看做是一个Module Object，node会将装载完的模块缓存到binding_cache中，下次在别处的代码中使用require装载模块时，就会先去binding_cache中查找，如果找到了则返回该module object，如果没找到再执行上面的装载流程。
这就是node的基本原理：C++封装底层操作，通过V8注入，使得JS脚本有网络和IO能力
以上说到的几个都是C++层面的应用，那么经典的Java怎么玩？是不是Java就必须是静态语言的玩法，没有办法像C++之类的，可以使用JS的动态特性？
当然不是。这个时候，我们需要说起前面介绍过的一个JS引擎 Rhino，Rhino是完全由Java编写，可想而知，Rhino几乎就是为Java应用而生的。
用法是这样：
首先在我们的Java应用中集成Rhino；
所有的IO操作，网络操作等，都封装成service，并提供增删改查，setter && getter等多种方法
通过spring，把这些service bean注入到Rhino中；
把业务逻辑写到JS代码中，JS代码调用多个已注入的Java service处理业务逻辑，拼装数据返回！
好处：修改业务逻辑不需要修改Java代码，也就是不需要重新编译和部署，只需要刷新下跑在Rhino中的JS代码即可。以往Java应用的一个痛点是部署，需要重新编译，打包，部署重启服务器，现在以这种形式开发，可以达到服务端的热更新和热部署。既可以享有Java服务的稳定性和可靠性，又可以享有JS的灵活性。
这种技术和用法在差不多十年前就有过，前EMC的工程师基于EMC著名的商业产品Documentum，设计了一套Java开源的中小企业CMS系统Alfresco，在该系统中实现了这种技术，这种技术基于spring，叫做spring-surf，做了一个胶水层。可以看做小十年前的node吧。
Demo，使用spring-surf框架的系统中一个webscript模块
categorynode.get.xml定义URL拦截器和权限控制；
.get指明是处理GET请求，RESTful；
在categorynode.get.js中调用已注入的Java Bean处理业务逻辑；
若为网页请求返回.html.ftl，若为Ajax，返回.json.ftl；
（此处配套使用的是FreeMarker模板引擎）
==> categorynode.get.desc.xml
==> categorynode.get.js
==> categorynode.get.html.ftl
==> categorynode.get.json.ftl
React Native目前也是异常火爆，RN程序的运行依赖于Facebook的RN框架。在iOS、Android的模拟器或是真机上，React Native使用的是JavaScriptCore引擎，也就是Safari所使用的JavaScript引擎。但是在iOS上JavaScriptCore并没有使用即时编译技术（JIT），因为在iOS中应用无权拥有可写可执行的内存页（因而无法动态生成代码），在安卓上，理论上是可以使用的。JavaScriptCore引擎也是使用C++编写，在iOS和安卓中，JavaScriptCore都做了一层封装，可以无须关心引擎和系统桥接的那一层。iOS/Android系统通过JavaScriptCore引擎将定制好的各种原生组件注入，如：listview，text等。
cocos2dx是游戏开发中非常常用的游戏渲染引擎，有一系列的产品，如：cocos2dx(C++)，cocos2d-lua（lua）, cocos2d-js(JavaScript)等多个产品。其中最新退出的是cocos2dx的JS版本的cocos2d-js，编写游戏渲染特效代码相比于C++和lua非常方便。对于做需要经常更新的渲染场景，C++是静态语言，每次修改都需要重新编译才能运行，显然是不合适的。自然也就想到了脚本语言，lua和js，两者有些类似，都是动态语言，只需要集成一个运行引擎，提供一个运行的容器即可运行，同时通过引擎注入底层方法供脚本调用即可。lua好处是精简，语法精简，引擎页很小很精简，所以不可避免的代码量会比js多，同时学习成本比较高。js的好处是有ECMAScrtpt的核心，语法比较丰富，同时有支持一些高级属性。在cocos2d-js中，cocos2dx(C++)集成了SpiderMonkey（C++）作为JS运行引擎，中间做了一个胶水层既是JS Binding，通过引擎注入了一个cc的全局对象，映射的是底层C++的一个单例C++实例。表面上写的是JS代码，实际上操作的是底层的C++。cocos2d-js是代码可以运行在多种环境中，当运行的网页环境中时，使用的是cocos2d-html5引擎，底层操作的是canvas；当运行在客户端上时，使用的是cocos2dx引擎，底层操作的是C++，再由C++去操控openGL做绘制和渲染。提供相同的API，对开发者几乎是透明无差异的，开发者只需要关注实现效果即可。达到一套代码，多端运行（网页端，客户端）。
JSPatch是目前比较流行的iOS上的热修复技术，JSPatch 能做到通过 JS 调用和改写 OC 方法最根本的原因是 Objective-C 是动态语言，OC 上所有方法的调用/类的生成都通过 Objective-C Runtime 在运行时进行，我们可以通过类名/方法名反射得到相应的类和方法。JSPatch 的基本原理就是：JS 传递字符串给 OC，OC 通过 Runtime 接口调用和替换 OC 方法。
关键技术之一是 JS 和 OC 之间的消息互传。JSPatch里包含了，一个JS引擎JavaScriptCore（Safari，React Native用的同款）。用到了 JavaScriptCore 的接口，OC 端在启动 JSPatch 引擎时会创建一个 JSContext 实例，JSContext 是 JS 代码的执行环境，可以给 JSContext 添加方法，JS 就可以直接调用这个方法。本质上就是通过JavaScriptCore引擎注入，暴露OC的方法供JS调用来实现动态修改OC的反射。
Demo，iOS热更新，热修复：
集成JavaScriptCore引擎；
通过引擎，桥接JS和OC；
通过JS修改OC反射。
详细的JSPatch技术介绍请移步：https://github.com/bang590/JSPatch/wiki
关于JavaScript引擎：
在iOS 或 android 上能够运行的JavaScript 引擎有4个：JavaScriptCore，SpiderMonkey，V8，Rhino。下面这个表格展示各个引擎在iOS 和 Android 的兼容性。
因为iOS平台不支持JIT即时编译，而V8只有JIT模式，所以V8无法在iOS平台使用（越狱设备除外，想体验iOS JIT的同学可以自行越狱）。
所以，目前可以做到横跨iOS和Android双平台的JS引擎，只有两款，即是SpiderMonkey和JavaScriptCore。
JavaScript引擎会受很多东西影响，比如交叉编译器的版本、引擎的版本和操作系统的种类等。
至于如何选择，可以参考:《Part I: How to Choose a JavaScript Engine for iOS and Android Development》
至此，JavaScript从立足于前端，到征战全端的逆袭之路，可以总结为“携引擎以令天下”。
不足之处，还请各位看官轻拍~
bang590/JSPatch中问参考文档
Cocos2d-JS | Cocos2d-x官方参考文档
Alfresco官方参考文档
《Browser Wars: The End or Just the Beginning?》
《Part I: How to Choose a JavaScript Engine for iOS and Android Development》
《React Native 从入门到源码》
*请认真填写需求信息，我们会在24小时内与您取得联系。
