HTML调用打开本地文件

时，我们希望实现这样一个特性:单击HTML页面上的链接将调用本地可执行文件。像腾讯QQ、迅雷这类。

实现此功能也非常简单，这需要我们添加和修改注册表来实现自定义URL协议协议。

自定义URL Protocol 协议

一些应用软件可以在浏览器中点击一个url后自动启动，并执行操作。

1. win+r打开注册表，输入regedit进入注册表

2. 在注册表左边最上面HKEY_CLASSES_ROOT那个树右键新建——项。该项的名称自己命名，其实该名称也是协议的名称，我们调用的时候就是根据该协议调用的，而我这里随便起了一个：ZZO。

3. 然后在该项中右键->新建->字符串值，创建一个URL Protocol的值，其中数据默认为空。

4. 然后在ZZO下新建->项，名字为DefaultIcon

5. 在ZZO下新建->项，名称为shell。并在shell下新建名为open的项。然后在open下新建名为command的项

6. 然后分别修改DefaultIcon 和 command 的值为要调用的程序完整路径.

比如我这里要调用的是QQ，完整路径为：D:\Program Files (x86)\Tencent\QQ\Bin\QQScLauncher.exe

7. 然后我们在html页面添加一个a标签

8. 点击页面按钮

通过网站调用可执行程序，主要是修改注册表,注册 URL Protocol 协议。

注意上面 command 项的值可以为 C:\Program Files (x86)\Qiaoker\updater.exe "%1" ,这个"%1"是传递给 updater.exe的参数。

加了后使用是我们就可以传参数了，

方式二：使用js调起客户端

除了上面那种方式，我们还可以通过调用js函数实现客户端exe程序的调用，但是这种方式局限性很大，目前只支持IE浏览器。

代码如下：

function execProgram() {

var exepath = "D:\Program Files (x86)\Tencent\QQMusic\QQMusic.exe"

var ws = new ActiveXObject("WScript.Shell");

ws.Exec(exepath);

}

avaScript 是如何运行的？

几乎每个人都听说过 v8引擎这个概念，大多数人都知道 JavaScript 是单线程的，或者它使用的是回调队列。

执行 JavaScript 代码所涉及的核心组件包括运行时环境和浏览器，他们内部如何工作呢？

JavaScript Engine
JavaScript Runtime Environment
The Call Stack
Concurrency and Event Loop

JavaScript 是一种解释性编程脚本语言，JavaScript 引擎就是一个执行 JavaScript 代码的计算机程序：解释器，当 JavaScript 文件在浏览器中加载时，负责逐行解析代码，将其转换为机器代码，然后执行它。

每个浏览器都有自己的 JavaScript 引擎，但最著名的是 Google 的 v 8引擎。V8引擎不仅为 Google Chrome 提供动力，还为 Node.js 提供动力，这就是 JavaScript 运行时。

引擎由两个主要组件组成:

内存堆(Memory Heap)ーー这是内存分配发生的地方
调用堆栈(Call Stack)ーー这是代码执行时堆栈帧的位置

Call Stack调用堆栈:计算模型：栈下推自动机，图灵等价。

JS是一种单线程的编程语言，这意味着它只有一个 Call Stack。因此，它可以一次只做一件事。并且不必处理在多线程环境中出现的复杂场景(例如，死锁)。

调用堆栈是一种数据结构，它基本上记录我们在程序中的位置。如果我们进入一个函数，我们把它放在堆栈的顶部。如果我们从一个函数返回，我们将从堆栈顶部弹出。

运行时

JavaScript 引擎并不是孤立运行的。它和许多其他组件一起运行在一个叫做JavaScript Runtime Environment 中。

JRE 负责JavaScript 的异步执行。组件包含：

JS Engine， such as V8
Web API
Callback Queue or message queue
Event Table
Event loop

并发性和事件循环

虽然是单线程，为了处理多任务，需要并发交替执行，

并发、多线程、多进程、异步编程和事件循环等是一组相关概念，交织在PL和OS的中间。

首先，并发性是一个概念，它能够无序地处理多个任务。任务一般分为计算密集和读写密集。

real world,一个餐厅，一排人点菜后，后厨出菜就是无序的，有的菜工序复杂就得多等，这就是异步，同步就是先来后到一个个上完菜。

实现并发性的技术很多，包括多线程、多进程和异步编程。

异步编程，比如node.js并发性使用的异步 i/o，将 i/o 操作移交给操作系统内核，并将 i/o 操作的回调推迟。异步io这个任务就放在事件循环队列进行调度。

由此各组件基本解释一番。

本篇文章开始成哥将带大家一起学习一下前端的基础知识，我们先讲解前端的基础HTML与CSS，这个讲完我们将讲解VUE前端框架，最后我们再讲讲Ant Design的VUE前端框架，从而形成前端一个系列的教程，下面就开始我们今天的内容吧！

01 HTML简介

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。

HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。

使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件"翻译"成可以识别的信息，即现在所见到的网页。HTML 不需要编译，可以直接由浏览器执行，非常方便开发时调试。

02 HTML实例

我们现在创建一个典型的HTML结构具体如下：

1. <!DOCTYPE html>  
2. <html lang="ch">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>HTML实例</title>  
6. </head>  
7. <body>  
8.   <h1>我是标题</h1>  
9.   <p>我是段落。</p>  
10. </body>  
11. </html>

如上页面中各个标签代表的意思如下：

1）<!DOCTYPE html>是文档声明头，它告诉游览器当前处理的内容是HTML页面

2）html是 HTML 页面的根元素，用于标识HTML内容的开始与结束

3） head是HTML页面的头，包含了文档的一些属性。其中meta是元数据这边charset="UTF-8"标识当前页面编码格式为UTF-8，title为文档的标题

4）body是HTML主体也是游览器在显示页面时的内容。h1是body内容中定义的标题，p是body内容中定义的段落

我们现在通过游览器打开编写的HTML内容，具体内容如下

在HTML中的内容可以通过以下格式进行内容注释具体如下：

03 HTML标签、元素、属性、实体编码与事件

（1）HTML标签

HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML标签具有如下特点：

1）标签一般是成对出现的如:<div></div>;也有空标签如:<br />

2）标签由<>包括,分为开始标签(开放标签)和结束标签(闭合标签)

3）标签不区分大小写,根据W3C(万维网联盟)推荐,统一使用小写字母

标签的示列如下：

标签按照<>的对数可以分为如下两类分别为双标签与单标签，下面我们具体来了解一下这两类标签。

1）双标签

双标签指由开始和结束两个标记符组成的标记。其基本语法格式如下：

1. <标记名></标记名>

常见的双标签有如下几种：

1. <html></html>  
2. <head></head>  
3. <title></title>  
4. <body></body>  
5. <h1></h1>  
6. <p></p>  
7.   
8. <!-- 块级元素 -->  
9. <div></div>  
10. <span></span>  
11.   
12. <!-- 超链接元素 -->  
13. <a></a>  
14.   
15. <!-- 列表元素 -->  
16. <ul></ul>

2）单标签

单标签是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：

1. <标记名/>

常见的单标签有如下几种：

1. <!-- 换行标签 -->  
2. <br />  
3.   
4. <!-- 分隔线标签 -->  
5. <hr />  
6.   
7. <!-- 图片标签 -->  
8. <img />

（2）HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码，如<p>段落</p>。元素可以进行嵌套具体如下：

1. <div>  
2.   <h1>我是标题</h1>  
3.     
4.   <div>  
5.     <p>元素嵌套示列</p>  
6.   </div>  
7.   
8. </div>

（3）HTML属性

属性为 HTML 元素提供附加信息，可分为全局属性（即所有元素均可使用的属性，如id,class等）和元素属性（部分元素可使用的属性，例如<a href="http://www.baidu.com">搜索</a>），属性通常由属性名="属性值"构成,存在于开始标签中，示列如下:

（4）HTML实体编码

对于部分不易通过键盘输入的或和HTML冲突的部分符合,引入对应的"实体编码"，如< <> >空格。

（5）HTML事件

通过某个动作,执行某个操作/JS脚本的能力。如点击按钮,改变颜色，事件可以分为多类比多鼠标点击、鼠标聚焦等，下面我看看看一个事件编写示列：

04 HTML常用标签示列

（1）h标签

h 标签有六种分别为h1、h2、h3、h4、h5、h6，这六个分别对应六种样式的标题，我们现在来编写这六种h标签，演示代码如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <h1>H1标题</h1>  
9.   <h2>H2标题</h2>  
10.   <h3>H3标题</h3>  
11.   <h4>H4标题</h4>  
12.   <h5>H5标题</h5>  
13.   <h6>H6标题</h6>  
14. </body>  
15. </html>

我们来运行该HTML文件，来看看这六种h标签有什么样式差异，从示列中可以发现h1标签字体最大然后依次减小。

（2）p标签

p 标签是文本标签，现在我们来编写一段含有p标签的html文本，然后运行了看看p标签的样式具体操作如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <h4>标题一</h4>  
10.   <p>我是段落1</p>  
11.   
12.   <h4>标题二</h4>  
13.   <p>我是段落2</p>  
14.   
15. </body>  
16. </html>

（3）a标签

a标签是超链接标签，点击a标签可以跳转到其设置的网站，具体示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <div>  
9.     <a href="http://www.baidu.com">点我跳转到百度页面</a>  
10.   </div>  
11.   
12.   <div>  
13.     <a href="http://www.qq.com">点我跳转到腾讯页面</a>  
14.   </div>  
15.   
16. </body>  
17. </html>

（4）div标签

div标签是一个块级元素，它可用于组合其他 HTML 元素的容器。可以把div看成一个盒子，我们可以为这个盒子设置各种各样属性（如高度、宽度、颜色等），下面我们编写一个div标签并设置其长为300px，宽度为200px，同时给其一个背景颜色，具体如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>  
10.   
11. </body>  
12. </html>

（5）列表标签

列表作为网页设计的重要内容之一，能够用来制作导航栏和新闻列表等。HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）

1）有序列表ul

有序列表的顺序是有序的，默认情况下会以数字来排列，但也可以通过设置其type属性以大写字母、小写字母、大写罗马数字、小写罗马数字来排列，我们现在来写一个示列，具体如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <!--  有序列表，以默认方式数字排列 -->  
10.   <p>有序列表默认方式数字排列</p>  
11.   <ol>  
12.     <li>列表1</li>  
13.     <li>列表2</li>  
14.     <li>列表3</li>  
15.   </ol>  
16.   
17.   <!--  有序列表，以大写字母排列 -->  
18.   <p>有序列表大写字母排列</p>  
19.   <ol type="A">  
20.     <li>列表1</li>  
21.     <li>列表2</li>  
22.     <li>列表3</li>  
23.   </ol>  
24.   
25. </body>  
26. </html>

2）无序列表ol

无序列表的顺序是无序的，不会按照某个值来排序，无序列表中每个列表前默认都有一个实心圆，也可以通过type属性来设置成空心圆或者小方块，无序列表示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>无序列表默认type样式</p>  
10.   <ul>  
11.     <li>列表1</li>  
12.     <li>列表2</li>  
13.     <li>列表3</li>  
14.   </ul>  
15.   
16.   <p>无序列表方块样式</p>  
17.   <ul type="square">  
18.     <li>列表1</li>  
19.     <li>列表2</li>  
20.     <li>列表3</li>  
21.   </ul>  
22.   
23. </body>  
24. </html>

3）自定义列表dl

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始，其列表内容是以<dd> 开始，自定义列表前面没有任何标识，其具体示例如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>自定义列表</p>  
10.   <dl>  
11.     <dt>东岳</dt>  
12.     <dd>泰山</dd>  
13.   
14.     <dt>南岳</dt>  
15.     <dd>衡山</dd>  
16.   
17.     <dt>西岳</dt>  
18.     <dd>华山</dd>  
19.   
20.     <dt>北岳</dt>  
21.     <dd>恒山</dd>  
22.   
23.     <dt>中岳</dt>  
24.     <dd>嵩山</dd>  
25.   </dl>  
26.   
27. </body>  
28. </html>

（6）其它标签

1）换行标签<br/>

在HTML中如果想给内容进行换行可以使用换行标签，具体示列如下：

2）分割线标签<hr/>

<hr/> 标签用于在 HTML创建一条分割线，具体示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>我是张三</p>  
10.   <!-- 分割线标签 -->  
11.   <hr/>  
12.   <p>我是李四</p>  
13. </body>  
14. </html>

05 总结

至此我们《HTML基础教程上篇》就讲完了，下篇内容主要讲解HTML样式、HTML表单、Tabel等，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！

-END-

@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。

文章推荐：

一文秒懂Web框架基础之WSGI协议
IT工程师都需要掌握的容器技术之扫盲篇

在线咨询

上一篇：「每日一学」前端魔法王国：HTML与CSS奇迹创造者的冒险之旅
下一篇：一文解读JavaScript中的文档对象（DOM）

您的项目需求

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

整合营销服务商