基礎
此元件為所有 HTML 元素提供預設樣式。
Normalize.css
基礎元件利用著名的 Normalize.css 的樣式，使元素在所有瀏覽器中呈現一致，並套用其預設樣式，例如顏色、邊距、字體大小等等。
注意 表單、按鈕 和 表格 元素預設不會被標準化或設定樣式。這會在它們特定的元件類別中發生。UIkit 盡可能少地對純 HTML 元素套用樣式，以保持強健性，並避免與第三方 CSS 發生衝突。
連結
使用 <a> 元素將文字轉換為超文字。您也可以將 .uk-link 類別新增至 <span> 或類似元素，以套用預設的連結樣式。如需其他樣式選項，請查看連結元件。
文字層級語意
以下列表簡要概述最常用的文字層級語意及其使用方法。
| 元素 | 描述 |
|---|---|
<abbr> |
使用 帶有標題的 abbr 元素 定義縮寫。 |
<b> |
使用 b 元素建立粗體文字。 |
<cite> |
使用 cite 元素 定義作品的標題。 |
<code> |
使用 code 元素定義內嵌程式碼片段。 |
<del> |
使用 |
<dfn> |
使用 帶有標題的 dfn 元素 建立定義詞彙。 |
<em> |
使用 em 元素強調文字。 |
<i> |
使用 i 元素區隔部分文字。 |
<ins> |
使用 ins 元素 將文件變更標示為插入的文字。 |
<kbd> |
使用 鍵盤輸入元素 以瀏覽器的預設等寬字體顯示輸入。 |
<mark> |
使用 mark 元素 反白顯示沒有語意的文字。 |
<q> |
使用 q 元素定義內嵌引文。內部的 q 元素 |
<s> |
使用 |
<samp> |
使用 samp 元素 定義範例輸出。 |
<small> |
使用 small 元素 減少小字體的文字強調。 |
<span> |
使用 span 元素 定義內嵌容器。 |
<strong> |
使用 strong 元素暗示額外的重要性。 |
<sub> |
使用 sub 元素定義下標文字。 |
<sup> |
使用 sup 元素定義上標文字。 |
<u> |
使用 u 元素定義帶有底線的文字。 |
<var> |
使用 var 元素 定義變數。 |
嵌入內容
在 UIkit 中，圖片和其他元素（例如 <audio>、<canvas>、<img>、<svg> 和 <video>）預設為響應式。如果版面變窄，它們會調整大小並保持比例。若要避免此行為，請將 實用工具元件 中的 .uk-preserve-width 類別新增至元素或任何容器。
調整瀏覽器視窗大小以查看圖片的響應式行為。
<div class="uk-width-large">
<img src="images/photo.jpg" width="1800" height="1200" alt="Image">
</div>
段落
使用 <p> 元素建立段落。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>標題
使用 <h1> 到 <h6> 元素定義標題。
新增 .uk-h1、.uk-h2、.uk-h3、.uk-h4、.uk-h5 或 .uk-h6 類別來變更標題的大小，例如讓 h1 看起來像 h3。如需其他樣式選項，請查看標題元件。
h1 標題 1
h2 標題 2
h3 標題 3
h4 標題 4
h5 標題 5
h6 標題 6
<h1>h1 Heading 1</h1>
<h2>h2 Heading 2</h2>
<h3>h3 Heading 3</h3>
<h4>h4 Heading 4</h4>
<h5>h5 Heading 5</h5>
<h6>h6 Heading 6</h6>列表
使用 <ul> 元素建立無序列表，使用 <ol> 元素建立有序列表。<li> 元素定義列表項目。如需其他樣式選項，請查看列表元件。
- 項目 1
- 項目 2
- 項目 1
- 項目 2
- 項目 1
- 項目 2
- 項目 3
- 項目 4
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>描述列表
使用 <dl> 元素建立描述列表。使用 <dt> 定義詞彙，使用 <dd> 定義描述。如需其他樣式選項，請查看描述列表元件。
- 描述列表
- 描述列表定義詞彙及其對應的描述。
- 這是一個詞彙
- 這是一個描述。
- 這是一個詞彙
- 這是一個描述。
<dl>
<dt>Description lists</dt>
<dd>A description list defines terms and their corresponding descriptions.</dd>
<dt>This is a term</dt>
<dd>This is a description.</dd>
<dt>This is a term</dt>
<dd>This is a description.</dd>
</dl>水平線
使用 <hr> 元素建立水平線。如需其他樣式選項，請查看分隔線元件。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
引用
若要從文件中引用其他來源的多行內容，請使用 <blockquote> 元素。
blockquote 元素代表引自其他來源的內容，並選擇性地在頁尾或引用元素內提供引文。
<blockquote cite="#">
<p class="uk-margin-remove">The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.</p>
<footer>Someone famous in <cite><a href="#">Source Title</a></cite></footer>
</blockquote>預先格式化的文字
對於多行程式碼，請使用 <pre> 元素。它會建立新的文字區塊，保留空格、定位點和換行符號。將 <code> 元素巢狀放在裡面以定義程式碼區塊。
注意 請務必逸出任何角括號，以確保封閉的程式碼不會被解譯為標記。
// Code example
<div id="myid" class="myclass" hidden>
Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipiscing elit.
</div><pre><code>// Code example
<div id="myid" class="myclass" hidden>
Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipiscing elit.
</div></code></pre>