HTML 块元素和内联元素

htmlweb developmentfront end technology更新于 2025/11/21 15:08:17

块元素

块元素在屏幕上的显示效果如同其前后均有换行符。它们会占据整个可用宽度。块元素包括:<h1> 至 <h6>、<article>、<aside>、<p>、<pre>、<ul>、<ol>、<address> 等。

示例

让我们看一个块元素的示例:<address>、<p>、<h3> 等 −

<!DOCTYPE html>
<html>
<body>
<h2>Coding Ground</h2>
<h3>Compilers for Programming Languages and Web Technologies</h3>
<p>Click on the individual links to work on online compilers:</p>
<nav>
<a href="/compile_java_online.php">Java</a> |
<a href="/php_terminal_online.php">PHP</a> |
<a href="/online_jquery_editor.php">jQuery</a> |
<a href="/compile_c_online.php">C</a> |
<a href="/compile_cpp_online.php">C++</a> |
<a href="/online_angularjs_editor.php">AngularJS</a>
</nav>
<p>We also have complier for <acronym title="JavaScript">JS</acronym> libraries.</p>
<address>
Contact us at <a href="mailto:contact@tutorialspoint.com">admin</a>.<br>
4th Floor,<br>
Incor9 Building, <br>
Kavuri Hills, <br>
Madhapur, Hyderabad,<br>
Telangana 500081
</address>
</body>
</html>

这将产生以下输出 −

内联元素

内联元素与块元素不同，它们不会像换行符一样出现，并且可以出现在句子中。内联元素的一些示例包括 <a>、<abbr>、<button>、<code>、<em>、<i>、<textarea>、<time> 等。

示例

现在让我们看一个在 HTML 中实现内联元素 <a> 和 <acronym> 的示例 −

<!DOCTYPE html>
<html>
<body>
<h2>Coding Ground</h2>
<h3>Compilers for Programming Languages and Web Technologies</h3>
<nav>
<a href="/compile_java_online.php">Java</a> |
<a href="/php_terminal_online.php">PHP</a> |
<a href="/online_jquery_editor.php">jQuery</a> |
<a href="/compile_c_online.php">C</a> |
<a href="/compile_cpp_online.php">C++</a> |
<a href="/online_angularjs_editor.php">AngularJS</a>
</nav>
<p>We also have complier for <acronym title="JavaScript">JS</acronym> libraries.</p>      
</body>
</html>

这将产生以下输出 −