整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
HTML 使用超級鏈接與網(wǎng)絡(luò)上的另一個文檔相連。幾乎可以在所有的網(wǎng)頁中找到鏈接。點擊鏈接可以從一張頁面跳轉(zhuǎn)到另一張頁面。
HTML 鏈接
如何在HTML文檔中創(chuàng)建鏈接。
(可以在本頁底端找到更多實例)
HTML 超鏈接（鏈接）
HTML使用標簽 <a>來設(shè)置超文本鏈接。
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當前文檔中的某個部分。
當您把鼠標指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈帧?/p>
在標簽<a> 中使用了href屬性來描述鏈接的地址。
默認情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：
一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點擊鏈接時，鏈接顯示為紅色并帶有下劃線。
注意：如果為這些超鏈接設(shè)置了 CSS 樣式，展示樣式會根據(jù) CSS 的設(shè)定而顯示。
HTML 鏈接語法
鏈接的 HTML 代碼很簡單。它類似這樣：:
<a href="url">鏈接文本</a>
href 屬性描述了鏈接的目標。.
實例
<a >訪問菜鳥教程</a>
上面這行代碼顯示為：: 訪問菜鳥教程
點擊這個超鏈接會把用戶帶到菜鳥教程的首頁。
提示: "鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
HTML 鏈接 - target 屬性
使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。
下面的這行會在新窗口打開文檔：
實例
<a>訪問菜鳥教程!</a>
HTML 鏈接- id 屬性
id屬性可用于創(chuàng)建在一個HTML文檔書簽標記。
提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對于讀者來說是隱藏的。
實例
在HTML文檔中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文檔中創(chuàng)建一個鏈接到"有用的提示部分(id="tips"）"：
<a href="#tips">訪問有用的提示部分</a>
或者，從另一個頁面創(chuàng)建一個鏈接到"有用的提示部分(id="tips"）"：
<a >
訪問有用的提示部分</a>
基本的注意事項 - 有用的提示
注釋： 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會向服務(wù)器產(chǎn)生兩次 HTTP 請求。這是因為服務(wù)器會添加正斜杠到這個地址，然后創(chuàng)建一個新的請求，就像這樣：。
圖片鏈接
如何使用圖片鏈接。
在當前頁面鏈接到指定位置
如何使用書簽
跳出框架
本例演示如何跳出框架，假如你的頁面被固定在框架之內(nèi)。
創(chuàng)建電子郵件鏈接
本例演示如何如何鏈接到一個郵件。（本例在安裝郵件客戶端程序后才能工作。）
建電子郵件鏈接 2
本例演示更加復(fù)雜的郵件鏈接。
HTML 鏈接標簽
| 標簽 | 描述 |
|---|---|
| <a> | 定義一個超級鏈接 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
前為了把瀏覽器書簽放到博客里維護，特意寫了一個 bookmark 轉(zhuǎn) json/markdown 的小工具：parse-bookmark。
前幾天手賤直接把 bookmark 的源文件給刪了，這下這么多年收藏整理的書簽只有自己博客里的一個 markdown 文件了，畢竟還是直接用瀏覽器自帶的 bookmark 查看會方便好多，只能想辦法怎么根據(jù)現(xiàn)在的 markdowm 文件轉(zhuǎn)換回 bookmark.html 文件了。
markdown 文件長這樣：
# 我的書簽bookmark
### 博客
* [我的博客](https://cafehaus.github.io/blog)
* [知乎](https://zhuanlan.zhihu.com/)
* [簡書](https://www.jianshu.com/)
### 工具
* [在線圖片壓縮](https://tinyjpg.com/)
* [TinyPNG – Developer API](https://tinypng.com/developers)
* [在線GIF動圖壓縮](https://docsmall.com/gif-compress)
...從谷歌瀏覽器中導(dǎo)出的書簽長這樣：
<!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/">簡書</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動圖壓縮</A>
</DL><p>
</DL><p>
</DL><p>所以現(xiàn)在需要做的就是怎么能更快速地從上面的 markdown 文件轉(zhuǎn)換成下面的 html 格式文件，注意這里的 html 文件和我們平時前端開發(fā)里寫的 html 還有點不太一樣。
轉(zhuǎn)換步驟：
剛開始本來是打算自己手動一個一個復(fù)制過來修改的，先把主要內(nèi)容和格式搞過來，這一步完成后大概長這樣，大部分工作都是復(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/)
* [簡書](https://www.jianshu.com/)
</DL><p>
</DL><p>
</DL><p>這一步直接用開發(fā)工具的全局替換就行了，將 * [ 替換成 DT 和 A 標簽，A 標簽的 HREF 屬性先默認為空，等后面再處理：
<!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="">簡書](https://www.jianshu.com/)
</DL><p>
</DL><p>
</DL><p>剛開始我也是自己一個一個手動先選中 ctrl x 剪切掉后面的地址，然后粘貼到前面的 HREF 里，大概剪切粘貼了1/3實在覺得這樣效率太慢了，也沒心思再剪切粘貼了。
然后就開始來寫個腳本直接用正則替換內(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)力，幾個小時的手工活用代碼1秒鐘搞定！
注意因為轉(zhuǎn)換的數(shù)據(jù)里沒有設(shè)置 icon 這個屬性，所以默認在書簽里打開前面的圖標默認都是灰色的，只要訪問當前書簽后，瀏覽器會自動更新前面的小 icon 的。
家好，我是 Echa。
今天來分享 50 個超實用的 Chrome 瀏覽器擴展！
JSON Viewer Pro 用于可視化JSON文件。其核心功能包括：
輸入界面如下：
格式化之后：
JSONVue 是一個JSON數(shù)據(jù)查看器，主要用來格式化JSON數(shù)據(jù)：
Library Sniffer 是一款給開發(fā)者使用的工具，能夠探測當前網(wǎng)頁所使用的類庫、框架和服務(wù)器環(huán)境，為開發(fā)者提供了方便。
Wappalyzer 擴展可以用來識別網(wǎng)站背后的底層技術(shù)。通過此擴展，可以了解特定應(yīng)用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問有關(guān) Web 服務(wù)器、編程語言、框架、內(nèi)容管理系統(tǒng)、分析的信息工具、數(shù)據(jù)庫等。
WhatRuns 擴展程序只需單擊一下即可找到任何網(wǎng)站上使用的技術(shù)。
使用PerfectPixel插件可以將設(shè)計圖加載至網(wǎng)頁中，與已成型的網(wǎng)頁進行重疊對比，以幫助開發(fā)和設(shè)計人員規(guī)范網(wǎng)頁像素精度。這是一款可以優(yōu)化前端頁面顯示的Chrome插件。
可以使用此擴展程序快速清除緩存，無需任何確認對話框、彈出窗口等。可以在選項頁面上自定義要清除的數(shù)據(jù)和數(shù)量，包括：應(yīng)用程序緩存、緩存、Cookie、下載、文件系統(tǒng)、表單數(shù)據(jù)、歷史記錄、索引數(shù)據(jù)庫、本地存儲、插件數(shù)據(jù)、密碼和 WebSQL。
VisBug 是一個使用 JavaScript 構(gòu)建的開源網(wǎng)頁設(shè)計調(diào)試工具，它可以讓用戶使用點擊式和拖放式界面來查看網(wǎng)站的元素。
Debug CSS 是一個幫助調(diào)試CSS的插件。他可以顯示出頁面元素的輪播，按住Ctrl，并將鼠標懸浮在元素上，即可查看其信息：
CSS Viewer 是一款適用于 Web 開發(fā)人員的高效 Chrome 擴展。顧名思義，CSS 查看器可以顯示將鼠標懸停在任何網(wǎng)頁上的元素的 CSS 屬性。
EditThisCookie 是一個 cookie 管理器。可以添加，刪除，編輯，搜索，鎖定和屏蔽cookies。
React Developer Tools 是開源 JavaScript 庫 React 的 Chrome DevTools 擴展。它允許我們在 Chrome 開發(fā)者工具中檢查 React 組件層次結(jié)構(gòu)。安裝此插件之后，將在 Chrome DevTools 中獲得兩個新選項卡："?? Components" 和 "?? Profiler"：
Vue.js devtools 是一款基于chrome瀏覽器的用于調(diào)試Vue.js應(yīng)用程序的插件，可以使得開發(fā)人員大大提高調(diào)試效率。支持用戶對DOM結(jié)構(gòu)數(shù)據(jù)結(jié)構(gòu)進行解析和調(diào)試功能。
Augury 可以幫助開發(fā)人員在 Google Chrome 瀏覽器中調(diào)試和分析 Angular 應(yīng)用程序。
Firebug Lite是火狐瀏覽器中著名的開發(fā)者工具firebug插件移植到Chrome中的插件，在Chrome中安裝了Firebug Lite插件以后，開發(fā)人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來調(diào)試網(wǎng)頁內(nèi)容，其包含了基本的HTML、CSS以及Javascript的調(diào)試功能，用于幫助網(wǎng)頁前端開發(fā)工程師快速地調(diào)試網(wǎng)頁，以便及時地找到網(wǎng)頁中的BUG并及時修復(fù)。
HTML Validator 在 Chrome 的開發(fā)者工具中添加了 HTML Validator。HTML 頁面的錯誤數(shù)通過瀏覽器狀態(tài)欄中的圖標顯示，詳細信息可以在瀏覽器的開發(fā)者工具中查看。
Web Developer 擴展為帶有各種 Web 開發(fā)工具的瀏覽器添加了一個工具欄按鈕。該擴展適用于 Chrome 和 Firefox，并且可以在這些瀏覽器支持的任何平臺上運行，包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox瀏覽器插件，提供URL轉(zhuǎn)發(fā)、修改HTTP請求和結(jié)果、插入腳本等功能。
Window Resizer 主要用來調(diào)整瀏覽器窗口的大小以模擬各種屏幕分辨率。
Responsive Viewer 是在一個視圖中顯示多個屏幕的 Chrome 擴展程序。該擴展將幫助前端開發(fā)人員在開發(fā)響應(yīng)式網(wǎng)站/應(yīng)用程序時測試多個屏幕。
此插件允許直接從瀏覽器發(fā)送跨域請求，而不會收到跨域錯誤。可以使用此插件覆蓋 Request Origin 標頭，并將 Access-Control-Allow-Origin 設(shè)置為 *.
ColorPick Eyedropper 是一個放大的吸管和顏色選擇器工具，可讓從網(wǎng)頁等中選擇顏色值。
CSS Peeper 用于檢查和復(fù)制元素樣式的優(yōu)秀工具，使用 CSSPeeper 可以將鼠標懸停在網(wǎng)頁中的任何元素上，然后單擊鼠標即可復(fù)制元素的樣式。
24. Dimensions
Dimensions是一款能幫助使用者對網(wǎng)頁上各種元素屬性之間的距離進行測量的Chrome頁面元素測量插件，該插件在點擊啟動插件圖標后，可以對頁面中圖像、輸入字段、按鈕以及視頻等頁面元素之間上下左右的方位尺寸進行測量，同時還可以通過使用快捷鍵來快速啟用或關(guān)閉該插件的功能，簡單實用。
Site Palette 用于生成調(diào)色板。設(shè)計師和前端開發(fā)人員必備的工具。可以通過這款插件輕松獲取網(wǎng)站的配色方案。
ColorZilla 是一款功能強大地提取網(wǎng)頁色彩的工具；也是個快速的對顏色進行調(diào)節(jié)的Chrome插件，許多的用戶將這款軟件稱呼為顏色吸取插件，它提取的顏色是非常的多樣化，還可生產(chǎn)css顏色的代碼等。
當我們想查看網(wǎng)頁中文字的字體時，最常用的方法就是在控制臺查看文字的字體樣式。那還有沒有更簡單的方法呢？WhatFont 就是一個查看網(wǎng)頁字體的Chrome擴展。只需要的點擊擴展圖標，再點需要查看為文字即可：
Fonts Ninja 可以從任何網(wǎng)站識別字體、添加書簽、試用并購買它們。
使用 BrowserStack 快速啟動擴展在任何瀏覽器中啟動一個新的測試會話。最多可設(shè)置 12 個瀏覽器以實現(xiàn)快速訪問并最大限度地減少切換瀏覽器所花費的時間。
Toby 是一款 Chrome 新標簽頁工具，能夠?qū)⑽醋x的標簽頁分組顯示在新標簽頁中，這樣就能把所有未看完的標簽頁都關(guān)閉了。分組相當于多個 Chrome 窗口，將你的標簽頁都拖進 Toby 中，就不需要實時開著占地方了。
該擴展提供了每日熱門開發(fā)者新聞，不需要再浪費時間搜索高質(zhì)量的文章了。
Momentum 擁有漂亮的新標簽頁面，每日更新精彩背景壁紙圖片，可設(shè)置每日新鮮事焦點以及跟蹤待辦事項，無廣告，無彈窗。
The Great Suspender 是一個輕量級的擴展用來減少 Chrome 的內(nèi)存占用。如果同時打開許多選項卡，在可配置的時間之后未查看的選項卡將在后臺自動掛起，從而釋放該選項卡消耗的內(nèi)存和 CPU。
Session Buddy是一個可以幫助用戶查看、新增、編輯當前網(wǎng)站Session狀態(tài)的Chrome插件。用戶可以利用該插件保存網(wǎng)站當前的狀態(tài)以便在關(guān)閉Chrome或關(guān)閉計算機后恢復(fù)，從而達到節(jié)省內(nèi)存的作用。
Octotree 旨在讓 GitHub 體驗更好。通常，為了檢查 Github 中的子文件夾，需要手動單擊文件夾并導(dǎo)航。Octotree 擴展解決了這個問題。此擴展在項目的左側(cè)顯示存儲庫的目錄結(jié)構(gòu)，這有助于更好地理解文件夾結(jié)構(gòu)。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標替換為特定文件類型的圖標。
ax DevTools 是一個快速、輕量級但功能強大的測試工具，由 Deque 開發(fā)的世界上最值得信賴的可訪問性測試引擎 axe-core 驅(qū)動。使用 ax DevTools 在網(wǎng)站開發(fā)過程中查找并修復(fù)更多可訪問性問題。
OctoLinker 可以將特定語言的語句（如 include、require 或 import）轉(zhuǎn)換為鏈接。當打開一個包含多個導(dǎo)入語句的文件并且想要快速打開它時，只需將鼠標懸停在鏈接的文件上并單擊即可打開。
此擴展可幫助 Web 開發(fā)人員分析網(wǎng)頁是否違反最佳實踐。
Check My Links 是一個鏈接檢查器，它可以抓取網(wǎng)頁并查找損壞的鏈接。
Checkbot 是用于驗證一組HTML頁面上的鏈接的工具。Checkbot可以檢查一個或多個服務(wù)器上的單個文檔或一組文檔。它會創(chuàng)建一個報告，該報告匯總了引起某種警告或錯誤的所有鏈接。
Google Page Speed Insighs 是一款旨在優(yōu)化所有設(shè)備上的網(wǎng)頁、提高網(wǎng)頁加載速度的工具。
META SEO inspector是一款可以幫助用戶分析網(wǎng)頁的meta信息并得到SEO評估的谷歌瀏覽器插件。
Ghostery 是強大的隱私保護擴展程序。其主要有以下功能：
AdBlock 用來在YouTube、Facebook、Twitch和其他你喜愛的網(wǎng)站上攔截廣告和彈窗。
番茄工作法（Pomodoro?）時間管理助理。? 長短兩種休息時間 ? 帶有倒計時顯示的工具欄圖標 ? 追蹤Pomodoro歷史和統(tǒng)計訊息 ? 可配置的長休間隔 ? 可配置的定時器時長 ? 桌面與新標簽頁通知 ? 超過20種音效可選的聲音通知 ? 計時器秒針走動音效
Loom 可以用來快速錄制視頻，并且能夠?qū)浿频囊曨l上傳到指定的網(wǎng)頁中，Loom還支持在用戶點擊啟動插件時，立即捕捉屏幕圖像，同時開始視頻錄制操作，還可以將錄制好的視頻復(fù)制到粘貼板中存儲。
GoFullPage 是一款全屏截圖插件（整個網(wǎng)頁截圖），完整捕獲您當前頁面的屏幕，進行滾動截圖，而無需任何額外的權(quán)限。單擊擴展程序圖標，然后將其傳輸?shù)狡聊豢煺盏男聵撕烅撝校梢栽谄渲袑⑵湎螺d為圖像或PDF，甚至只需拖動即可，保存到桌面。
BetterViewer 可以提供更好的圖像查看體驗，旨在替代基于 Chrome 瀏覽器中內(nèi)置的圖像查看模式。使用時，只需在頁面右鍵點擊圖片，選擇“在新標簽頁中打開圖片”即可。
svg-grabber 是一個快速預(yù)覽并從網(wǎng)站獲取所有 svg 的工具。可以用來預(yù)覽、下載和復(fù)制網(wǎng)站中所有 SVG 圖標和插圖的代碼。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
