整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
HTML 使用超級(jí)鏈接與網(wǎng)絡(luò)上的另一個(gè)文檔相連。幾乎可以在所有的網(wǎng)頁中找到鏈接。點(diǎn)擊鏈接可以從一張頁面跳轉(zhuǎn)到另一張頁面。
HTML 鏈接
如何在HTML文檔中創(chuàng)建鏈接。
(可以在本頁底端找到更多實(shí)例)
HTML 超鏈接（鏈接）
HTML使用標(biāo)簽 <a>來設(shè)置超文本鏈接。
超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。
當(dāng)您把鼠標(biāo)指針移動(dòng)到網(wǎng)頁中的某個(gè)鏈接上時(shí)，箭頭會(huì)變?yōu)橐恢恍∈帧?/p>
在標(biāo)簽<a> 中使用了href屬性來描述鏈接的地址。
默認(rèn)情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：
一個(gè)未訪問過的鏈接顯示為藍(lán)色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點(diǎn)擊鏈接時(shí)，鏈接顯示為紅色并帶有下劃線。
注意：如果為這些超鏈接設(shè)置了 CSS 樣式，展示樣式會(huì)根據(jù) CSS 的設(shè)定而顯示。
HTML 鏈接語法
鏈接的 HTML 代碼很簡(jiǎn)單。它類似這樣：:
<a href="url">鏈接文本</a>
href 屬性描述了鏈接的目標(biāo)。.
實(shí)例
<a >訪問菜鳥教程</a>
上面這行代碼顯示為：: 訪問菜鳥教程
點(diǎn)擊這個(gè)超鏈接會(huì)把用戶帶到菜鳥教程的首頁。
提示: "鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
HTML 鏈接 - target 屬性
使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。
下面的這行會(huì)在新窗口打開文檔：
實(shí)例
<a>訪問菜鳥教程!</a>
HTML 鏈接- id 屬性
id屬性可用于創(chuàng)建在一個(gè)HTML文檔書簽標(biāo)記。
提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對(duì)于讀者來說是隱藏的。
實(shí)例
在HTML文檔中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文檔中創(chuàng)建一個(gè)鏈接到"有用的提示部分(id="tips"）"：
<a href="#tips">訪問有用的提示部分</a>
或者，從另一個(gè)頁面創(chuàng)建一個(gè)鏈接到"有用的提示部分(id="tips"）"：
<a >
訪問有用的提示部分</a>
基本的注意事項(xiàng) - 有用的提示
注釋： 請(qǐng)始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會(huì)向服務(wù)器產(chǎn)生兩次 HTTP 請(qǐng)求。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址，然后創(chuàng)建一個(gè)新的請(qǐng)求，就像這樣：。
圖片鏈接
如何使用圖片鏈接。
在當(dāng)前頁面鏈接到指定位置
如何使用書簽
跳出框架
本例演示如何跳出框架，假如你的頁面被固定在框架之內(nèi)。
創(chuàng)建電子郵件鏈接
本例演示如何如何鏈接到一個(gè)郵件。（本例在安裝郵件客戶端程序后才能工作。）
建電子郵件鏈接 2
本例演示更加復(fù)雜的郵件鏈接。
HTML 鏈接標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <a> | 定義一個(gè)超級(jí)鏈接 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
前為了把瀏覽器書簽放到博客里維護(hù)，特意寫了一個(gè) bookmark 轉(zhuǎn) json/markdown 的小工具：parse-bookmark。
前幾天手賤直接把 bookmark 的源文件給刪了，這下這么多年收藏整理的書簽只有自己博客里的一個(gè) markdown 文件了，畢竟還是直接用瀏覽器自帶的 bookmark 查看會(huì)方便好多，只能想辦法怎么根據(jù)現(xiàn)在的 markdowm 文件轉(zhuǎn)換回 bookmark.html 文件了。
markdown 文件長(zhǎng)這樣：
# 我的書簽bookmark
### 博客
* [我的博客](https://cafehaus.github.io/blog)
* [知乎](https://zhuanlan.zhihu.com/)
* [簡(jiǎn)書](https://www.jianshu.com/)
### 工具
* [在線圖片壓縮](https://tinyjpg.com/)
* [TinyPNG – Developer API](https://tinypng.com/developers)
* [在線GIF動(dòng)圖壓縮](https://docsmall.com/gif-compress)
...從谷歌瀏覽器中導(dǎo)出的書簽長(zhǎng)這樣：
<!DOCTYPE NETSCAPE-Bookmark-file-1>
<!-- This is an automatically generated file.
It will be read and overwritten.
DO NOT EDIT! -->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<TITLE>Bookmarks</TITLE>
<H1>Bookmarks</H1>
<DL><p>
<DT><H3 ADD_DATE="1691296878" LAST_MODIFIED="1692859249" PERSONAL_TOOLBAR_FOLDER="true">書簽欄</H3>
<DL><p>
<DT><H3 ADD_DATE="1692858364" LAST_MODIFIED="1692858643">博客</H3>
<DL><p>
<DT><A HREF="https://cafehaus.github.io/blog">我的博客</A>
<DT><A HREF="https://zhuanlan.zhihu.com/">知乎</A>
<DT><A HREF="https://www.jianshu.com/">簡(jiǎn)書</A>
</DL><p>
<DT><H3 ADD_DATE="1692858766" LAST_MODIFIED="1692859444">工具</H3>
<DL><p>
<DT><A HREF="https://tinyjpg.com/" ADD_DATE="1692858571">在線圖片壓縮]</A>
<DT><A HREF="https://tinypng.com/developers" ADD_DATE="1692858571">TinyPNG – Developer API</A>
<DT><A HREF="https://docsmall.com/gif-compress" ADD_DATE="1692858571">在線GIF動(dòng)圖壓縮</A>
</DL><p>
</DL><p>
</DL><p>所以現(xiàn)在需要做的就是怎么能更快速地從上面的 markdown 文件轉(zhuǎn)換成下面的 html 格式文件，注意這里的 html 文件和我們平時(shí)前端開發(fā)里寫的 html 還有點(diǎn)不太一樣。
轉(zhuǎn)換步驟：
剛開始本來是打算自己手動(dòng)一個(gè)一個(gè)復(fù)制過來修改的，先把主要內(nèi)容和格式搞過來，這一步完成后大概長(zhǎng)這樣，大部分工作都是復(fù)制粘貼，還算比較輕松：
<!DOCTYPE NETSCAPE-Bookmark-file-1>
<!-- This is an automatically generated file.
It will be read and overwritten.
DO NOT EDIT! -->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<TITLE>Bookmarks</TITLE>
<H1>Bookmarks</H1>
<DL><p>
<DT><H3 ADD_DATE="1691296878" LAST_MODIFIED="1692859249" PERSONAL_TOOLBAR_FOLDER="true">書簽欄</H3>
<DL><p>
<DT><H3 ADD_DATE="1692858364" LAST_MODIFIED="1692858643">博客</H3>
<DL><p>
* [我的博客](https://cafehaus.github.io/blog/)
* [知乎](https://zhuanlan.zhihu.com/)
* [簡(jiǎn)書](https://www.jianshu.com/)
</DL><p>
</DL><p>
</DL><p>這一步直接用開發(fā)工具的全局替換就行了，將 * [ 替換成 DT 和 A 標(biāo)簽，A 標(biāo)簽的 HREF 屬性先默認(rèn)為空，等后面再處理：
<!DOCTYPE NETSCAPE-Bookmark-file-1>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<TITLE>Bookmarks</TITLE>
<H1>Bookmarks</H1>
<DL><p>
<DT><H3 ADD_DATE="1691296878" LAST_MODIFIED="1692859249" PERSONAL_TOOLBAR_FOLDER="true">書簽欄</H3>
<DL><p>
<DT><H3 ADD_DATE="1692858364" LAST_MODIFIED="1692858643">博客</H3>
<DL><p>
<DT><A HREF="">我的博客](https://cafehaus.github.io/blog/)
<DT><A HREF="">知乎](https://zhuanlan.zhihu.com/)
<DT><A HREF="">簡(jiǎn)書](https://www.jianshu.com/)
</DL><p>
</DL><p>
</DL><p>剛開始我也是自己一個(gè)一個(gè)手動(dòng)先選中 ctrl x 剪切掉后面的地址，然后粘貼到前面的 HREF 里，大概剪切粘貼了1/3實(shí)在覺得這樣效率太慢了，也沒心思再剪切粘貼了。
然后就開始來寫個(gè)腳本直接用正則替換內(nèi)容，無非就是用正則匹配出來后面的地址然后放到 HREF 里去：
const fs = require('node:fs')
const path = require('node:path')
fs.readFile(path.join(__dirname, './bookmarks_2023_8_24.html'), 'utf-8', async (err, data) => {
if (err) return console.error(err)
const reg = /<DT><A HREF="">([A-Za-z0-9\u4e00-\u9fa5.-–-—+_~:·,!?#？?’'??：、，；。！|【】\[\]\$￥\(\)（）「」&《》\s ?]*)\]\((http\S+)\)<\/A>/g
const text = data.replaceAll(reg, '<DT><A HREF="$2">$1</A>')
fs.writeFile(path.join(__dirname, './bookmarks.html'), text, (err, data) => {
if (err) return console.error(err)
console.log('success')
})
})總共也就 13 行代碼就搞定了，果然科技才是第一生產(chǎn)力，幾個(gè)小時(shí)的手工活用代碼1秒鐘搞定！
注意因?yàn)檗D(zhuǎn)換的數(shù)據(jù)里沒有設(shè)置 icon 這個(gè)屬性，所以默認(rèn)在書簽里打開前面的圖標(biāo)默認(rèn)都是灰色的，只要訪問當(dāng)前書簽后，瀏覽器會(huì)自動(dòng)更新前面的小 icon 的。
擊右上角“自定義及控制”Google Chrome
找到“書簽”---書簽管理器
點(diǎn)“書簽管理器”右上角“整理”圖標(biāo)：
點(diǎn)擊“整理”---導(dǎo)出書簽：
將后綴為html的書簽文件保存在桌面。
單擊bookmarks-2019-11-27.html文件。
選擇打開方式：Internet Explorer。
效果如下：
點(diǎn)選其中一項(xiàng)，右鍵，選擇“在新選項(xiàng)卡中打開”。
然后，在IE中將其添加到收藏夾。
但是這種方式太繁瑣。
下次，我們將試驗(yàn)遨游瀏覽器中收藏的網(wǎng)址如何轉(zhuǎn)到IE收藏夾中。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
