HTML5 <ruby>註釋標簽

来源:http://www.cnblogs.com/kumayato/archive/2017/02/22/6431295.html
-Advertisement-
Play Games

今天學了HTML5的ruby標簽,覺得挺有趣的,來記錄一下。 ruby可以作註釋標簽,內部有rp和rt標簽。 <ruby> 標記定義註釋或音標。 <rp> 告訴那些不支持ruby元素的瀏覽器該如何顯示。 <rt> 標記定義對ruby註釋的內容文本。 學完這個標簽的第一反應就是,我有方法給那些不會讀的 ...


今天學了HTML5的ruby標簽,覺得挺有趣的,來記錄一下。

ruby可以作註釋標簽,內部有rp和rt標簽。

<ruby>  標記定義註釋或音標。

<rp>    告訴那些不支持ruby元素的瀏覽器該如何顯示。

<rt>      標記定義對ruby註釋的內容文本。

學完這個標簽的第一反應就是,我有方法給那些不會讀的日語單詞做假名註釋啦!!!

代碼如下,來給一句日語做個小註釋:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ruby註釋標簽</title>
    <style>
        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <p><ruby>月明<rp>(</rp><rt>つきあ</rt><rp>)</rp></ruby>かり昇る頃</p>
    <p>燈る <ruby>赤提燈 <rp>(</rp><rt>あかちょうちん</rt><rp>)</rp></ruby></p>
</body>
</html>

效果如下:

火狐谷歌:

還有一些瀏覽器不能支持<ruby>標簽,這個時候<rp>標簽就顯得尤其重要,<rp>我理解為“人品”的意思。人品好的瀏覽器就以在上面註釋的形式顯示出來,就如上圖,而人品不好的就需要<rp>標簽來補充註釋。

<rp>裡面的文本會在瀏覽器相容的時候不顯示出來,只有<rt>裡面的文本以在上面註釋的方式出現。而不相容的情況,<rt>裡面註釋的文本會在後面顯示,就如下圖,這個時候<rp>裡面包裹的內容就可以顯示出來。

 

以上。

 


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

-Advertisement-
Play Games
更多相關文章
  • 設計模式主要三類型:創建型、結構型行型 其創建型: 一、Singleton單例模式:保證類實例並提供訪問全局訪問點 二、Abstract Factory抽象工廠:提供創建系列相關或相互依賴象介面須指定具體類 三、Factory Method工廠:定義用於創建象介面讓類決定實例化哪類Factory M ...
  • Californium 源碼分析 1. Californium 項目簡介 Californium 是一款基於Java實現的Coap技術框架,該項目實現了Coap協議的各種請求響應定義,支持CON/NON不同的可靠性傳輸模式。 Californium 基於分層設計且高度可擴展,其內部模塊設計及介面定義 ...
  • 高併發的核心技術-冪等的實現方案 一、背景 我們實際系統中有很多操作,是不管做多少次,都應該產生一樣的效果或返回一樣的結果。 例如: 1. 前端重覆提交選中的數據,應該後臺只產生對應這個數據的一個反應結果。 2. 我們發起一筆付款請求,應該只扣用戶賬戶一次錢,當遇到網路重發或系統bug重發,也應該只 ...
  • 領域驅動設計(DDD)對開發者來說是面向對象設計的自然進化 總的來說DDD包括兩個部分: 分析部分通常是由開發人員去和領域專家溝通業務知識,但是開發人員和領域專家是有代溝的, 為了簡化溝通成本,這時統一語言出場,統一語言是項目各方共同使用的辭彙表, 在溝通業務知識,又或者叫溝通需求階段,開發人員需要 ...
  • Spring 的運行原理,包括spring如何創建對象(IOC 控制反轉)和將對象的屬性註入(DI 依賴註入)。詳細介紹spring是如何配置各種bean,並且維護bean與bean之間的關係。 ...
  • 一、持久化類概述 就是一個JavaBean,這個JavaBean與表建立了映射關係。這個類就稱為是持久化類。 簡單理解為 持久化類=JavaBean+映射文件。 持久化類:是指其實例需要被Hibernate持久化到資料庫中的類。持久化類符合JavaBean的規範,包含一些屬性,以及與之對應的getX ...
  • 1 (function(window,undefined){ 2 var arr = [], 3 push = arr.push, 4 slice = arr.slice; 5 //首先要做的就是封裝一個parseHtml函數 6 //要註意的是,parthHtml要放在一個自調用函數內 7 var... ...
  • 瀏覽器緩存控制 Last-Modified/ If-Modified-Since 在瀏覽器第一次請求某一個URL時,伺服器端的返回狀態碼200,內容是客戶端請求的資源,同時有一個Last-Modified的屬性標記此文件在伺服器端最後被修改的時間。 Last-Modified格式類似這樣:Last- ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...