[03]HTML基礎之行內標簽

来源:https://www.cnblogs.com/juetan/archive/2020/06/01/13027074.html
-Advertisement-
Play Games

1.<ruby>標簽 顯示東亞字元的發音(如中文,日文等),與<rp>,<rt>標簽搭配。 //<ruby>為單個發音字元的容器,<rp>為不支持<ruby>標簽時顯示的內容, //<rt>為字元的發音 <ruby> 中 <rp>(</rp> <rt>zhong</rt> <rp>)</rp> 文 ...


1.<ruby>標簽

顯示東亞字元的發音(如中文,日文等),與<rp><rt>標簽搭配。

//<ruby>為單個發音字元的容器,<rp>為不支持<ruby>標簽時顯示的內容,
//<rt>為字元的發音
<ruby>
    中 <rp>(</rp> <rt>zhong</rt> <rp>)</rp>
    文 <rp>(</rp> <rt>wen</rt> <rp>)</rp>
</ruby>

2.<em>標簽

表示局部內容的強調,表現為斜體字,與<i>標簽效果相同。

//強調小貓,強調的是哪種動物可愛
<em>小貓<em>是可愛的動物
//強調事實,強調“小貓是可愛的動物”這一事實
小貓<em>是<em>可愛的動物

儘管,標簽與標簽效果一致,但兩者是有區別的。前者表示italic(斜體),後者表示emphasis(強調)。從語義化的角度來說,不建議使用標簽。

3. <strong>標簽

表示全局內容的強調,表現為粗體字,與<b>標簽效果相同。

//`第一章`只是引用,“歷史起源”才是文章的主題
第一章 <strong>歷史起源</strong>
//有時候,也用來暗示用戶優先查看內容
第一章 歷史起源 <strong>第二章 文明起源<strong> 第三章 科技起源

雖然,<b>標簽與<strong>標簽效果一致,但兩者是有卻別的。前者表示bold(粗體),後者表示stronger emphasis(更強烈的強調)。從語義化的角度來說,不建議使用<b>標簽。

4. <ins>標簽

表示插入內容,表現為下劃線,與<u>標簽效果相同。

//表示插入內容
滾滾長江東逝水,浪花<ins>淘盡</ins>英雄

儘管,<ins>標簽與<u>標簽效果一致,但兩者是有區別的。前者表示underline(下劃線),後者表示insert(插入)。從語義化的角度來說,不建議使用<i>標簽。

5. <del>標簽

表示刪除內容,表現為中劃線,與<s>標簽效果相同。

//表示刪除內容
青山<del>仍舊</del>依舊在,幾度夕陽紅

儘管,<del>標簽與<s>標簽效果一致,但兩者是有區別的。前者表示underline(下劃線),後者表示delete(刪除)。從語義化的角度來說,不建議使用<u>標簽。

6. <bdo>標簽

表示文字方向,如同把文字鏡像後再顯示;與<bdi>相對,雖也表示文字方向,但如同把內容分塊再鏡像顯示。

//正常文字顯示
<p>123 456 789<p>
//bdo從右往左
<bdo dir="rtl">123 456 789</bdo>
//bdi從右往左
<bdi dir="rtl">123 456 789</bdi>

7.<sup>標簽

表示上標文本;與標簽相對,後者表示下標文本。

//上標文本
2020<sup>2</sup> - 2019<sup>2</sup> = 4076362
//下標文本
Mg + ZnSO<sub>4</sub> = MgSO<sub>4</sub> + Zn

8. <small>標簽

表示旁註信息,如免責聲明、註意事項、法律限制或版權聲明等。

//表示某些輔助性的信息
康師傅酸菜牛肉麵,酸爽好回味! <small>圖片僅供參考,請以實物為準</small>

9. <mark>標簽

表示文本的標記,表現為黃色背景,突出強調的文本。

//突出顯示某部分文本
絕彈博客,記錄<mark>前端</mark>學習的個人博客

10. <hr>標簽(單標簽)

表示分隔符(獨占一行),表現為一條橫線;而<br>標簽(單標簽)表示換行符,<wbr>標簽(單標簽)表示另一種換行符。

//如果第一行詩句末尾不加<br>標簽,文本不會換行
題臨安邸
<hr>
山外青山樓外樓,西湖歌舞幾時休? <br>
暖風熏得游人醉,直把杭州作汴州。

//<wbr>標簽適用於英文文本,當某個英文單詞過長時,用來決定在哪處地方換行
this is verrrrrrrry <wbr> looooooooooooooong <wbr> text

11. <abbr>標簽

表示詞句的縮寫,表現為圓點下劃線,滑鼠懸浮時顯示完整的名稱;<dfn>標簽表示特殊術語或短語,表現為略微傾斜的文本。

//使用title屬性表示完整的名稱
<abbr title="HyperText Markup Language">HTML</abbr>是一門標記語言。
//不太作為口語出現的內容或有特定內涵的詞語
<dfn title="深圳市騰訊科技有限公司">騰訊</dfn>是一家互聯網公司。

12. <blockquote>標簽

表示較長的引用,表現為左右兩側縮進的文本;<q>標簽表示較短的引用,用cite屬性表明引用來源(URL形式);<cite>標簽表示作品(比如書籍、歌曲、電影、電視節目、繪畫、雕塑等等)的標題。

//cite屬性標註引用的來源(URL形式)
<blockquote cite="http://theoldmanandthesea.com">人生來就不是為了被打敗的,人能
夠被毀滅,但是不能夠被打敗。man is not made for defeat, a man can be destoryed 
but not defeated.--老人與海</blockquote>

//cite屬性標註引用的來源(URL形式)
人生不過匆匆數十載,<q cite="http://litletime.com">一寸光陰一寸金<q>,珍惜當下,
不負青春不負年華。

//表示作品標題
<cite>中國神話史<cite>是袁珂先生的著作。

13. <code>標簽

表示代碼;<samp>標簽表示電腦樣本;<kbd>標簽表示鍵盤輸入;<var>標簽表示變數,表現為斜體;<tt>標簽表示列印文本;

//代碼
<code>console.log('hello,world')</code>

//電腦樣本
字元序列 <samp>ae</samp> 可能會被轉換為 &aelig; 連字字元。

//鍵盤輸入
按<kbd>ESC</kbd>鍵即可退出游戲。

//變數
let <var>countity</var> = <var>num</var> + 1;

//列印文本
<tt>列印文本</tt>

14. <time>標簽

表示時間,datetime屬性表示時間,pubdate屬性表示文檔或<article>元素的發佈時間。

//表示節日或特殊事件的日期都可以
<time datetime="2019-12-25">今年聖誕節</time>公司發了福利。

//表示文章的發佈事件,使用pubdate屬性(布爾屬性)
標題:HTML的通用行內標簽有哪些? <time datetime="2019-12-22" pubdate>發佈時間:
2019-12-22</time>

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

-Advertisement-
Play Games
更多相關文章
  • 本文來源於公眾號【胖滾豬學編程】,轉載請註明出處。 從今天開始,想和你一起死磕ElasticSearch,學習分散式搜索引擎,跟著胖滾豬就對了! 既然是ES的第一課,那麼最重要的是讓你愛上它!不想說那些單純的優勢、概念了,直接上大廠的生產案例,才是最能吸引你的!跟著大廠走,沒問題的! 為啥選擇ES? ...
  • 在系統自帶的UILabel中是沒有吸頂及吸底部的方法的(如果有請告訴我,我沒找到),於是乎重寫label 1 // 2 // gzhVerticalAlignmentLabel.h 3 // VerticalAlignmentLabel 4 // 5 // Created by 郭志賀 on 202 ...
  • 新聞 谷歌推遲Android 11 Beta發佈 Android Studio 4.0發佈 為Android 11做好準備 谷歌Pixel 4a XL外形首曝:新機夭折 不會發佈 Play商城測試“看他人玩”區域 游戲頁面顯示相關視頻 教程 Kotlin Vocabulary | 揭秘協程中的 su ...
  • 一、 函數 1. 函數定義​ 2.使用typeof檢查一個函數對象的時候,會返回function。 3.函數和數組都是對象 4.基本使用方式 (1)不常用的方式 var func = new Function("函數體”): (2)常用的方式 i.函數聲明式 function f(參數){ 語句; ...
  • 原文地址:https://stackoverflow.com/questions/33910294/what-is-the-difference-between-article-and-section-in-html5 <section>標簽 : section,漢語意思為部分,這個標簽定義網頁上的 ...
  • 摘要 看著我稚嫩的代碼,今天我應該也可以過個快樂的兒童節吧,哈哈哈哈哈。既然是兒童節,那我就要給小伙伴們發發禮物,什麼禮物呢?那就是小編在使用的前端開發工具,保證你會有個難忘的兒童節。好,下麵就由我帶大家一一的看看禮物吧。 工欲善其事必先利其器 對於一個前端開發人員來說,擁有一款適合自己的“武器”是 ...
  • 1. <table>標簽 表格容器,儘量避免用屬性書寫樣式,而是用CSS來表達 border: 數字 //表格邊框寬度 2. <caption>標簽 表格的標題,一般出現在表格上方,可通過CSS更改方向 3. <tr>標簽 表示表格的一行。 4. <th>標簽 表頭的一個單元,與<tr>相比,一般做 ...
  • 1. <p>標簽 表示段落,多個空白符會合併成一個;<pre>標簽表示預文本段落,所有空白符都不合併。 //臨江仙詩句 <p>滾滾長江東逝水,浪花淘盡英雄,是非成敗轉頭空。 青山依舊在,幾度夕陽紅。</p> <pre>白髮漁樵江渚上,慣看秋月春風,一壺濁酒喜相逢。 古今多少事,都付笑談中。</pre ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...