（純新手教程）HTML零基礎教學

（下一章：python網絡爬蟲）

HTML 簡介

HTML（HyperText Markup Language，超文本標記語言）是用于創建網頁的標準標記語言。

什么是 HTML？

  • HTML 不是編程語言，而是一種標記語言

  • 使用標簽來描述網頁內容

  • 文件擴展名為?.html?或?.htm

  • 由瀏覽器解析并渲染成可視化網頁

1. 基礎 HTML 結構

代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這里是標題</title>
</head>
<body>在這里填入正文</body>
</html>

運行結果描述

網頁顯示一個空白頁面，瀏覽器標簽頁標題為 “這里是標題”，頁面主體區域顯示文字 “在這里填入正文”。

代碼解析
  • <!DOCTYPE html>：聲明文檔類型為 HTML5，告訴瀏覽器按 HTML5 標準解析文檔。
  • <html lang="en">：HTML 根標簽，lang="en"表示頁面主要語言為英語（可改為zh-CN表示中文）。
  • <head>：包含頁面元數據（不直接顯示在頁面上）。
    • <meta charset="UTF-8">：指定字符編碼為 UTF-8，支持多語言（包括中文）。
    • <title>：定義瀏覽器標簽頁的標題，也是搜索引擎抓取的重要信息。
  • <body>：包含頁面所有可見內容（如文字、圖片、鏈接等）。

2. 標題標簽

代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1>我是標題1</h1><h2>我是標題2</h2><h3>我是標題3</h3><h4>我是標題4</h4><h5>我是標題5</h5><h6>我是標題6</h6></body>
</html>
運行結果描述

頁面顯示 6 個不同大小的標題，從上到下依次減小：h1最大，h6最小。每個標題獨占一行，字體加粗。

代碼解析
  • <h1>到<h6>是標題標簽，用于定義不同級別的標題，形成文檔的層級結構（h1為最高級，通常一個頁面只一個h1）。
  • 標題標簽的大小由瀏覽器默認樣式控制（可通過 CSS 修改），且自帶上下外邊距，自動換行。
  • 語義化標簽：幫助搜索引擎理解頁面結構，提升 SEO 效果。

3. 段落標簽

代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1>我是標題1</h1><p>這里可以寫一個段落的文字信息</p></body>
</html>
運行結果描述

頁面頂部顯示最大的標題h1（“我是標題 1”），下方顯示一個段落（“這里可以寫一個段落的文字信息”），段落與標題之間有間距，段落文字正常大小（非加粗）。

代碼解析
  • <p>是段落標簽，用于定義文本段落。
  • 段落標簽自帶上下外邊距，會與其他元素（如標題）自動分隔，且內部文字會自動換行（根據瀏覽器寬度調整）。
  • 與直接寫文本相比，<p>標簽更符合語義化，便于 CSS 統一樣式控制。

4. 超鏈接標簽

代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1>我是標題1</h1><p>這里可以寫一個段落的文字信息</p><a href="https://www.ptpress.com.cn/">鏈接到人民郵電出版社</a></body>
</html>
運行結果描述

頁面包含h1標題、段落文字，以及一個藍色下劃線的文本 “鏈接到人民郵電出版社”。鼠標懸停時指針變為手形，點擊后跳轉到人民郵電出版社官網。

代碼解析
  • <a>是超鏈接標簽，用于創建頁面間的跳轉。
  • href屬性：指定鏈接目標（可以是網址、本地文件路徑或頁面內錨點），此處為絕對 URL（完整網址）。
  • 超鏈接默認樣式：藍色、下劃線，點擊后變為紫色（表示已訪問），可通過 CSS 修改。

5. 注釋的用法（代碼標注說明）

代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1>我是標題1</h1><p>這里可以寫一個段落的文字信息</p><h2>我是標題1</h2></body>
</html>
運行結果描述

頁面顯示h1標題（“我是標題 1”）、段落文字，以及h2標題（“我是標題 1”），h2比h1小。

代碼解析
  • 代碼標注為 “提示注釋的用法”，但實際代碼中未包含注釋。HTML 注釋的格式為<!-- 注釋內容 -->，用于在代碼中添加說明，瀏覽器會忽略注釋內容，不顯示在頁面上。
  • 示例：若添加<!-- 這是一個段落 -->在<p>標簽上方，頁面運行時不會顯示該注釋，僅作為代碼備注。

6. 標簽屬性

代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>這里是標題</title></head>
<body>
<h1>我是標題1</h1>
<p>這里可以寫一個段落的文字信息</p>
<h3 id = 'python' , title = '我是提示信息', style="color: #799961;">Python辦公自動化</h3>
</body>
</html>
運行結果描述

頁面有h1標題、段落，以及h3標題 “Python 辦公自動化”。h3文字為綠色（#799961對應的顏色），鼠標懸停在h3上時，會顯示提示文字 “我是提示信息”。

代碼解析
  • 標簽屬性：通過屬性名=屬性值的形式為標簽添加附加信息，放在標簽名后。
    • id='python'：為h3定義唯一標識（id 值在頁面中需唯一），可用于 CSS 定位或 JavaScript 操作。
    • title='我是提示信息'：定義鼠標懸停時顯示的提示文本，提升用戶體驗。
    • style="color: #799961;"：內聯樣式，直接設置文字顏色為十六進制顏色值#799961（綠色系）。
  • 注意：屬性間應用空格分隔（代碼中用逗號分隔是不規范的，瀏覽器會兼容但不推薦）。

7. 加粗標簽

代碼
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1>我是標題1</h1><p>這里可以寫一個<b>段落</b>的文字信息</p></body>
</html>
運行結果描述

頁面h1標題下方的段落中，“段落” 二字以加粗樣式顯示，其他文字正常。

代碼解析
  • <b>是加粗標簽，用于使包裹的文本顯示為粗體（僅視覺效果，無語義強調）。
  • 替代標簽：<strong>也可加粗文本，但<strong>有語義強調的含義（表示內容重要），更符合語義化，推薦優先使用。
  • 標簽為行內元素：不會破壞段落的連續性，僅影響包裹的部分文字。

8. 上標、下標、加粗、下劃線

代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1><i>我是 </i><sup>標</sup><sub>題</sub>1</h1><p>這里可以寫一個<b>段落</b>的<u>文字信息</u></p></body>
</html>
運行結果描述
  • h1標題中：“我是” 以斜體顯示，“標” 是上標（高于正常文字），“題” 是下標（低于正常文字），整體組合為 “我是?標題 1”。
  • 段落中：“段落” 加粗，“文字信息” 下劃線。
代碼解析
  • 行內格式化標簽（均為行內元素，不換行）：
    • <i>：使文本斜體（視覺效果，無語義），對應語義化標簽<em>（強調文本）。
    • <sup>：上標標簽，常用于數學公式（如x2）或引用標注（如[1]）。
    • <sub>：下標標簽，常用于化學式（如H?O）。
    • <b>：加粗（見第 7 點）。
    • <u>：下劃線，注意與超鏈接默認下劃線區分（可通過 CSS 修改樣式）。

9. 字體顏色

代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1 style="color:rgb(168,168,168)">我是標題1</h1><p style="color:#FF0000">這里寫一個段落的文字信息</p><p style="color:blue">我是第二段內容</p><h2 style="background:LightSeaGreen ; color:blue">我是標題2</h2></body>
</html>
運行結果描述
  • h1標題文字為淺灰色（rgb(168,168,168)）。
  • 第一個段落文字為紅色（#FF0000）。
  • 第二個段落文字為藍色（顏色名blue）。
  • h2標題：背景色為淺海綠色（LightSeaGreen），文字為藍色。
代碼解析
  • 通過style屬性的color設置文字顏色，background設置背景色。
  • 顏色值的 3 種表示方式：
    • RGB 值：rgb(紅,綠,藍)，每個值 0-255（rgb(168,168,168)為灰色）。
    • 十六進制：#RRGGBB（#FF0000為紅色，FF=255，00=0）。
    • 顏色名：如blue（藍色）、LightSeaGreen（淺海綠），瀏覽器預定義的顏色名稱。

10. 字體大小

代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1 style="font-size:38pt">我是標題1</h1><p style="font-size:1cm">我們一起學習Python辦公自動化</p></body>
</html>
運行結果描述
  • h1標題文字大小為 38 點（pt），比默認h1更大。
  • 段落文字大小為 1 厘米（cm），比默認段落文字大。
代碼解析
  • font-size屬性用于設置文字大小，通過style屬性定義（內聯樣式）。
  • 常用單位：
    • pt（點）：1pt≈0.35mm，常用于印刷領域。
    • cm（厘米）：物理長度單位，在不同設備上顯示大小可能不同。
    • 推薦單位：px（像素）、em（相對父元素）、rem（相對根元素），更適合屏幕顯示。

11. 添加網頁圖片

代碼
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1 >我是標題1</h1><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-48382-9/72jpg/48382.jpg" alt="圖片丟失了" width="200px"></body>
</html>
運行結果描述

h1標題下方顯示一張圖片（尺寸 200px 寬），圖片內容為某本書的封面。若圖片鏈接失效，會顯示替代文本 “圖片丟失了”。

代碼解析
  • <img>是圖片標簽（自閉合標簽，無需結束標簽），用于在頁面插入圖片。
  • 核心屬性：
    • src：指定圖片源（可以是絕對 URL、相對路徑或 base64 編碼），此處為網絡圖片 URL。
    • alt：圖片加載失敗時顯示的替代文本，也用于屏幕閱讀器（無障礙訪問），必填屬性。
    • width：設置圖片寬度（200px表示 200 像素），高度會按比例自動調整（避免圖片變形）。

12. 添加音頻

代碼
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1 >我是標題1</h1><audio controls="controls" src="音樂.mp3">音樂丟失了</audio></body>
</html>
運行結果描述

h1標題下方顯示一個音頻播放器（帶播放 / 暫停、進度條、音量控制）。若 “音樂.mp3” 文件存在且路徑正確，可播放音頻；若文件丟失，顯示 “音樂丟失了”。

代碼解析
  • <audio>用于在頁面嵌入音頻文件。
  • 核心屬性：
    • controls：顯示音頻控制界面（瀏覽器默認樣式），值可簡寫為controls。
    • src：指定音頻文件路徑（支持 mp3、wav、ogg 等格式），此處為本地文件 “音樂.mp3”（需與 HTML 文件同目錄，否則需寫相對路徑）。
  • 標簽內容 “音樂丟失了”：當瀏覽器不支持<audio>標簽或文件加載失敗時顯示。

13. 添加網頁視頻

代碼
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1 >播放視頻啦</h1><video src="https://video19.ifeng.com/video09/2025/07/15/p7350679444735922881-102-083526.mp4" controls="controls" width="500"></video></body>
</html>
運行結果描述

h1標題 “播放視頻啦” 下方顯示一個寬度 500px 的視頻播放器（帶播放 / 暫停、進度條、音量、全屏等控件），可播放指定 URL 的視頻。

代碼解析
  • <video>用于嵌入視頻文件，功能類似<audio>但支持視頻。
  • 核心屬性：
    • src：視頻文件 URL（支持 mp4、webm、ogg 等格式），此處為鳳凰網的視頻鏈接。
    • controls：顯示視頻控制界面。
    • width="500"：設置視頻寬度為 500 像素，高度按比例自動調整。
  • 注意：視頻文件體積較大，建議使用 CDN 或流式傳輸，避免加載過慢。

14. div 標簽

代碼
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1 >我是標題1</h1><div style="background: antiquewhite"><h2>我是標題2</h2><p>我這里可以輸入一個段落</p></div></body>
</html>
運行結果描述

h1標題下方有一個淺棕色（antiquewhite）背景的區塊，區塊內包含h2標題 “我是標題 2” 和段落文字，區塊寬度占滿整個頁面（默認）。

代碼解析
  • <div>：塊級容器標簽，用于分組頁面內容（無默認樣式，需配合 CSS 使用）。
  • 作用：
    • 布局：將相關元素組合成一個區塊，便于統一設置樣式（如背景、邊距）。
    • 結構：使頁面代碼更清晰，便于維護。
  • 塊級元素特性：默認獨占一行，寬度默認占滿父元素，可設置寬高（width/height）。

15. 布局示例

代碼
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1 >我是標題1</h1><div style="background: antiquewhite; width: 500px;height: 400px" ><h2>我是標題2</h2><div style="background: brown; width: 200px; height:300px;float: left"><p>我這里可以輸入一個段落</p><p>python <span style="color:blue">辦公</span> 自動化</p></div><div style="background:darkcyan; width:300px;height:300px;float:right"><h3>我是標題3</h3></div><p>最后一段內容</p></div></body>
</html>
運行結果描述
  • 頁面頂部是h1標題。
  • 下方是一個 500px 寬、400px 高的淺棕色背景容器，內有h2標題。
  • 容器內左側：200px 寬、300px 高的棕色背景區塊，包含兩段文字，其中 “辦公” 二字為藍色。
  • 容器內右側：300px 寬、300px 高的深青色背景區塊，包含h3標題。
  • 容器底部有 “最后一段內容” 文字（因浮動元素脫離文檔流，可能顯示在兩個色塊下方或重疊）。
代碼解析
  • 布局核心：通過float（浮動）實現左右分欄。
    • float: left：左側區塊向左浮動，脫離正常文檔流。
    • float: right：右側區塊向右浮動，與左側區塊并排。
  • <span>：行內容器標簽，用于包裹局部文本（如 “辦公”），設置單獨樣式（不破壞段落結構）。
  • 注意：浮動元素可能導致父容器高度塌陷（此處父容器固定了高度400px，避免了塌陷），實際開發中需用清除浮動（clear）處理。

16. 表格標簽

代碼
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1>創建表格</h1><table border="10"><tr><td>第1行中的第1格</td><td>第1行中的第2格</td></tr><tr><td>第2行中的第1格</td><td>第2行中的第2格</td></tr></table></body>
</html>
運行結果描述

h1標題 “創建表格” 下方顯示一個表格：邊框寬度 10px，共 2 行 2 列，單元格內容分別為 “第 1 行中的第 1 格” 等文字。

代碼解析
  • 表格基本結構：
    • <table>：定義表格容器。
    • border="10"：設置表格邊框寬度為 10px（默認無邊框）。
    • <tr>：定義表格行（table row）。
    • <td>：定義表格單元格（table data），包含具體內容。
  • 表格默認樣式：單元格之間有間距，邊框為單實線（可通過border-collapse屬性合并邊框）。

17. 表格表頭

代碼
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1 >我是標題1</h1><table border="2"><th colspan="2">我是表格表頭內容</th><tr><td>第1行中的第1格</td><td>第1行中的第2格</td></tr><tr><td>第2行中的第1格</td><td>第2行中的第2格</td></tr></table></body>
</html>
運行結果描述

h1標題下方的表格：邊框寬度 2px，第一行為表頭（文字加粗居中），內容 “我是表格表頭內容”，跨 2 列；下方有 2 行數據，每行 2 列。

代碼解析
  • <th>：表頭單元格（table header），用于定義表格列標題，默認樣式為文字加粗、居中。
  • colspan="2"：列合并屬性，使表頭單元格橫跨 2 列（colspan值為合并的列數）。
  • 表頭的作用：明確列含義，提升表格可讀性，屏幕閱讀器會識別表頭與內容的關聯。

18. 表格標題

代碼
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>這里是標題</title></head><body><h1 >添加表格標題</h1><table border="2"><caption>我是表格標題</caption><tr><td>第1行中的第1格</td><td>第1行中的第2格</td></tr><tr><td>第2行中的第1格</td><td>第2行中的第2格</td></tr></table></body>
</html>
運行結果描述

h1標題下方的表格：邊框寬度 2px，表格上方顯示標題 “我是表格標題”（居中），表格內容為 2 行 2 列的單元格。

代碼解析
  • <caption>：定義表格標題，必須直接放在<table>標簽內，且在所有其他表格元素之前。
  • 默認樣式：標題位于表格上方，水平居中，與表格之間有間距。
  • 作用：描述表格的整體內容，提升表格的語義化和可讀性。

19. 搭建圖書網站

代碼
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>好書推薦網站</title></head><body><table ><caption><h1 style="color: dodgerblue ;size: 38px">好書推薦網站</h1></caption><tr><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-53619-8/72jpg/53619.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=5e6fe0f3-6ee7-40c2-8c25-9cdf9b0c87e6">心 稻盛和夫的一生囑托</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-48382-9/72jpg/48382.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=ebb3164d-06af-41f5-85bd-60f95a5e09cb">即興演講 掌控人生關鍵時刻</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-41359-8/72jpg/41359.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=25c373dc-e599-4036-8534-a102aad0a776">聰明的投資者（原本第4版，平裝本）</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-24669-1/72jpg/24669.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=c44b8d45-6a91-4800-b91c-c3392379b208">番茄工作法圖解：簡單易行的時間管理方法</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-29236-0/72jpg/29236.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=f642f34c-9f46-4a6f-ad15-c9b9b2875004">股票大作手操盤術——融合時間和價格的利弗莫爾準則</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-41358-1/72jpg/41358.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=67e260c3-b0cb-41bb-b698-6f9dbd54a610">聰明的投資者（第4版，注疏點評版）</a></td></tr><tr><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-37407-3/72jpg/37407.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=4d1c7610-10d7-4d4b-a2f2-dd702983ff8d">極簡主義 風靡歐美的工作與生活理念</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-48908-1/72jpg/48908.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=3eee0747-bfd0-49b1-86b4-18d838480264">活好 我這樣活到105歲</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-38808-7/72jpg/38808.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=ca2de4df-b928-47a8-b8ce-5a725106df07">從零開始學炒股：股票入門與實戰（全彩圖解版）</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-51023-5/72jpg/51023.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=c7309aeb-a7bc-45e4-9818-47bc4b5579f4">低風險創業</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-48388-1/72jpg/48388.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=6498a974-0db5-4379-bb77-eaf098e57a28">政府會計制度詳解與實務 條文解讀 實務應用 案例講解</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-54342-4/72jpg/54342.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=7a745ee7-4a02-412f-942a-bf0131743346">認知覺醒：開啟自我改變的原動力</a></td></tr></table></body>
</html>
運行結果描述
  • 網頁標題為 “好書推薦網站”，頁面頂部顯示藍色的h1標題 “好書推薦網站”（表格標題）。
  • 表格內分 2 行，每行 6 列，共 12 本圖書。
  • 每列是一個米白色（cornsilk）背景的區塊（200px 寬、300px 高），包含圖書封面圖片（200x250px）和書名超鏈接，點擊鏈接跳轉到對應圖書的購買頁。
代碼解析
  • 布局方式：使用<table>表格進行頁面布局（早期常用，現在更推薦 CSS Flexbox/Grid），每行 6 列展示圖書。
  • 組合標簽：
    • <caption>：表格標題，包含網站主標題。
    • <div>：每個圖書項用div包裹，統一設置背景和尺寸。
    • <img>：展示圖書封面，src為網絡圖片 URL。
    • <a>：書名作為超鏈接，href指向圖書購買頁。
  • 注意：表格布局存在語義化差、響應式差等問題，現代網頁開發中已較少使用，建議用 CSS 布局替代。

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

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

相關文章

前端面試寶典---項目難點2-智能問答對話框采用虛擬列表動態渲染可視區域元素（10萬+條數據）

前端面試寶典---項目難點2-智能問答對話框采用虛擬列表動態渲染可視區域元素（10萬+條數據）

引言 在我參與智能問答項目中一個智能體回話并不會像豆包一樣&#xff0c;每次新建會話都是是從頭開始&#xff0c;而項目中你想創建新會話就像chatbox一樣&#xff0c;是點擊橡皮擦開啟新的聊天上下文&#xff0c;但是直接的聊天記錄依然存在&#xff0c;針對超過十萬&#xf…
閱讀更多...
Python元組：不可變數據的強大用法

Python元組：不可變數據的強大用法

文章目錄元組概念1.基本特性2.創建元組3.訪問元素4.元組的不可變性5.元組操作6.元組解包7.命名元組8.元組與列表的比較9.元組的優勢10.適用場景11.常用方法小結元組 概念 元組是 Python 中一個非常重要的內置數據結構&#xff0c;它與列表(list)相似但具有關鍵差異。下面我將…
閱讀更多...
若爾蓋濕地的花湖

若爾蓋濕地的花湖

花湖位于若爾蓋縣和甘肅的郎木寺之間的213國道旁&#xff0c;屬于若爾蓋濕地國家級自然保護區內。又名“梅朵湖”&#xff0c;因陽光照射下湖面色彩斑斕如絢麗的花瓣得名。花湖的大門是梯形高大石柱搭成&#xff0c;我們需要過天橋到對面檢票坐小交通。通過車窗看到一層一層的云…
閱讀更多...
50天50個小項目 (Vue3 + Tailwindcss V4) ? | DoubleClickHeart（雙擊愛心）

50天50個小項目 (Vue3 + Tailwindcss V4) ? | DoubleClickHeart（雙擊愛心）

&#x1f4c5; 我們繼續 50 個小項目挑戰&#xff01;—— DoubleClickHeart組件 倉庫地址&#xff1a;https://github.com/SunACong/50-vue-projects 項目預覽地址&#xff1a;https://50-vue-projects.vercel.app/ 使用 Vue 3 的 Composition API&#xff08;<script se…
閱讀更多...
1-緒論-1-數據結構的基本概念

1-緒論-1-數據結構的基本概念

&#x1f389; 數據結構的魔法世界&#x1f4da;&#x1f468;?&#x1f393;“數據就像大海中的浪花&#xff0c;結構則是那神秘的洋流。掌握數據結構&#xff0c;就是掌握在信息海洋中自由航行的力量&#xff01;”引言&#xff1a;為什么要學數據結構&#xff1f;&#x1f…
閱讀更多...
linux網絡相關命令簡介

linux網絡相關命令簡介

目錄 一、IP命令 1、Link或L：管理網絡接口（網卡） 2、Address或Addr，A：管理Ip地址 3、Route或R：管理路由表
閱讀更多...
教育培訓機構如何為課程視頻添加防盜錄的強水印？

教育培訓機構如何為課程視頻添加防盜錄的強水印？

在知識付費時代&#xff0c;教育培訓機構的課程視頻是核心資產&#xff0c;但盜錄、非法傳播等問題卻讓機構防不勝防。如何在不影響學員觀看體驗的前提下&#xff0c;為課程視頻添加“強效防盜水印”&#xff0c;精準追蹤泄露源頭&#xff1f;本文將為您揭秘高安全性水印的添加…
閱讀更多...
python的形成性考核管理系統

python的形成性考核管理系統

前端開發框架:vue.js 數據庫 mysql 版本不限 后端語言框架支持&#xff1a; 1 java(SSM/springboot)-idea/eclipse 2.NodejsVue.js -vscode 3.python(flask/django)–pycharm/vscode 4.php(thinkphp/laravel)-hbuilderx 數據庫工具&#xff1a;Navicat/SQLyog等都可以 摘要 隨著…
閱讀更多...
A*算法詳解

A*算法詳解

A*算法詳解一、A*算法基礎概念1.1 算法定位1.2 核心評估函數1.3 關鍵數據結構二、A*算法的核心步驟三、啟發函數設計3.1 網格地圖中的啟發函數3.2 啟發函數的選擇原則三、Java代碼實現四、啟發函數的設計與優化4.1 啟發函數的可采納性4.2 啟發函數的效率影響4.3 常見啟發函數對…
閱讀更多...
.net winfrom 獲取上傳的Excel文件 單元格的背景色

.net winfrom 獲取上傳的Excel文件 單元格的背景色

需求&#xff1a;根據Excel某行標注了黃色高亮顏色&#xff0c;說明該行數據已被用戶選中(Excel文件中并沒有“已選中”這一列&#xff0c;純粹用顏色表示)&#xff0c;導入數據到數據庫時標注此行已選中直接上代碼&#xff1a;//選擇Excel文件private void btnBrowse_Click(ob…
閱讀更多...
OpenAI GPT-4o技術詳解：全能多模態模型的架構革新與生態影響

OpenAI GPT-4o技術詳解：全能多模態模型的架構革新與生態影響

本文由「大千AI助手」原創發布&#xff0c;專注用真話講AI&#xff0c;回歸技術本質。拒絕神話或妖魔化。搜索「大千AI助手」關注我&#xff0c;一起撕掉過度包裝&#xff0c;學習真實的AI技術&#xff01; ?? 一、核心定義與發布背景 官方定位 GPT-4o&#xff08;“o”代表“…
閱讀更多...
? 構建真正的高性能即時通訊服務：基于 Netty 集群的架構設計與實現

? 構建真正的高性能即時通訊服務：基于 Netty 集群的架構設計與實現

引子 在前面的文章中&#xff0c;我們基于 Netty 構建了一套單體架構的即時通訊服務。雖然單體架構在開發初期簡單高效&#xff0c;但隨著用戶量的增長和業務規模的擴大&#xff0c;其局限性逐漸顯現。當面對高并發場景時&#xff0c;單體 Netty 服務很容易觸及性能天花板&…
閱讀更多...
原來時間序列挖掘這么簡單

原來時間序列挖掘這么簡單

先搞懂&#xff1a;啥是時間序列&#xff1f;簡單說&#xff0c;時間序列就是按時間順序記下來的數據。比如&#xff1a;你每天早上 8 點測的體重&#xff0c;連起來就是 “體重時間序列”&#xff1b;超市每天的銷售額&#xff0c;連起來就是 “銷售時間序列”&#xff1b;城市…
閱讀更多...
基于Python的豆瓣圖書數據分析與可視化系統【自動采集、海量數據集、多維度分析、機器學習】

基于Python的豆瓣圖書數據分析與可視化系統【自動采集、海量數據集、多維度分析、機器學習】

文章目錄有需要本項目的代碼或文檔以及全部資源&#xff0c;或者部署調試可以私信博主項目介紹每文一語有需要本項目的代碼或文檔以及全部資源&#xff0c;或者部署調試可以私信博主 項目介紹 豆瓣圖書數據智能分析系統是一個集數據采集、清洗、分析與可視化于一體的綜合性項…
閱讀更多...
2.3 數組與字符串

2.3 數組與字符串

學習目標&#xff1a; 理解數組和字符串的概念&#xff08;存儲多個數據的“盒子”&#xff09;。掌握數組的聲明、初始化和遍歷方法。能用字符串處理簡單文本問題&#xff08;如字符計數、回文判斷&#xff09;。1 一維數組 基本概念 比喻&#xff1a; 數組就像“儲物柜”&…
閱讀更多...
C# 網口demo

C# 網口demo

bool _testStatus false; private void btnOpsStart_Click(object sender, EventArgs e) {int delay Convert.ToInt32(txtdelay.Text.Trim());txtView.Clear();txtView.AppendText("******************************************開始烤機*******************************…
閱讀更多...
MATLAB 安裝 ACADO 的完整步驟

MATLAB 安裝 ACADO 的完整步驟

? MATLAB 安裝 ACADO 的完整步驟 &#x1f4e6; 一、準備工作 1. 下載 ACADO Toolkit 官方地址&#xff1a;https://github.com/acado/acado 2. 解壓 ACADO 到你指定的路徑&#xff0c;例如&#xff1a; D:\user\acado-master建議路徑中 不要包含中文或空格。 &#x1f9f…
閱讀更多...
[逆向工程]160個CrackMe入門實戰之Afkayas.1.Exe解析(二）

[逆向工程]160個CrackMe入門實戰之Afkayas.1.Exe解析(二）

[逆向工程]160個CrackMe入門實戰之Afkayas.1.Exe解析&#xff08;二&#xff09; 一、前言 在逆向工程的學習路徑上&#xff0c;CrackMe程序是初學者最好的練手材料。今天我們要分析的是160個CrackMe系列的第二題——Afkayas.1.Exe。這個程序由Afkayas編寫&#xff0c;難度為★…
閱讀更多...
本地電腦安裝Dify|內網穿透到公網

本地電腦安裝Dify|內網穿透到公網

1.安裝Docker Docker: Accelerated Container Application Development 2.添加 PATH 3.安裝Dify https://github.com/langgenius/dify.git 把.env.example文件名改為.env 4.更換鏡像源 {"builder": {"gc": {"defaultKeepStorage": "20G…
閱讀更多...
數據結構自學Day6 棧與隊列

數據結構自學Day6 棧與隊列

1. 棧其實棧與隊列仍然屬于線性表&#xff08;有n個元素構成的集合&#xff0c;邏輯結構呈現線形&#xff09;線形表&#xff1a;順序表&#xff0c;鏈表&#xff0c;棧&#xff0c;隊列&#xff0c;串&#xff08;字符串&#xff09;棧&#xff08;Stack&#xff09;是一種線性…
閱讀更多...
最新文章

Copyright @ 2022~2023