整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
例
使用 <figure> 元素標記文檔中的一個圖像：
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>
瀏覽器支持
IE 9、Firefox、Opera、Chrome 和 Safari 支持 <figure> 標簽。
注釋：IE 8 或更早版本的 IE 瀏覽器不支持 <figure> 標簽。
標簽定義及使用說明
<figure> 標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）。
<figure> 元素的內容應該與主內容相關，同時元素的位置相對于主內容是獨立的。如果被刪除，則不應對文檔流產生影響。
HTML 4.01 與 HTML5之間的差異
<figure> 標簽是 HTML 5 中的新標簽。
提示和注釋
提示：<figcaption> 元素被用來為 <figure> 元素定義標題。
全局屬性
<figure> 標簽支持 HTML 的全局屬性。
事件屬性
<figure> 標簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
TML（HyperText Markup Language）是一種用于創建網頁的標準標記語言。在HTML中，"元素"和"標簽"是構建網頁的基本組成部分，它們一起定義了網頁的結構和內容。HTML標簽是用來定義HTML元素的開始和結束的，而HTML元素是由標簽及其包含的內容組成的。
參考文檔：https://www.cjavapy.com/article/3303/
HTML元素指的是從開始標簽到結束標簽的所有內容。它們是HTML文檔的構建塊，用于創建和組織網頁內容。HTML元素可以包含文本、圖片、鏈接、表格等多種類型的數據。元素可能包括一個開始標簽和一個結束標簽，也可能只有一個標簽（在自閉合元素的情況下）。
1） <!DOCTYPE> 聲明
用于定義文檔類型，告訴瀏覽器此文檔使用哪個HTML版本。
<!DOCTYPE html>2） <html>
根元素，包含整個HTML文檔。
<html lang="en">
</html>3） <head>
包含文檔的元數據，如標題、字符集聲明和鏈接到樣式表。
<head>
<title>頁面標題</title>
<meta charset="UTF-8">
</head>4）<title>
定義文檔的標題，顯示在瀏覽器的標題欄或頁面的標簽頁上。
<title>這是文檔的標題</title>5）<body>
包含文檔的所有可見內容，如文本、圖片、鏈接和其他多媒體元素。
<body>
<h1>這是一個主標題</h1>
<p>這是一個段落。</p>
</body>6） <header>
定義一個區域或頁面的頭部，通常包含標題和導航鏈接。
<header>
<h1>網站標題</h1>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關于</a></li>
</ul>
</nav>
</header>7） <footer>
定義頁面或區域的頁腳部分，通常包含版權信息、聯系信息等。
<footer>
<p>版權所有 ? 2024</p>
</footer>8） <nav>
定義導航鏈接的部分，用于頁面內或頁面間的導航。
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
</ul>
</nav>9）<section>
定義文檔中的一個獨立部分，通常與標題一起使用。
<section>
<h2>章節標題</h2>
<p>這是該章節的一些內容。</p>
</section>10. <article>
定義可以獨立于內容其余部分的完整自包含內容，例如博客帖子或新聞文章。
<article>
<h2>文章標題</h2>
<p>文章內容...</p>
</article>11. <aside>
定義與周圍內容稍微分離的內容，如側邊欄或廣告欄。
<aside>
<p>這是一些附加信息。</p>
</aside>12. <figure> 和 <figcaption>
<figure> 定義獨立的流內容（如圖表、圖像、代碼示例等），<figcaption> 提供該內容的標題。
<figure>
<img src="image.jpg" alt="描述性文本">
<figcaption>圖像標題</figcaption>
</figure>HTML標簽是HTML元素的一部分，用于從邏輯上開始或結束一個元素。標簽通常成對出現，包括一個開始標簽和一個對應的結束標簽，結束標簽的名稱前會有一個斜線（/）作為區分。有些HTML標簽是自閉合的，意味著它們不需要結束標簽，如圖像標簽（<img />）和換行標簽（<br />）。
標簽 | 說明 |
<!DOCTYPE> | 聲明文檔類型和HTML版本。 |
<html> | 標識一個HTML文檔的根元素。 |
<head> | 包含了文檔的元數據。 |
<title> | 指定文檔的標題。 |
<body> | 包含了可見的頁面內容。 |
<h1> - <h6> | 定義標題，從 <h1> 到 <h6> 重要性遞減。 |
<p> | 定義段落。 |
<br> | 插入一個換行符。 |
<hr> | 在頁面上繪制一條水平線。 |
<b> | 定義粗體文本。 |
<i> | 定義斜體文本。 |
<u> | 定義下劃線文本。 |
<strong> | 定義重要文本。 |
<em> | 定義強調文本。 |
<mark> | 定義被標記或高亮的文本。 |
<small> | 定義小號文本。 |
<sub> | 定義下標文本。 |
<sup> | 定義上標文本。 |
<a> | 定義超鏈接。 |
<img> | 在頁面中嵌入圖像。 |
<ul> | 定義無序列表。 |
<ol> | 定義有序列表。 |
<li> | 定義列表項。 |
<table> | 定義表格。 |
<th> | 定義表格的表頭單元格。 |
<tr> | 定義表格的行。 |
<td> | 定義表格單元。 |
<form> | 定義HTML表單。 |
<input> | 定義輸入控件。 |
<textarea> | 定義多行文本輸入控件。 |
<button> | 定義按鈕。 |
<select> | 定義下拉列表。 |
<option> | 定義下拉列表中的選項。 |
<article> | 定義文章。 |
<section> | 定義文檔中的一個區域（或節）。 |
<header> | 定義介紹性內容或導航鏈接的容器。 |
<footer> | 定義注腳或文檔的頁腳。 |
<nav> | 定義導航鏈接的部分。 |
<aside> | 定義側邊欄內容。 |
使用示例：
<!DOCTYPE html>
使用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML標簽使用示例</title>
</head>
<body>
<header>
<h1>歡迎來到我的網頁</h1>
<nav>
<a href="#content">主要內容</a> |
<a href="#contact-form">聯系表單</a>
</nav>
</header>
<section id="content">
<article>
<h2>HTML基礎</h2>
<p>HTML是構建網頁的基石。<strong>標簽</strong>是它的核心組成部分。<mark>本文</mark>介紹了一些最常用的HTML標簽。</p>
</article>
<aside>
<h3>注意</h3>
<p>記得檢查HTML5的新特性和標簽。</p>
</aside>
<ul>
<li>文本標簽</li>
<li>列表</li>
<li>表格</li>
<li>表單</li>
</ul>
<ol>
<li>先介紹基礎</li>
<li>然后是進階</li>
</ol>
<table>
<tr>
<th>標簽</th>
<th>描述</th>
</tr>
<tr>
<td><p></td>
<td>段落標簽</td>
</tr>
<tr>
<td><a></td>
<td>鏈接標簽</td>
</tr>
</table>
</section>
<section id="images">
<h2>圖片</h2>
<img src="example.jpg" alt="示例圖片">
</section>
<footer>
<section id="contact-form">
<h2>聯系我們</h2>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="email">電子郵件:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="提交">
</form>
</section>
<p>? 2024 HTML標簽示例</p>
</footer>
</body>
</html>參考文檔：Hhttps://www.cjavapy.com/article/3303/
TML <base> 元素
指定用于一個文檔中包含的所有相對 URL 的根 URL。一份中只能有一個 <base> 元素。
包含屬性href 和
target 可以指定a 標簽的默認窗口打開行為
<base href="https://www.baidu.com/img/123" target="_banlk"></base> 默認就打開新的窗口 <a href="aaa">123</a>
使用
<base href="https://www.baidu.com/img/"></base> <img src="bd_logo1.png?where=super"></img>
雖然在codepen 的代碼上編寫的但是能夠正確的通過base url + img 的src 定位顯示出圖片
content 標簽
HTML <aside> 元素
表示一個和其余頁面內容幾乎無關的部分，被認為是獨立于該內容的一部分并且可以被單獨的拆分出來而不會使整體受影響。
HTML <blockquote> 元素
（或者 HTML 塊級引用元素），代表其中的文字是引用內容。通常在渲染時，這部分的內容會有一定的縮進（注 中說明了如何更改）。若引文來源于網絡，則可以將原內容的出處 URL 地址設置到 cite 特性上，若要以文本的形式告知讀者引文的出處時，可以通過 <cite> 元素。
HTML <figure> 元素
代表一段獨立的內容, 經常與說明（caption） <figcaption> 配合使用, 并且作為一個獨立的引用單元。當它屬于主內容流（main flow）時，它的位置獨立于主體。這個標簽經常是在主文中引用的圖片，插圖，表格，代碼段等等，當這部分轉移到附錄中或者其他頁面時不會影響到主體。
Inline text semantics
HTML 縮寫元素（<abbr>）
用于展示縮寫，并且可以通過可選的 title 屬性提供完整的描述。
ps: 完整描述樣式貌似不能自定義
HTML鍵盤輸入元素(<kbd>)
用于表示用戶輸入，它將產生一個行內元素，以瀏覽器的默認monospace字體顯示。
HTML標記文本元素(< Mark >)
表示為引用或符號目的而標記或突出顯示的文本，這是由于標記的段落在封閉上下文中的相關性或重要性造成的。
ps:項目中大量使用span 標記的做法不符合html5 的語義化
HTML Ruby Base（<rb>）
元素用于分隔<ruby>注釋的基本文本組件（即正在注釋的文本）。一個<rb>元素應該包裝基本文本的每個單獨的原子段。
ps: 拼音注解
<samp> 元素
用于標識計算機程序輸出，通常使用瀏覽器缺省的 monotype 字體（例如 Lucida Console）。
HTML 中的<small>
元素將使文本的字體變小一號。(例如從大變成中等，從中等變成小，從小變成超小)。在HTML5中，除了它的樣式含義，這個元素被重新定義為表示邊注釋和附屬細則，包括版權和法律文本。
HTML <sub> 元素定義了一個文本區域，出于排版的原因，與主要的文本相比，應該展示得更低并且更小。
ps: 下腳標
HTML <sup> 元素定義了一個文本區域，出于排版的原因，與主要的文本相比，應該展示得更高并且更小。
ps: 上腳標
HTML <u> 元素
使文本在其內容的基線下的一行呈現下劃線。在HTML5中, 此元素表示具有未標注的文本跨度，顯示渲染，非文本注釋，例如將文本標記為中文文本中的專有名稱(一個正確的中文標記), 或 將文本標記為拼寫錯誤
HTML <map>
與 <area> 屬性一起使用來定義一個圖像映射(一個可點擊的鏈接區域).
HTML <track> 元素
被當作媒體元素—<audio> 和 <video>的子元素來使用。它允許指定計時字幕（或者基于時間的數據），例如自動處理字幕。
HTML <object> 元素
（或者稱作 HTML 嵌入對象元素）表示引入一個外部資源，這個資源可能是一張圖片，一個嵌入的瀏覽上下文，亦或是一個插件所使用的資源
ps: 支持引入的資源類型
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
關于支持資源類型的測試
http://joliclic.free.fr/html/object-tag/en/index.php
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
