HTML調(diào)用打開本地文件

時，我們希望實現(xiàn)這樣一個特性:單擊HTML頁面上的鏈接將調(diào)用本地可執(zhí)行文件。像騰訊QQ、迅雷這類。

實現(xiàn)此功能也非常簡單，這需要我們添加和修改注冊表來實現(xiàn)自定義URL協(xié)議協(xié)議。

自定義URL Protocol 協(xié)議

一些應(yīng)用軟件可以在瀏覽器中點(diǎn)擊一個url后自動啟動，并執(zhí)行操作。

1. win+r打開注冊表，輸入regedit進(jìn)入注冊表

2. 在注冊表左邊最上面HKEY_CLASSES_ROOT那個樹右鍵新建——項。該項的名稱自己命名，其實該名稱也是協(xié)議的名稱，我們調(diào)用的時候就是根據(jù)該協(xié)議調(diào)用的，而我這里隨便起了一個：ZZO。

3. 然后在該項中右鍵->新建->字符串值，創(chuàng)建一個URL Protocol的值，其中數(shù)據(jù)默認(rèn)為空。

4. 然后在ZZO下新建->項，名字為DefaultIcon

5. 在ZZO下新建->項，名稱為shell。并在shell下新建名為open的項。然后在open下新建名為command的項

6. 然后分別修改DefaultIcon 和 command 的值為要調(diào)用的程序完整路徑.

比如我這里要調(diào)用的是QQ，完整路徑為：D:\Program Files (x86)\Tencent\QQ\Bin\QQScLauncher.exe

7. 然后我們在html頁面添加一個a標(biāo)簽

8. 點(diǎn)擊頁面按鈕

通過網(wǎng)站調(diào)用可執(zhí)行程序，主要是修改注冊表,注冊 URL Protocol 協(xié)議。

注意上面 command 項的值可以為 C:\Program Files (x86)\Qiaoker\updater.exe "%1" ,這個"%1"是傳遞給 updater.exe的參數(shù)。

加了后使用是我們就可以傳參數(shù)了，

方式二：使用js調(diào)起客戶端

除了上面那種方式，我們還可以通過調(diào)用js函數(shù)實現(xiàn)客戶端exe程序的調(diào)用，但是這種方式局限性很大，目前只支持IE瀏覽器。

代碼如下：

function execProgram() {

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

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

ws.Exec(exepath);

}

avaScript 是如何運(yùn)行的？

幾乎每個人都聽說過 v8引擎這個概念，大多數(shù)人都知道 JavaScript 是單線程的，或者它使用的是回調(diào)隊列。

執(zhí)行 JavaScript 代碼所涉及的核心組件包括運(yùn)行時環(huán)境和瀏覽器，他們內(nèi)部如何工作呢？

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

JavaScript 是一種解釋性編程腳本語言，JavaScript 引擎就是一個執(zhí)行 JavaScript 代碼的計算機(jī)程序：解釋器，當(dāng) JavaScript 文件在瀏覽器中加載時，負(fù)責(zé)逐行解析代碼，將其轉(zhuǎn)換為機(jī)器代碼，然后執(zhí)行它。

每個瀏覽器都有自己的 JavaScript 引擎，但最著名的是 Google 的 v 8引擎。V8引擎不僅為 Google Chrome 提供動力，還為 Node.js 提供動力，這就是 JavaScript 運(yùn)行時。

引擎由兩個主要組件組成:

內(nèi)存堆(Memory Heap)ーー這是內(nèi)存分配發(fā)生的地方
調(diào)用堆棧(Call Stack)ーー這是代碼執(zhí)行時堆棧幀的位置

Call Stack調(diào)用堆棧:計算模型：棧下推自動機(jī)，圖靈等價。

JS是一種單線程的編程語言，這意味著它只有一個 Call Stack。因此，它可以一次只做一件事。并且不必處理在多線程環(huán)境中出現(xiàn)的復(fù)雜場景(例如，死鎖)。

調(diào)用堆棧是一種數(shù)據(jù)結(jié)構(gòu)，它基本上記錄我們在程序中的位置。如果我們進(jìn)入一個函數(shù)，我們把它放在堆棧的頂部。如果我們從一個函數(shù)返回，我們將從堆棧頂部彈出。

運(yùn)行時

JavaScript 引擎并不是孤立運(yùn)行的。它和許多其他組件一起運(yùn)行在一個叫做JavaScript Runtime Environment 中。

JRE 負(fù)責(zé)JavaScript 的異步執(zhí)行。組件包含：

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

并發(fā)性和事件循環(huán)

雖然是單線程，為了處理多任務(wù)，需要并發(fā)交替執(zhí)行，

并發(fā)、多線程、多進(jìn)程、異步編程和事件循環(huán)等是一組相關(guān)概念，交織在PL和OS的中間。

首先，并發(fā)性是一個概念，它能夠無序地處理多個任務(wù)。任務(wù)一般分為計算密集和讀寫密集。

real world,一個餐廳，一排人點(diǎn)菜后，后廚出菜就是無序的，有的菜工序復(fù)雜就得多等，這就是異步，同步就是先來后到一個個上完菜。

實現(xiàn)并發(fā)性的技術(shù)很多，包括多線程、多進(jìn)程和異步編程。

異步編程，比如node.js并發(fā)性使用的異步 i/o，將 i/o 操作移交給操作系統(tǒng)內(nèi)核，并將 i/o 操作的回調(diào)推遲。異步io這個任務(wù)就放在事件循環(huán)隊列進(jìn)行調(diào)度。

由此各組件基本解釋一番。

本篇文章開始成哥將帶大家一起學(xué)習(xí)一下前端的基礎(chǔ)知識，我們先講解前端的基礎(chǔ)HTML與CSS，這個講完我們將講解VUE前端框架，最后我們再講講Ant Design的VUE前端框架，從而形成前端一個系列的教程，下面就開始我們今天的內(nèi)容吧！

01 HTML簡介

HTML的英文全稱是 Hyper Text Markup Language，即超文本標(biāo)記語言。

HTML是由Web的發(fā)明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創(chuàng)立的一種標(biāo)記語言，它是標(biāo)準(zhǔn)通用化標(biāo)記語言SGML的應(yīng)用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(如UNIX， Windows等)。

使用HTML語言，將所需要表達(dá)的信息按某種規(guī)則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件"翻譯"成可以識別的信息，即現(xiàn)在所見到的網(wǎng)頁。HTML 不需要編譯，可以直接由瀏覽器執(zhí)行，非常方便開發(fā)時調(diào)試。

02 HTML實例

我們現(xiàn)在創(chuàng)建一個典型的HTML結(jié)構(gòu)具體如下：

1. <!DOCTYPE html>  
2. <html lang="ch">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>HTML實例</title>  
6. </head>  
7. <body>  
8.   <h1>我是標(biāo)題</h1>  
9.   <p>我是段落。</p>  
10. </body>  
11. </html>

如上頁面中各個標(biāo)簽代表的意思如下：

1）<!DOCTYPE html>是文檔聲明頭，它告訴游覽器當(dāng)前處理的內(nèi)容是HTML頁面

2）html是 HTML 頁面的根元素，用于標(biāo)識HTML內(nèi)容的開始與結(jié)束

3） head是HTML頁面的頭，包含了文檔的一些屬性。其中meta是元數(shù)據(jù)這邊charset="UTF-8"標(biāo)識當(dāng)前頁面編碼格式為UTF-8，title為文檔的標(biāo)題

4）body是HTML主體也是游覽器在顯示頁面時的內(nèi)容。h1是body內(nèi)容中定義的標(biāo)題，p是body內(nèi)容中定義的段落

我們現(xiàn)在通過游覽器打開編寫的HTML內(nèi)容，具體內(nèi)容如下

在HTML中的內(nèi)容可以通過以下格式進(jìn)行內(nèi)容注釋具體如下：

03 HTML標(biāo)簽、元素、屬性、實體編碼與事件

（1）HTML標(biāo)簽

HTML 標(biāo)簽是 HTML 語言中最基本的單位，HTML 標(biāo)簽是 HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）最重要的組成部分。HTML標(biāo)簽具有如下特點(diǎn)：

1）標(biāo)簽一般是成對出現(xiàn)的如:<div></div>;也有空標(biāo)簽如:<br />

2）標(biāo)簽由<>包括,分為開始標(biāo)簽(開放標(biāo)簽)和結(jié)束標(biāo)簽(閉合標(biāo)簽)

3）標(biāo)簽不區(qū)分大小寫,根據(jù)W3C(萬維網(wǎng)聯(lián)盟)推薦,統(tǒng)一使用小寫字母

標(biāo)簽的示列如下：

標(biāo)簽按照<>的對數(shù)可以分為如下兩類分別為雙標(biāo)簽與單標(biāo)簽，下面我們具體來了解一下這兩類標(biāo)簽。

1）雙標(biāo)簽

雙標(biāo)簽指由開始和結(jié)束兩個標(biāo)記符組成的標(biāo)記。其基本語法格式如下：

1. <標(biāo)記名></標(biāo)記名>

常見的雙標(biāo)簽有如下幾種：

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）單標(biāo)簽

單標(biāo)簽是指用一個標(biāo)記符號即可完整地描述某個功能的標(biāo)記。其基本語法格式如下：

1. <標(biāo)記名/>

常見的單標(biāo)簽有如下幾種：

1. <!-- 換行標(biāo)簽 -->  
2. <br />  
3.   
4. <!-- 分隔線標(biāo)簽 -->  
5. <hr />  
6.   
7. <!-- 圖片標(biāo)簽 -->  
8. <img />

（2）HTML元素

HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼，如<p>段落</p>。元素可以進(jìn)行嵌套具體如下：

1. <div>  
2.   <h1>我是標(biāo)題</h1>  
3.     
4.   <div>  
5.     <p>元素嵌套示列</p>  
6.   </div>  
7.   
8. </div>

（3）HTML屬性

屬性為 HTML 元素提供附加信息，可分為全局屬性（即所有元素均可使用的屬性，如id,class等）和元素屬性（部分元素可使用的屬性，例如<a href="http://www.baidu.com">搜索</a>），屬性通常由屬性名="屬性值"構(gòu)成,存在于開始標(biāo)簽中，示列如下:

（4）HTML實體編碼

對于部分不易通過鍵盤輸入的或和HTML沖突的部分符合,引入對應(yīng)的"實體編碼"，如< <> >空格。

（5）HTML事件

通過某個動作,執(zhí)行某個操作/JS腳本的能力。如點(diǎn)擊按鈕,改變顏色，事件可以分為多類比多鼠標(biāo)點(diǎn)擊、鼠標(biāo)聚焦等，下面我看看看一個事件編寫示列：

04 HTML常用標(biāo)簽示列

（1）h標(biāo)簽

h 標(biāo)簽有六種分別為h1、h2、h3、h4、h5、h6，這六個分別對應(yīng)六種樣式的標(biāo)題，我們現(xiàn)在來編寫這六種h標(biāo)簽，演示代碼如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <h1>H1標(biāo)題</h1>  
9.   <h2>H2標(biāo)題</h2>  
10.   <h3>H3標(biāo)題</h3>  
11.   <h4>H4標(biāo)題</h4>  
12.   <h5>H5標(biāo)題</h5>  
13.   <h6>H6標(biāo)題</h6>  
14. </body>  
15. </html>

我們來運(yùn)行該HTML文件，來看看這六種h標(biāo)簽有什么樣式差異，從示列中可以發(fā)現(xiàn)h1標(biāo)簽字體最大然后依次減小。

（2）p標(biāo)簽

p 標(biāo)簽是文本標(biāo)簽，現(xiàn)在我們來編寫一段含有p標(biāo)簽的html文本，然后運(yùn)行了看看p標(biāo)簽的樣式具體操作如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <h4>標(biāo)題一</h4>  
10.   <p>我是段落1</p>  
11.   
12.   <h4>標(biāo)題二</h4>  
13.   <p>我是段落2</p>  
14.   
15. </body>  
16. </html>

（3）a標(biāo)簽

a標(biāo)簽是超鏈接標(biāo)簽，點(diǎn)擊a標(biāo)簽可以跳轉(zhuǎn)到其設(shè)置的網(wǎng)站，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <div>  
9.     <a href="http://www.baidu.com">點(diǎn)我跳轉(zhuǎn)到百度頁面</a>  
10.   </div>  
11.   
12.   <div>  
13.     <a href="http://www.qq.com">點(diǎn)我跳轉(zhuǎn)到騰訊頁面</a>  
14.   </div>  
15.   
16. </body>  
17. </html>

（4）div標(biāo)簽

div標(biāo)簽是一個塊級元素，它可用于組合其他 HTML 元素的容器?？梢园裠iv看成一個盒子，我們可以為這個盒子設(shè)置各種各樣屬性（如高度、寬度、顏色等），下面我們編寫一個div標(biāo)簽并設(shè)置其長為300px，寬度為200px，同時給其一個背景顏色，具體如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</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）列表標(biāo)簽

列表作為網(wǎng)頁設(shè)計的重要內(nèi)容之一，能夠用來制作導(dǎo)航欄和新聞列表等。HTML 列表分為：有序列表（ol），無序列表（ul）以及自定義列表（dl）

1）有序列表ul

有序列表的順序是有序的，默認(rèn)情況下會以數(shù)字來排列，但也可以通過設(shè)置其type屬性以大寫字母、小寫字母、大寫羅馬數(shù)字、小寫羅馬數(shù)字來排列，我們現(xiàn)在來寫一個示列，具體如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <!--  有序列表，以默認(rèn)方式數(shù)字排列 -->  
10.   <p>有序列表默認(rèn)方式數(shù)字排列</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

無序列表的順序是無序的，不會按照某個值來排序，無序列表中每個列表前默認(rèn)都有一個實心圓，也可以通過type屬性來設(shè)置成空心圓或者小方塊，無序列表示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>無序列表默認(rèn)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> 標(biāo)簽開始。每個自定義列表項以 <dt> 開始，其列表內(nèi)容是以<dd> 開始，自定義列表前面沒有任何標(biāo)識，其具體示例如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</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）其它標(biāo)簽

1）換行標(biāo)簽<br/>

在HTML中如果想給內(nèi)容進(jìn)行換行可以使用換行標(biāo)簽，具體示列如下：

2）分割線標(biāo)簽<hr/>

<hr/> 標(biāo)簽用于在 HTML創(chuàng)建一條分割線，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>我是張三</p>  
10.   <!-- 分割線標(biāo)簽 -->  
11.   <hr/>  
12.   <p>我是李四</p>  
13. </body>  
14. </html>

05 總結(jié)

至此我們《HTML基礎(chǔ)教程上篇》就講完了，下篇內(nèi)容主要講解HTML樣式、HTML表單、Tabel等，敬請期待。最后如果喜歡本篇文章不要忘了點(diǎn)贊、關(guān)注與轉(zhuǎn)發(fā)哦！

-END-

@IT管理局專注計算機(jī)領(lǐng)域技術(shù)、大學(xué)生活、學(xué)習(xí)方法、求職招聘、職業(yè)規(guī)劃、職場感悟等類型的原創(chuàng)內(nèi)容。期待與你相遇，和你一同成長。

文章推薦：

一文秒懂Web框架基礎(chǔ)之WSGI協(xié)議
IT工程師都需要掌握的容器技術(shù)之掃盲篇

在線咨詢

上一篇：「每日一學(xué)」前端魔法王國：HTML與CSS奇跡創(chuàng)造者的冒險之旅
下一篇：一文解讀JavaScript中的文檔對象（DOM）

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商