章介紹HTML 5中的URL高級元素，對于高級屬性，IE9.0瀏覽器暫時還不支持，下面我將用火狐瀏覽器查看效果。

URL屬性用于說明網站的網址，顯示為一個文字段輸入 URL地址。在提交表單時，會自動驗證url的值。代碼格式如下。

<input type="url" name="userurl"/>

另外，用戶可以使用普通屬性設置url輸入框。例如，可以使用max屬性設置其最大值、min屬性設置其最小值、step屬性設置合法的數字間隔、利用value屬性規定其默認值。對于另外的高級屬性中同樣的設置，不再重復講述。

（1）編輯代碼

打開記事本，編寫以下HTML代碼，并保存為HTML格式文件。

(2)在火狐瀏覽器中瀏覽效果

在火狐瀏覽器中瀏覽效果如圖所示，用戶即可輸入相應的網址。

如果輸入的不是完整的URL網址格式，表單將會顯示紅色邊框。需要注意是，完整的URL格式必須要有“http://”頭。

JavaScript 中編輯 URL 的查詢字符串是很常見的。雖然直接將 URL 編輯為字符串的簡單方法通常有效，但它是一種脆弱的解決方案，很容易被破壞。在處理編碼、散列片段和其他此類復雜問題時尤其如此。

編輯 URL 最可靠的方法是使用 URL 接口解析原始 URL 字符串并根據需要進行編輯。這樣，瀏覽器將處理所有復雜的細節，并使代碼更易于閱讀和維護。

JavaScript

const urlString='https://mysite.com?p=42&from=home#details';const url=new URL(urlString);
// 刪除一個參數const removedParam='from';url.searchParams.delete(removedParam);
// 編輯/刪除 參數const newParams={  p: 57,  track: 'none'};Object.keys(newParams).forEach(key=> {  url.searchParams.set(key, newParams[key]);});
// 編輯哈希片段const newHash='new';url.hash=newHash;
console.log(`${url}`); // https://mysite.com?p=57&track=none#new

正如您在示例中看到的，URL 接口提供了多種方法來編輯 URL。最常用的是 URL.searchParams 和 URL.hash。前者是一個 URLSearchParams 對象，它提供了編輯 URL 查詢字符串的方法，而后者是一個包含 URL 哈希片段的字符串。除了這兩個，URL 接口還提供了編輯 URL 的協議、主機、端口、路徑等的方法。

前有非常多的在線實用工具，例如思維導圖、在線轉換格式等。部分在線工具還支持離線狀態下使用。

如果你覺得一些經常用到的在線工具，每次都要通過瀏覽器訪問網站后使用，比較麻煩的話，可以考慮把它生成本地應用。

目前 Chrome 瀏覽器就支持把網站生成桌面應用程序，不過有個弊端，那就是想要運行它，必須依賴 Chrome 瀏覽器。

所以今天鋒哥教大家直接把網站生成 EXE 程序，無需會編程代碼。這里要用到這個「nativefier」基于 Electron 的工具，只要通過一行代碼就能生成 EXE 程序。

nativefier使用

目前「nativefier」支持多個平臺，包括有 Windows、Mac、Linux，你可以在這些系統里面把網站生成可執行的程序。

1.使用「nativefier」先要安裝 Node.js 程序，可以到 https://nodejs.org/zh-cn 官方網站下載，建議下載長期支持版。

2.由于 Node.js 國外源加載速度很慢，我們可以把它修改成國內的源，建議用淘寶的源地址。

快捷鍵 Win+Q，搜索系統變量：環境變量 → 新建變量：

• 變量名：ELECTRON_MIRROR
• 變量值：http://npm.taobao.org/mirrors/electron/

3.快捷鍵 Win+X，運行 PowerShell(管理員)，輸入下面的命令開始安裝。

• npm install -g nativefier

耐心等待一會，一直到出現 Thank you for using core-js.....for polyfilling JavaScript standard library! 就是安裝好了。

4.接下來就可以把網站生成程序了，運行 Node.js command prompt 輸入命令：nativefier "網址"。這里鋒哥把之前制作的裝機必備導航作為例子：

• nativefier "https://x1g.la/win"

最后 nativefier 生成的程序默認會在 C盤，你的用戶名，WIN -1 文件夾里面，運行 WIN - 1.exe 就可以了。在程序里面你可以選中文本內容，通過右鍵來新窗口打開、復制內容等操作。

另外官方也提供了一些參數，例如可以修改圖標、修改程序的默認名稱。

• nativefier --name "app名字" "網址"
• navivefier --name "app圖標路徑" "網址"

圖標支持最大圖標、最小圖標，參考下面的參數：

--min-width "大小px" --max-width "大小px" --min-height "大小px" --max-height "大小px"

5.將本地網頁制作成程序，在生成的命令里面添加指向的 HTML 文件，如下：

• nativefier --name "Sample" "index.html"

然后打開 \app\nativefier.json 文件，搜索 "targetURL"，把 targetURL 指定的地址修改成你的 html 路徑即可。

總結

通過「nativefier」你可以簡單方便的把一些在線工具打包成本地應用，還是比較不錯的。

另外從官方的文檔里面看到，似乎還支持嵌入 Flash 插件的支持。因為目前還有一些網站需要依賴 Flash 插件，你可以打包成單獨的程序來使用。有興趣的自己研究看看了。