性能優化關鍵:link、script和meta的正確打開方式

link?標簽的主要屬性及其作用

屬性是否必填作用描述示例值
rel是定義當前文檔與鏈接資源的關系（必須屬性）。常見值：stylesheet,?icon,?preload,?preconnect?等。rel="stylesheet"
rel="icon"
href是指定鏈接資源的URL。href="styles.css"
href="https://example.com/icon.png"
type否指定鏈接資源的MIME類型。瀏覽器可能根據資源自動推斷，但建議明確指定。type="text/css"
type="image/png"
media否規定資源適用的設備/媒體類型（如屏幕、打印等）。media="screen"
media="print and (max-width: 600px)"
sizes否當?rel="icon"?時，指定圖標尺寸（格式：高度x寬度?或?any）。sizes="32x32"
sizes="any"
crossorigin否定義請求資源的跨域模式（CORS）。可選值：anonymous（默認）、use-credentials。crossorigin="anonymous"
integrity否提供資源的哈希值，用于驗證資源完整性（防止篡改）。格式：sha384-...。integrity="sha384-oqVu...3Vg"
referrerpolicy否控制請求資源時發送的Referer信息。可選值：no-referrer,?origin,?unsafe-url?等。referrerpolicy="no-referrer"
hreflang否指定鏈接資源的語言（如?en,?zh-CN）。hreflang="en"
title否為鏈接資源提供額外信息，常用于定義可選的樣式表（如?rel="alternate stylesheet"）。title="Dark Theme"

核心屬性

1.rel

  • 作用：定義當前文檔與鏈接資源的關系（必填屬性）。

  • 常見值：

    • stylesheet：鏈接 CSS 樣式表（最常用）

    • icon：鏈接網站圖標（如 Favicon）

    • preload：預加載關鍵資源（需配合?as?屬性）

    • preconnect：提前與目標服務器建立連接（優化性能）

    • alternate：鏈接到頁面的替代版本（如 RSS 訂閱、多語言頁面）

    • canonical：指定頁面的規范 URL（SEO 優化）

    • manifest：鏈接 Web 應用清單（PWA 配置）

  • 示例：

    <link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">

?rel?屬性值分類表格

分類rel?值作用描述示例
資源加載stylesheet鏈接外部CSS樣式表。<link rel="stylesheet" href="styles.css">
preload預加載關鍵資源（需配合?as?屬性指定類型）。<link rel="preload" href="font.woff2" as="font">
prefetch預取未來可能需要的資源（如下一頁內容）。<link rel="prefetch" href="next-page.html">
preconnect提前與目標服務器建立連接（DNS解析、TCP握手等）。<link rel="preconnect" href="https://fonts.googleapis.com">
dns-prefetch提前解析目標域名的DNS（性能優化）。<link rel="dns-prefetch" href="//cdn.example.com">
modulepreload預加載ES模塊腳本。<link rel="modulepreload" href="app.js">
圖標與圖片icon定義頁面圖標（如Favicon）。<link rel="icon" href="favicon.ico" type="image/x-icon">
apple-touch-icon為iOS設備定義主屏幕圖標。<link rel="apple-touch-icon" href="apple-icon.png" sizes="180x180">
manifest鏈接Web應用清單（PWA配置）。<link rel="manifest" href="/site.webmanifest">
SEO與導航canonical指定頁面的規范URL（防止重復內容SEO問題）。<link rel="canonical" href="https://example.com/main-page">
alternate鏈接到頁面的其他語言版本或其他格式（如PDF）。<link rel="alternate" hreflang="es" href="https://example.com/es/">
prev?/?next定義分頁導航的前一頁或下一頁。<link rel="prev" href="page1.html">
文檔關系author鏈接到頁面作者的介紹頁面。<link rel="author" href="https://example.com/about">
license鏈接到頁面內容的許可證信息。<link rel="license" href="https://creativecommons.org/licenses/by/4.0/">
help鏈接到幫助文檔。<link rel="help" href="/help.html">
交互與功能search鏈接到頁面的搜索接口（用于瀏覽器或插件集成）。<link rel="search" href="/search.xml" type="application/opensearchdescription+xml">
nofollow告知搜索引擎不要追蹤此鏈接（通常用于用戶生成內容）。<a href="..." rel="nofollow">...</a>（注：更多用于?<a>?標簽）
安全與權限noopener防止通過?target="_blank"?打開的頁面訪問原頁面的window.opener（安全防護）。<a href="..." rel="noopener">...</a>（注：更多用于?<a>?標簽）
noreferrer請求資源時不發送Referer頭（隱私保護）。<a href="..." rel="noreferrer">...</a>（同上）
特殊用途pingback定義接收Pingback通知的服務器地址（博客評論跟蹤）。<link rel="pingback" href="https://example.com/xmlrpc.php">
serviceworker注冊Service Worker（PWA核心功能）。<link rel="serviceworker" href="/sw.js" scope="/">

2.href

  • 作用：指定鏈接資源的 URL（必填屬性）。

  • 示例：

    <link href="print.css" rel="stylesheet" media="print">

資源類型與適配

3.type

  • 作用：指定資源的 MIME 類型（非必需，但建議顯式聲明）。

  • 常見值：

    • text/css：CSS 文件。

    • image/x-icon：ICO 格式圖標。

    • image/png：PNG 格式圖標。

  • 示例：

    <link rel="stylesheet" href="theme.css" type="text/css">

4.media

  • 作用：指定資源適用的媒體/設備類型（如屏幕、打印）。

  • 常用值：

    • screen：默認屏幕設備。

    • print：打印預覽模式。

    • 媒體查詢表達式（如?(max-width: 600px)）。

  • 示例：

    <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)">

5.sizes

  • 作用：指定圖標尺寸（僅當?rel="icon"?時有效）。

  • 格式：

    • 高度x寬度（如?32x32）。

    • any：適配任意尺寸。

  • 示例

    <link rel="icon" href="icon-32.png" sizes="32x32">

性能與安全

6.as

  • 作用：配合?rel="preload"?使用，聲明預加載資源的類型（必需）

  • 常見值：

    • script：JavaScript 文件。

    • style：CSS 文件。

    • font：字體文件。

    • image：圖片文件。

  • 示例：

    <link rel="preload" href="font.woff2" as="font" crossorigin>

7.crossorigin

  • 作用：控制跨域請求的 CORS 配置。

  • 值：

    • anonymous：不帶憑據的請求（默認）。

    • use-credentials：帶憑據的請求（如 Cookies）。

  • 示例：

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

8.integrity

  • 作用：提供資源的哈希值，用于驗證完整性（防止篡改）。

  • 格式：sha256-...、sha384-...、sha512-...。

  • 示例：

    <link rel="stylesheet" href="https://cdn.example.com/lib.css" integrity="sha384-oqVuAfXRKap...">

9.referrerpolicy控制請求資源時發送的 Referer 頭信息（隱私保護）。

  • 作用：

  • 值：no-referrer、origin、unsafe-url?等。

  • 示例：

    <link rel="stylesheet" href="third-party.css" referrerpolicy="no-referrer">

其他屬性

10.hreflang

  • 作用：指定鏈接資源的語言（如多語言頁面）。

  • 示例：

    <link rel="alternate" hreflang="es" href="https://example.com/es/">

11.title

  • 作用：為鏈接資源提供額外描述（如可切換的備用樣式表）。

  • 示例：

    <link rel="alternate stylesheet" href="dark.css" title="Dark Mode">

12.disabled

  • 作用：禁用當前樣式表（需通過 JavaScript 動態操作）。

  • 示例：

    <link rel="stylesheet" href="theme.css" disabled>

link?常見用途示例

1.?引入 CSS 樣式表

<link rel="stylesheet" href="styles.css" type="text/css" media="screen">

2.?設置網站圖標

<link rel="icon" href="favicon.ico" type="image/x-icon" sizes="32x32">

3.?預加載關鍵資源

<link rel="preload" href="hero-image.jpg" as="image" media="(min-width: 800px)">

4.?SEO 規范鏈接

<link rel="canonical" href="https://example.com/main-page">

link?注意事項

  1. 必填屬性：rel?和?href?必須同時存在。

  2. 性能優化：

    • 使用?preload?預加載關鍵資源，但避免過度預加載。

    • 結合?media?屬性按需加載響應式樣式。

  3. 安全性：

    • 對第三方資源使用?integrity?+?crossorigin?防止篡改。

  4. 兼容性：

    • preload?和?modulepreload?需現代瀏覽器支持（IE 不支持）。

link中referrerpolicy關于Referer補充

Referer（來源信息）?是 HTTP 請求頭中的一個字段，用于表示當前請求是從哪個頁面或資源鏈接過來的。它是瀏覽器自動發送給服務器的一個信息，幫助服務器了解用戶的訪問路徑

核心概念

  1. 拼寫問題：

    • 正確英文應為?"Referrer"，但在 HTTP 標準中因歷史錯誤拼寫為?"Referer"（少一個?r），并沿用至今。

  2. 作用：

    • 告訴服務器用戶是從哪個頁面跳轉過來的，例如：

      • 用戶點擊網頁 A 的鏈接打開網頁 B，則訪問 B 的請求頭中會包含?Referer: A的URL。

    • 服務器可根據此信息進行流量分析、防盜鏈、安全驗證等。

常見用途

場景說明
流量統計分析用戶來源（如廣告點擊、外部引薦），幫助優化營銷策略。
防盜鏈（Hotlink）阻止其他網站直接引用你的資源（如圖片、文件），僅允許特定來源訪問。
安全驗證檢查請求是否來自合法頁面（如防止跨站請求偽造攻擊）。
調試與日志記錄用戶行為路徑，輔助排查問題。

隱私與安全

1.隱私風險：

  • Referer 可能泄露用戶的瀏覽歷史（如 URL 中包含敏感信息）。

  • 例如：從?https://example.com/user-profile?跳轉的請求，會暴露用戶個人頁面的 URL。

2.瀏覽器保護機制：

Referrer-Policy：通過 HTTP 頭或 HTML 屬性控制 Referer 的發送范圍。

<!-- 完全禁止發送 Referer -->
<meta name="referrer" content="no-referrer">
<!-- 僅發送來源域名（不包含路徑） -->
<meta name="referrer" content="origin">

3.安全場景限制：從 HTTPS 頁面跳轉到 HTTP 頁面時，瀏覽器默認不發送 Referer（防止敏感信息泄露）

Referer 的發送規則

策略（Referrer-Policy）行為
no-referrer完全不發送 Referer 信息。
origin僅發送來源頁面的域名（如?https://example.com）。
strict-origin僅在 HTTPS→HTTPS 請求中發送來源域名。
unsafe-url發送完整 URL（包含路徑和參數），可能導致隱私泄露。

開發者注意事項

1.防盜鏈配置：

在服務器（如 Nginx）中檢查?Referer?頭，阻止非法來源訪問資源：

location /images/ {valid_referers none blocked example.com *.example.org;if ($invalid_referer) {return 403;}
}

2.控制 Referer 發送：通過 HTML 或 HTTP 頭設置策略：

<!-- 在 HTML 中設置 -->
<meta name="referrer" content="origin">

3.調試工具查看：使用瀏覽器開發者工具的?Network?面板，查看請求頭中的?Referer?字段

script?標簽的主要屬性及其作用

屬性是否必需作用描述示例值注意事項
src否指定外部 JavaScript 文件的 URL。src="app.js"
src="https://example.com/script.js"		與內聯腳本互斥，若同時存在，內聯代碼會被忽略。
type否定義腳本類型（默認?text/javascript）。支持?module、importmap?等現代類型。type="module"
type="application/json"		type="module"?表示 ES6 模塊，需瀏覽器支持；非標準類型需配合工具使用。
async否異步加載腳本，下載完成后立即執行（不阻塞 HTML 解析）。async僅對外部腳本有效；多個?async?腳本執行順序不確定。
defer否延遲腳本執行，直到 HTML 解析完成后按聲明順序執行。defer僅對外部腳本有效；與?async?同時存在時，async?優先。
crossorigin否控制跨域請求的 CORS 配置，可選?anonymous?或?use-credentials。crossorigin="anonymous"需與?integrity?配合使用以驗證資源完整性。
integrity否提供腳本的哈希值，用于驗證資源完整性（格式如?sha384-...）。integrity="sha384-oqVuAfXRKap..."哈希不匹配時瀏覽器會拒絕執行；需啟用 CORS（通過?crossorigin）。
nomodule否僅在不支持 ES6 模塊的瀏覽器中執行，用于回退兼容。nomodule現代瀏覽器會忽略此腳本；需配合?type="module"?使用。
referrerpolicy否控制請求時發送的 Referer 頭信息，可選?no-referrer、origin?等。referrerpolicy="no-referrer"適用于隱私保護場景（如第三方腳本）。
charset否（已廢棄）指定外部腳本的字符編碼（如?UTF-8）。charset="UTF-8"現代瀏覽器通常忽略此屬性，推薦通過 HTTP 頭或?<meta>?標簽設置編碼。
language否（已廢棄）早期用于聲明腳本語言（如?JavaScript）。language="JavaScript"HTML5 已廢棄，由?type?屬性替代。

script?關鍵屬性對比

屬性組合加載行為執行順序適用場景
無?async/defer立即加載并執行，阻塞 HTML 解析。按文檔順序立即執行。需立即操作的腳本（如 DOM 操作）。
async異步加載，加載完成后立即執行。執行順序不確定。獨立無依賴腳本（如統計代碼）。
defer異步加載，HTML 解析完成后按聲明順序執行。按文檔順序延遲執行。依賴 DOM 或有嚴格順序要求的腳本。
type="module"默認啟用?defer，可顯式添加?async。類似?defer?或?async。ES6 模塊化開發。

1.src

  • 作用：指定外部 JavaScript 文件的 URL。

  • 是否必需：可選（如果省略，需在標簽內直接編寫代碼）。

  • 示例：

    <script src="app.js"></script>

  • 注意：

    • 如果同時使用?src?和標簽內代碼，內聯代碼會被忽略。

    • 可以是絕對路徑或相對路徑。

2.type

  • 作用：定義腳本的 MIME 類型或模塊類型。

  • 常見值：

    • text/javascript（默認值，可省略）。

    • module：表示腳本為 ES6 模塊（支持?import/export）。

    • importmap：定義模塊導入映射（需現代瀏覽器支持）。

    • application/json：內聯 JSON 數據（非可執行腳本）。

  • 示例：

    <script type="module" src="module.js"></script>

  • 注意：

    • 舊瀏覽器可能不支持?module?類型，需結合?nomodule?回退。

    • 非標準類型（如?text/coffeescript）需配合解析工具使用。

3.async

  • 作用：異步加載并執行腳本（不阻塞 HTML 解析）。

  • 值：布爾屬性（存在即生效）。

  • 示例：

    <script async src="analytics.js"></script>

  • 注意：

    • 僅對?src?引入的外部腳本有效。

    • 執行順序不確定，適用于無依賴的腳本（如統計代碼）。

4.defer

  • 作用：延遲腳本執行，直到 HTML 解析完成后、DOMContentLoaded 事件前執行。

  • 值：布爾屬性（存在即生效）。

  • 示例：

    <script defer src="main.js"></script>

    注意：

  • 僅對?src?引入的外部腳本有效。

  • 多個?defer?腳本按聲明順序執行。

  • 與?async?不可同時使用（若同時存在，async?優先）

5.crossorigin

  • 作用：控制跨域請求的 CORS 設置。

  • 值：

    • anonymous：請求不帶憑據（默認）。

    • use-credentials：請求帶憑據（如 Cookie）。

  • 示例：

    <script crossorigin="anonymous" src="https://cdn.example.com/lib.js"></script>

  • 注意：

    • 需配合?integrity?屬性驗證資源完整性時使用。

    • 若跨域腳本未啟用 CORS，可能無法捕獲錯誤詳情。

6.integrity

  • 作用：提供腳本的哈希值，驗證資源完整性（防止篡改）。

  • 格式：sha256-...、sha384-...、sha512-...。

  • 示例：

    <script integrity="sha384-oqVuAfXRKap..." src="https://cdn.example.com/lib.js"></script>

  • 注意：

    • 需與?crossorigin?屬性一起使用。

    • 若哈希不匹配，瀏覽器會拒絕執行腳本。

7.nomodule

  • 作用：在支持 ES6 模塊的瀏覽器中跳過此腳本（用于舊瀏覽器回退）。

  • 值：布爾屬性（存在即生效）。

  • 示例：

    <script nomodule src="legacy.js"></script>
<script type="module" src="modern.js"></script>

  • 注意：

    • 現代瀏覽器會忽略帶有?nomodule?的腳本。

    • 用于為舊瀏覽器提供兼容代碼。

8.referrerpolicy

  • 作用：控制請求腳本時發送的 Referer 頭信息。

  • 值：no-referrer、origin、unsafe-url?等。

  • 示例：

    <script referrerpolicy="no-referrer" src="https://third-party.com/script.js"></script>

  • 注意：

    • 適用于需要保護用戶隱私的場景（如第三方腳本）。

9.script?補充說明

9.1 執行順序控制：

  • 無?async/defer：立即加載并執行，阻塞 HTML 解析。

  • async：異步加載，加載完成后立即執行（執行順序不確定）。

  • defer：異步加載，按聲明順序在 DOM 就緒后執行。

9.2 模塊化開發：

<!-- 現代瀏覽器執行此腳本 -->
<script type="module" src="app.js"></script>
<!-- 舊瀏覽器執行此腳本 -->
<script nomodule src="legacy.js"></script>

9.3 安全性建議：

  • 使用?integrity?+?crossorigin?增強第三方腳本的安全性。

  • 避免內聯腳本中的敏感數據（如 API 密鑰）。

9.4 性能優化：

  • 將腳本放在?<body>?底部或使用?defer/async?減少阻塞。

  • 預加載關鍵腳本：

    <link rel="preload" href="critical.js" as="script">

meta標簽的作用?

<meta>?標簽用于定義 HTML 文檔的元數據（metadata），不會直接顯示在頁面上，但為瀏覽器、搜索引擎和其他服務提供關鍵信息，例如字符編碼、視口設置、SEO 優化等;

核心屬性總表

屬性作用值類型示例注意事項
charset定義文檔的字符編碼字符編碼名稱（如?UTF-8、ISO-8859-1）<meta charset="UTF-8">必須放在文檔頭部，且一個文檔只能有一個?charset。
name定義元數據的名稱（與?content?配合使用）預定義或自定義的元數據名稱（如?viewport,?description）<meta name="viewport" content="width=device-width">常見名稱見下方詳細表格。
content定義元數據的具體內容（與?name?或?http-equiv?配合使用）根據?name?或?http-equiv?的值決定內容格式<meta name="description" content="這是一個示例頁面">必須與?name?或?http-equiv?同時使用。
http-equiv模擬 HTTP 響應頭的功能（如刷新頁面、兼容性設置）預定義的 HTTP 頭名稱（如?refresh,?X-UA-Compatible）<meta http-equiv="refresh" content="5">部分功能已被現代瀏覽器廢棄（如?set-cookie）。

charset?屬性（HTML5+ 推薦方式）

屬性值說明
charsetUTF-8現代標準編碼，支持所有語言和符號（推薦使用）。
charsetISO-8859-1拉丁字母編碼（如英文、西歐語言），逐漸被 UTF-8 取代。
charsetGBK漢字擴展編碼，支持簡體中文和部分繁體中文。
charsetGB2312早期簡體中文字符集（GBK 的子集）。
charsetBIG5繁體中文字符集（用于臺灣、香港地區）。
charsetUTF-1616 位編碼，存在大小端問題，兼容性較差（不推薦）。

name?屬性詳細值表

name?值作用content?值格式示例
viewport控制移動端視口行為width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no<meta name="viewport" content="width=device-width, initial-scale=1.0">
description頁面描述（SEO 優化）文本（建議 150 字符以內）<meta name="description" content="學習前端開發的教程">
keywords頁面關鍵詞（SEO 優化）逗號分隔的關鍵詞列表<meta name="keywords" content="HTML, CSS, JavaScript">
robots控制搜索引擎爬蟲行為index/noindex,?follow/nofollow,?noarchive?等組合<meta name="robots" content="index, follow">
author聲明頁面作者作者姓名或聯系方式<meta name="author" content="John Doe">
generator聲明頁面生成工具（如 CMS 系統）工具名稱<meta name="generator" content="WordPress">
referrer控制 Referer 信息的發送no-referrer,?origin,?unsafe-url?等<meta name="referrer" content="no-referrer">
theme-color設置瀏覽器地址欄或 PWA 主題顏色顏色值（十六進制或 CSS 顏色名）<meta name="theme-color" content="#4285f4">
format-detection禁用移動端自動識別（如電話號碼、郵箱）telephone=no,?email=no,?date=no<meta name="format-detection" content="telephone=no">

常見?name?屬性與?content?值對照表

name?屬性content?值示例說明
descriptioncontent="頁面描述內容"網頁描述，用于SEO優化。
keywordscontent="關鍵詞1, 關鍵詞2, 關鍵詞3"網頁關鍵詞，逗號分隔（對SEO作用已減弱）。
authorcontent="作者名"聲明頁面作者。
viewportcontent="width=device-width, initial-scale=1.0"控制移動端視口縮放（必填）。
robotscontent="index, follow"控制搜索引擎爬蟲行為（index/noindex,?follow/nofollow等）。
theme-colorcontent="#ffffff"設置瀏覽器主題顏色（支持十六進制或RGB）。
generatorcontent="WordPress 6.0"聲明頁面生成工具。
og:titlecontent="社交媒體標題"Open Graph協議，用于社交媒體分享標題（如Facebook）。
og:descriptioncontent="社交媒體描述"Open Graph協議，用于社交媒體分享描述。
twitter:cardcontent="summary_large_image"Twitter卡片類型（控制分享顯示樣式）。

常見?http-equiv?屬性與?content?值對照表

http-equiv?屬性content?值示例說明
refreshcontent="5; url=https://example.com"頁面自動刷新或跳轉（5為秒數，可省略URL僅刷新）。
Content-Typecontent="text/html; charset=UTF-8"聲明文檔類型和字符編碼（HTML5已推薦改用?<meta charset>）。
X-UA-Compatiblecontent="IE=edge"強制IE使用最新內核渲染頁面。
Content-Security-Policycontent="default-src 'self'"內容安全策略（CSP），限制資源加載來源。
default-stylecontent="樣式表標題"指定頁面默認樣式表（需配合?<link>?使用）。

http-equiv?屬性詳細值表

http-equiv?值作用content?值格式示例
refresh自動刷新或跳轉頁面秒數;url=目標地址<meta http-equiv="refresh" content="5; url=https://example.com">
X-UA-Compatible強制 IE 使用指定渲染模式IE=edge（使用最新引擎）<meta http-equiv="X-UA-Compatible" content="IE=edge">
Content-Security-Policy定義內容安全策略（CSP）策略指令（如?default-src 'self'）<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
Content-Type聲明文檔類型和字符編碼（已廢棄，推薦用?charset）text/html; charset=UTF-8<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
set-cookie設置 Cookie（已廢棄，推薦使用 HTTP 頭）name=value; expires=日期; path=/<meta http-equiv="set-cookie" content="user=John; expires=Thu, 01 Jan 2024 00:00:00 GMT">

其他特殊屬性

屬性作用值類型示例
property用于 Open Graph / Twitter Cards 等社交媒體元數據（需配合?content）og:title,?twitter:card?等<meta property="og:title" content="頁面標題">
itemprop微數據（Microdata）標記（需配合 Schema.org 詞匯）自定義屬性名<meta itemprop="name" content="示例產品">
scheme定義?content?值的格式（已廢棄）格式名稱（如?ISBN,?date）<meta scheme="ISBN" content="12345">

注意事項

  1. 必填屬性：

    • charset?或?http-equiv="Content-Type"?必須至少存在一個（推薦使用?charset）。

  2. 優先級沖突：

    • 若同時使用?http-equiv="Content-Security-Policy"?和 HTTP 頭，瀏覽器會優先采用 HTTP 頭。

  3. 兼容性：

    • theme-color?僅在部分瀏覽器中生效（Chrome、Firefox）。

    • X-UA-Compatible?僅對 IE 有效。

  4. 廢棄屬性：

    • scheme、http-equiv="set-cookie"?已廢棄，不建議使用。

常用場景示例

1. 基礎 SEO 優化

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="專業的編程教程網站">
<meta name="keywords" content="編程, 前端, HTML">
<meta name="robots" content="index, follow">

2. 社交媒體分享

<meta property="og:title" content="示例頁面">
<meta property="og:description" content="這是一個示例頁面">
<meta property="og:image" content="https://example.com/image.png">
<meta name="twitter:card" content="summary_large_image">

3. 安全策略

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta name="referrer" content="no-referrer">

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/907242.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/907242.shtml
英文地址，請注明出處：http://en.pswp.cn/news/907242.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Linux `less` 命令深度解析與高階應用指南

Linux `less` 命令深度解析與高階應用指南

Linux `less` 命令深度解析與高階應用指南 一、核心功能解析1. 基本作用2. 與類似工具對比二、選項系統詳解1. 常用基礎選項2. 高階選項組合三、高階應用場景1. 日志分析系統2. 代碼審查系統3. 數據管道處理四、特殊文件處理1. 大文件優化查看2. 二進制文件分析五、交互式命令大…
閱讀更多...
影刀RPA-20-高級操作題2

影刀RPA-20-高級操作題2

一、題目 二、鏈接 方法一&#xff1a;影刀應用分享: 高級考試題2-第二次 方法二&#xff1a;影刀應用分享: 高級考試題2 三、代碼 方法一&#xff1a; import xbot from xbot import print, sleep from .import package from .package import variables as glv from xbot…
閱讀更多...
C# NX二次開發-獲取面法向和UV等數據

C# NX二次開發-獲取面法向和UV等數據

通過ufun函數UF_MODL_ask_face_props可以獲取到面的法向數據和UV和半徑等數據。 代碼如下&#xff1a; double[] uvs new double[4];double[] param new double[2];double[] point new double[3];double[] u1 new double[3];double[] v1 new double[3];double[] u2 new d…
閱讀更多...
SpringBoot整合Sa-Token：實現RBAC權限模型

SpringBoot整合Sa-Token：實現RBAC權限模型

Java系列文章 文章目錄 Java系列文章前言一、基礎概念1.1 RBAC模型核心概念1.2 Sa-Token核心功能1.3 環境準備 二、表結構設計2.1 ER圖示例2.2 數據庫表設計2.2.1 用戶表2.2.2 角色表2.2.3 部門表2.2.4 權限表 三、SpringBoot整合Sa-Token3.1 sa-token基礎配置3.1.1 Maven配置3…
閱讀更多...
工商業儲能的“智慧大腦”：解密 Acrel-2000ES EMS 的核心功能與價值

工商業儲能的“智慧大腦”：解密 Acrel-2000ES EMS 的核心功能與價值

安科瑞電氣顧強 市場背景&#xff1a;工商業儲能加速崛起 2022年中國已并網的儲能項目中&#xff0c;用戶側并網占比為8.36%&#xff0c;其中工商業儲能占據了用戶側高達98.6%的份額。驅動這一市場發展的關鍵因素日益顯著&#xff1a; 1.峰谷價差擴大&#xff1a; 全國各省市…
閱讀更多...
vue+threeJs 根據屏幕調整gltf模型的大小、重心、并更換騎車整體顏色

vue+threeJs 根據屏幕調整gltf模型的大小、重心、并更換騎車整體顏色

嗨&#xff0c;我是小路。今天主要和大家分享的主題是“vuethreeJs 根據屏幕調整gltf模型的大小、重心、并更換騎車整體顏色”。 項目案例示意圖 1.整體更換gltf模型的顏色 定義&#xff1a;整體代碼如下。顏色是事先設定的 const colorAry reactive(["rgb(21…
閱讀更多...
03 基于 java udp 做一個dns服務器 和 一個dns代理服務器

03 基于 java udp 做一個dns服務器 和 一個dns代理服務器

前言 這個也是 來自于一個朋友的需求 最終的目的是實現一個 dns 代理服務器, 當然 這本質也是一個 dns 服務器 并且 dns 代理服務器是依賴于 一個 dns 服務器的, 因此 順便給一個 dns 服務器的 demo 這里 主要是 基于 udp 的一個 dns 請求, 響應數據的交互 dns 服務器 …
閱讀更多...
【HITCSAPP 哈工大計算機系統期末大作業】 程序人生-Hello’s P2P

【HITCSAPP 哈工大計算機系統期末大作業】 程序人生-Hello’s P2P

計算機系統 大作業 題 目 程序人生-Hello’s P2P 專 業 計算機與電子通信類 學　　 號 2023112915 班　　 級 23L0505 學 生 楊昕彥 指 導 教 師 劉宏偉 計算機科學…
閱讀更多...
第十周作業

第十周作業

一、CSRF 1、DVWA-High等級 2、使用Burp生成CSRF利用POC并實現攻擊 二、SSRF&#xff1a;file_get_content實驗&#xff0c;要求獲取ssrf.php的源碼 三、RCE 1、 ThinkPHP 2、 Weblogic 3、Shiro
閱讀更多...
PTA刷題筆記（難度預警！！！有詳解）

PTA刷題筆記（難度預警！！！有詳解）

7-18 二分法求多項式單根 代碼如下&#xff1a; ? #include <stdio.h> #include <math.h>// 定義多項式函數 double polynomial(double x, double a3, double a2, double a1, double a0) {return a3 * x * x * x a2 * x * x a1 * x a0; }// 二分法求根函數 do…
閱讀更多...
打破傳統范式，線上 3D 畫展彰顯多元亮點

打破傳統范式，線上 3D 畫展彰顯多元亮點

&#xff08;一&#xff09;沉浸式體驗&#xff0c;身臨其境賞畫? 線上 3D 畫展運用先進的 3D 建模和虛擬現實&#xff08;VR&#xff09;技術&#xff0c;高度還原了真實的展廳環境 。展廳內的布局、燈光&#xff0c;甚至墻壁的質感都被完美復刻&#xff0c;讓觀眾仿佛置身于…
閱讀更多...
Docker架構詳解

Docker架構詳解

一,Docker的四大要素&#xff1a;Dockerfile、鏡像(image)、容器(container)、倉庫(repository) 1.dockerfile&#xff1a;在dockerfile文件中寫構建docker的命令,通過dockerbuild構建image 2.鏡像&#xff1a;就是一個只讀的模板&#xff0c;鏡像可以用來創建docker容器&…
閱讀更多...
【工具類】常用的工具類——CollectionUtil

【工具類】常用的工具類——CollectionUtil

目錄 cn.hutool.core.collection.CollectionUtil集合創建集合清空集合判空集合去重集合過濾集合轉換集合合并集合交集集合差集集合是否包含元素集合是否包含指定元素&#xff08;自定義條件&#xff09;集合分頁集合分組集合轉字符串元素添加元素刪除根據屬性轉Map獲取元素獲取…
閱讀更多...
從零起步搭建基于華為云構建碳排放設備管理系統的產品設計

從零起步搭建基于華為云構建碳排放設備管理系統的產品設計

目錄 &#x1f33f; 華為云 IoT&#xff1a;輕松上手碳排放設備管理系統搭建 &#x1f30d; 逐步搭建搭建規劃 &#x1f680; 一、系統藍圖&#xff1a;5大核心模塊&#xff0c;循序漸進 1?? 設備管理與數據采集層 2?? 數據傳輸與協議轉換層 3?? 數據處理與分析層…
閱讀更多...
華為OD機試真題—— 小明減肥（2025B卷：100分）Java/python/JavaScript/C/C++/GO最佳實現

華為OD機試真題—— 小明減肥（2025B卷：100分）Java/python/JavaScript/C/C++/GO最佳實現

2025 B卷 100分 題型 本專欄內全部題目均提供Java、python、JavaScript、C、C++、GO六種語言的最佳實現方式； 并且每種語言均涵蓋詳細的問題分析、解題思路、代碼實現、代碼詳解、3個測試用例以及綜合分析； 本文收錄于專欄：《2025華為OD真題目錄+全流程解析+備考攻略+經驗分…
閱讀更多...
數據結構 -- 插入排序（直接插入排序和希爾排序）

數據結構 -- 插入排序（直接插入排序和希爾排序）

插入排序 算法思想 每次將?個待排序的記錄按其關鍵字大小插入到前面已排好序的子序列中&#xff0c;直到全部記錄插入完成。 代碼實現 void InsertSort(int A[],int n){int i,j,temp;for(i 1;i<n;i){if(A[i]<A[i-1]){temp A[i]; //用temp暫存A[i]for(ji-1;j>…
閱讀更多...
word中表格拉不動以及插入圖片有間距

word中表格拉不動以及插入圖片有間距

word中的表格寬度和高度怎么調整都改不了&#xff0c;可以將選中表格—右鍵—段落—取消勾選下圖中的兩項。 word中表格插入圖片始終有間隙&#xff0c;怎么也消除不了間隙&#xff0c;可以在表布局—單元格邊距—修改上下左右邊距為0即可
閱讀更多...
網絡抓包命令tcpdump及分析工具wireshark使用

網絡抓包命令tcpdump及分析工具wireshark使用

文章目錄 環境文檔用途詳細信息 環境 系統平臺&#xff1a;Linux x86-64 Red Hat Enterprise Linux 8,Linux x86-64 Red Hat Enterprise Linux 7,Linux x86-64 SLES 12,銀河麒麟 &#xff08;鯤鵬&#xff09;,銀河麒麟 &#xff08;X86_64&#xff09;,銀河麒麟&#xff08;龍…
閱讀更多...
Eigen矩陣存儲順序以及轉換

Eigen矩陣存儲順序以及轉換

一、Eigen矩陣存儲順序 在矩陣運算和線性代數中，"行優先"（Row-major）和"列優先"（Column-major）是兩種不同的存儲方式，它們決定了多維數組（如矩陣）在內存中的布局順序。 1. 行優先（Row-major） 定義：矩陣按行順序存儲在內存中，即第一行的所有元…
閱讀更多...
快速部起一個Openwhisk平臺，使用telego k8s服務部署能力內網部署

快速部起一個Openwhisk平臺，使用telego k8s服務部署能力內網部署

Telego 簡介與 OpenWhisk 部署實踐 概述 Telego 是一個用于便攜式 Kubernetes 部署的工具&#xff0c;旨在解決容器鏡像拉取中的網絡代理問題。本文檔描述了如何通過 Telego 將 Apache OpenWhisk&#xff08;一個 Serverless 計算平臺&#xff09;部署到 Kubernetes 集群&…
閱讀更多...
最新文章

Copyright @ 2022~2023