2.2 HTML 块（Block） 和 内联（Inline）

• 块元素，比如：

  • 分区（division） <div>
  • 段落（paragraphs） <p>
  • 列表（lists）：无序列表（unordered list with bullet points） <ul> 或 有序列表（ordered lists with numbers) <ol>
  • 标题（headings）：从1级标题 <h1> 到6级 <h6>
  • 文章（articles） <article>
  • 区块（sections） <section>
  • 长引用（long quotes） <blockquote>

• 内联元素，比如：

  • 链接（或叫锚点）（links / anchors） <a>
  • 强调词（emphasised words） <em>
  • 着重词（important words） <strong>
  • 短引用（short quotes） <q>
  • 缩写（abbreviations） <abbr>
  • 引用（cite） <cite>
  • 斜体（italic）<i> ¹
  • 图片（image）<img>
  • 输入框（input box）<input>
  • 选择框（select box）<select>
  • 间隔（span）<span>
  • 输入标签（label）<label>

块元素用来结构化文档的主体部分，把文档分解成条理分明的块。 所以块元素一般是其他元素的容器，可容纳内联元素和其他块元素，块元素有独立的空间，排斥其他元素与其位于同一行，可设置宽度(width)、高度(height)和内外边距（padding/margin）属性。

内联元素用来构建局部的差异化文本，没有独立的空间，依附于其他块级元素存在，宽高和内外边距属性无效。

<p>你在<a href="//www.xnip.cn;>小牛知识库</a>搜索过H5动画吗？</p>

所有块级元素都有开始和关闭标签，可以包含其他块元素和内联元素。

自关闭元素只能是内联元素，因为其语法结构决定了不能包含其他HTML元素；但内联元素不一定是自关闭的。

块和内联元素转换

如有必要，可以转换块和内联元素，通过设置元素的显示样式（display属性值）。
块状元素转化为内联元素：css设置display:inline ;
内联元素转化为块状元素：css设置display:block ;
关于样式表（CSS）的使用，后续章节会详细讲解。

其它类型的HTML元素

除了块元素和内联外，还有一些其他类型的HTML元素，常用的有：

• 列表项 <li>
• 表格<table>，表格行<tr>，表格单元<td>

1. <i> 元素的语义原本是斜体（italic），但常常也被用来显示图标（icon）。 ↩