【HTML】基礎學習【數據分析全棧攻略：爬蟲+處理+可視化+報告】

- 第 102 篇 -
Date: 2025 - 05 - 31
Author: 鄭龍浩/仟墨

文章目錄

  • HTML 基礎學習
  • 一 了解HTML
  • 二 HTML的結構
  • 三 HTML標簽
    • 1 標題
    • 2 文本段落
    • 3 換行
    • 4 加粗、斜體、下劃線
    • 5 插入圖片
    • 6 添加鏈接
    • 7 容器
    • 8 列表
    • 9 表格
    • 10 class類

HTML 基礎學習

一 了解HTML

一個網頁分為為三部分：

  • HTML：定義網頁的結構和信息
  • CSS：定義網頁的樣式
  • JavaScript：定義用戶和網頁交互邏輯

而爬蟲的時候，最關心的是網頁上的信息，也就是最關心的是HTML

二 HTML的結構

HTML代碼：

<!DOCTYPE html> <!-- 告知瀏覽器這個文件類型是HTML -->
<html> <!-- 起始標簽，表示開始 --><body><h1>一級標題</h1><p>這是第一段話這是第二段話<br>這是第三段話（換行了）</p><h2>二級標題</h2><h3>三級標題</h3><h6>六級標題</h6></body>
</html> <!-- 閉合標簽，表示結束 -->

網頁顯示
![HTML示例1](https://i-blog.csdnimg.cn/direct/163e84f17f5846db9a955c7c596ae0c6.pngHTML示例

解釋：

<!DOCTYPE HTML> <!-- 告知瀏覽器這個文件類型是HTML -->

必須要寫

<html> <!-- HTML起始標簽，表示開始 -->...
</html> <!-- HTML閉合標簽，表示結束 -->
  • HTML起始標簽、閉合標簽、他們之間的內容，加起來是一個HTML元素
  • HTML標簽是HTML文檔的根，其他的元素必須放在這個HTML元素里邊
<body>...
<body>

<body> 與 <body> 以及之間的內容加起來是文檔的主體內容

<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h6>六級標題</h6>
  • 上面代碼表示的是一級標題到六級標題，最多為六級，加入說寫了七級標簽<h7>默認為普通文本</h7>，那么中間的內容默認為普通文本，而非標題
  • 如果沒有CSS的參與，從以及標題到六級標題，文字的大小是依次遞減的
  • 因為標寫在了body起始與閉合標簽里邊，所以這些標題元素都是body的子元素
  • 而h標題元素和p元素位于同一層級，所以他們的級別是相同的
<p>這是第一段話這是第二段話<br>這是第三段話（換行了）
</p>
  • 因為標寫在了body起始與閉合標簽里邊，所以這些標題元素都是body的子元素
  • 而h標題元素和p元素位于同一層級，所以他們的級別是相同的
  • 雖然在p標簽中寫了兩行文字，但是在網頁顯示的時候，中間其實只有一個空格，如果想換行，需要加<br>
  • 因為第二行結尾寫了<br>，所以第三行的內容在下一行

三 HTML標簽

1 標題

  • 段落標簽是 <h1>一級標題</h1>
  • 有六個級別的標題，從h1到h6，數字越小，級別越高，如果沒有CSS的參與，默認高級別的標題比低級別的標題字號要大
  • 只有6種標題，沒有級別為7的標題，如果寫了級別為7的標題，也只是以普通文本的形式顯示

代碼示例：

<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<h7>普通文本</h7>

網頁顯示：
標題顯示

2 文本段落

  • 文本段落標簽是 <p>文本</p>
  • 每個文本段落元素（ <p>文本</p>）都會自動換行，表示不同的段落
  • 如果文本段落中寫了兩行文字，在網頁顯示的時候不會換行，而是在兩行的文字中間多加了一個空格

代碼示例：

<p>123456789abcdefghi都在一行顯示，只是多了空格
</p>

網頁顯示：
文本段落

3 換行

換行有兩種方式

  • 再寫一個標簽

    每次寫一對段落文本標簽（<p>文本<\p> ），都會自動換行

  • 使用 <br>換行

    想要在一個文本段落內換行，可以在結尾寫上<br>

  • 兩者換行還是有區別的，再寫一個文本標簽明顯中間的空格比較大（在CSS不參與的情況下）

代碼示例：

<h1>第一種方法（寫多個文本標簽）</h1>
<p>第一行第一行 <!--（直接寫在第二行，在網頁中顯示的時候不是換行，而是在第一行與第二行之間多了一個空格） -->
</p>
<p>第二行</p>
<p>第三行</p><h1>第二種方法（使用 \<br\> 換行）</h1>
<p>第一行<br>第二行<br>第三行
</p>

網頁顯示：
換行顯示

4 加粗、斜體、下劃線

使用方法：

  • 加粗 <b>加粗</b>
  • 斜體 <i>斜體</i>
  • 下劃線 <u>下劃線</u>

代碼示例：

<p>加粗：這是<b>加粗</b><br>斜體：這是<i>斜體</i><br>下劃線：這是<u>下劃線</u><br>
</p>

網頁顯示：
加粗斜體下劃線

5 插入圖片

  • <img src=圖片的路徑（或是鏈接, width="500px", height="400px">
  • src 表示圖片的路徑或者鏈接
  • width 設置圖片寬度
  • height 設置圖片高度

代碼示例：

  • 如果不控制長寬
<p><imgsrc=https://i-blog.csdnimg.cn/direct/77052f9b73644c2c99a3339706d72b2f.png>
</p>
  • 如果控制長寬
<p><imgsrc=https://i-blog.csdnimg.cn/direct/77052f9b73644c2c99a3339706d72b2f.pngwidth="5000px"height="2000px">
</p>

網頁顯示：

  • 如果不控制長寬
    插入圖片
  • 如果控制長寬
    插入圖片控制長寬

6 添加鏈接

  • 添加鏈接 <a href="URL" target="_self" title=“文本提示”> 我的主頁 </a>
  • href 設置鏈接
  • target 指定鏈接頁面的打開方式
    默認為_self，表示在當前窗口跳轉鏈接
    還可寫_blank，表示在新窗口跳轉鏈接

代碼示例：

<h1>當前窗口跳轉鏈接</h1>
<a href="https://blog.csdn.net/m0_60605989?ops_request_misc=%7B%22request%5Fid%22%3A%22edf403af96c974cf4fca8118eae2ce05%22%2C%22scm%22%3A%2220140713.130064515..%22%7D&request_id=edf403af96c974cf4fca8118eae2ce05&biz_id=206&utm_medium=distribute.pc_search_result.none-task-user-null-1-142427396-null-null.nonecase&utm_term=%E4%BB%9F%E5%A2%A8&spm=1018.2226.3001.4351" target="_self"title="提示文本">>我的主頁（在當前窗口中打開鏈接）
</a><h1>新建窗口跳轉鏈接</h1>
<a href="https://blog.csdn.net/m0_60605989?ops_request_misc=%7B%22request%5Fid%22%3A%22edf403af96c974cf4fca8118eae2ce05%22%2C%22scm%22%3A%2220140713.130064515..%22%7D&request_id=edf403af96c974cf4fca8118eae2ce05&biz_id=206&utm_medium=distribute.pc_search_result.none-task-user-null-1-142427396-null-null.nonecase&utm_term=%E4%BB%9F%E5%A2%A8&spm=1018.2226.3001.4351" target="_blank"title="提示文本">>我的主頁（在新建窗口中打開鏈接）
</a>

網頁顯示：
將該文件在瀏覽器打開，顯示如下
跳轉鏈接

  • 文本提示
    當光標放在鏈接上，但是不點擊時：
    鏈接的文本提示

  • 點擊第一個鏈接，會在當前窗口中跳轉
    當前窗口

  • 點擊第二個鏈接，會在新的窗口中跳轉
    新的窗口

7 容器

基本介紹
有兩種容器：<div> 和 <span>

  • 他們本身并沒有任何內容，一般讓其他的子元素包含在容器中。
  • 作用：用容器將其他子元素包含在內以后，可以一次性對多個元素添加CSS樣式，比如直接對容器添加CSS樣式（就不用挨個將CSS樣式添加到元素上了）

兩者區別

  • <div> 塊級容器
    • 默認獨占一行，適合布局分組
    • 簡單點說就是，如果一行內寫了多個<div>容器，每個容器都會換行
  • <span> 行內容器
    • 不換行，用于包裹行內元素或文本
    • 簡單點說就是，如果一行內寫了多個<span>容器，會在一行當中顯示

代碼示例：

<!DOCTYPE html>
<html>
<body><h1>div容器:</h1><p>顯示多行</p><div style="background-color: lightblue;"><h3>用戶名</h3><p>郵箱：user@163.com</p></div><!-- 一定會換行 --><div style="background-color: lightgreen;">我在下一行</div><div style="background-color: lightyellow;">我在下一行</div><h1>span容器:</h1><p>顯示一行</p><p>價格：<span style="background-color: pink;">99元</span>（限時優惠）<!-- 不會換行 --><span style="background-color: lightgray;">限購一次</span></p>
</body>
</html>

網頁顯示：
兩中容器

8 列表

列表有兩種：有序列表、無序列表

代碼示例：

<h3>有序列表: </h3>
<ol><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li><li>eee</li>
</ol><h3>無序列表: </h3>
<ul><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li><li>eee</li>
</ul><h3>其他序列（多種編號類型之一）: </h3>
<ol type = "A"><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li><li>eee</li>
</ol>

網頁顯示：
三列表

9 表格

表格標簽： <table>表格</table>

<table border="1"><thead><tr><th>表頭單元格（自帶加粗）</th><td>普通單元格（沒有加粗）</td></tr></thead><tbody><tr><td></td></tr></tbody>
</table>
  • <thead> 表格頭部
  • border="1" 邊框粗細1（如果不寫，則無邊框）
  • <tbody> 表格主體
  • <tr> 表格的行
  • <th> 表頭單元格（自帶加粗）
  • <td> 普通單元格（不帶加粗）

代碼示例：

<table border="1"><thead><tr><th>姓名</th><th>性別</th><td>學號(不加粗)</td></tr></thead><tbody><tr><td>小明</td><td>男</td><td>000001</td></tr><tr><td>小紅</td><td>女</td><td>000002</td></tr></tbody>
</table>

網頁顯示：

  • 無邊框
    表格無邊框

  • 加邊框
    表格加邊框

10 class類

基本介紹

  • clsss 是HTML元素的分類標識，用來給元素分組（分類標識自由命名）
  • 同一個 class 可以分配給多個元素；一個元素可以有多個 class
    作用：
  • 批量控制樣式：通過 CSS 同時修改所有同類元素的樣式
  • JavaScript 操作：方便用 JS 批量選取或操作同類元素

代碼示例：

<h3>舉例1</h3>
<ul class="nav"><li class="nav-item active">首頁</li><li class="nav-item">產品</li><li class="nav-item">關于</li>
</ul><h3>舉例2</h3>
<p class="highlight">這是重點內容</p>
<p class="normal">這是普通內容</p><h3>舉例3</h3>
<!-- 圓角圖像 -->
<img class="round-img" src="a.jpg" alt="示例圖片1">
<!-- 邊框圖像 -->
<img class="border-img" src="b.jpg" alt="示例圖片2">

網頁顯示：
class類

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

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

相關文章

ansible中的inventory.ini 文件詳解

ansible中的inventory.ini 文件詳解

1. 主機定義 主機是 Ansible 管理的最小單元&#xff0c;可以是 IP 或域名&#xff0c;支持直接定義或附加參數。 基礎語法 # 直接定義主機&#xff08;IP 或域名&#xff09; 192.168.1.10 example.com# 定義主機并指定連接參數&#xff08;如端口、用戶等&#xff09; web…
閱讀更多...
SpringBoot整合MyBatis完整實踐指南

SpringBoot整合MyBatis完整實踐指南

在Java企業級應用開發中&#xff0c;SpringBoot和MyBatis的組合已經成為主流的技術選型方案之一。本文將詳細介紹如何從零開始搭建一個基于SpringBoot和MyBatis的項目&#xff0c;包括環境配置、數據庫設計、實體類創建、Mapper接口編寫以及實際應用等完整流程。 一、環境準備…
閱讀更多...
【Rust 輕松構建輕量級多端桌面應用】

【Rust 輕松構建輕量級多端桌面應用】

使用 Tauri 框架構建跨平臺應用 Tauri 是一個基于 Rust 的輕量級框架&#xff0c;可替代 Electron&#xff0c;用于構建高性能、低資源占用的桌面應用。其核心優勢在于利用系統原生 WebView 而非捆綁 Chromium&#xff0c;顯著減小應用體積。 安裝 Tauri 需要先配置 Rust 環境…
閱讀更多...
【Linux】shell腳本的常用命令

【Linux】shell腳本的常用命令

目錄 簡介 一.設置主機名稱 1.1通過文件修改 1.2通過命令修改 二.網絡管理命令nmcli 2.1查看網卡 2.2設置網卡 三.簡單處理字符 3.1seq打印連續字符 3.2printf,echo打印字符 3.3sort排序 3.4uniq冗余處理 3.5cut對字符的截取 四.xargs輸入轉參 簡介 以下命令都是…
閱讀更多...
解決訪問網站提示“405 很抱歉，由于您訪問的URL有可能對網站造成安全威脅，您的訪問被阻斷”問題

解決訪問網站提示“405 很抱歉，由于您訪問的URL有可能對網站造成安全威脅，您的訪問被阻斷”問題

一、問題描述 本來前幾天都可以正常訪問的網站&#xff0c;但是今天當我們訪問網站的時候會顯示“405 很抱歉&#xff0c;由于您訪問的URL有可能對網站造成安全威脅&#xff0c;您的訪問被阻斷。您的請求ID是&#xff1a;XXXX”&#xff0c;而不能正常的訪問網站&#xff0c;如…
閱讀更多...
頁面輸入數據的表格字段（如 Web 表單或表格控件）與后臺數據庫進行交互時常用的兩種方式

頁面輸入數據的表格字段（如 Web 表單或表格控件）與后臺數據庫進行交互時常用的兩種方式

“從頁面輸入數據的表格字段（如 Web 表單或表格控件）在與后臺數據庫進行交互時，常用的有兩種方式：” ?? 兩種方式（操作調用數據庫、綁定數據） ?? 方式1：前端代碼提交數據到后端，再由后端調用數據庫 ?? 原理和邏輯： 用戶在頁面上（比如輸入表單、表格）輸入數據…
閱讀更多...
非阻塞套接字編程詳解

非阻塞套接字編程詳解

阻塞與非阻塞套接字對比 傳統阻塞式套接字編程使用ServerSocket和Socket類時，關鍵方法如connect()、accept()、read()、write()都會導致調用線程阻塞，直到操作完成。這種模式存在兩個主要問題： 客戶端線程在等待數據時會被完全阻塞服務端需要為每個客戶端連接創建獨立線程，…
閱讀更多...
電子電路：初步認識CMOS技術

電子電路：初步認識CMOS技術

CMOS&#xff08;Complementary Metal-Oxide-Semiconductor&#xff0c;互補金屬氧化物半導體&#xff09;是一種半導體技術&#xff0c;廣泛應用于集成電路&#xff08;IC&#xff09;的設計和制造中。以下是關于CMOS的詳細說明&#xff1a; 1. 基本概念 技術原理&#xff1a…
閱讀更多...
【11408學習記錄】考研英語寫作提分秘籍：2013真題邀請信精講+萬能模板套用技巧

【11408學習記錄】考研英語寫作提分秘籍：2013真題邀請信精講+萬能模板套用技巧

邀請信 英語寫作2013年考研英語&#xff08;一&#xff09;真題小作文題目分析寫作思路第一段&#xff1a;第二段&#xff1a;錦囊妙句1&#xff1a;錦囊妙句2&#xff1a;錦囊妙句3&#xff1a;錦囊妙句5&#xff1a;錦囊妙句6&#xff1a;錦囊妙句9&#xff1a;錦囊妙句14&am…
閱讀更多...
Java 注解與反射（超詳細！！！）

Java 注解與反射（超詳細！！！）

Java 注解與反射&#xff08;超詳細&#xff01;&#xff01;&#xff01;&#xff09; 文章目錄 Java 注解與反射&#xff08;超詳細&#xff01;&#xff01;&#xff01;&#xff09;1.注解1.1內置注解1.1.1 SuppressWarnings注解用法 1.2 元注解1.3自定義注解 2.反射2.1 反…
閱讀更多...
用nz-tabel寫一個合并表格

用nz-tabel寫一個合并表格

用nz-tabel寫一個合并表格 <nz-table #basicTable [nzData]"tableSearchStatus.dataList" nzBordered><thead><tr><th>班級</th><th>姓名</th><th>年齡</th><th>電話</th></tr></thead&…
閱讀更多...
第6章 放大電路的反饋

第6章 放大電路的反饋

本章基本要求 會判&#xff1a;判斷電路中有無反饋及反饋的性質 會算&#xff1a;估算深度負反饋條件下的放大倍數 會引&#xff1a;根據需求引入合適的反饋 會判振消振&#xff1a;判斷電路是否能穩定工作&#xff0c;會消除自激振蕩。 6.1 反饋的概念及判斷 一、反饋的…
閱讀更多...
ansible template 文件中如果包含{{}} 等非ansible 變量處理

ansible template 文件中如果包含{{}} 等非ansible 變量處理

在 Ansible 模板中&#xff0c;如果你的 Python 腳本里有大量 {}、f""、或者其他 Jinja 會誤解析的語法&#xff0c;就需要用 {% raw %}…{% endraw %} 把它們包起來&#xff0c;只在需要替換變量的那一行單獨“放行”。例如&#xff1a; {% raw %} #!/usr/bin/env …
閱讀更多...
STM32G4 電機外設篇（一） GPIO+UART

STM32G4 電機外設篇（一） GPIO+UART

目錄 一、STM32G4 電機外設篇&#xff08;一&#xff09; GPIOUART1 GPIO1.1 STM32CUBEMX 配置以及Keil代碼1.2 代碼和實驗現象 2 UART2.1 STM32CUBEMX 配置以及Keil代碼2.2 代碼和實驗現象 附學習參考網址歡迎大家有問題評論交流 (* ^ ω ^) 一、STM32G4 電機外設篇&#xff0…
閱讀更多...
Kotlin 中集合遍歷有哪幾種方式？

Kotlin 中集合遍歷有哪幾種方式？

1 for-in 循環&#xff08;最常用&#xff09; val list listOf("A", "B", "C") for (item in list) {print("$item ") }// A B C 2 forEach 高階函數 val list listOf("A", "B", "C") list.forEac…
閱讀更多...
尚硅谷redis7 99 springboot整合redis之連接集群

尚硅谷redis7 99 springboot整合redis之連接集群

6381宕機&#xff0c;手動shutdown后在redis中&#xff0c;634自動上位變成master結點。 但是在springboot中卻沒有動態感知道redisCluster的最新集群消息&#xff0c;所以找不到我們要檢索的數據。原因是&#xff1a;SpringBoot 2.X版本,Redis默認的連接池采用 Lettuce&#…
閱讀更多...
AI 的早期萌芽？用 Swift 演繹約翰·康威的「生命游戲」

AI 的早期萌芽？用 Swift 演繹約翰·康威的「生命游戲」

文章目錄 摘要描述題解答案題解代碼分析示例測試及結果時間復雜度空間復雜度總結 摘要 你有沒有想過&#xff0c;能不能通過簡單的規則模擬出生與死亡&#xff1f;「生命游戲」正是這樣一種充滿魅力的數學模擬系統。這篇文章我們來聊聊它的規則到底有多神奇&#xff0c;并用 S…
閱讀更多...
web ui自動化工具playwright

web ui自動化工具playwright

playwright是微軟開源的一款web ui自動化工具&#xff0c;該工具有很多亮點&#xff0c;解決以前困擾web UI自動化測試的很多難點。這篇博客將介紹playwright主要特點。 playwright支持錄制減少了編寫成本 如果要使用playwright的錄制功能&#xff0c;有兩種途徑&#xff0c;途…
閱讀更多...
移動安全Android——客戶端靜態安全

移動安全Android——客戶端靜態安全

一、反編譯保護 測試工具 Jadx GitHub - skylot/jadx: Dex to Java decompiler PKID [下載]PKID-APP查殼工具-Android安全-看雪-安全社區|安全招聘|kanxue.com 測試流程 &#xff08;1&#xff09;通過Jadx對客戶端APK文件進行反編譯&#xff0c;觀察是否進行代碼混淆 &…
閱讀更多...
04-redis-分布式鎖-edisson

04-redis-分布式鎖-edisson

1 基本概念 百度百科&#xff1a;控制分布式系統之間同步訪問共享資源方式。 在分布式系統中&#xff0c;常常需要協調他們的動作。如果不同的系統或是同一個系統的不同主機之間共享了一個或一組資源&#xff0c;那么訪問這些資源的時候&#xff0c;往往需要互斥來防止…
閱讀更多...
最新文章

Copyright @ 2022~2023