什么是HTM或HTML文件？如何打开HTM和HTML文件？

么是HTML / HTM文件？他们相差一个字母有什么区别吗，如何查看或编辑源代码以及如何转换成其他格式，例如DOCX，PDF，JPG 等，针对这些问题编程狮W3Cschool整理以下资料希望能对你有所帮助：

什么是HTM或HTML文件？

HTM / HTML 文件是超文本标记语言（Hyper Text Markup Language）文件，是 Internet 上的标准网页文件类型。

由于 HTM 文件是纯文本文件，因此它们仅包含文本（例如您现在正在阅读的内容）以及对其他外部文件的文本引用（例如本文中的配图）。

HTM 和 HTML 文件还可以引用其他文件，例如视频，CSS 或 JS 文件。

HTM与HTML的区别

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

如何打开HTM或HTML文件？

任何 Web 浏览器，例如 Edge，Firefox，Chrome，Opera，IE，360 安全浏览器等，都可以打开并正确显示 HTM 和 HTML 文件。换句话说，在浏览器中打开这些文件并“解码（decode）” HTM 或 HTML 文件使其能正确显示。

现在有很多简化编辑和创建 HTM / HTML 文件的工具。一些著名的免费 HTML 编辑器包括 Eclipse ，Komodo Edit 和 Bluefish 。另一个流行的具有许多高级功能的 HTM / HTML 编辑器是 Adobe Dreamweaver ，不过它是收费的。

虽然 Windows 系统自带的记事本等简单的文本编辑器的功能不如专用的 HTM 编辑器那么丰富，但是对 HTM 或 HTML 文件进行简单编辑修改还是可以的。不过，W3Cschool还是建议大家使用专用的编辑器，如 WebStorm、VS Code 等，它具更多专业功能。

这是一个非常简单的 HTML 页面以文本形式显示的示例：

源码：

<!doctype html>
<html>

    
<head>
<meta charset="utf-8">
<title>什么是HTM或HTML文件？ - 编程狮(w3cschool.cn)</title>
</head>


<body>
    <h1>什么是HTM或HTML文件？</h1>
    <p>HTM / HTML 文件是超文本标记语言（Hyper Text Markup Language）文件，是 Internet 上的标准网页文件类型。</p>
    <p>由于 HTM 文件是纯文本文件，因此它们仅包含文本（例如您现在正在阅读的内容）以及对其他外部文件的文本*引用*（例如本文中的配图）。</p>
    <p>HTM 和 HTML 文件还可以引用其他文件，例如视频，CSS 或 JS 文件。</p>   
</body>

    
</html>

当 Web 浏览器呈现信息时，HTML 文件的源代码被“转换”为真实的网页（尽管源代码已很精简了）。

如何转换HTML和HTM文件？

HTM 文件以特定的语法（规则）构成，以使其中的代码和文本在浏览器中打开时能够正确显示。因此，将 HTM / HTML 文件转换为另一种格式可能会丢失页面上的所有功能。

如果你想要做的是将一个 HTM / HTML 文件转换为方便离线查看的文件，这时图片或 PDF 格式会方便很多。

在 Chrome 中，鼠标右键单击网页，出现的选项菜单中进入 “打印(P)...”(快捷键：CTRL + P) ，在打印选项中选择另存为 PDF，以将窗口中的页面转换为 PDF 文件。Chrome 浏览器的扩展功能也称为“全屏截屏”，可将 Chrome 浏览器中所有打开的 HTM / HTML 文件转换为 PNG 文件。

其他浏览器具有类似的功能，例如 Firefox 的 “另存为 PDF” 加载项。

您也可以使用专门用于 HTM / HTML 进行图像文件转换的网站，例如iWeb2Shot 或Web-capture 。

一个免费的文件转换器可以用来转换并保存 HTM / HTML 文件到您的计算机。如 FileZigZag 是一个免费的文档转换器网站，可将 HTM 转换为RTF，EPS，CSV，PDF 和许多其他格式。

HTM / HTML 文件不能转换为文本文件格式以外的任何格式。例如，HTML 文件永远不能转换为 MP3 音频文件。

文件打不开？

HTML / HTM 文件应该很容易打开，因为它们只是任何 Web 浏览器都可以查看的文本文件。如果您的文件没有从上面建议的任何程序打开，则很有可能正在打开的这个文件并非超文本标记语言文件。

某些文件格式使用的文件扩展名与 HTML / HTM 非常相似，但实际上并非相同。一个主要的示例是用于压缩 HTML 电子书文件的 HTMLZ 文件扩展名。有 HTML 文件在内的 HTMLZ 文件，但整个包的格式为 ZIP，不会在 Web 浏览器或文本编辑器打开。

在此示例中，您需要特定的 HTMLZ 文件查看器，例如Caliber 。或者，由于此文件格式实际上是存档，因此您可以使用 7-Zip 之类的文件解压缩器将其打开，然后您可以使用网络浏览器或上述任何其他 HTML 查看器/编辑器打开任何单独的 HTML 文件。

TMLANGUAGE 是另一个可能与 HTML / HTM 文件混淆的文件扩展名。这些实际上是TextMate 用于 macOS 的 TextMate 语言语法文件。

以上就是编程狮W3Cschool为你整理的关于《什么是HTM或HTML文件？如何打开、编辑和转换HTM和HTML文件？》的全部内容，现希望可以帮到你~

et,const来源

ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。

这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。

在 ES2015 之前，JavaScript 只有两种类型的作用域：全局作用域和函数作用域（局部变量）。都是通过var声明

全局作用域

全局（在函数之外）声明的变量拥有全局作用域。

实例

些在线图文编辑器不支持直接插入代码块，但可以直接粘贴 HTML 格式的高亮代码块。

花了一点时间研究了一下各家的编辑器，规则却各不相同。有的要求代码块被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 属性里包含 "code" 关键词，或者要求代码块里必须包含至少一个 <br> 。如果不符合这些要求，不是变成普通文本，就是丢失换行缩进，或者丢失颜色样式。

所以，这就难了。先得找个支持代码高亮的编辑器，仔细地选择并复制代码块，复制完还得编辑剪贴板里的 HTML 。这就不如干脆写个转换工具了。

因为浏览器操作系统剪贴板可能不太方便，下面用 aardio 写一个工具软件。

先看软件成品演示：

软件用法：

1、输入编程语言名称（支持自动完成）。
2、然后在输入框中粘贴要转换的编程代码。
3、点击「复制高亮代码块」按钮。

然后我们就可以打开在线图文编辑器直接粘贴生成的高亮代码块了。

下面是这个软件的 aardio 源代码：

import win.ui;
/*DSG{{*/
var winform = win.form(text="HTML 代码块生成工具 - 本工具使用 aardio 语言编写";right=1055;bottom=674;bgcolor=16777215)
winform.add(
button={cls="button";text="复制高亮代码块";left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="可在网页编辑器直接粘贴";z=4};
cmbLangs={cls="combobox";left=262;top=625;right=446;bottom=651;db=1;dl=1;edge=1;items={"javascript"};mode="dropdown";z=2};
editCode={cls="edit";left=1;top=4;right=1052;bottom=599;db=1;dl=1;dr=1;dt=1;edge=1;hscroll=1;multiline=1;vscroll=1;z=5};
static={cls="static";text="请选择语言：";left=70;top=629;right=248;bottom=649;align="right";db=1;dl=1;transparent=1;z=3};
webCtrl={cls="custom";text="自定义控件";left=8;top=10;right=1048;bottom=604;db=1;dl=1;dr=1;dt=1;hide=1;z=1}
)
/*}}*/

import web.view;
var wb = web.view(winform.webCtrl);

import win.clip.html;
wb.export({ 
    onHighlight = function(html,background,foreground){
        html = `<pre class="code" style="overflow-x:auto;text-align:left;box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;padding:10px;border-radius:3px;background-color:`+background+`;color:`+foreground+`;white-space:pre;word-break:break-all;display:block;font-size:14px;font-style:normal;font-variant-ligatures:normal;font-variant-caps: normal;font-family: "Consolas", Consolas, "Liberation Mono", Menlo, Courier, monospace"><code>`
            + html + `</code></pre>`;

        html,count = string.replace(html,'\n',"<br>");
        if(!count){
            html = string.replace(html,`\</code\>\</pre\>$`,`<br></code></pre>`);
        }
        var cb = win.clip.html();
        cb.write(html); 

        winform.setTimeout( 
            function(){
                winform.editCode.show(true);
                winform.webCtrl.show(false);
                winform.text = "HTML 代码块生成工具 - 已复制高亮代码块到剪贴板，可在网页直接粘贴";
            },1000); 
    };
    setLanguages = function(langs){
        winform.languages = langs;
    }  
})


winform.cmbLangs.onEditChange = function(){ 

    var text = string.lower(winform.cmbLangs.text);
    var items = table.filter( winform.languages : {}, lambda(v) string.startWith(v,text) ); 
    winform.cmbLangs.autoComplete(items);  
}
winform.cmbLangs.editBox.disableInputMethod();

import web.prism;
import wsock.tcp.asynHttpServer;
var httpServer = wsock.tcp.asynHttpServer(); 
httpServer.run(web.prism,{
    ["/index.html"] = /*****
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" /> 
    <link href="prism.css" rel="stylesheet" />
  </head>
  <body>
    <pre id="code-pre"><code id="code" class="lang-javascript"></code></pre>
    <script src="prism.js"></script>
    <script>
   function computedColorStyle(element, options = {}) {

        Array.prototype.forEach.call(element.children,child => {
            computedColorStyle(child, options);
        });

        const computedStyle = getComputedStyle(element);
        element.style["color"] = computedStyle.getPropertyValue("color");  
    }

    highlight = function(code,language){
        var html = Prism.highlight(code, Prism.languages[language], language);

        var codeEle = document.getElementById("code");
        codeEle.innerHTML = html;
        computedColorStyle(codeEle);

        const computedStyle = getComputedStyle(codeEle);  
        onHighlight(codeEle.innerHTML
            ,getComputedStyle(document.getElementById("code-pre")).getPropertyValue("background-color")
            ,computedStyle.getPropertyValue("color"));
    }

    setLanguages( Object.keys(Prism.languages) );
    </script>
  </body> 
</html> 
    *****/
});

wb.go( httpServer.getUrl("/index.html"));

winform.button.oncommand = function(id,event){
    winform.text = "HTML 代码块生成工具 - 本工具使用 aardio 语言编写"
    winform.editCode.show(false);
    winform.webCtrl.show(true);

    wb.xcall("highlight",winform.editCode.text,winform.cmbLangs.text);
}


winform.show();
win.loopMessage();

打开 aardio 创建工程，然后复制粘贴上面的代码到 main.aardio 里面就可以直接运行，或生成独立 EXE 文件：

这个软件的原理：

1、首先通过 WebView2 调用 Prism.js 高亮代码。为了可以内存加载 Prism.js （支持生成独立 EXE ），我写了一个 aardio 扩展库 web.prism 。关于 WebView2 请参考：放弃 Electron，拥抱 WebView2！JavaScript 快速开发独立 EXE 程序

2、因为 Prism.js 生成的 HTML 代码块都是使用 class 属性指定样式，所以我们需要调用 getComputedStyle 获取最终渲染的字体颜色属性。

3、最后在 JavaScript 里调用 aardio 函数处理生成的 HTML 代码块，aardio 的任务是将 HTML 修改为更合适直接粘贴的格式，并尽可能地处理各图文编辑器的兼容问题。然后调用 win.clip.html 将处理好的 HTML 复制到系统剪贴板：

import win.clip.html;

var cb = win.clip.html();
cb.write(html);

然后只要愉快地粘贴代码块就可以。

如果是 aardio 代码不需要用这个工具，在 aardio 编辑器里右键直接点『复制全部到 HTML 代码块』就可以了：

在线咨询

上一篇：textarea中提示文本的实现，默认显示，点击消失
下一篇：JAVA中List的遍历方式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商