HTML块和内联元素

时间:2020-02-23 14:33:40  来源:igfitidea点击:

HTML元素分为两组,即BLOCK元素和INLINE元素。

什么是块元素?

块元素是始终从新行开始并占据整个宽度的元素,而从其开始的任何其他元素将从下一行开始。

HTML块元素列表

Div <div>

形式 <form>

标题标签

<h1><h2><h3><h4><h5><h6>

段落 <p>

列表

<ol><ul><dl>

水平线 <hr

块引用 <blockquote>

预格式化 <pre>

地址 <address>

什么是内联元素?

内联元素是不一定从新行开始且仅占用所需宽度的元素。

HTML内联元素列表

跨度 <span>

粗体 <b>

斜体 <i>

下划线 <u>

下标 <sub>

上标 <sup>

<big>

<small>

强调 <em>

较强的 <strong>

列表元素 <li>

引用 <cite>

定义 <dfn>

插入 <ins>

代码 <code>

键盘 <kbd>

变量 <var>

分组元素

我们使用两个标签对HTML元素进行分组,分别是 <div>标签和 <span>

div标签

div标签是一个block元素,通常用于将不同的HTML元素分组以形成一个组。

以下是用于创建用户的地址容器的div标签的示例。

<!-- 1st user address container -->
<div class="address-container">
	<p>Mr. A Bc</p>
	<address>
		shanghai 123
	</address>
</div>
<!-- address container ends here -->

<!-- 2nd user address container -->
<div class="address-container">
	<p>Ms. X yz</p>
	<address>
		xinjiapo 123
	</address>
</div>
<!-- address container ends here -->

跨度标签

span标记是一个内联元素,通常用于对不同的HTML内联元素进行分组以形成一个组。

以下是用于创建某些内联组的span标签的示例。

<p>This is a sample line having <span>a <strong>CAPITAL</strong> letters word</span> and <span>a <small>small</small> letters word</span>.

这是具有大写字母词和小写字母词的示例行。