一、Foundation 默认设置
Foundation 使用浏览器默认字体大小：
font-size: 100%;Code language: HTTP (http)- 大多数桌面浏览器：默认 16px
- 大多数移动端浏览器：默认 12px
- 默认字体：
"Helvetica Neue"，Helvetica，Roboto，Arial，sans-serif - 默认
line-height：1.5
以上默认设置均作用于 <body> 元素。
查看 foundation.css 可以看到如下样式：
body {
background: #fff;
color: #222;
cursor: auto;
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-style: normal;
font-weight: normal;
line-height: 1.5;
margin: 0;
padding: 0;
position: relative;
}Code language: CSS (css)可以通过修改
body的字体样式来控制整个网站的整体字体风格。
二、标题（Headings）
基本标题
<h1>h1 标题</h1>
<h2>h2 标题</h2>
<h3>h3 标题</h3>
<h4>h4 标题</h4>
<h5>h5 标题</h5>
<h6>h6 标题</h6>Code language: HTML, XML (xml)浅色副标题（subheader）
使用 subheader 类可以创建浅色标题：
<div>创建一个浅色的标题，在元素上添加 subheader 样式：</div>
<h1 class="subheader">h1.subheader</h1>
<h2 class="subheader">h2.subheader</h2>
<h3 class="subheader">h3.subheader</h3>
<h4 class="subheader">h4.subheader</h4>
<h5 class="subheader">h5.subheader</h5>
<h6 class="subheader">h6.subheader</h6>Code language: HTML, XML (xml)使用 small 标签的副标题
small 标签用于创建浅色的辅助文本：
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>Code language: HTML, XML (xml)三、超链接
Foundation 中超链接使用 a 样式：
<a class="a" href="http://www.foxdevelop.com">Foxdevelop</a>Code language: HTML, XML (xml)四、缩写（Abbreviation）
使用 abbr 标签可实现鼠标悬停提示效果：
<p>世界卫生组织 <abbr title="World Health Organization">WHO</abbr> 成立于1948.</p>Code language: HTML, XML (xml)五、引用（Blockquote）
使用 blockquote 和 cite 实现引用效果：
<blockquote>
<p>原创视频教学网</p>
<cite>Foxdevelop</cite>
</blockquote>Code language: HTML, XML (xml)六、定义列表（Description List）
使用 dl、dt、dd 展示术语和解释：
<dl>
<dt>WTO</dt>
<dd>- 世界贸易组织</dd>
<dt>WHO</dt>
<dd>- 世界卫生组织</dd>
</dl>Code language: HTML, XML (xml)七、代码块（Code）
使用 code 标签展示内联代码：
<p>我们常说: <code>div</code>, <code>p</code> 是块标记。</p>Code language: HTML, XML (xml)八、键盘输入效果（Keyboard）
使用 kbd 标签实现键盘按键凸显效果：
<p>按下 <kbd>ctrl + p</kbd> 键打开打印窗口。</p>Code language: HTML, XML (xml)九、综合示例
下面是一个完整的 Foundation 排版示例页面：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foundation 排版示例</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
<script src="foundation-5.5.3/js/vendor/jquery.js"></script>
<script src="foundation-5.5.3/js/foundation.min.js"></script>
<script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</head>
<body>
<div class="row">
<div class="medium-12 columns">
<h1>h1 标题</h1>
<h2>h2 标题</h2>
<h3>h3 标题</h3>
<h4>h4 标题</h4>
<h5>h5 标题</h5>
<h6>h6 标题</h6>
<div>创建一个浅色的标题，在元素上添加 subheader 样式：</div>
<h1 class="subheader">h1.subheader</h1>
<h2 class="subheader">h2.subheader</h2>
<h3 class="subheader">h3.subheader</h3>
<h4 class="subheader">h4.subheader</h4>
<h5 class="subheader">h5.subheader</h5>
<h6 class="subheader">h6.subheader</h6>
<div>small 标签用于创建一个浅色的副标题</div>
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>
<hr />
<a class="a" href="http://www.bamn.cn">Foxdevelop</a>
<p>世界卫生组织 <abbr title="World Health Organization">WHO</abbr> 成立于1948.</p>
<blockquote>
<p>原创视频教学网</p>
<cite>Foxdevelop</cite>
</blockquote>
<dl>
<dt>WTO</dt>
<dd>- 世界贸易组织</dd>
<dt>WHO</dt>
<dd>- 世界卫生组织</dd>
</dl>
<p>我们常说: <code>div</code>, <code>p</code> 是块标记。</p>
<p>按下 <kbd>ctrl + p</kbd> 键打开打印窗口。</p>
</div>
</div>
</body>
</html>Code language: HTML, XML (xml)Previous: 介绍和安装