創建圖 figure & figcaption

来源:https://www.cnblogs.com/Charons/archive/2019/07/03/11124128.html
-Advertisement-
Play Games

如報紙、雜誌、報告等其他媒介上看到過圖。通常,圖是由頁面上的文本引述出。 在HTML5出現之前,沒有專門實現這個目的的元素,因此一些開發人員想出了他們自己的解決辦法(通常會使用不那麼理想的、沒有語義的div元素)。 通過引入figure和figcaption,HTML5改變了這種情況。 圖可以是圖表 ...


報紙、雜誌、報告等其他媒介上看到過圖。通常,圖是由頁面上的文本引述出。

HTML5出現之前,沒有專門實現這個目的的元素,因此一些開發人員想出了他們自己的解決辦法(通常會使用不那麼理想的、沒有語義的div元素)。

通過引入figurefigcaptionHTML5改變了這種情況。

圖可以是圖表、照片、圖形 、插圖、代碼片段,以及其他類似的獨立內容。

可以由頁面上的其他內容引出figure,figcaptionfigure的標題,可選,出現在figure內容的開頭或結尾處。

創建圖及其標題的步驟:

(1) 輸入<figure>

(2) 作為可選步驟,輸入<figcaption>始圖的標題。

(3) 輸入標題文字。。

(4) 添加圖像、視頻、數據表格等內容的代碼創建圖。

(5) 輸入</figure>

例如:

 

 1 <body>
 2 
 3 <article>
 4     <h1>2013 Revenue by Industry</h1>
 5 
 6     <p>. . . [report content] . . .</p>
 7 
 8     <figure>
 9         <figcaption><b>Figure 3:</b> Breakdown of Revenue by Industry</figcaption>
10         
11         <img src="img/chart-revenue.png" width="180" height="143" alt="Revenue chart: Clothing 42%, Toys 36%, Food 22%" />
12     </figure>
13 
14     <p>As Figure 3 illustrates, . . . </p>
15 
16     <p>. . . [more report content] . . .</p>
17 </article>
18 
19 </body> 

 

******************************************************************************************************************

提示:

figure元素可以包含多個內容塊。

如圖中可以包含兩個圖表:一個表示收入 ,一個表示利潤。

不過要記住,不管figure里有多少內容,只允許有一個figcaption

*******************************************************************************************************************

******************************************************************************************************************

提示:

不要簡單地將figure作為在文本中嵌入獨立內容實例的方法

這種情況下,通常更適合用aside元素。

************************************************************************************

******************************************************************************************************************

提示:

可選的figcaption必須與其他內容一起包含在figure裡面,不能單獨出現在其他位置。

************************************************************************************

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 跨伺服器備份: 伺服器A:192.168.5.193 測試資料庫TestDB 伺服器B:192.168.5.194 目標:將伺服器A上的測試資料庫定時備份到伺服器B中 需要技術: mysqldump + crontab 步驟: 1. 修改mysql遠程連接訪問許可權 修改mysql的配置文件/mysq ...
  • Hi3109,Hi3110E,Hi3130,Hi3560,Hi3560Q,Hi3560E,Hi3570,Hi3716H,Hi3716C,Hi3716CV200,Hi3712V100,Hi3716MV400,Hi3716MV300,Hi3718MV100,Hi3718CV100,Hi3719MV100 ...
  • 上代碼 ...
  • 一、熱升級Tinker源碼解析與手寫二、熱修複阿裡百川Sophix內核原理三、App Instantgoogle8.0 類似熱更新技術原理與實戰四、強制更新1.銀行應用非對稱加密對稱加密五、組件化框架設計1.組件化之集中式路由--阿裡巴巴ARouter原理(無Intent式)2.手寫ARouter ...
  • 版權聲明:本文為xing_star原創文章,轉載請註明出處! 本文同步自http://javaexception.com/archives/165 客戶端開屏廣告適配的一點經驗 昨天晚上,群里有個小伙伴在問,開屏頁廣告如何適配的問題,ui問應該給切幾種尺寸的圖?這塊算是有點心得,所以特意回答了下。 ...
  • elementUI vue this.$confirm 和el-dialog 彈出框 移動 ...
  • vue + axios + formdata 上傳文件帶參數的爬坑之路 ...
  • 恢復內容開始 一、webpack 預設只能打包處理 JS 類型的文件,無法處理 其他的非 JS 類型的文件; 如果非要處理 非 JS 類型的文件,我們需要手動安裝一些 合適 第三方 loader 載入器; 二、webpack 處理第三方文件類型的過程: 1、發現這個要處理的文件不是JS文件,然後就去 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...