举例说明原生的html组件有哪些？

原生 HTML 组件指的是无需任何 JavaScript 框架或库即可直接在 HTML 中使用的元素。它们由浏览器自身提供并渲染。以下是一些常见原生 HTML 组件的例子，并根据其功能进行了大致分类：

1. 表单组件:

• <input>: 用于各种类型的输入，例如文本、密码、数字、日期、文件上传等。 例如：<input type="text" placeholder="请输入姓名">
• <textarea>: 用于多行文本输入。 例如：<textarea rows="4" cols="50">请输入内容</textarea>
• <select> & <option>: 创建下拉列表。 例如：

<select>
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

• <button>: 创建可点击的按钮。 例如：<button>提交</button>
• <datalist> & <option>: 为 <input> 提供预定义的选项列表，实现类似自动补全的功能。
• <output>: 显示计算结果或脚本输出。
• <progress>: 显示任务进度。
• <meter>: 表示已知范围内的标量值。

2. 多媒体组件:

• <audio>: 嵌入音频内容。 例如：<audio controls src="audio.mp3"></audio>
• <video>: 嵌入视频内容。 例如：<video controls src="video.mp4"></video>
• <img>: 嵌入图像。 例如：<img src="image.jpg" alt="图片描述">
• <track>: 为 <audio> 和 <video> 元素添加字幕或章节。
• <canvas>: 用于通过 JavaScript 绘制图形。 (虽然需要 JavaScript 绘制，但 <canvas> 本身是原生 HTML 元素)

3. 文本语义组件:

• <h1> - <h6>: 定义不同级别的标题。
• <p>: 定义段落。
• <span>: 定义内联容器，通常用于对一小段文本进行样式化或操作。
• <br>: 插入换行符。
• <hr>: 创建水平线。
• <pre>: 预格式化文本，保留空格和换行。
• <code>: 表示代码片段。
• <a>: 创建超链接。 例如：<a href="https://www.example.com">示例链接</a>
• <ul>, <ol>, <li>: 创建无序列表、有序列表和列表项。
• <dl>, <dt>, <dd>: 创建描述列表、列表标题和列表描述。
• <blockquote>: 定义长引用。
• <q>: 定义短引用。

4. 分组和布局组件:

• <div>: 通用的块级容器，用于分组和布局。
• <header>: 定义文档的页眉。
• <nav>: 定义导航链接。
• <main>: 定义文档的主要内容。
• <article>: 定义独立的自包含内容。
• <section>: 定义文档中的一个部分。
• <aside>: 定义与页面内容相关的补充信息。
• <footer>: 定义文档的页脚。
• <details> & <summary>: 创建可展开/折叠的细节内容。

5. 其他组件:

• <iframe>: 嵌入另一个文档。
• <embed>: 嵌入外部内容，例如插件。
• <object>: 嵌入外部资源，例如图像、音频、视频、Java applets 等。
• <script>: 嵌入或引用可执行脚本，例如 JavaScript。
• <style>: 嵌入样式信息。

这只是一些常用的原生 HTML 组件示例，还有其他一些不太常用的组件。 这些组件构成了网页的基本 building blocks，理解它们的功能和用法对于前端开发至关重要。

希望这个例子能帮助你理解原生 HTML 组件的概念。