在 html5 出现之前,人们一般把元素分为块级、内联和内联块元素。本文将详细介绍 HTML 块级元素
标题 (Heading) 元素有六个不同的级别,
是最高级的,而
- <h1>
则是最低的。一个标题元素能简要描述该节的主题
- <h6>
从
到
- <h1>
,重要性逐渐减小,字体大小也逐渐减小。在使用标题元素时,要注意以下几点
- <h6>
1、不要为了减小标题的字体而使用低级别的标题,而是使用 CSS 的 font-size 样式
2、避免跳过某级标题:始终要从
开始,接下来使用
- <h1>
等等
- <h2>
3、使用
元素时,为了方便起见,避免重复在一个页面上使用
- <section>
,
- <h1>
应该用来表示页面的标题,其他的标题当从
- <h1>
开始。使用
- <h2>
时,应当每个 section 都使用一个
- <section>
- <h2>
【默认样式】
- //从h1到h6
- margin: 0.67em 0 -> 0.83em 0 -> 1em 0 -> 1.33em 0 -> 1.67em 0 -> 2.33em 0;
- font-size: 2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
- font-weight: bold;
- <hgroup>
- <h1>
- 水果
- </h1>
- <h2>
- 苹果
- </h2>
- </hgroup>
元素 (paragraph) 表示文本的一个段落,该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进
- <p>
【默认样式】
- margin: 16px 0;
- <p>段落1</p>
- <p>段落2</p>
- <p>段落3</p>
元素 (divide)(或 HTML 文档分区元素) 是一个通用型的流内容容器,它在语义上不代表任何特定类型的内容,它可以被用来对其它元素进行分组,一般用于样式化相关的需求 (使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组(比如 lang),它应该在没有任何其它语义元素可用时才使用(比如
- <div>
或
- <article>
)
- <nav>
元素表示段落级元素之间的主题转换 (例如,一个故事中的场景的改变,或一个章节的主题的改变)。在 HTML 的早期版本中,它是一个水平线。现在它仍能在可视化浏览器中表现为水平线,但目前被定义为语义上的,而不是表现层面上
- <hr>
用于段落级元素之间的分割,区块之间不需要使用
- <hr>
进行分割
- <hr>
- <p>
- 段落1
- </p>
- <hr>
- <p>
- 段落2
- </p>
【默认样式】
- margin: 8px 0;
- border-style: inset;
- border-width: 1px;
- <pre>
- body {
- color:red;
- }
- </pre>
【默认样式】
- margin: 1em 0;
- white-space: pre;
元素 (或者 HTML 块级引用元素),代表其中的文字是引用内容。通常在渲染时,这部分的内容会有一定的缩进。若引文来源于网络,则可以将原内容的出处 URL 地址设置到 cite 特性上,若要以文本的形式告知读者引文的出处时,可以通过
- <blockquote>
元素
- <cite>
[注意] 引用的署名必须在引用外部定义
- <blockquote cite="http://baike.baidu.com/view/921793.htm">
- <p>
- 横眉冷对千夫指,俯首甘为孺子牛
- </p>
- </blockquote>
- <p>
- 鲁迅
- </p>
【默认样式】
- margin: 1em 40px;
元素可以让作者为它最近的
- <address>
或者
- <article>
祖先元素提供联系信息。在后一种情况下,它应用于整个文档
- <body>
当表示一个和联系信息无关的任意的地址时,使用
元素而不是
- <p>
元素。这个元素不能包含除了联系信息之外的任何信息,比如出版日期 (这应该包含在
- <address>
元素中)。通常,
- <time>
元素可以放在当前 section 的
- <address>
元素中,如果存在的话
- <footer>
【默认样式】
- font-style: italic;
来源: