HTML 可以通过 < div> 和 < span>将元素组合起来。
一、HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
实例: <h1>, <p>, <ul>, <table>
二、HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
三、 HTML < div> 元素
< div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
< div>标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。
< div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,< div> 元素可用于对大的内容块设置样式属性。
< div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 < table> 元素进行文档布局不是表格的正确用法。< table> 元素的作用是显示表格化的数据。
提示和注释
提示:< div> 元素经常与 CSS 一起使用,用来布局网页。
注释:默认情况下,浏览器通常会在 < div> 元素前后放置一个换行符。然而,您可以通过使用 CSS 改变这种情况。
实例
文档中的一个区域将显示为红色:
<div style="color:red>
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>
< div> 标签支持 HTML 的全局属性和 HTML 的事件属性。
四、HTML < span> 元素
1、实例
使用 < span> 元素对文本中的一部分进行着色:
<p>这是一段不错<span style="color: red">漂亮</span>的话</p>
2、标签定义及使用说明
< span> 用于对文档中的行内元素进行组合。
< span> 标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 < span> 应用样式,那么 < span> 元素中的文本与其他文本不会任何视觉上的差异。
< span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
提示和注释
提示:被 < span> 元素包含的文本,您可以使用 CSS 对它定义样式,或者使用 JavaScript 对它进行操作。
HTML < span> 元素是内联元素,可用作文本的容器,< span> 元素也没有特定的含义。
当与 CSS 一同使用时,< span> 元素可用于为部分文本设置样式属性。
< span> 标签也支持 HTML 的全局属性。
< span> 标签也支持 HTML 的事件属性。
HTML 分组标签和描述
< div> 定义了文档的区域,块级 (block-level)
< span> 用来组合文档中的行内元素, 内联元素(inline)