前端面试：【HTML】语义化标签、表单、媒体元素

HTML（超文本标记语言）是构建网页内容的基础，它通过一系列标签来描述页面的结构和内容。在这篇文章中，我们将探讨HTML的基础知识，包括语义化标签、表单和媒体元素。

语义化标签：赋予内容更多意义

语义化标签是指在编写HTML代码时，使用具有实际含义的标签，以便更好地描述页面的结构和内容。这些标签不仅有助于搜索引擎优化（SEO），还可以增强页面的可访问性。

1. <header>：表示页面或区块的页眉，通常包含标题、标志和导航。
2. <nav>：定义导航链接的部分，用于包含页面的导航菜单。
3. <main>：标识页面的主要内容，每个页面应只包含一个<main>标签。
4. <article>：表示一个独立的内容单元，如博客帖子、新闻文章等。
5. <section>：将内容分成不同的区块，有助于组织和语义化内容。

表单：与用户交互的桥梁

表单是网页与用户交互的重要手段，它允许用户提交数据，如登录信息、搜索关键词等。HTML提供了一系列表单元素，使我们能够收集和处理用户输入。

1. <form>：用于包裹表单元素，定义了用户输入数据的范围。
2. <input>：最常用的表单元素，允许用户输入文本、密码、数字等。
3. <textarea>：用于多行文本输入，适用于评论、消息等长文本。
4. <select>：创建下拉列表，用户可以从预定义选项中选择。
5. <button>：定义提交按钮、重置按钮或自定义按钮，与用户交互。
6. <label>：用于标记表单元素，提高可用性并增加点击区域。
7. <fieldset>和<legend>：用于将一组相关的表单元素分组并添加标题。

媒体元素：丰富多彩的内容展示

媒体元素使网页更加丰富多彩，可以嵌入图片、音频、视频等多种内容。

1. <img>：用于插入图片，通过src属性指定图片的URL。
2. <audio>：插入音频文件，使用src属性指定音频文件的URL，提供控制按钮。
3. <video>：插入视频文件，通过src属性指定视频文件的URL，提供控制按钮。
4. <iframe>：嵌入其他网页或文档，常用于插入地图、视频等外部内容。

除了上述标签，HTML还有许多其他标签可以用于构建更复杂的页面结构和内容展示。了解这些基础知识有助于你更好地构建网页，使其在搜索引擎排名、可访问性和用户体验等方面更出色。通过语义化标签、合理使用表单和媒体元素，你可以打造出功能丰富、易于维护的网页。