当前位置：翔宇亭IT乐园 → IT知识库 → WEB → HTML

HTML 块级元素和内联元素

减小字体

增大字体作者：本站来源：本站整理发布时间：2023-05-26 13:16:30

HTML中每个元素都按照默认值来处理自己的显示效果。这些HTML 元素可以被分为两大类：块级元素和内联元素。

HTML款元素与内联元素

HTML 块级元素

HTML 块级元素在浏览器浏览时总是以新行开始，即HTML 块级元素在默认情况下不会与其他元素共享浏览器水平行的空间。

HTML 块级元素在浏览器浏览时会占据整个设备的宽度。

常见的块级元素有<p>、<div>、<table>、<h1>~<h6>、<ul>、<ol>、<pre>等。

块级元素在浏览器中显示时，上下都会有一定的空白。

块级元素的例子

为了更好的说明块级元素的显示效果，例子中为每个块级元素添加了边框，以便更清晰的展示其效果。

<h2
				style="border: 1px solid red;">块级元素实例</h2>

<p
				style="border: 1px solid gray;">翔宇亭IT乐园</p>

<div
				style="border:1px solid gray;">HTML教程，CSS教程</div>

<ul
				style="border:1px solid gray;">

 <li
				style="border: 1px solid blue;">HTML 块级元素</li>

 <li
				style="border: 1px solid green;">HTML li元素</li>

</ul>

显示效果如下图所示：

HTML 块级元素显示效果

HTML内联元素

内联元素不会以新行开始，其仅占据其必要的宽度。

内联元素常运用在块级元素内，用于修饰文本、添加图像、添加连接等，但一般块级元素不会运用到内联元素内。

<b>、<strong>、<em>、<img>、<span>、<td>、<a>、<sup>、<sub>等属于内联元素。

内联元素的例子

<h2>内联元素的例子</h2>

<p>我们网站的名称是：<span
				style="border:1px solid blue;">翔宇亭IT乐园</span></p>

<p><em>HTML</em>是简单易学的一门语言。</p>

<p>勾股定理公式：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>

其显示效果如下：

HTML内联元素

HTML <div> 元素

HTML <div> 元素经常用于其他元素的容器。

HTML <div>元素除了常用的style、class和id之外没有特别的属性。

HTML <div>属于块级元素，默认情况下，该元素同水平行上不会出现其他元素。

在现代WEB设计中，<div>和CSS技术结合起来经常用于网页的布局，或对局部内容运用样式。

<div>元素使用的例子

<div
				style="background-color:black;color:white;padding:10px;border-radius:6px;">

  <h2>HTML</h2>

  <p>HTML的英文全称为Hyper Text Markup Language，中文意思是超文本标记语言。HTML使用一系列标签来定义WEB文档的结构和格式。这些标签可以用于定义网页中的文字，图形、动画、声音、表格、链接等。</p>

</div>

其显示效果如下：

HTML DIV元素使用的例子

HTML <span> 元素

HTML <span> 元素是经常使用的一个内联元素，由于它不会独占一行，HTML <span> 元素经常用于对一部分文本进行修饰或对网页的局部应用一定的样式。

HTML <span> 元素常用 class属性、 style属性 和 id属性来指定样式，或借助Javascript动态地运用某种样式。

HTML <span>运用的例子

<p>HTML <span
				style="margin-left:5px;margin-right:5px;color:red;background-color:yellow;">span</span> 元素运用的例子</p>

<div
				style="background-color:black;color:white;padding:20px;border-radius:10px;">

  <span
				style="font-size:20px;font-family:'courier new',monospace;">Example</span>

  <p>我<span
				style="font-style:italic;color:red;">深爱着</span>我的祖国，无边的<span
				style="color:green;">原野</span>，蜿蜒的<span
				style="color:blue">大河</span>。</p>

</div>