html的基本工作原理。

浏览者首先会通过域名来寻找存放网页的计算机服务器。如果找到，浏览器就会与该服务器联系并建立信息传输通道使信息正确传输。信息通道建立好后，浏览器就会向服务器要求下载目录下的html文件。文件下载成功后，浏览器便会解释执行文件中的html标记。如果有图像，则下载图像文件，然后一起显示在浏览器窗口上。

HTM是超文本标记Hypertext Markup

HTML是超文本标记语言Hypertext Markup Language

同时，这两种都是静态网页文件的扩展名，扩展名可以互相更换而不会引起错误（这是指打开而言，但是对于一个链接来说，如果它指向的是一个htm文件，而那个htm文件被更改为html文件，那么是找不到这个连接的）

实际上HTM与HTML没有本质意义的区别，只是为了满足DOS仅能识别8+3的文件名而已，因为一些老的系统(win32)不能识别四位文件名，所以某 些网页服务器要求index.html最后一个l不能省略。MSIE能自动识别和打开这些文件，但编写网页地址的时候必须是完全对应的，也就是说 index.htm和index.html是两个不同的文件，对应着不同的地址。

HTML 比HTM 的载入速度快

HTM 为DOS三字符文件扩展名时代而来；

HTML 为Windows时代支持多字符扩展名；

以下仅作为参考：

在线所见即所得HTML编辑器的实现原理浅析

这篇文章主要介绍了在线所见即所得HTML编辑器的实现原理浅析,本文用初始化、打开编辑功能、获取编辑器的内容、增加样式设置、再进一步等步骤阐述在线编辑器的基本实现原理,需要的朋友可以参考下

如今网站开发越来越提倡用户体验，为用户提供便利的工具也越来越多，而在线的HTML内容编辑器应该算是其中比较“古老”的一个了。功能简单的可以为用户提供文本的样式控制，例如文字的颜色、字体大小等而功能复杂的甚至可以提供类似Word一样的强大功能。虽然现在各种开源的编辑器非常多，但是真正好用的并不多，所以它们改进工作也一直在进行中。

如今网上多数的编辑器都有很强大的功能，相对而言，在使用中也需要很多的配置，当然代码也自然会比较“臃肿”。如果我们并不需要功能那么强大的编辑器，那么可以自己实现一个，因为代码并不复杂。下面是一点个人的经验，仅供参考(以ExtJS的HTMLEditor为例)。

1、初始化。当页面加载完毕后，向页面添加一个IFrame(可选)。这里要注意的是，要判断页面的状态，要等页面完全加载完毕后再进行 *** 作，防止出现找不到某些元素的错误。在site:https：//www.moxue.store中也出现过类似问题。

2、打开编辑功能。将IFrame设为可以编辑(下面代码来自ExtJS的HTMLEditor)：

代码如下:

// 获取iframe的window对象

getWin : function(){

return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name]

},

//获取iframe的document对象

getDoc : function(){

return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document)

},

//打开document对象，向其写入初始化内容，以兼容FireFox

doc = this.getDoc()

doc.open()

doc.write(' ')

//打开document对象编辑模式

doc.designMode = "on"

doc.close()

这样就可以向这个简单那的编辑器中写入内容了。

3、获取编辑器的内容，代码如下：

复制代码 代码如下:

//获取编辑器的body对象

var body = doc.body || doc.documentElement

//获取编辑器的内容

var content = body.innerHTML

//对内容进行处理，例如替换其中的某些特殊字符等等

//Some code

//返回内容

return content

4、增加样式设置。上面的编辑器虽然实现了基本功能，但是实在是有些太简单了，应该增加些简单的样式实现。document的execCommand方法使这种想法成为可能。

代码如下:

//统一的执行命令方法

function execCmd(cmd, value){

//doc对象的获取参照上面的代码

//调用execCommand方法执行命令

doc.execCommand(cmd, false, value === undefined ? null : value)

}

//将选中字体变为黑体，Ctrl-B

execCmd('bold')

//加下划线，Ctrl-U

execCmd('underline')

//变为斜体，Ctrl-I

execCmd('italic')

//设置文字的颜色

execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#'+color : color)

//在光标处插入一段内容

function insertAtCursor(text){

//win对象的获取参考上面的代码

if(Ext.isIE){

win.focus()

var r = doc.selection.createRange()

if(r){

r.collapse(true)

r.pasteHTML(text)}

}else if(Ext.isGecko || Ext.isOpera){

win.focus()

execCmd('InsertHTML', text)

}else if(Ext.isSafari){

execCmd('InsertText', text)

}

}

5、再进一步。如今可以改变样式了，如果编辑器有工具栏(这应该是必然的)，那么我们还想工具栏上的按钮根据光标所处位置的样式，自动处于突出或正常显示。document的queryCommandState()方法又让这种想法得以实现。

代码如下:

//doc对象的获取参考上面的对面

//光标处是否是粗体

var isBold = doc.queryCommandState('bold')

if(isBold){

//改变Bold按钮的样式

}

//当然上面的代码是可以合并的，这里只不过是一个示意

//下划线

doc.queryCommandState('underline')

//斜体

doc.queryCommandState('italic')

本文只是为实现编辑器提供了简单的思路，其中的一些代码是可以直接使用的。建议，想自己实现编辑器的朋友可以参考下ExtJS中的HTMLEditor代码，既简单又比较清晰，可以在其上进行扩展。

最后提醒一点：一定要注意浏览器的兼容性问题，并且不要等接近尾声了再去测试兼容性，对于这么大量的JavaScript代码，调整是比较痛苦的事情。

---