# 基础样式／Base

<p class="uk-text-lead">该组件为所有HTML元素提供默认样式。</p>

## Normalize.css

Base组件使用著名的 [Normalize.css](http://necolas.github.io/normalize.css/) 在所有浏览器中一致地呈现元素，并应用其默认样式，例如颜色，边距，字体大小等。

**注意** [Form](form.md), [Button](button.md) 和 [Table](table.md) 元素默认情况下未规范化或设置样式。只由它们特定的组件class定义它们的样式。UIkit尝试对原生HTML元素应用尽可能少的样式，以保持灵活性并避免与其他第三方CSS的冲突。

***

## Links-链接

使用 `<a>` 元素将文本转换为超文本。您还可以将 `.uk-link` 类添加到 `<span>` 或类似元素以应用默认链接样式。有关其他样式选项，请查看 [链接组件](link.md)。

***

## Text level semantics-文本级语义

以下列表简要概述了最常用的文本级语义以及它们的用处。

| 元素        | 描述                                                          |
|:-----------|:-----------------------------------------------------|
| `<abbr>`   | 定义带有 `<abbr title="Title Text">abbr element with a title</abbr>` 的缩写元素：<abbr title="Title Text">abbr element with a title</abbr>|
| `<b>`      | 使用 `<b>b element</b>`  创建加粗文字：<b>b element</b>|
| `<cite>`   | 使用 `<cite>cite element</cite>` 定义引用作品的标题：<cite>cite element</cite>|
| `<code>`   | 定义 `<code>code element</code>` 内联代码段：<code>code element</code>  |
| `<del>`    | 使用 `<del>del element</del>`  标记已删除的文本：<del>del element</del>|
| `<dfn>`    | 使用 `<dfn title="Defines a definition term">dfn element with a title</dfn>` 创建定义术语：<dfn title="Defines a definition term">dfn element with a title</dfn> |
| `<em>`     | 使用 `<em>em element</em>` 强调文本：<em>em element</em>|
| `<i>`      | 使用 `<i>i element</i>` 设置文本的一部分：<i>i element</i>|
| `<ins>`    | 使用 `<ins>ins element</ins>` 定义已经被插入文档中的文本：<ins>ins element</ins>|
| `<kbd>`    | 使用 `<kbd>keybord input element</kbd>` 以浏览器的默认等宽字体显示输入：<kbd>keybord input element</kbd>|
| `<mark>`   | 使用 `<mark>mark element</mark>` 突出显示没有语义的文本：<mark>mark element</mark>|
| `<q>`      | 使用 `<q>q element <q>inside</q> a q element</q>`定义内联引用：<q>q element <q>inside</q> a q element</q>|
| `<s>`      | 使用 `<s>s element</s>`定义带有删除线的文本：<s>s element</s>|
| `<samp>`   | 使用 `<samp>samp element</samp>`定义样本输出：<samp>samp element</samp> |
| `<small>`  | 使用 `<small>small element</small>` 定义强调小字体的文本：<small>small element</small>|
| `<span>`   | 使用 `<span>span element</span>` 定义一个内联容器：<span>span element</span>|
| `<strong>` | 使用 `<strong>strong element</strong>`定义加粗性：<strong>strong element</strong>|
| `<sub>`    | 使用 `<sub>sub element.</sub>` 定义下标文本：<sub>sub element.</sub> |
| `<sup>`    | 使用 `<sup>sup element.</sup>` 定义上标文本：<sup>sup element.</sup>|
| `<u>`      | 使用 `<u>u element</u>` 定义带下划线的文本：<u>u element</u>|
| `<var>`    | 使用 `<var>var element</var>` 定义变量：<var>var element</var>|

***

## Embedded content-嵌入内容

默认情况下，UIkit中的图像和其他元素，例如 `<audio>`、 `<canvas>`、 `<img>`、 `<svg>` 和 `<video>` 等都是响应式的。 如果布局变窄，它们将调整尺寸并保持其原有比例。要想避免这种情况，可添加[实用效果](utility.md)组件中 `.uk-preserve-width` class类到该元素或任何容器内。

调整浏览器的窗口大小查看下面示例图像的响应式效果。

```example
<div class="uk-width-large">
    <img src="images/photo.jpg" alt="Image">
</div>
```

***

## Paragraphs-段落

使用 `<p>` 元素创建一个段落。

```example
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```

***

## Headings-标题

使用 `<h1>` 到 `<h6>` 元素来定义标题。

添加 `.uk-h1`, `.uk-h2`, `.uk-h3`, `.uk-h4`, `.uk-h5` 或 `.uk-h6` class来改变标题文字的大小, 比如让 h1 看起来像 h3。 有关其他样式选项，请查看 [Heading 组件](heading.md)。

```example
<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>
```

***

## Lists-列表

使用 `<ul>` 元素创建无序列表， 使用 `<ol>` 创建有序列表。 `<li>` 元素定义列表项。 关于其他样式选项，请查看 [List 组件](list.md)。

```example
<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>
```

***

## Description list-描述列表

使用 `<dl>` 元素创建描述列表。使用 `<dt>` 定义术语，使用  `<dd>` 定义描述。 相关其他样式设置选项，请查看 [Description List组件](description-list.md)。

```example
<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>
```

***

## Horizontal rule-水平线

使用 `<hr>` 元素创建水平线。有关其他样式设置选项，请查看 [Divider 组件](divider.md)。

```example

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

```example
<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>
```

***

## Preformatted text-预格式化文本

对于多行代码，使用 `<pre>` 元素。 它会创建一个新的文本块，以保留空格，制表符和换行符。 内嵌一个 `<code>` 元素来定义代码块。

**注意** 要确保避免使用尖括号，因为尖括号会使代码被识别为页面标签代码而不能按预期显示代码。(翻译注：代码内尖括号需要转义`<: &lt; >: &gt;`)

```example
<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>
```