HTML 常用標簽介紹

目錄

HTML 標簽

HTML 常用標簽速查表

文檔元標簽

頁面結構與布局

文本內容與排版

鏈接與媒體

列表與表格

表單與交互

其他功能標簽

文本結構標簽

文本格式化標簽

列表標簽

鏈接與導航標簽

媒體標簽

容器與結構標簽

表格標簽

表單標簽

元信息與文檔標簽

腳本與樣式標簽

框架與嵌入內容標簽

交互與可擴展標簽

HTML 標簽

在網頁開發中,HTML 標簽是構建網頁結構和內容的基礎。這些預定義的標簽能夠告訴瀏覽器如何解析和顯示網頁元素,讓原本無序的內容變得條理清晰、層次分明。下面將按功能分類介紹 HTML 中最常用的標簽,幫助大家快速掌握網頁開發的基礎工具。

HTML 常用標簽速查表


文檔元標簽

標簽描述HTML5 新增
<!--...-->定義注釋-
<!DOCTYPE>定義文檔類型,告訴瀏覽器使用 HTML5 標準-
<head>文檔的元數據容器(標題、樣式、腳本等)-
<html>HTML 文檔的根元素-
<link>關聯外部資源(常用于引入 CSS)-
<meta>定義頁面元信息(編碼、描述、關鍵字等)-
<script>定義或引入 JavaScript 腳本-
<style>定義內部 CSS 樣式-
<title>定義文檔標題(顯示在瀏覽器標簽)-

頁面結構與布局

標簽描述HTML5 新增
<article>獨立的文章或內容塊?
<aside>側邊欄內容?
<body>HTML 文檔的主體內容-
<div>通用容器,無語義-
<footer>頁腳?
<header>文檔或區域的頭部?
<main>頁面主體內容(唯一且重要)?
<nav>導航鏈接部分?
<section>章節或區域?
<span>行內容器,無語義-

文本內容與排版

標簽描述HTML5 新增
<abbr>縮寫-
<blockquote>長引用-
<br>換行-
<code>行內代碼-
<em>語義強調(斜體)-
<h1>~<h6>標題等級-
<hr>水平分割線-
<kbd>鍵盤輸入-
<mark>高亮文本?
<p>段落-
<pre>保留格式的文本-
<q>短引用(自動加引號)-
<samp>程序輸出-
<small>小號文字-
<strong>強調(加粗)-
<sub>下標-
<sup>上標-
<var>變量-
<cite>引用作品標題-

鏈接與媒體

標簽描述HTML5 新增
<a>超鏈接-
<audio>音頻?
<canvas>繪圖區域(JS 渲染)?
<embed>嵌入外部內容?
<figcaption><figure>?的標題?
<figure>獨立的圖像/媒體容器?
<iframe>內聯框架(嵌入頁面)-
<img>圖片-
<object>插入多媒體/應用程序-
<source>為媒體指定資源?
<svg>矢量圖形-
<track>視頻/音頻字幕軌道?
<video>視頻?

列表與表格

標簽描述HTML5 新增
<caption>表格標題-
<col>列屬性-
<colgroup>列分組-
<dd>術語描述-
<dl>定義列表-
<dt>定義術語-
<li>列表項-
<ol>有序列表-
<table>表格-
<tbody>表格主體-
<td>表格單元格-
<tfoot>表尾部分-
<th>表頭單元格-
<thead>表頭部分-
<tr>表格行-
<ul>無序列表-

表單與交互

標簽描述HTML5 新增
<button>按鈕-
<datalist>自動完成選項列表?
<details>可折疊內容?
<dialog>對話框?
<fieldset>表單分組-
<form>表單-
<input>輸入控件-
<label>輸入標簽-
<legend>分組標題-
<meter>度量值顯示?
<optgroup>下拉列表選項分組-
<option>下拉選項-
<output>表單/腳本輸出?
<progress>進度條?
<select>下拉列表-
<summary>折疊標題?
<textarea>多行文本框-

其他功能標簽

標簽描述HTML5 新增
<bdi>雙向隔離文本?
<bdo>文本方向覆蓋-
<noscript>不支持腳本時顯示的內容-
<template>頁面中隱藏的模板內容?
<time>時間/日期?
<wbr>建議換行位置?

文本結構標簽

文本是網頁內容的核心載體,文本結構標簽用于組織和格式化各類文字內容,明確內容的層次關系。

  • 標題標簽<h1>?到?<h6>?是定義標題的核心標簽,其中?<h1>?代表最高級別的標題,通常用于網頁的主標題,字體最大且加粗;<h6>?則是最低級別的標題,字體最小。每個標題標簽都會自動換行,并且標題之間會有默認的間距,讓頁面層級更清晰。例如?<h1>網站首頁</h1>?會顯示為頁面中最醒目的主標題。
  • 段落標簽<p>?用于定義一段文本內容,是網頁中最常用的文本標簽之一。段落標簽會自動在前后添加換行和間距,使文本內容呈現出自然的分段效果。比如?<p>這是一段網頁正文內容</p>?會將文本以段落形式展示,與其他內容區分開來。
  • 換行標簽<br>?是單標簽,用于在文本中強制換行,而不需要創建新的段落。例如在地址信息中,<p>北京市朝陽區<br>某某街道 123 號</p>?會讓地址在換行處顯示為兩行。
  • 水平線標簽<hr>?單標簽,用于在頁面中插入一條水平線,起到分隔內容的作用。比如在文章的不同章節之間添加?<hr>,可以讓頁面結構更清晰。

文本格式化標簽

文本格式化標簽用于改變文本的顯示樣式,突出重點內容或表達特定含義。

  • 加粗標簽<strong>?和?<b>?都能使文本加粗,但?<strong>?更具語義化,強調文本的重要性,搜索引擎會更重視其中的內容;<b>?僅用于視覺上的加粗。例如?<strong>注意事項</strong>?會加粗顯示并強調內容的重要性。
  • 斜體標簽<em>?和?<i>?可使文本顯示為斜體,<em>?強調文本的語氣或強調內容,具有語義含義;<i>?主要用于視覺上的斜體效果,如外文詞匯或專業術語。比如?<em>請仔細閱讀</em>?會以斜體顯示并強調語氣。
  • 刪除線標簽<s>?和?<del>?用于給文本添加刪除線,通常表示已刪除或過時的內容。例如?<p>原價 <s>199 元</s>,現價 99 元</p>?會在原價上顯示刪除線。
  • 下劃線標簽<u>?用于給文本添加下劃線,可用于強調特定內容,但需注意不要與超鏈接的默認下劃線混淆。例如?<u>重點內容</u>?會為文本添加下劃線。
  • 特殊文本格式標簽
    • <code>:用于顯示計算機代碼,文本會采用等寬字體,例如?<code>console.log("Hello")</code>

    • <pre>:保留文本中的空格和換行,常用于展示代碼塊或需要固定格式的內容,例如:

      <pre>
      function greet() {console.log("Hello World");
      }
      </pre>
      
    • <kbd>:表示鍵盤輸入內容,例如?<kbd>Ctrl</kbd> + <kbd>V</kbd>?表示快捷鍵組合。

    • <mark>:用于高亮顯示文本,例如?<p>請重點關注 <mark>這部分內容</mark></p>

    • <sup>?和?<sub>:分別表示上標和下標,例如?<p>數學公式:a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>?和?<p>化學方程式:H<sub>2</sub>O</p>

列表標簽

列表標簽用于將相關內容以列表形式展示,使內容更有條理。

  • 無序列表:由?<ul>?和?<li>?標簽組合使用,<ul>?是無序列表的容器,<li>?用于定義列表項。無序列表的每個列表項前默認顯示圓點標記,也可通過 CSS 改變標記樣式。例如:

    <ul><li>蘋果</li><li>香蕉</li><li>橙子</li>
    </ul>
    

    會顯示帶有圓點標記的水果列表。

  • 有序列表:由?<ol>?和?<li>?組成,<ol>?是有序列表容器,<li>?為列表項。有序列表的每個列表項前會顯示數字序號,默認從 1 開始,可通過?start?屬性設置起始序號。例如:

    <ol start="3"><li>第三步:輸入網址</li><li>第四步:點擊搜索</li>
    </ol>
    

    會從數字 3 開始顯示有序列表。

  • 定義列表:由?<dl><dt>?和?<dd>?組成,用于對術語進行定義和描述。<dl>?是定義列表容器,<dt>?表示定義的術語,<dd>?表示對術語的描述。例如:

    <dl><dt>HTML</dt><dd>超文本標記語言,用于構建網頁結構</dd><dt>CSS</dt><dd>層疊樣式表,用于美化網頁樣式</dd>
    </dl>
    

    會顯示術語及其對應的描述內容。

鏈接與導航標簽

鏈接是互聯網的核心特性之一,鏈接與導航標簽用于實現頁面間的跳轉和導航功能。

  • 超鏈接標簽<a>?是實現鏈接功能的核心標簽,通過?href?屬性指定鏈接的目標地址,鏈接文本放在開始標簽和結束標簽之間。例如?<a href="https://www.example.com">訪問示例網站</a>?會顯示可點擊的鏈接,點擊后跳轉到指定網址。target?屬性可設置鏈接打開方式,target="_blank"?表示在新窗口打開鏈接。

  • 錨點鏈接:用于在同一頁面內實現快速跳轉,先給目標元素定義?id?屬性,再在?<a>?標簽的?href?屬性中使用?#id?形式指向目標元素。例如?<a href="#section1">跳轉到第一部分</a>,目標元素?<div id="section1">第一部分內容</div>,點擊鏈接會快速跳轉到頁面中 id 為 section1 的元素位置。

  • 導航標簽<nav>?是 HTML5 新增的語義化標簽,用于定義網頁中的導航區域,通常包含多個?<a>?標簽組成的導航鏈接。例如:

    <nav><a href="/home">首頁</a><a href="/news">新聞</a><a href="/contact">聯系我們</a>
    </nav>
    

    使用?<nav>?標簽能讓瀏覽器和搜索引擎更清晰地識別導航區域。

媒體標簽

媒體標簽用于在網頁中插入圖片、音頻、視頻等多媒體內容,豐富網頁的表現形式。

  • 圖片標簽<img>?是單標簽,用于在網頁中插入圖片,核心屬性包括?src(指定圖片的路徑或 URL)、alt(圖片無法加載時顯示的替代文本,提升可訪問性)、width?和?height(設置圖片的寬度和高度,單位為像素或百分比)。例如?<img src="image.jpg" alt="風景圖片" width="500" height="300">?會顯示指定路徑的圖片,寬度為 500 像素,高度為 300 像素。

  • 音頻標簽<audio>?用于在網頁中嵌入音頻文件,支持?src?屬性指定音頻文件路徑,controls?屬性顯示播放控件(如播放/暫停按鈕、音量調節等),autoplay?屬性設置音頻自動播放(部分瀏覽器出于用戶體驗考慮可能會限制自動播放),loop?屬性設置音頻循環播放。例如:

    <audio src="music.mp3" controls loop></audio>
    

    會在頁面中顯示音頻播放控件,用戶可操作播放音頻。

  • 視頻標簽<video>?用于嵌入視頻文件,常用屬性與音頻標簽類似,src?指定視頻路徑,controls?顯示播放控件,width?和?height?設置視頻尺寸,autoplay?和?loop?分別用于自動播放和循環播放。例如:

    <video src="video.mp4" controls width="800" height="450"></video>
    

    會在頁面中顯示視頻播放窗口和控件,用戶可播放視頻。

容器與結構標簽

容器與結構標簽用于對網頁內容進行分組和布局,構建網頁的整體框架。

  • 通用容器標簽<div>?是最常用的通用容器標簽,沒有特定的語義,主要用于對內容進行分組,方便通過 CSS 控制樣式和 JavaScript 操作。例如可以用?<div class="header">?包裹頭部內容,<div class="content">?包裹主體內容,使頁面結構更清晰。

  • 語義化結構標簽:HTML5 引入了一系列語義化結構標簽,它們不僅能實現容器功能,還能明確表達內容的含義。

    • <header>:定義網頁或區域的頭部,通常包含標題、logo、導航等內容。
    • <footer>:定義網頁或區域的頁腳,通常包含版權信息、聯系方式、相關鏈接等。
    • <section>:表示文檔中的一個獨立章節或區域,如文章的一個小節。
    • <article>:表示獨立的、可完整分發的內容,如博客文章、新聞報道、評論等。
    • <aside>:定義側邊欄內容,通常包含與主內容相關的補充信息,如廣告、相關推薦等。
    • <main>:表示網頁的主要內容區域,一個頁面通常只包含一個?<main>?標簽。

    例如一個典型的網頁結構:

    <header><h1>網站標題</h1><nav>導航鏈接</nav>
    </header>
    <main><article><h2>文章標題</h2><p>文章內容...</p></article><aside>相關推薦</aside>
    </main>
    <footer>版權信息</footer>
    

表格標簽

表格標簽用于以行和列的方式展示數據,讓信息更直觀、有序。

  • 表格容器<table>?用于定義表格的整體結構,所有表格內容必須放在它內部。

  • 表格行<tr>?表示表格中的一行(table row),可包含若干個表格單元格。

  • 表頭單元格<th>?用于定義表格的表頭單元格,內容默認加粗并居中,表示列或行的標題。

  • 表格單元格<td>?用于定義表格的普通單元格,存放數據或內容。

  • 表格分組:HTML 提供?<thead>(表頭)、<tbody>(表格主體)和?<tfoot>(表尾)來對表格內容進行分組,便于樣式控制和語義清晰。

    示例:

    <table border="1"><thead><tr><th>姓名</th><th>年齡</th><th>城市</th></tr></thead><tbody><tr><td>張三</td><td>25</td><td>北京</td></tr><tr><td>李四</td><td>30</td><td>上海</td></tr></tbody>
    </table>
    

表單標簽

表單標簽用于創建用戶與網頁的交互界面,收集用戶輸入的信息。

  • 表單容器<form>?是表單的容器標簽,所有表單元素都需要放在?<form>?內部。action?屬性指定表單數據提交的目標 URL,method?屬性指定提交方式(get?或?post)。例如?<form action="/submit" method="post">?表示表單數據將通過 post 方式提交到?/submit?地址。

  • 輸入框<input>?是單標簽,通過?type?屬性設置輸入框類型,常見類型包括:

    • text:單行文本輸入框,用于輸入普通文本。
    • password:密碼輸入框,輸入內容會顯示為圓點或星號。
    • radio:單選按鈕,多個單選按鈕通過相同的?name?屬性組成一組,用戶只能選擇其中一個。
    • checkbox:復選框,多個復選框通過相同的?name?屬性組成一組,用戶可選擇多個選項。
    • submit:提交按鈕,點擊后提交表單數據。
    • reset:重置按鈕,點擊后將表單元素恢復到初始狀態。
    • file:文件上傳控件,允許用戶選擇本地文件上傳。
  • 下拉選擇框:由?<select>?和?<option>?組成,<select>?是下拉框容器,<option>?定義每個選項。例如:

    <select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">廣州</option>
    </select>
    

    會顯示一個下拉框,用戶可從中選擇城市。

  • 多行文本框<textarea>?用于創建多行文本輸入框,rows?屬性設置可見行數,cols?屬性設置可見列數。例如?<textarea rows="5" cols="30" name="message">請輸入留言...</textarea>?會顯示一個 5 行 30 列的文本框,用戶可輸入多行文本。

  • 按鈕標簽<button>?用于創建按鈕,type?屬性可設置為?submit(提交表單)、reset(重置表單)或?button(普通按鈕,需配合 JavaScript 實現功能)。例如?<button type="button" onclick="alert('Hello')">點擊我</button>?會創建一個點擊后彈出提示框的按鈕。

元信息與文檔標簽

這些標簽通常位于?<head>?區域,用于定義網頁的元信息和結構說明。

  • 文檔聲明<!DOCTYPE html>?用于告訴瀏覽器使用 HTML5 標準解析頁面,必須放在文檔最開頭。
  • HTML 根元素<html>?是整個 HTML 文檔的根標簽,lang?屬性可指定頁面語言,例如?<html lang="zh-CN">?表示中文頁面。
  • 頭部區域<head>?用于包含頁面的元信息,如標題、樣式、腳本、字符編碼等,內容不會直接顯示在頁面中。
  • 標題標簽<title>?定義網頁標題,會顯示在瀏覽器標簽欄中,并影響搜索引擎優化(SEO)。
  • 字符編碼<meta charset="UTF-8">?設置網頁使用的字符編碼,UTF-8 能支持多語言字符,避免中文亂碼。
  • 視口設置<meta name="viewport" content="width=device-width, initial-scale=1.0">?用于響應式布局,讓頁面在移動端設備上正確顯示。
  • SEO 元信息<meta name="description" content="網站描述內容">?用于設置網頁描述,<meta name="keywords" content="關鍵詞1,關鍵詞2">?用于設置網頁關鍵詞,兩者都有助于搜索引擎收錄。
  • 樣式表引用<link rel="stylesheet" href="style.css">?用于引用外部 CSS 文件,實現樣式與結構分離。
  • 腳本引用<script src="script.js"></script>?用于引用外部 JavaScript 文件,也可直接在?<script>?標簽內編寫腳本代碼。

腳本與樣式標簽

  • 內聯樣式<style>?用于在 HTML 中直接編寫 CSS 樣式,一般放在?<head>?內,例如:

    <style>body { background-color: #f0f0f0; }h1 { color: blue; }
    </style>
    
  • 外部樣式表:通過?<link>?標簽引入獨立的 CSS 文件,便于樣式的維護和復用,是開發中的常用方式。

  • 腳本標簽<script>?用于編寫或引用 JavaScript 代碼,可放在?<head>?或?<body>?中。通常建議放在?<body>?底部,避免阻塞頁面加載。

  • 模塊腳本:在?<script>?標簽中添加?type="module"?可使用 JavaScript ES6 模塊化功能,例如?<script type="module" src="app.js"></script>

框架與嵌入內容標簽

  • 內聯框架<iframe>?用于在網頁中嵌入另一個 HTML 頁面,常用于視頻、地圖或第三方內容嵌入。例如:

    <iframe src="https://www.example.com" width="600" height="400" title="示例頁面"></iframe>
    
  • 畫布標簽<canvas>?提供可繪制 2D 或 3D 圖形的畫布,需配合 JavaScript 使用,例如繪制圖表、游戲畫面等。

  • SVG 圖形<svg>?用于直接在 HTML 中繪制矢量圖形,支持縮放且不失真,例如圖標、簡單插圖等。

交互與可擴展標簽

  • 詳情與摘要<details>?和?<summary>?組合可創建可折疊的內容塊,用戶點擊摘要可展開或收起詳細信息。

    <details><summary>查看更多</summary><p>這里是隱藏的詳細內容,點擊摘要可展開/收起。</p>
    </details>
    
  • 進度條<progress>?表示任務完成進度,可設置?value(當前值)和?max(最大值)。

    <p>下載進度:<progress value="70" max="100"></progress> 70%</p>
    
  • 計量值<meter>?表示測量值或比例范圍,例如評分、使用率等。

    <p>磁盤使用率:<meter value="65" min="0" max="100">65%</meter></p>
    

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

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

相關文章

kafka 沖突解決 kafka安裝

目錄 解法方法&#xff1a; 一般情況正常可以版本2.0.2 報錯&#xff1a; File "<frozen importlib._bootstrap>", line 1050, in _gcd_import File "<frozen importlib._bootstrap>", line 1027, in _find_and_load File "<frozen…

論文閱讀 2025-8-9 [DiC, DropKey]

閑來沒事&#xff0c;找點近一年的論文看看 1. DiC: Rethinking Conv3x3 Designs in Diffusion Models ? 一句話總結&#xff1a;DiC用沙漏架構稀疏跳躍條件門控重構純Conv3x3擴散模型&#xff0c;在速度碾壓Transformer的同時性能反超&#xff0c;為實時生成任務開辟新路徑。…

16進制pcm數據轉py波形腳本

將16bit的單聲道或者雙聲道的16進制的pcm數據轉成波形圖片出來分析數據&#xff0c;python腳本如下&#xff1a;import numpy as np import matplotlib.pyplot as plt# 1: 單聲道&#xff0c;2&#xff1a;雙聲道 PCM_CHANNELS 2# 你提供的十六進制數據 hex_str ""…

MySQL的鎖:

目錄 鎖的介紹&#xff1a; 并發事務訪問相同數據可以分為以下幾種情況&#xff1a; 都是進行讀操作&#xff1a; 都是進行寫操作&#xff1a; 有讀操作也有寫操作&#xff1a; 讀鎖、寫鎖&#xff1a; 讀鎖&#xff1a; 寫鎖&#xff1a; 按照鎖粒度分類&#xff1a;…

一道同分排名的SQL題

1 概述遇到這樣一道題&#xff1a;(1) 有一張學生課程分數表&#xff0c;字段有&#xff1a;ID、名稱、性別、科目、分數。&#xff08;名稱換為學號更能標識唯一學生&#xff0c;但名稱好閱讀&#xff0c;故這里先認為名稱可以唯一標識學生。&#xff09;(2) 用一個SQL&#x…

ICCV 2025 | Reverse Convolution and Its Applications to Image Restoration

標題&#xff1a;Reverse Convolution and Its Applications to Image Restoration作者&#xff1a;Xuhong Huang, Shiqi Liu, Kai Zhang, Ying Tai, Jian Yang, Hui Zeng, Lei Zhang單位&#xff1a;Nanjing University, The Hong Kong Polytechnic University, OPPO Research…

mysql啟動超時

mysql啟動超時&#xff1a; 管理員打開CMD后允許net start MySQL57&#xff0c; 啟動超時檢查錯誤日志 MySQL 啟動失敗的具體原因通常記錄在錯誤日志中。 日志路徑&#xff08;根據你的安裝方式可能不同&#xff09;&#xff1a; 默認位置&#xff1a;C:\ProgramData\MySQL\MyS…

Flink Stream API 源碼走讀 - window 和 sum

本文核心觀點 核心觀點&#xff1a;WindowedStream 是一個"假流"&#xff0c;它比 KeyedStream 更虛&#xff0c;只是一個 API 的過渡器&#xff0c;不是真正意義上的 DataStream&#xff0c;需要調用函數回歸。 虛擬化時刻&#xff1a;從真實流到虛擬流 KeyedStream…

藍牙 GFSK RX Core 架構解析

GFSK RX Core分為以下幾個模塊&#xff1a; 1.Frequency offset compensation CORDIC 2.A low pass filter 3.A power estimator for packet detection,RSSI and digital gaion computation for DPSK path 4.A demodulator implemented as Phase Shift Discriminator 5.A drequ…

微電網管控系統中python多線程緩存與SQLite多數據庫文件連接池實踐總結(含源碼)

1. 引言 在分散的微電網能源管理場景中,系統采用集中式云平臺模式,為100個獨立微電網用戶提供高并發數據寫入服務面臨三大挑戰:用戶數據隔離、I/O性能瓶頸、多線程安全性。本文揭示一種新式的分片鎖+三級緩存+sqlite多數據庫文件連接池架構,在保持SQLite輕量級優勢的同時,…

InfluxDB 開發工具鏈:IDE 插件與調試技巧(一)

引言 ** 在當今數字化時代&#xff0c;時間序列數據的處理與分析在眾多領域中都扮演著至關重要的角色。無論是物聯網設備產生的海量傳感器數據&#xff0c;還是金融市場中實時波動的交易數據&#xff0c;又或是服務器運維過程中不斷產生的性能指標數據&#xff0c;這些都屬于…

計算機網絡-IPv6

1、IPv6基礎IPv4與IPv6的對比&#xff1a;問題IPv4的缺陷IPv6的優勢地址空間IPv4地址采用32比特標識&#xff0c;能提供的地址數量是43億&#xff0c;分配很不均衡。針對IPv4的地址短缺問題&#xff0c;有幾種解決方案&#xff1a;無類別域間路由CIDR&#xff08;Classless Int…

整體設計 之“凝聚式中心點”原型 --整除:智能合約和DBMS的深層融合 之2

摘要&#xff08;CSDN的AI助手自動生成的&#xff09;本文提出了一種基于"整除"數學原型的智能合約與DBMS融合架構設計&#xff0c;將SQL查詢語句的四個關鍵段&#xff08;SELECT、FROM、WHERE、BY&#xff09;分別映射到整除運算的四個要素&#xff08;商、被除數、…

【趙渝強老師】TiDB表數據與鍵值對的映射關系

TiDB實例將表中的每一行數據映射成RocksDB中的鍵值對&#xff0c;則需要考慮如何構造Key和Value。首先&#xff0c;OLTP場景下有大量針對單行或者多行的增、刪、改、查等操作&#xff0c;要求數據庫具備快速讀取一行數據的能力。因此&#xff0c;對應的Key最好有一個唯一ID&…

帶操作系統的延時函數

delay.c:#include "delay.h"/*** brief 微秒級延時* param nus 延時時長&#xff0c;范圍&#xff1a;0~233015* retval 無*/ void delay_us(uint32_t nus) {uint32_t ticks;uint32_t tcnt 0, told, tnow;uint32_t reload SysTick->LOAD; //重…

ES Module 和 CommonJS的區別

ES Module&#xff08;ESM&#xff0c;ES6 模塊系統&#xff09;和 CommonJS 是 JavaScript 中兩種主流的模塊規范&#xff0c;分別用于現代前端和 Node.js 環境&#xff08;早期&#xff09;&#xff0c;它們在語法、加載機制、特性等方面有顯著區別。以下是詳細對比&#xff…

貓頭虎AI分享|一款智能量化交易系統:QuantCell,從數據收集到策略執行全流程自動化

貓頭虎AI分享&#xff5c;一款智能量化交易系統&#xff1a;QuantCell&#xff0c;從數據收集到策略執行全流程自動化 在當今金融市場中&#xff0c;量化交易系統已經成為越來越多投資者和機構的重要選擇。無論是股票、期貨還是加密貨幣&#xff0c;自動化交易與人工智能的結合…

直播美顏SDK架構揭秘:動態貼紙功能的實現原理與性能優化

如今&#xff0c;美顏SDK 已經不再只是“磨皮、美白”的基礎工具&#xff0c;而是逐漸進化為一個涵蓋 人臉識別、實時特效、動態貼紙交互 的復雜技術體系。尤其是 動態貼紙功能 的加入&#xff0c;讓主播與觀眾之間的互動更加生動有趣&#xff0c;也成為提升用戶粘性與平臺差異…

Docker安裝CDC

Docker安裝CDC拉取鏡像離線形式安裝上傳文件并創建docker-compose.yml把鏡像加載到docker中啟動容器連接數據庫創建賬號&#xff0c;并給賬號授權設置wal_level確認wal_level的值創建鏈接查詢連接狀態使用kafdrop消息中看不到修改之前的信息怎么辦補充拉取鏡像 docker pull co…

如何在win服務器中部署若依項目

一、安裝jdk的環境&#xff1a; 這一步很簡單&#xff0c;直接拿到安裝包雙擊安裝即可。 二、配置jdk的環境變量默認安裝的路徑為&#xff1a;C:\Program Files (x86)\Java\jdk1.7.0_51安裝完成之后進行環境變量配置右擊計算機&#xff08;此電腦&#xff09;點擊屬性點擊高級系…