特殊元素

不在行级元素和块级元素概念里面的元素
无法控制没有宽高的元素

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 特殊元素展示</title><style>body {font-family: Arial, sans-serif;line-height: 1.6;margin: 20px;}h1 {text-align: center;color: #333;}.element-section {margin-bottom: 30px;border: 1px solid #ddd;padding: 15px;border-radius: 5px;}h2 {color: #444;border-bottom: 1px solid #eee;padding-bottom: 5px;}pre {background-color: #f4f4f4;padding: 10px;border: 1px solid #ddd;border-radius: 3px;overflow-x: auto;}</style>
</head>
<body>
<h1>HTML 特殊元素展示</h1><!-- 元数据元素 -->
<div class="element-section"><h2>元数据元素</h2><h3>&lt;head&gt;</h3><p>作用：包含文档的元数据，如标题、样式、脚本等。</p><pre>&lt;head&gt;&lt;title&gt;页面标题&lt;/title&gt;
&lt;/head&gt;</pre><h3>&lt;meta&gt;</h3><p>作用：定义 HTML 文档的元数据，如字符编码、描述等。</p><pre>&lt;meta charset="UTF-8"&gt;
&lt;meta name="description" content="这是一个示例页面"&gt;</pre><h3>&lt;title&gt;</h3><p>作用：设置文档的标题，显示在浏览器标签页上。</p><pre>&lt;title&gt;示例页面&lt;/title&gt;</pre>
</div><div class="element-section"><h2>文本格式元素</h2><h3>&lt;br&gt;</h3><p>作用：插入一个换行符。</p><pre>&lt;p&gt;这是第一行&lt;br&gt;这是第二行&lt;/p&gt;</pre>
</div><div class="element-section"><h2>空格元素</h2><h3>&lt;& nbsp&gt;</h3><p>作用：插入一个空格。</p><pre>&lt;p&gt;这是第一行&lt;&nbsp&gt;这是第二行&lt;/p&gt;</pre>
</div><div class="element-section"><h2>特殊字符元素</h2><h3>&lt; &gt;</h3><p>作用：表示小于号。</p><pre>&lt;p&gt;小于号：&lt;&lt;/p&gt</pre>
</div></body>
</html>