一.前情提要
1.主要是代码示例，具体内容需自己填充
2.代码后是详解
二.代码实例和解析
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自我介绍页面</title>
</head>
<body>
<h1>自我介绍</h1>
<p>姓名：</p>
<p>性别：</p>
<p>来自：</p>
<p>爱好：</p>
<!-- 可以插入图片 -->
<img src="图片名称" alt="个人图片" />
<!-- 可以插入音频 -->
<audio controls>
<source src="path_to_your_audio.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<!-- 可以插入视频 -->
<video width="320" height="240" controls>
<source src="path_to_your_video.mp4" type="video/mp4">
您的浏览器不支持 video 元素。
</video>
</body>
</html>
解析：
1.<!DOCTYPE html>：这是文档类型声明，指明文档类型为 HTML5，告诉浏览器如何解析页面。
2.<html lang="zh-CN">：这是 HTML 标签，表示页面的开始，lang 属性用于指定页面的语言为简体中文。
3.<head>：这是头部标签，包含了页面的元信息，比如字符编码和标题等。
4.<meta charset="UTF-8">：这个标签指定了页面的字符编码为 UTF-8，确保浏览器正确地解析页面中的中文字符。
5.<title>自我介绍页面</title>：这个标签定义了页面的标题，会显示在浏览器的标签页上。
6.<body>：这是页面的主体部分，包含了要显示在浏览器中的内容。
7.<h1>自我介绍</h1>：这是一个标题标签，用于显示“自我介绍”的大标题。
8.<p>姓名：</p>、<p>性别：</p>、<p>来自：</p>、<p>爱好：</p>：这些是段落标签，用于显示姓名、性别、来自和爱好等信息的标题。
9.<!-- 可以插入图片 -->：这是 HTML 的注释，用于注释代码，不会在页面中显示。
10.<img src="图片名称" alt="个人图片" />：这是图片标签，用于在页面中显示图片。src 属性指定图片的路径，alt 属性用于提供图片的替代文本，当图片无法显示时会显示这段文本。
11.<!-- 可以插入音频 -->：这是另一个 HTML 注释，注释了接下来是插入音频的部分。
12.<audio controls>：这是音频标签，用于在页面中播放音频。controls 属性表示显示浏览器默认的音频控制条。
13.<source src="path_to_your_audio.mp3" type="audio/mpeg">：这是音频源标签，用于指定音频文件的路径和类型。src 属性指定音频文件的路径，type 属性指定音频文件的 MIME 类型。
14.<video width="320" height="240" controls>：这是视频标签，用于在页面中播放视频。width 和 height 属性指定视频的宽度和高度，controls 属性表示显示浏览器默认的视频控制条。
15.<source src="path_to_your_video.mp4" type="video/mp4">：这是视频源标签，用于指定视频文件的路径和类型。src 属性指定视频文件的路径，type 属性指定视频文件的 MIME 类型。
三.导入个人文件
要导入图片、音频和视频，需要提供它们的路径，并将路径替换为相应的文件路径。以下是如何导入这些资源的示例：
①导入图片：
<img src="path_to_your_image.jpg" alt="个人图片" />
(ps:请确保将 "path_to_your_image.jpg" 替换为实际图片文件的路径。例如，如果图片位于与 HTML 文件相同的目录中，可以直接提供图片文件名。)
②导入音频：
<audio controls>
<source src="path_to_your_audio.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
(ps:同样，请将 "path_to_your_audio.mp3" 替换为实际音频文件的路径。确保提供正确的文件格式和类型。)
③导入视频：
<video width="320" height="240" controls>
<source src="path_to_your_video.mp4" type="video/mp4">
您的浏览器不支持 video 元素。
</video>
(ps:与上面相同，将 "path_to_your_video.mp4" 替换为实际视频文件的路径，并确保提供正确的文件格式和类型。)文章来源：https://www.toymoban.com/news/detail-846306.html
请注意，这些文件的路径可以是相对路径（相对于 HTML 文件的位置）或绝对路径（完整的文件路径）。确保路径正确，并且文件实际存在于指定的位置。文章来源地址https://www.toymoban.com/news/detail-846306.html
到了这里，关于自我介绍的HTML 页面（入门）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术10（HTML5、CSS3、JavaScript ）CSS+DIV页面布局，固定定位，相对定位relative，绝对定位absolute，层定位的应用——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/783047-1.png)
![[HTML]Web前端开发技术11（HTML5、CSS3、JavaScript ）页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/787720-1.png)
