HTML 鏈接

HTML 使用超級鏈接與網絡上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。

HTML 鏈接

如何在HTML文檔中創建鏈接。

(可以在本頁底端找到更多實例)

HTML 超鏈接（鏈接）

HTML使用標簽 <a>來設置超文本鏈接。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

在標簽<a> 中使用了href屬性來描述鏈接的地址。

默認情況下，鏈接將以以下形式出現在瀏覽器中：

一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點擊鏈接時，鏈接顯示為紅色并帶有下劃線。

注意：如果為這些超鏈接設置了 CSS 樣式，展示樣式會根據 CSS 的設定而顯示。

HTML 鏈接語法

鏈接的 HTML 代碼很簡單。它類似這樣：:

href 屬性描述了鏈接的目標。.

實例

<a >訪問菜鳥教程</a>

上面這行代碼顯示為：: 訪問菜鳥教程

點擊這個超鏈接會把用戶帶到菜鳥教程的首頁。

提示: "鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。

HTML 鏈接 - target 屬性

使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。

下面的這行會在新窗口打開文檔：

實例

<a>訪問菜鳥教程!</a>

HTML 鏈接- id 屬性

id屬性可用于創建在一個HTML文檔書簽標記。

提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對于讀者來說是隱藏的。

實例

在HTML文檔中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文檔中創建一個鏈接到"有用的提示部分(id="tips"）"：

<a href="#tips">訪問有用的提示部分</a>

或者，從另一個頁面創建一個鏈接到"有用的提示部分(id="tips"）"：

<a >

訪問有用的提示部分</a>

基本的注意事項 - 有用的提示

注釋： 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址，然后創建一個新的請求，就像這樣：。

圖片鏈接

如何使用圖片鏈接。

在當前頁面鏈接到指定位置

如何使用書簽

跳出框架

本例演示如何跳出框架，假如你的頁面被固定在框架之內。

創建電子郵件鏈接

本例演示如何如何鏈接到一個郵件。（本例在安裝郵件客戶端程序后才能工作。）

建電子郵件鏈接 2

本例演示更加復雜的郵件鏈接。

HTML 鏈接標簽

標簽	描述
<a>	定義一個超級鏈接

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

我們在瀏覽網頁的時候，看到喜歡的網頁，總想研究下它的代碼是怎樣寫的，值得借鑒參考來修改自己的網站源碼。你知道如何查看網頁源代碼嗎？

網頁源代碼是什么？

網站源碼，也稱源代碼，源程序，是指未編譯的文本代碼或一個網站的全部源碼文件，是一系列人類可讀的計算機語言指令。通過瀏覽器或服務器翻譯后才是用戶最終看到的效果。

網站源碼可分為兩種，一種是動態源碼，如ASP，PHP，JSP，.NET等，另一種是靜態源碼如HTML等。網頁源代碼是指網頁的html代碼，這里可以將CSS代碼也稱為CSS源代碼。

如何查看網站源代碼？

今天飛飛主要和你們分享三種方法查看網頁源代碼，希望可以幫助到你們！

1、鼠標查看源代碼

任意打開一個網頁，鼠標右擊會看到“查看網頁源代碼”，這個網頁的源代碼就出現在你眼前了。

網頁源代碼查看竟然有這么多方法！你都知道嗎？

2、快捷鍵Ctrl+U查看源碼

為了方便快捷，小伙伴們可以使用快捷鍵Ctrl+U來查看源碼，同樣可以實現。

補充：

想要看一個頁面的局部樣式，可以鼠標右鍵，點擊審查元素。還可以用快捷鍵F12或者快捷鍵Ctrl+Shift+I調用或者關閉開發者工具，以此來查看源代碼。

3、網頁地址欄前面加上入view-source:

也可以在你想要查看的網頁地址欄前面加上入view-source:

比如：view-source:https://www.idc02.com/就可以查看馳網官網源代碼文件。

感謝您的閱讀，加個關注不迷路~

、日期處理

1. 檢查日期是否有效

該方法用于檢測給出的日期是否有效：

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid("December 17, 1995 03:24:00");  // true
復制代碼

2. 計算兩個日期之間的間隔

該方法用于計算兩個日期之間的間隔時間：

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
    
dayDif(new Date("2021-11-3"), new Date("2022-2-1"))  // 90
復制代碼

距離過年還有90天~

3. 查找日期位于一年中的第幾天

該方法用于檢測給出的日期位于今年的第幾天：

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date());   // 307
復制代碼

2021年已經過去300多天了~

4. 時間格式化

該方法可以用于將時間轉化為hour:minutes:seconds的格式：

const timeFromDate = date => date.toTimeString().slice(0, 8);
    
timeFromDate(new Date(2021, 11, 2, 12, 30, 0));  // 12:30:00
timeFromDate(new Date());  // 返回當前時間 09:00:00
復制代碼

二、字符串處理

1. 字符串首字母大寫

該方法用于將英文字符串的首字母大寫處理：

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)

capitalize("hello world")  // Hello world
復制代碼

2. 翻轉字符串

該方法用于將一個字符串進行翻轉操作，返回翻轉后的字符串：

const reverse = str => str.split('').reverse().join('');

reverse('hello world');   // 'dlrow olleh'
復制代碼

3. 隨機字符串

該方法用于生成一個隨機的字符串：

const randomString = () => Math.random().toString(36).slice(2);

randomString();
復制代碼

4. 截斷字符串

該方法可以從指定長度處截斷字符串:

const truncateString = (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`;

truncateString('Hi, I should be truncated because I am too loooong!', 36)   // 'Hi, I should be truncated because...'
復制代碼

5. 去除字符串中的HTML

該方法用于去除字符串中的HTML元素：

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
復制代碼

三、數組處理

1. 從數組中移除重復項

該方法用于移除數組中的重復項：

const removeDuplicates = (arr) => [...new Set(arr)];

console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));
復制代碼

2. 判斷數組是否為空

該方法用于判斷一個數組是否為空數組，它將返回一個布爾值：

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;

isNotEmpty([1, 2, 3]);  // true
復制代碼

3. 合并兩個數組

可以使用下面兩個方法來合并兩個數組：

const merge = (a, b) => a.concat(b);

const merge = (a, b) => [...a, ...b];
復制代碼

四、數字操作

1. 判斷一個數是奇數還是偶數

該方法用于判斷一個數字是奇數還是偶數：

const isEven = num => num % 2 === 0;

isEven(996); 
復制代碼

2. 獲得一組數的平均值

const average = (...args) => args.reduce((a, b) => a + b) / args.length;

average(1, 2, 3, 4, 5);   // 3
復制代碼

3. 獲取兩個整數之間的隨機整數

該方法用于獲取兩個整數之間的隨機整數

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

random(1, 50);
復制代碼

4. 指定位數四舍五入

該方法用于將一個數字按照指定位進行四舍五入：

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)

round(1.005, 2) //1.01
round(1.555, 2) //1.56
復制代碼

五、顏色操作

1. 將RGB轉化為十六機制

該方法可以將一個RGB的顏色值轉化為16進制值：

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

rgbToHex(255, 255, 255);  // '#ffffff'
復制代碼

2. 獲取隨機十六進制顏色

該方法用于獲取一個隨機的十六進制顏色值：

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;

randomHex();
復制代碼

六、瀏覽器操作

1. 復制內容到剪切板

該方法使用 navigator.clipboard.writeText 來實現將文本復制到剪貼板：

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello World");
復制代碼

2. 清除所有cookie

該方法可以通過使用 document.cookie 來訪問 cookie 并清除存儲在網頁中的所有 cookie：

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));
復制代碼

3. 獲取選中的文本

該方法通過內置的 getSelection 屬性獲取用戶選擇的文本：

const getSelectedText = () => window.getSelection().toString();

getSelectedText();
復制代碼

4. 檢測是否是黑暗模式

該方法用于檢測當前的環境是否是黑暗模式，它是一個布爾值：

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

console.log(isDarkMode)
復制代碼

5. 滾動到頁面頂部

該方法用于在頁面中返回頂部：

const goToTop = () => window.scrollTo(0, 0);

goToTop();
復制代碼

6. 判斷當前標簽頁是否激活

該方法用于檢測當前標簽頁是否已經激活：

const isTabInView = () => !document.hidden; 
復制代碼

7. 判斷當前是否是蘋果設備

該方法用于檢測當前的設備是否是蘋果的設備：

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

isAppleDevice();
復制代碼

8. 是否滾動到頁面底部

該方法用于判斷頁面是否已經底部：

const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;
復制代碼

9. 重定向到一個URL

該方法用于重定向到一個新的URL：

const redirect = url => location.href = url

redirect("https://www.google.com/")
復制代碼

10. 打開瀏覽器打印框

該方法用于打開瀏覽器的打印框：

const showPrintDialog = () => window.print()
復制代碼

七、其他操作

1. 隨機布爾值

該方法可以返回一個隨機的布爾值，使用Math.random()可以獲得0-1的隨機數，與0.5進行比較，就有一半的概率獲得真值或者假值。

const randomBoolean = () => Math.random() >= 0.5;

randomBoolean();
復制代碼

2. 變量交換

可以使用以下形式在不適用第三個變量的情況下，交換兩個變量的值：

[foo, bar] = [bar, foo];
復制代碼

3. 獲取變量的類型

該方法用于獲取一個變量的類型：

const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();

trueTypeOf('');     // string
trueTypeOf(0);      // number
trueTypeOf();       // undefined
trueTypeOf(null);   // null
trueTypeOf({});     // object
trueTypeOf([]);     // array
trueTypeOf(0);      // number
trueTypeOf(() => {});  // function
復制代碼

4. 華氏度和攝氏度之間的轉化

該方法用于攝氏度和華氏度之間的轉化：

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;

celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0
復制代碼

5. 檢測對象是否為空

該方法用于檢測一個JavaScript對象是否為空：

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;

在線咨詢

上一篇：Vue + Koa從零打造一個H5頁面可視化編輯器-Quark-h5
下一篇：24行代碼，讓你的網頁元素任意放大、縮小、拖拽、移動

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 鏈接

、日期處理

1. 檢查日期是否有效

2. 計算兩個日期之間的間隔

3. 查找日期位于一年中的第幾天

4. 時間格式化

二、字符串處理

1. 字符串首字母大寫

2. 翻轉字符串

3. 隨機字符串

4. 截斷字符串

5. 去除字符串中的HTML

三、數組處理

1. 從數組中移除重復項

2. 判斷數組是否為空

3. 合并兩個數組

四、數字操作

1. 判斷一個數是奇數還是偶數

2. 獲得一組數的平均值

3. 獲取兩個整數之間的隨機整數

4. 指定位數四舍五入

五、顏色操作

1. 將RGB轉化為十六機制

2. 獲取隨機十六進制顏色

六、瀏覽器操作

1. 復制內容到剪切板

2. 清除所有cookie

3. 獲取選中的文本

4. 檢測是否是黑暗模式

5. 滾動到頁面頂部

6. 判斷當前標簽頁是否激活

7. 判斷當前是否是蘋果設備

8. 是否滾動到頁面底部

9. 重定向到一個URL

10. 打開瀏覽器打印框

七、其他操作

1. 隨機布爾值

2. 變量交換

3. 獲取變量的類型

4. 華氏度和攝氏度之間的轉化

5. 檢測對象是否為空

您的項目需求