Base

该组件为所有 HTML 元素提供默认样式。

Normalize.css

Base 组件采用著名的 Normalize.css 的样式，让元素在所有浏览器中渲染一致，并应用其默认样式，例如颜色、外边距、字号等。

注意默认情况下，表单、按钮和表格元素不会被规范化或添加样式。这些样式在它们各自的组件类中处理。UIkit 尽量对纯 HTML 元素施加尽可能少的样式，以便保持稳健，并与第三方 CSS 不冲突。

链接

使用 <a> 元素把文本变为超文本。你也可以为 <span> 或类似元素添加 .uk-link 类以应用默认的链接样式。更多样式选项请参阅链接组件。

文本级语义

下方列表简要概述了最常用的文本级语义及其用法。

Element	描述
`<abbr>`	使用带 title 的 abbr 元素定义缩写。
`<b>`	使用b 元素创建粗体文本。
`<cite>`	使用cite 元素定义作品标题。
`<code>`	使用`code 元素`定义行内代码片段。
`<del>`	使用~~del 元素~~把文档变更标记为删除的文本。
`<dfn>`	使用带 title 的 dfn 元素创建定义术语。
`<em>`	使用em 元素强调文本。
`<i>`	使用i 元素把文本的一部分区分出来。
`<ins>`	使用ins 元素把文档变更标记为插入的文本。
`<kbd>`	使用`键盘输入元素`以浏览器默认的等宽字体显示输入内容。
`<mark>`	使用mark 元素高亮没有语义含义的文本。
`<q>`	使用q 元素中嵌套的 q 元素定义行内引用。
`<s>`	使用~~s 元素~~定义带删除线的文本。
`<samp>`	使用`samp 元素`定义示例输出。
`<small>`	使用small 元素弱化小字印刷文本。
`<span>`	使用span 元素定义行内容器。
`<strong>`	使用strong 元素表示额外的重要性。
`<sub>`	使用_{sub 元素。}定义下标文本。
`<sup>`	使用^{sup 元素。}定义上标文本。
`<u>`	使用u 元素定义带下划线的文本。
`<var>`	使用`var 元素`定义变量。

嵌入内容

图片以及 <audio>、<canvas>、<img>、<svg> 和 <video> 等其他元素在 UIkit 中默认是响应式的。如果布局变窄，它们会调整尺寸并保持比例。要禁止这种行为，请为元素或任意容器添加工具类组件中的 .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 Heading 1

h2 Heading 2

h3 Heading 3

h4 Heading 4

h5 Heading 5

h6 Heading 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> 元素定义列表项。更多样式选项请参阅列表组件。

Item 1
Item 2
- Item 1
- Item 2
  - Item 1
  - Item 2
Item 3
Item 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> 定义描述。更多样式选项请参阅描述列表组件。

Description lists: A description list defines terms and their corresponding descriptions.
This is a term: This is a description.
This is a term: This is a description.

<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.


<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> 元素。

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.

Someone famous in Source Title

<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
&lt;div id="myid" class="myclass" hidden&gt;
    Lorem ipsum &lt;strong&gt;dolor&lt;/strong&gt; sit amet, consectetur adipiscing elit.
&lt;/div&gt;</code></pre>