HTML基礎知識 二（創建容器和表格）

HTML 基礎知識：創建容器和表格（補充版）

HTML（超文本標記語言）是構建網頁的基礎。容器元素用于組織內容，表格用于展示結構化數據，兩者都是網頁設計中不可或缺的部分。

一、HTML 容器元素

容器元素就像網頁的 "收納盒"，幫助我們把相關內容歸類整理，讓頁面結構更清晰，同時也方便后續用 CSS 美化和 JavaScript 交互。

1.?<div>?元素

<div>?是最基礎的塊級容器，相當于一個通用的 "盒子"，沒有固定含義，主要用于分組內容和布局。

特點：

  1. 塊級元素，默認獨占一行
  2. 可以嵌套其他任何元素（包括其他<div>）
  3. 本身沒有任何樣式，完全靠 CSS 定義外觀
  4. 常用于頁面的大區塊劃分，如頭部、內容區、側邊欄等
<header><h1>我的網站</h1><nav><a href="/home">首頁</a><a href="/about">關于</a></nav>
</header><main><article><h2>文章標題</h2><p>文章內容...</p></article><aside><h3>相關鏈接</h3><ul><li><a href="#">鏈接1</a></li><li><a href="#">鏈接2</a></li></ul></aside>
</main><footer><p>? 2023 我的網站</p>
</footer>

2.?<span>?元素

<span>?是行內容器，用于包裹文本或行內元素的小范圍內容。

特點：

  1. 行內元素，不會獨占一行，和其他內容在同一行顯示
  2. 主要用于對文本的部分內容進行特殊處理（如變色、加粗等）
  3. 沒有默認樣式，需要通過 CSS 定義
<p>這是一段普通文本，其中<span class="highlight">這部分文字需要高亮顯示</span>，還有<span class="important">這部分是重要內容</span>。
</p>

3. 語義化容器元素

HTML5 引入了一批有特定含義的容器元素，讓代碼更易讀，也讓搜索引擎和輔助設備能更好地理解頁面結構。

常用語義化容器：

1、<header>: 表示頁面或區域的頭部，通常包含標題、logo、導航等

<header><img src="logo.png" alt="網站logo"><h1>我的網站</h1>
</header>

2、<nav>: 專門用于放置導航鏈接，讓導航區域更明確

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

3、<main>: 表示頁面的主要內容，一個頁面最好只包含一個<main>

<main><h2>今日要聞</h2><p>主要新聞內容...</p>
</main>

4、<article>: 表示獨立完整的內容，如一篇文章、一條評論、一個帖子等

<article><h3>如何學習HTML</h3><p>學習HTML的步驟...</p>
</article>

5、<section>: 表示一個主題性的內容區塊，通常包含一個標題

<section><h3>HTML基礎</h3><p>HTML的基本概念...</p>
</section>

6、<aside>: 表示與主要內容相關的輔助信息，如側邊欄、注釋、補充說明等

<aside><h4>相關推薦</h4><ul><li><a href="#">CSS教程</a></li><li><a href="#">JavaScript教程</a></li></ul>
</aside>

7、<footer>: 表示頁面或區域的底部，通常包含版權信息、聯系方式等

<footer><p>? 2023 我的網站 版權所有</p><p>聯系郵箱: contact@example.com</p>
</footer>

為什么要用語義化容器？

  1. 代碼更易讀，開發者能快速理解頁面結構
  2. 有利于搜索引擎優化（SEO），搜索引擎能更好地識別內容
  3. 方便屏幕閱讀器等輔助設備解析頁面，提高可訪問性
  4. 符合現代 Web 標準，便于維護和擴展

二、HTML 表格

表格用于展示結構化數據，如成績單、產品價格表、員工信息表等，讓數據整齊有序，易于比較和閱讀。

1. 基本表格結構

一個完整的表格由以下元素組成：

  1. <table>: 表格的容器，所有表格內容都放在這里面
  2. <tr>: 表示表格的一行（table row）
  3. <th>: 表示表頭單元格（table header），通常包含列名或行名，默認加粗居中
  4. <td>: 表示數據單元格（table data），包含具體數據

表格的三個可選部分：

  1. <thead>: 表頭部分，包含表格的標題行
  2. <tbody>: 表體部分，包含主要的數據行
  3. <tfoot>: 表尾部分，包含匯總信息等
<table><!-- 表頭 --><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><!-- 表尾 --><tfoot><tr><td colspan="3">總計: 2人</td> <!-- colspan 表示跨3列 --></tr></tfoot>
</table>

2. 表格常用屬性

  1. border: 設置表格邊框的寬度（以像素為單位），但在 HTML5 中推薦用 CSS 設置

    <table border="1"> <!-- 邊框寬度為1像素 -->

  2. colspan: 使單元格跨越多列，值為數字，表示跨越的列數

    <td colspan="2">這是跨2列的單元格</td>

  3. rowspan: 使單元格跨越多行，值為數字，表示跨越的行數

    <td rowspan="3">這是跨3行的單元格</td>

  4. <caption>: 表格標題，放在<table>內部的最前面

<table><caption>員工信息表</caption> <!-- 表格標題 --><!-- 表格內容 -->
</table>

示例：帶合并單元格的表格

<table border="1"><caption>部門人員分配表</caption><tr><th>部門</th><th>姓名</th><th>職責</th></tr><tr><td rowspan="2">技術部</td> <!-- 跨2行 --><td>張三</td><td>前端開發</td></tr><tr><td>李四</td><td>后端開發</td></tr><tr><td>市場部</td><td colspan="2">王五（部門經理）</td> <!-- 跨2列 --></tr>
</table>

實戰案例：搭建圖書館網站

結果演示：

代碼：

<!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></div></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></div></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></div></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></div></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></div></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></div></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></div></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></div></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></div></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></div></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></div></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></div></td></tr></table></body>
</html>

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

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

相關文章

多目標優化|HKELM混合核極限學習機+NSGAII算法工藝參數優化、工程設計優化，四目標（最大化輸出y1、最小化輸出y2,y3,y4），Matlab完整源碼

多目標優化|HKELM混合核極限學習機+NSGAII算法工藝參數優化、工程設計優化，四目標（最大化輸出y1、最小化輸出y2,y3,y4），Matlab完整源碼

基本介紹 1.HKELM混合核極限學習機NSGAII多目標優化算法&#xff0c;工藝參數優化、工程設計優化&#xff01;&#xff08;Matlab完整源碼和數據&#xff09; 多目標優化是指在優化問題中同時考慮多個目標的優化過程。在多目標優化中&#xff0c;通常存在多個沖突的目標&#x…
閱讀更多...
【AI智能體】Dify 基于知識庫搭建智能客服問答應用詳解

【AI智能體】Dify 基于知識庫搭建智能客服問答應用詳解

目錄 一、前言 二、Dify 介紹 2.1 Dify 核心特點 三、AI智能體構建智能客服系統介紹 3.1 基于AI智能體平臺搭建智能客服系統流程 3.1.1 需求分析與場景設計 3.1.2 選擇合適的AI智能體平臺 3.1.3 工作流編排與調試 3.1.4 系統集成與發布 3.2 使用AI智能體構建智能客服系…
閱讀更多...
事務~~~

事務~~~

1、四大特性&#xff1a;A 原子性&#xff1a;對數據的一組操作&#xff0c;要么執行成功&#xff0c;要么不執行C 一致性&#xff1a;事務前后的狀態要保持一致&#xff0c;可以理解為數據的一致性I 隔離性&#xff1a;多個事務之間是隔離的&#xff0c;互不影響D 持久性&…
閱讀更多...
【Linux編譯】./build.sh: line 17: $‘\r‘: command not found

【Linux編譯】./build.sh: line 17: $‘\r‘: command not found

文章目錄0.運行編譯腳本遇到問題&#xff1a;方法 1&#xff1a;使用 dos2unix&#xff08;推薦&#xff09;1. 安裝 dos2unix2. 遞歸轉換整個目錄方法 2&#xff1a;使用 sed&#xff08;無需安裝額外工具&#xff09;方法 3&#xff1a;使用 tr&#xff08;僅單文件&#xff…
閱讀更多...
Weblogic歷史漏洞利用

Weblogic歷史漏洞利用

文章目錄漏洞介紹WebLogic 漏洞概述歷史漏洞利用弱口令CVE-2014-4210CVE-2018-2894CVE-2019-2725CVE-2020-14882漏洞介紹 Oracle WebLogic Server 是一個用于開發和部署企業級 Java 應用的服務器平臺&#xff0c;但其歷史上存在多個嚴重漏洞&#xff0c;尤其以遠程代碼執行&am…
閱讀更多...
[Rust 基礎課程]使用 Cargo 創建 Hello World 項目

[Rust 基礎課程]使用 Cargo 創建 Hello World 項目

Cargo&#xff08;https://crates.io/&#xff09; 是 Rust 語言中最常用的構建工具和包管理工具&#xff0c;我們看看怎么通過 Cargo 創建一個 Hello World 項目并運行。 :::warning 通過官方的 Rust 安裝方式安裝 Rust&#xff0c;Cargo 是同時默認安裝好的了 ::: 首先&am…
閱讀更多...
C語言 --- 函數遞歸

C語言 --- 函數遞歸

函數遞歸一、什么是函數遞歸二、函數遞歸的要點三、示例1.計算n的階乘2.提取一個任意正整數的所有位數&#xff0c;按順序排列3.獲取第n個斐波那契數&#xff0c;最開始的兩個數是1&#xff0c;1四、總結一、什么是函數遞歸 函數遞歸是一種解決問題的思想&#xff0c;是將一個…
閱讀更多...
GitHub 趨勢日報 (2025年07月14日)

GitHub 趨勢日報 (2025年07月14日)

&#x1f4ca; 由 TrendForge 系統生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日報中的項目描述已自動翻譯為中文 &#x1f4c8; 今日獲星趨勢圖 今日獲星趨勢圖1916claude-code795the-book-of-secret-knowledge728free-for-dev547markitdown367…
閱讀更多...
PyTorch中張量（TensorFlow）操作方法和屬性匯總詳解和代碼示例

PyTorch中張量（TensorFlow）操作方法和屬性匯總詳解和代碼示例

1、張量的操作匯總 下面是 PyTorch 中常見的 張量操作方法匯總&#xff0c;包括 創建、索引、變換、數學運算、廣播機制、維度操作 等內容&#xff0c;并附上詳解和代碼示例&#xff0c;便于系統學習與實戰參考。一、張量創建&#xff08;torch.tensor 等&#xff09; import t…
閱讀更多...
統一日志格式規范與 Filebeat+Logstash 實踐落地

統一日志格式規范與 Filebeat+Logstash 實踐落地

背景 在多部門、多技術棧并存的企業環境中&#xff0c;日志收集與分析是保障系統穩定運行的核心能力之一。然而&#xff0c;不同開發團隊采用各異的日志打印方式&#xff0c;導致日志數據結構混亂&#xff0c;嚴重影響后續的收集、存儲、檢索與告警效率。 比如我們大部門就有多…
閱讀更多...
【鴻蒙HarmonyOS】鴻蒙app開發入門到實戰教程(三):實現一個音樂列表的頁面

【鴻蒙HarmonyOS】鴻蒙app開發入門到實戰教程(三):實現一個音樂列表的頁面

鴻蒙里面&#xff0c;實現一個音樂播放的列表,模擬數組的數據展示 實現效果代碼實現 準備數據 songs:SongItemTypes[] [{img:https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.jpg,name:直到世界的盡頭,author:WANDS},{img:https://yjy-teach-oss.oss-cn…
閱讀更多...
2025年滲透測試面試題總結-2025年HW(護網面試) 47（題目+回答）

2025年滲透測試面試題總結-2025年HW(護網面試) 47（題目+回答）

安全領域各種資源&#xff0c;學習文檔&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各種好玩的項目及好用的工具&#xff0c;歡迎關注。 目錄 2025年HW(護網面試) 47 1. UDF提權 2. 命令執行與代碼執行的區別 3. 文件包含利用姿勢 4. 漏洞復現流程 …
閱讀更多...
iPhone 數據擦除軟件評測（最新且全面）

iPhone 數據擦除軟件評測（最新且全面）

當您準備出售、捐贈或回收 iPhone 時&#xff0c;僅僅恢復出廠設置并不足以保證您的個人數據徹底消失。專業的 iPhone 數據擦除軟件采用先進的技術&#xff0c;確保您的敏感信息永久無法恢復。本文回顧了十種流行的 iPhone 數據擦除工具&#xff0c;詳細介紹了它們的功能、優點…
閱讀更多...
Qt 將觸摸事件轉換為鼠標事件（Qt4和Qt5及以上版本）

Qt 將觸摸事件轉換為鼠標事件（Qt4和Qt5及以上版本）

在Qt中&#xff0c;觸摸事件&#xff08;QTouchEvent&#xff09;和鼠標事件&#xff08;QMouseEvent&#xff09;是兩種不同的輸入事件類型。通常情況下&#xff0c;觸摸事件不會自動轉換為鼠標事件&#xff0c;因為它們代表的是不同的輸入設備&#xff08;觸摸屏 vs 鼠標&…
閱讀更多...
Blender 云渲染高效流程：渲染 101 集群加速實戰?

Blender 云渲染高效流程：渲染 101 集群加速實戰?

一、核心優勢&#xff1a;適配 Blender 全場景需求? ? 全渲染器深度兼容? Cycles&#xff08;CPU/GPU 模式&#xff09;&#xff1a;云端 4090 顯卡渲染速度比本地快 12 倍&#xff0c;支持 8K 分辨率 16K 紋理無壓力? Eevee 實時渲染&#xff1a;集群同步輸出預覽動畫&am…
閱讀更多...
SQL學習記錄01

SQL學習記錄01

什么是SQL&#xff1f; Structured Query Language &#xff08;結構化查詢語言&#xff09;&#xff0c;與關系型數據庫進行通信的標準語言。什么是數據庫&#xff1f;“按照數據結構來組織、存儲、和管理數據的倉庫。”一個長期存儲在計算機內的、有組織的、可共享的、統一管…
閱讀更多...
醫療項目如何應對法規變更？

醫療項目如何應對法規變更？

醫療項目應對法規變更的關鍵策略包括建立法規監測體系、及時內部培訓和溝通、調整業務流程和合規標準、技術系統快速迭代升級。 其中&#xff0c;建立有效的法規監測體系尤其重要。這意味著企業需要實時關注監管機構發布的政策更新和公告&#xff0c;迅速理解法規變化內容及對自…
閱讀更多...
AI Top10

AI Top10

AI 前十排名排名團隊/機構名稱國家核心優勢領域1DeepMind英國強化學習、Alpha系列模型2OpenAI美國GPT系列、多模態大模型3DeepSeek中國高效NLP模型、開源生態建設4Google Brain美國Transformer架構、TensorFlow框架5Meta AI (FAIR)美國計算機視覺、Llama系列模型6NVIDIA Resear…
閱讀更多...
LabVIEW通知器函數應用

LabVIEW通知器函數應用

介紹LabVIEW通知器&#xff08;Notifier&#xff09;函數&#xff0c;演示兩類并行循環通信場景&#xff1a;單對循環數據交互、多循環通知聚合&#xff0c;含程序框圖&#xff08;數據發送 / 接收、多循環通知&#xff09;與前面板&#xff08;數據顯示&#xff09;。功能說明…
閱讀更多...
推薦《Python 編程：從入門到實踐》之Python編程的基礎知識

推薦《Python 編程：從入門到實踐》之Python編程的基礎知識

在 Python 學習資源琳瑯滿目的當下&#xff0c;《Python 編程&#xff1a;從入門到實踐》脫穎而出&#xff0c;堪稱 Python 入門的不二之選。本書由經驗豐富的教育工作者撰寫&#xff0c;以清晰易懂的語言和循序漸進的方式&#xff0c;引領讀者從 Python 的基礎語法逐步邁向實際…
閱讀更多...
最新文章

Copyright @ 2022~2023