2.2 HTML 块(Block)内联(Inline)

块和内联是HTML两个主要的元素类型

  • 元素,比如:

    • 分区(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> 1
    • 图片(image)<img>
    • 输入框(input box)<input>
    • 选择框(select box)<select>
    • 间隔(span)<span>
    • 输入标签(label)<label>

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

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

<p>你在<a href="//techbrood.com;>踏得网</a>搜索过H5动画吗?</p>

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

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

类别 拥有开始和关闭标签 自关闭
块元素 <p> </p>
<ul> </ul>
<ol> </ol>
不可能
内联元素 <a> </a>
<strong> </strong>
<em> </em>
<input>
<br>
<img>

块和内联元素转换

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

其它类型的HTML元素

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

  • 列表项 <li>
  • 表格<table>表格行<tr>表格单元<td>
  1. <i> 元素的语义原本是斜体(italic),但常常也被用来显示图标(icon)。