基础
此组件为所有 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 元素 定义变量。 |
嵌入内容
图像和其他元素，如 <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 标题 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 元素表示从其他来源引用来的内容，可以选择在页脚或 cite 元素中添加引用。
<blockquote cite="#"> <p class="uk-margin-small-bottom">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>