HTML 簡單的&lt;sup&gt; 標簽

例

上標文本：

這個文本包含 上標 文本。

瀏覽器支持

所有主流瀏覽器都支持 標簽。

標簽定義及使用說明

標簽定義上標文本。上標文本將會顯示在當前文本流中字符高度的一半為基準線的上方，但是與當前文本流中文字的字體和字號都是一樣的。上標文本能用來添加腳注，比如 WWW[1]。

提示：請使用 標簽定義下標文本。

HTML 4.01 與 HTML5之間的差異

無。

全局屬性

標簽支持 HTML 的全局屬性。

事件屬性

標簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

TML（HyperText Markup Language）是一種用于創建網頁的標準標記語言。在HTML中，"元素"和"標簽"是構建網頁的基本組成部分，它們一起定義了網頁的結構和內容。HTML標簽是用來定義HTML元素的開始和結束的，而HTML元素是由標簽及其包含的內容組成的。

參考文檔：https://www.cjavapy.com/article/3303/

1、HTML 元素

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>

2、HTML 標簽

HTML標簽是HTML元素的一部分，用于從邏輯上開始或結束一個元素。標簽通常成對出現，包括一個開始標簽和一個對應的結束標簽，結束標簽的名稱前會有一個斜線（/）作為區分。有些HTML標簽是自閉合的，意味著它們不需要結束標簽，如圖像標簽（<img />）和換行標簽（ ）。

標簽	說明
<!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/

格式化

>格式化標記通常只能是產生幾種不同文本的樣式，但在語義上它們各自有著自己的特點

>如果你只是想有著一些自己的文本樣式，可以嘗試使用“常用html標記”里格式化的內容或css樣式表

>但是這樣會對搜索引擎不友好

>所以我們強調使用語義化標簽，提供給瀏覽器的語義信息越多，瀏覽器就可以越好地把這些信息展示給用戶。

## `<abbr></abbr>`

作用：用于指示該標簽內的內容是一個縮寫

注意點：

1. 常與全局屬性title配合使用，這樣可以在鼠標移動到該處時顯示全稱

`The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.`

2. 在瀏覽器內渲染會使其在內容底部加上短虛線

## `<address></address>`

作用：用于定義文檔或文章作者/擁有者的聯系信息

>如果 `<address>` 元素位于 `<body>` 元素內，則它表示文檔聯系信息。

>如果 `<address>` 元素位于 `<article>` 元素內，則是它表示文章的聯系信息。

注意點：

1. address元素中的文本通常呈現為斜體，大多數瀏覽器會在address元素前后換行

2. address元素不應該用于描述通訊地址，除非它是練習信息的一部分

3. address元素元素通常連同其他信息被包含在footer元素中

```

Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.

Visit us at:

Example.com

Box 564, Disneyland

USA

</address>

```

## ``

作用：定義粗體文本

## `<bdi></bdi>`

作用：定義文本的文本方向，使其脫離周圍文本的方向設置

注意點：

1. bdi指的是bidi隔離

2. 在發布用戶評論或其它難以控制的內容時，可以使用

3. 需要與全局屬性dir配合使用

## `<bdo></bdo>`

作用：定義文字方向

注意點：

1. 請與全局屬性dir配合使用

```

如果您的瀏覽器支持 bi-directional override (bdo)，下一行會從右向左輸出 (rtl)；

Here is some Hebrew text

</bdo>

```

## `<blockquote></blockquote>`

作用：`<blockquote>`標簽用于定義塊引用

注意點：

1. 標簽內的所有文本都會從常規文本中分離出來，一般會上下換行，左右增加外邊距，有時也會使用斜體

2. 換而言之，塊引用擁有它們自己的空間

3. 可選屬性：

`cite=url`規定引用來源

```

WWF's ultimate goal is to build a future where people live in harmony with nature.

</blockquote>

```

主流瀏覽器均不支持cite屬性，但是搜索引擎可以因此獲得更多的信息

## `<q></q>`

作用：用于定義短引用

注意點：

1. 瀏覽器經常在引用內容的人左右添加引號

2. `<q>` 與 `<blockquote>` 的區別:

- `<q>` 標簽在本質上與 `<blockquote>` 是一樣的。不同之處在于它們的顯示和應用。`<q>` 標簽用于簡短的行內引用。如果需要從周圍內容分離出來比較長的部分（通常顯示為縮進地塊），請使用 `<blockquote>` 標簽。

3. 在html4中，firefox和opera中q元素包含的文本必須以引號來開始和結束，但是IE卻不支持這個規定，如果我們為了滿足其它瀏覽器而添加了引號，那么在IE中就會顯示兩組引號。

4. 盡管如此，我們還是推薦使用q元素，因為它在文檔處理和信息提取方面將會有很強的效果

5. 可選屬性：

`cite=citation`定義引用的出處或來源（citation）

## `<cite></cite>`

作用：表示所含文本是對某個參考文獻的引用

注意點：

1. 在顯示上與blockquote元素類似，均是斜體

2. 但是它不會有上下左右的外邊距

3. 通常情況下還要把引用包裹在一對`<a></a>`標簽中，然后把超鏈接指向引用

`<cite><a href=URL>引用名</a></cite>`

>`<cite>` 標簽還有一個隱藏的功能：它可以使你或者其他人從文檔中自動摘錄參考書目。我們可以很容易地想象一個瀏覽器，它能夠自動整理引用表格，并把它們作為腳注或者獨立的文檔來顯示。`<cite>` 標簽的語義已經遠遠超過了改變它所包含的文本外觀的作用；它使瀏覽器能夠以各種實用的方式來向用戶表達文檔的內容。

## `<code></code>`

作用：定義計算機代碼文本

注意點：

1. code元素并不能將元素內的內容以原樣顯示，瀏覽器仍然會解析內容而不跳過

2. code只是給內容的字體改為等寬字體，即它只是將內容轉變為暗示這是計算機代碼的內容

## `<var></var>`

作用：`<var>` 標簽表示變量的名稱，或者由用戶提供的值。

注意點：

1. 用 `<var>` 標簽標記的文本通常顯示為斜體。

2. `<var>` 標簽是計算機文檔中應用的另一個小竅門，這個標簽經常與 `<code>` 和 `<pre>` 標簽一起使用，用來顯示計算機編程代碼范例及類似方面的特定元素。

## `<smap></smap>`

作用：用于從一段上下文中抽取一些字符

例子：

`字符序列 <samp>ae</samp> 可能會被轉換為 æ 連字字符。`

效果：

`字符序列 ae 可能會被轉換為 ? 連字字符。`

## `<ins></ins>`

作用：定義一個插入文本

注意點：

1. 顯示效果是加入下劃線

## `<dfn></dfn>`

作用：用于標記特殊術語或短語

注意點：

1. 瀏覽器通常會將dfn元素內的內容顯示為斜體

2. 應當盡量少的使用，比如在技術性的文檔中，在第一次提到一個術語時，可以加上dfn元素，而在相同文檔的后續中，對于同一個術語，應避免使用dfn

## ``

作用：定義一個強調文本

注意點：

1. 在顯示結果上，它依然是斜體

2. 如果你只是為了定義一個斜體的內容，可以考慮使用``或css樣式表

3. 對于強調的內容應當不宜過多，否則無法突出想要表達的內容

## ``

作用：定義一個語氣更加強烈地強調文本

注意點：

1. 常識告訴我們應較少使用em元素的話，那么strong元素出現的次數應該更少，限制其使用可以讓這個標記更加的引人注意和有效

## ``

作用：定義一個斜體文本或傾斜的文本

## `<kbd></kbd>`

作用：定義鍵盤文本

注意點：

1. 顯示效果為等寬字體

## ``(HTML5)

作用：定義帶有記號的文本

注意點：

1. 與加粗不同，它會將文字加上背景色

## `<meter></meter>`(HTML5)

作用：定義已知范圍或分數值內的標量測量，也被稱為gauge（尺度）

注意點：

1. 這是一個html5的新標簽，假如你把文檔類型聲明為html4或以下和xhtml，標簽本身的效果將會受到影響

2. `<meter>`標簽不應用于指示進度條的進度，如果標記進度，請使用`<progress></progress>`標簽

可用屬性：

1. form=form_id-->規定meter元素所屬的一個或多個表單

2. high=number-->規定被視作高的值的范圍

3. low=number-->規定被視作高的值的范圍

4. max=number-->規定范圍的最大值

5. min=number-->規定范圍的最小值

6. optimum=number-->規定度量的優化值

7. value=number-->必須。規定度量的當前值

```

```

## `<progress></progress>`(HTML5)

作用：標示任務的進度（進程）

`<progress value="22" max="100"></progress> `

注意點：

1. 需要與js結合使用，來顯示任務的進度

2. progress標簽不適合使用來表示度量衡，這種情況請使用meter元素來替代

可用屬性：

max=number-->規定任務一共需要多少工作

value=number-->規定任務已經完成多少工作

## `<pre></pre>`

作用：用于定義預格式化的文本，即通常會保留空格和換行，文本會呈現為等寬字體

注意點：

1. pre元素常用于表示計算機的源代碼，但是計算機的源代碼（html）直接放入瀏覽器仍會解析（需要使用`<`和`>`等符號實體）

2. 會導致內容截斷的標簽絕不能包含在pre元素中，如標題、p元素、address元素

3. 可選的屬性：

`width=number`定義每行的最大字符數

## `<ruby></ruby>`

作用：可用于定義一個ruby注釋（中文注音或字符）

注意點：

1. ruby元素與rt元素一同使用

2. ruby元素由需要一組字符和一個提供信息的rt元素組成

3. 還包括一個可選的rp元素，定義瀏覽器不支持ruby元素時顯示的內容

## `<rt></rt>`

作用：定義字符的解釋或發音

## `<rp></rp>`

作用：定義瀏覽器不支持ruby元素時顯示的內容

## `<s></s>`

作用：定義加刪除線的文本

注意點：

1. `<s>`標簽是`<strike>`標簽的縮寫版本，但html4和xhtml中已經不再贊成使用它了，就是說，它早晚有一天會消失

2. 請使用`<del></del>`替代它

## `<del></del>`

作用：給元素中的內容上加上刪除線

注意點：

1. 請與`<ins></ins>`標簽配合使用，來描述文檔中的更新與修正

2. 可選的屬性：

- cite=URL

- datetime=YYYMMDD （定義文本被刪除的日期和時間）

## ``

作用：標簽內的元素呈現小號字體的效果

注意點：

1. 如果被包裹字體已經是最小號的字體了，那這個標簽將不起任何作用

2. ``是可以嵌套的，從而把文字連續的縮小，直到到達最小的一號字

## ``

作用：標簽中的內容會以當前文本流中字符高度的一般來顯示（上標）

注意點：

1. 雖然顯示效果與文本流中其他元素不一樣，但是它們的字體字號都是一樣的

2. 這個標簽在向文檔添加注腳以及表示方程式中的指數時非常有效，如果與`<a></a>`標簽結合使用可以創建出很好的超鏈接注腳

## ``

作用：標簽中的內容會以當前文本流中字符高度的一般來顯示（下標）

## `<template></template>`

作用：可以作為一個容器，但是它并不會存在于DOM樹中

注意點：

1. 多用于包裹一段代碼，對其綁定事件，使其可以控制是否隱藏

2. 一個檢查方法：

```

if (document.createElement("template").content) {

document.write("Your browser supports template!");

} else {

document.write("您的瀏覽器不支持 template！");

}

```

## ``

作用：定義下劃線文本

注意點：

1. 應盡量避免使用，用戶可能會把它混淆為一個超鏈接

## `<time></time>`(HTML5)

作用：定義一個公歷的時間或日期，時間和時區偏移是可選的

可選的屬性：

1. datetime=datetime-->規定日期/時間。否則由元素內容給定日期時間

2. pubdate=pubdate-->指示 `<time>` 元素中的日期 / 時間是文檔（或 `<article>` 元素）的發布日期。

## ``(HTML5)

一段帶有 Word Break Opportunity 的文本：

```

如果想學習 AJAX，那么您必須熟悉 XMLHttpRequest 對象。

```

作用：Word Break Opportunity (``) 規定在文本中的何處適合添加換行符。

注意點：如果單詞太長，或者您擔心瀏覽器會在錯誤的位置換行，那么您可以使用 `` 元素來添加 Word Break Opportunity（單詞換行時機）。

在線咨詢

上一篇：創建HTML網頁時，可以采用多種布局和設計風格
下一篇：11.HTML圖片格式與優化

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 簡單的&amp;lt;sup&amp;gt; 標簽

1、HTML 元素

2、HTML 標簽

您的項目需求

HTML 簡單的<sup> 標簽