Materialize CSS提供了一些可用于页面排版的元素：
- 标头
- 块引用
- 流文本
标头：Materialize CSS提供了用于标题标签的基本样式。以下标签显示了Materialize CSS样式化的可用标头标签：
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>块引用：Blockquote用于强调引号或引文。它还可以用于额外的文本层次结构和强调。
<blockquote>
This is an example quotation using blockquote tag.
</blockquote>流文本：flow-text类可用于流畅地调整必须缩放的文本的字体大小和行高。要使用流文本, 需要添加类流文本到所需的标签。下面的示例显示此类的用法。
<p class="flow-text">I am Flow Text</p>注意：Materialize CSS使用的标准字体是机器人2.0字体。只需更改字体堆栈即可替换该字体。可以通过修改以下代码以包括所需的字体并将其添加到自定义CSS来完成。
html {
font-family: GillSans, Calibri, Trebuchet, sans-serif;
}例子：
的HTML
<!DOCTYPE html>
< html >
< head >
<!-- Include the Google Icon Font -->
< link rel = "stylesheet" href =
"https://fonts.googleapis.com/icon?family=Material+Icons" >
<!-- Include compiled and
minified Materialize CSS -->
< link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" >
<!-- Include jQuery -->
< script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js" >
</ script >
</ head >
< body >
< h3 >Headings</ h3 >
< div class = "card-panel green" >
<!-- Using all the headers -->
< h1 >Heading 1</ h1 >
< h2 >Heading 2</ h2 >
< h3 >Heading 3</ h3 >
< h4 >Heading 4</ h4 >
< h5 >Heading 5</ h5 >
< h6 >Heading 6</ h6 >
</ div >
<!-- Using blockquotes -->
< h3 >Blockquote</ h3 >
< h5 >
< blockquote >
< p >
This is an example quotation
that uses the blockquote tag.
< br >
This is a basic tutorial for
the Materialize CSS Typography.
</ p >
</ blockquote >
</ h5 >
< div class = "card-panel" >
< h3 >Free Flow</ h3 >
<!-- Using the flow-text class -->
< p class = "flow-text" >
lsbin is a Computer
Science portal for geeks.
It contains well written, well thought and well explained
computer science and programming
articles, quizzes and courses.
lsbin is a very fast
growing community among programmers
and have a reach of around 10
million+ readers globally.
</ p >
</ div >
<!-- Include the compiled and
minified Materialize JavaScript -->
< script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" >
</ script >
</ body >
</ html >输出如下：
