HTML簡單的 &lt;rp&gt;

HTML簡單的 <rp> 標簽

例

一個 ruby 注釋：

<ruby>

漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>

</ruby>

瀏覽器支持

IE 9+、Firefox、Opera、Chrome 和 Safari 支持 <rp> 標簽。

注釋：IE 8 或更早版本的 IE 瀏覽器不支持 <rp> 標簽。

標簽定義及使用說明

<rp> 標簽在 ruby 注釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內容。

ruby 注釋是中文注音或字符。在東亞使用，顯示的是東亞字符的發音。

將 <rp> 標簽與 <ruby> 和 <rt> 標簽一起使用：

<ruby> 元素由一個或多個需要解釋/發音的字符和一個提供該信息的 <rt> 元素組成，還包括可選的 <rp> 元素，定義當瀏覽器不支持 "ruby" 元素時顯示的內容。

HTML 4.01 與 HTML5之間的差異

<rp> 標簽是 HTML5 中的新標簽。

全局屬性

<rp> 標簽支持 HTML 的全局屬性。

事件屬性

<rp> 標簽支持 HTML 的事件屬性。

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

例

一個導航鏈接實例：

<nav><ahref="/html/">HTML</a> | <ahref="/css/">CSS</a> | <ahref="/js/">JavaScript</a> | <ahref="/jquery/">jQuery</a></nav>

瀏覽器支持

目前大多數瀏覽器支持 <nav> 標簽。

標簽定義及使用說明

<nav> 標簽定義導航鏈接的部分。

并不是所有的 HTML 文檔都要使用到 <nav> 元素。<nav> 元素只是作為標注一個導航鏈接的區域。

在不同設備上（手機或者PC）可以制定導航鏈接是否顯示，以適應不同屏幕的需求。

HTML 4.01 與 HTML5中的差異

<nav> 是 HTML5 的新標簽。

全局屬性

<nav> 標簽支持全局屬性，查看完整屬性表 HTML全局屬性。

事件屬性

<nav> 標簽支持所有 HTML事件屬性。

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

載說明：原創不易，未經授權，謝絕任何形式的轉載

雅虎（Yahoo!）創建了一個簡單的CSS框架，被稱為Pure.css（https://purecss.io/），以提供一套基礎樣式集，可作為網頁開發的起點。Pure.css旨在輕量、模塊化和響應式，使構建快速加載、適用于任何設備的移動友好網站變得簡單。在本文中，我們將討論Pure.css的工作原理以及如何使用它。

為了使默認樣式在多個瀏覽器中保持一致，我們使用Normalize.css來構建Pure.css。因此，您可以利用Pure.css來構建在所有現代瀏覽器中看起來相同的網站，而不必擔心不一致或跨瀏覽器兼容性問題。除了提供一組基本樣式外，Pure.css還包括幾個預設計的UI組件，您可以使用這些組件快速創建常見的用戶界面元素，如按鈕、菜單、表單和網格。這些組件是模塊化和可定制的，因此您可以輕松地為您的網站創建您想要的外觀和感覺，而無需編寫大量自定義的CSS代碼。

好處

使用Pure.css有幾個好處，包括：

它輕巧且加載速度快：Pure.css的設計目標是簡潔輕量，這意味著它不會拖慢您的網站。這對于移動用戶尤為重要，他們可能擁有較慢的互聯網連接，并對頁面加載時間更為敏感。
它具有響應式和移動友好的特性：Pure.css包含一個響應式網格系統，可以自動適應不同的屏幕尺寸和設備。這意味著您的網站將在臺式電腦、平板電腦和智能手機上呈現出很好的效果，而無需編寫任何自定義代碼。
它易于學習和使用：Pure.css的設計簡單直觀，所以即使你是新手，也能很快上手。Pure.css網站上的文檔和示例清晰簡潔，能幫助你迅速入門。
它是可定制和可擴展的：盡管Pure.css是極簡主義的，但它仍然提供了許多靈活性和定制選項。您可以輕松定制您的網站的樣式和布局，以創建您想要的外觀和感覺，您還可以通過編寫自定義樣式和組件來擴展Pure.css。
它得到了很好的支持并且被廣泛使用：Pure.css是由知名且備受尊敬的科技公司雅虎開發和維護的。此外，許多網站和網頁開發人員都在使用Pure.css，這意味著有一個龐大的用戶社區可以在你有任何問題或需要支持時提供幫助。

缺點

然而，也有一些缺點：

Pure.css的主要缺點之一是它是一個非常簡潔的框架，這意味著它不像其他CSS框架那樣提供很多功能和樣式。如果你正在開發一個需要許多自定義樣式和組件的復雜項目，這可能是一個不利之處。
另一個潛在的缺點是Pure.css使用Normalize.css，這是一個樣式表，旨在使默認樣式在不同瀏覽器中保持一致。雖然這通常是一件好事，但有時候如果您使用某些HTML元素或CSS樣式，而這些元素或樣式并不被所有瀏覽器支持，就可能會出現問題。在這些情況下，您可能需要編寫額外的CSS代碼來修復不一致性，這可能會耗費時間并令人沮喪。
最后，由于Pure.css是一個相對較新的框架，它的文檔和支持可能不如其他一些CSS框架那樣完善。雖然Pure.css的官方網站提供了一些文檔和示例，但有時可能不太清楚如何使用某些功能或解決某些問題。此外，由于Pure.css社區規模相對較小，你可能會更難找到問題的答案或從其他用戶那里獲得幫助。

兼容性

Pure.css旨在與所有現代Web瀏覽器兼容，包括：

Google Chrome
Mozilla Firefox
Apple Safari
Microsoft Edge
Opera

入門指南

在開始編寫代碼之前，了解Pure.css的安裝過程非常重要，這個過程非常簡單。請記住，無論您選擇哪個框架，都可以按照本文的安裝部分中所述的步驟來實施前端項目的安裝過程。

通過NPM安裝

要使用npm（Node包管理器）安裝Pure.css，您必須在計算機上安裝npm。如果您尚未安裝npm，可以按照npm網站上的說明進行安裝。安裝npm后，您可以在終端或命令提示符中運行以下命令來安裝Pure.css：

npm install purecss

這將下載最新版本的Pure.css并將其添加到您的項目中。然后，您可以通過在頁面的 Pure.css<head>Pure.css 部分添加以下代碼行來在HTML文檔中包含Pure.css樣式表：

<link rel="stylesheet" href="node_modules/purecss/build/pure.css" />

這將加載Pure.css樣式表并將其樣式應用于您的網站。然后，您可以在您的HTML和CSS代碼中使用Pure.css提供的樣式和組件來創建您想要的網站外觀和感覺。

要在React應用程序中使用Pure.css，您首先必須在項目中包含Pure.css樣式表。然后，您必須使用“className”屬性將Pure.css類應用于您的JSX組件。下面是一個示例，展示了如何在項目中使用Pure.css樣式表：

import 'purecss/build/pure.css';

需要注意的是，使用npm安裝Pure.css的確切步驟可能會因您的特定項目設置和要求而有所不同。如果您遇到任何問題或疑問，可以查閱Pure.css文檔或向Pure.css社區尋求幫助。

通過CDN進行設置

要在項目文件中加載Pure.css樣式表，您只需使用CDN即可。這樣做非常簡單；您只需將下面提供的CDN復制并粘貼到您的HTML頁面的頭部即可：

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure.css" />

一旦將上述代碼粘貼到您的HTML文檔中，您的項目將能夠使用Pure.css樣式。

組件

Pure.css提供了一系列標準UI組件和基本構建元素的樣式，如按鈕、圖片、表單和表格，以及可用于創建響應式設計的布局模塊。在本節中，我們將使用Pure.css最基本的構建塊，這些構建塊也是項目中最常用的。你只需要熱熱手，我們就可以寫出漂亮的代碼。我們之前列出的大多數組件將在本組件部分進行處理。

Buttons

要在Pure.css中使用按鈕，您必須在HTML文檔中包含Pure.css樣式表。您可以通過在頁面的 <head> 部分添加以下代碼行來實現：

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure.css">

一旦包含了Pure.css樣式表，您可以使用 <button> 元素和 pure-button 類來創建按鈕。以下代碼創建了一個基本的 Pure.css 按鈕：

<button class="pure-button">Button</button>

這將創建一個帶有默認Pure.css樣式的按鈕，包括淺灰色背景和圓角。

以下代碼創建一個藍色按鈕：

<button class="pure-button pure-button-primary pure-button-rounded">
  Button
</button>

您還可以在其他HTML元素上使用 Pure.css pure-button Pure.css 類，例如 Pure.css <a>Pure.css 和 Pure.css <input> Pure.css ，以創建具有不同樣式和行為的按鈕。

以下代碼創建了一個樣式為按鈕的鏈接：

<a class="pure-button" href="#">Link Button</a>

Pure.css中按鈕的確切外觀和行為將取決于您使用的特定類別以及應用于您的網站的其他樣式。

Colors

Pure.css 包含一組預定義的顏色，您可以在樣式表中使用它們。這些顏色是使用 CSS 變量定義的，這意味著您可以在樣式表中使用它們，而無需指定確切的顏色值。

例如，下面的代碼將Pure.css pure-button-primary Pure.css變量應用于按鈕，這將使其呈現藍色：

<button class="pure-button pure-button-primary">A Primary Button</button>

您可以在Pure.css文檔中（https://purecss.io/）了解更多有關可用顏色及其使用方法的信息。如果您在應用顏色方面遇到困難，仍然可以使用標準的內聯或外部樣式來為按鈕或任何其他元素著色。

Images

在Pure.css中，您可以使用Pure.css pure-img-responsive Pure.css類來使圖像具有響應性。我們將利用該類名來創建一個使用Pure.css的圖像庫。通過將圖像的響應性與網格類結合，我們可以輕松地獲得圖像庫。

<div class="pure-g">
  <div class="pure-u-1-4">
    <img
      class="pure-img-responsive"
      src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg"
      alt="Peyto Lake"
    />
  </div>
  <div class="pure-u-1-4">
    <img
      class="pure-img-responsive"
      src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg"
      alt="Train"
    />
  </div>
  <div class="pure-u-1-4">
    <img
      class="pure-img-responsive"
      src="http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg"
      alt="T-Shirt Store"
    />
  </div>
  <div class="pure-u-1-4">
    <img
      class="pure-img-responsive"
      src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg"
      alt="Mountain"
    />
  </div>
</div>

通過在上述代碼中的圖像標簽中使用“pure-img-responsive”類來實現響應式。為了使照片以行的方式靈活排列，我使用Pure.css中的網格中的“pure.g”類將它們分組。

Forms

要在Pure.css中使用表單，您需要在HTML文檔中包含Pure.css樣式表。一旦包含了Pure.css樣式表，您就可以使用 Pure.css <form> Pure.css 元素和 Pure.css pure-form Pure.css 類來創建表單。例如，以下代碼創建了一個基本的Pure.css表單：

<form class="pure-form">
  <fieldset class="pure-group">
    <input type="text" class="pure-input-1-2" placeholder="Username" />
    <input type="text" class="pure-input-1-2" placeholder="Password" />
    <input type="email" class="pure-input-1-2" placeholder="Email" />
  </fieldset>
  <fieldset class="pure-group">
    <input type="text" class="pure-input-1-2" placeholder="A title" />
    <textarea
      class="pure-input-1-2"
      placeholder="Textareas work too"
    ></textarea>
  </fieldset>
  <button type="submit" class="pure-button pure-input-1-2 pure-button-primary">
    Sign in
  </button>
</form>

從上面的輸出中，您可以看到我們使用Pure.css的默認樣式創建了一個表單，包括用于提交的藍色背景按鈕。使用額外的自定義樣式，您可以改變表單及其字段的外觀。

Grids

當提到網站的布局時，網格是一種具有行和列的結構，類似于電子表格。它為網站材料提供了統一的結構，并使頁面更易于用戶閱讀和導航。一旦包含了Pure.css樣式表，您就可以使用 Pure.css <div> Pure.css 元素和 Pure.css pure-g Pure.css 類來創建網格。在pure.css中使用網格時，單位的寬度由各種類名表示。

<div class="pure-g">
  <div class="pure-u-1-3">
    <div class="l-box">
      <h3>HTML</h3>
      <p>HTML is a markup language, not a programming language.</p>
    </div>
  </div>
  <div class="pure-u-1-3">
    <div class="l-box">
      <h3>JavaScript</h3>
      <p>
        Programmers all over the world use Javascript to make dynamic and
        interactive online apps and browsers.
      </p>
    </div>
  </div>
</div>

以下代碼創建了一個包含三列的網格：

<div class="pure-g">
  <div class="pure-u-1-3">
    <div class="l-box">
      <h3>HTML</h3>
      <p>HTML is a markup language, not a programming language.</p>
    </div>
  </div>
  <div class="pure-u-1-3">
    <div class="l-box">
      <h3>CSS</h3>
      <p>
        Cascading Style Sheets (CSS) is a stylesheet language used to describe
        the presentation of a document written in HTML
      </p>
    </div>
  </div>
  <div class="pure-u-1-3">
    <div class="l-box">
      <h3>JavaScript</h3>
      <p>
        Programmers all over the world use Javascript to make dynamic and
        interactive online apps and browsers.
      </p>
    </div>
  </div>
</div>

一個網站的網格系統非常重要。點擊這里訪問官方Pure.css文檔，了解更多關于網格的信息。

Layouts

布局描述了我們如何安排設計內容的元素。布局的兩個主要目標是展示重要信息和以邏輯和一致的方式呈現數據。

例如，以下代碼為頭部創建了一個基本的Pure.css布局：

<div class="header">
  <div class="pure-menu pure-menu-horizontal">
    <a class="pure-menu-heading" href="">
      <img
        width="50"
        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHe9oaoqfZGtjciURX7A5d-ZyHKJo5qZTWXALSog96ywzns4wDGfmmQkNdkRVyfRGmqjw&usqp=CAU"
        alt=""
      />
    </a>
    <ul class="pure-menu-list">
      <li class="pure-menu-item pure-menu-selected">
        <a href="#" class="pure-menu-link">Home</a>
      </li>
      <li class="pure-menu-item">
        <a href="#" class="pure-menu-link">Blog</a>
      </li>
      <li class="pure-menu-item">
        <a href="#" class="pure-menu-link">About</a>
      </li>
      <li class="pure-menu-item">
        <a href="#" class="pure-menu-link">FAQ</a>
      </li>
      <li class="pure-menu-item">
        <a href="#" class="pure-menu-link">Login</a>
      </li>
    </ul>
  </div>
</div>

Tables

要在Pure.css中使用表格，您必須在HTML文檔中包含Pure.css樣式表。您可以通過在頁面的 Pure.css<head>Pure.css 部分添加以下代碼行來實現：

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure.css" />

一旦包含了Pure.css樣式表，您可以使用 Pure.css <table> Pure.css 元素和 Pure.css pure-table Pure.css 類來創建表格。例如，以下代碼創建了一個基本的Pure.css表格：

<table class="pure-table pure-table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Make</th>
      <th>Model</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Honda</td>
      <td>Accord</td>
      <td>2009</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Toyota</td>
      <td>Camry</td>
      <td>2012</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Hyundai</td>
      <td>Elantra</td>
      <td>2010</td>
    </tr>
  </tbody>
</table>

默認情況下，表格將使用 Pure.css 的默認樣式來實現表格，包括灰色邊框和表頭的灰色背景。更多表格信息可以在 Pure.css 官方網站上找到，您可以通過點擊此鏈接訪問。

Menus

要在 Pure.css 中使用菜單，您仍然需要在HTML文檔中包含 Pure.css 樣式表。您可以通過在頁面的 Pure.css <head> Pure.css 部分添加以下代碼行來實現：

您可以使用 Pure.css<ul>Pure.css 元素和`Pure.css pure-menu-list Pure.css`類來創建菜單。例如，以下代碼生成一個基本的Pure.css菜單：

<div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
      <a href="#" class="pure-menu-link"
        ><img
          width="100"
          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHe9oaoqfZGtjciURX7A5d-ZyHKJo5qZTWXALSog96ywzns4wDGfmmQkNdkRVyfRGmqjw&usqp=CAU"
          alt=""
      /></a>
    </li>
    <li class="pure-menu-item pure-menu-selected">
      <a href="#" class="pure-menu-link">Home</a>
    </li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
      <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
      <ul class="pure-menu-children">
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Email</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Twitter</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Map</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

以上截圖的輸出是一個菜單，它使用了 Pure.css 的默認樣式，包括在懸停在“聯系”選項卡容器上時的淺灰色背景。向菜單添加更多自定義類可以改變其設計。有關菜單的更多信息可以在Pure.css的官方網站上找到，您可以通過點擊此鏈接訪問。

如何在 Pure.css 中防止樣式沖突

為了避免在 Pure.css 中出現樣式沖突，您可以使用CSS命名空間來隔離您網站的樣式與Pure.css的樣式。命名空間是一個前綴，它被添加到CSS類的名稱中，有助于防止與其他樣式表中具有相同名稱的類發生沖突。例如，您可以創建一個名為 Pure.css my-website Pure.css 的命名空間，并將其用作樣式表中所有類的前綴，如下所示：

<style>
  .my-website-container {
    /* styles for container elements */
  }

  .my-website-button {
    /* styles for buttons */
  }
</style>

<div class="my-website-container">
  <button class="my-website-button">Button</button>
</div>

這將確保您樣式表中的類是唯一的，并且不會與Pure.css樣式表或頁面上包含的任何其他樣式表中的任何類發生沖突。此外，您可以在樣式表中使用 Pure.css !important Pure.css 規則來防止 Pure.css 樣式覆蓋您的樣式。 Pure.css !important Pure.css 規則指定應將特定樣式應用于元素，而不管應用于該元素的任何其他樣式。例如，如果您想要覆蓋Pure.css按鈕的默認顏色，可以在樣式表中使用 Pure.css !important Pure.css 規則，如下所示：

.my-website-button {
  color: red !important;
}

這將確保按鈕的顏色始終為紅色，而不受應用于按鈕的任何其他樣式的影響。使用命名空間和 Pure.css !important Pure.css 規則可以幫助防止Pure.css中的樣式沖突，并確保您的樣式在網站上一致應用。

結論

在這個教程中，我們學習了如何設置Pure.css，并創建了一些Pure.css示例來理解語法的核心思想。如果你想為自己或客戶構建一個漂亮而快速的網站，你可以根據需要修改這個示例，或者你可以嘗試將所學的知識應用到構建其他漂亮的網站中。

由于文章內容篇幅有限，今天的內容就分享到這里，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請別忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想獲取更多前端技術的知識，歡迎關注我，您的支持將是我分享最大的動力。我會持續輸出更多內容，敬請期待。

在線咨詢

上一篇：Web Pages-發布網站
下一篇：零基礎教你學前端-42、iframe

您的項目需求

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

整合營銷服務商

HTML簡單的 &amp;lt;rp&amp;gt;

好處

缺點

兼容性