HTA入门基础教程 | VBS脚本的GUI界面 HTA简明教程 ,附带完整历程及界面美化

背景知识

HTA是 HTML Application的缩写（HTML应用程序），是软件开发的新概念，直接将HTML保存成HTA的格式，就是一个独立的应用软件，与VB、C++等程序语言所设计的软件界面没什么差别。

HTA与普通的网页结构差不多，所以设计出来很容易，当然HTA还有许多自己独特的属性：
HTA 虽然用HTML、JS和CSS编写，却比普通网页权限大得多。
HTA 具有桌面程序的所有权限（读写文件、操作注册表等），HTA本来就是被设计为桌面程序的。
HTA对语法的要求比HTML还要松，甚至连<html>、<body>等标记都可以省略：
可以用<HTA:Application>来设定HTA应用程序的外观，如标题栏、边框大小等，必须放在中。

属性一览

推荐html表格代码生成 https://www.tablesgenerator.com/html_tables
由于CSDN无法展示样式，故以截图形式展示，阅读更直观,下述表格源文件 CSDN下载-HTA.tgn ,下载后打开上述链接，点击File，Load Table即可
在这里插入图片描述

界面效果

效果如下：LOGO+公司LOGO自行添加链接即可,以下仅为从网上寻找的图片添加,若造成任何侵权请告知删除.
在这里插入图片描述

代码

新建文件，并命名为 Example.hta 即可在Windows中直接打开使用

<html>
    <head>
        <title style="padding: 1px;margin: 1px;"> HTA Example GUI</title>
        <meta content="text/html;charset=utf-8" style="background:Aqua;text-align:center;">

        <HTA:APPLICATION
             ID="oHTA"
             APPLICATIONNAME="myApp"
             ICON="http://stackoverflow.com/favicon.ico"/>
             

        <img src=" https://m-todo.gitee.io/m-todo-img/logo/bosch/BOSCH.png" style="width:17%;"></img>
        <img src=" https://m-todo.gitee.io/m-todo-img/logo/bosch/BoschHuayu.png" style="width:25%;"></img>
        
    </head>



    <script>
        window.resizeTo(1500,500);
        var fso;
        var wsh;
        fso = new ActiveXObject("Scripting.FileSystemObject"); 
        wsh = new ActiveXObject("WScript.Shell");
		
        function checkcli(e){
			fso.GetStandardStream(1).Write(e.type);
			window.close();
        }
		
        function Run(strPath){  
			wsh.Run(strPath,1,true);   
        } 
		
        function Close(){
			window.close();
        }
		
        function Web(){
            wsh.Run("cmd.exe /k start firefox http://www.dooccn.com/c/ &&\
            echo complete");    
        }
		
        function MakeHexOnly(){ 
            wsh.Run("cmd.exe /k C: && cd C:/Users/test && OnlyHex.bat &&\
            echo The Hex Documents are saved in C:\Users\test ");
        }
		
        function MakeComplete(){ 
            wsh.Run("cmd.exe /k C: && cd C:/Users/test && CompleteHex.bat &&\
            echo The Hex Documents are saved in C:\Users\test ");
        }

    </script>


    <style>
        body {padding:0; margin:0;}

        ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        position: fixed;
        top: 0;
        width: 100%;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover {
        background-color: #4CAF50;
        color: white;
        }

        .labeltxt {
            background-color: #480000;
        }

        h1{
        font-family:"Times New Roman",Georgia,Serif;
        } 

    </style>



    <body style="background:light; text-align:left; padding: 1px;margin: 1px;" SCROLL="no">
        <meta content="text/html;charset=utf-8" style="background:Aqua; text-align:left;">

        <ul>
            <li class="labeltxt"><a href="#">快捷方式</a></li>
            <li onclick="Run('file:///C:/Program%20Files%20(x86)/Microsoft%20Office/Office16/Outlook.exe')"><a href="#">快捷方式1</a></li>
            <li onclick="Run('file:///C:/Program%20Files%20(x86)/Microsoft%20Office/Office16/Outlook.exe')"><a href="#">快捷方式2</a></li>
            <li onclick="Run('file:///C:/Program%20Files%20(x86)/Microsoft%20Office/Office16/Outlook.exe')"><a href="#">快捷方式3</a></li>
            <li onclick="Run('file:///C:/Program%20Files%20(x86)/Microsoft%20Office/Office16/Outlook.exe')"><a href="#">快捷方式4</a></li>
            <li onclick="Run('file:///C:/Program%20Files%20(x86)/Microsoft%20Office/Office16/Outlook.exe')"><a href="#">快捷方式5</a></li>
            <li onclick="Run('file:///C:/Program%20Files%20(x86)/Microsoft%20Office/Office16/Outlook.exe')"><a href="#">快捷方式6</a></li>
            <li onclick="Run('file:///C:/Program%20Files%20(x86)/Microsoft%20Office/Office16/Outlook.exe')"><a href="#">快捷方式7</a></li>
            <li onclick="Web()"><a href="#">快捷方式8</a></li> 
        </ul>
        
        <div style="padding:0px;margin-top:02px;background-color:#C0C0C0;height:800px;">

        <ul>
            <li class="labeltxt"><a href="#">调用脚本</a></li>
            <li onclick="MakeHexOnly()"><a href="#">调用程序1</a></li>
            <li onclick="MakeComplete()"><a href="#">调用程序2</a></li>
        </ul>

        <div style="padding:0px;margin-top:02px;background-color:#C0C0C0;height:800px;">

        <ul>
            <li class="labeltxt"><a href="#">关闭程序</a></li>
            <li onclick="Close()"><a href="#Close">关闭</a></li>
        </ul>

        <div style="padding:0px;margin-top:02px;background-color:#C0C0C0;height:800px;">

        <MARQUEE>Hello Mushroomer</B><br><br>
    </body>

    
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

相关阅读:
react_13
第四章串
 RabbitMq安装（Erlang前置安装）
【套娃】win12r2server服务器通过ubuntu装gitlab
【ElasticSearch系列-07】ES的开发场景和索引分片的设置及优化
 自然之州阿肯色及温泉国家公园
 基础知识：深入理解MongoDB、MySQL与Redis的应用与实践
 【IC卡】终极版复卡器操作方法 ID卡读取方法
 WPF/C#：如何将数据分组显示
 PGL图学习之基于UniMP算法的论文引用网络节点分类任务[系列九]
原文地址：https://blog.csdn.net/qq_33704787/article/details/125477889