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