自我介绍的HTML 页面(入门)

news/2024/4/29 19:18:41

一.前情提要

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" 替换为实际视频文件的路径,并确保提供正确的文件格式和类型。)

请注意,这些文件的路径可以相对路径(相对于 HTML 文件的位置)或绝对路径(完整的文件路径)。确保路径正确,并且文件实际存在于指定的位置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.cpky.cn/p/11792.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

K8S容器空间不足问题分析和解决

如上图&#xff0c;今天测试环境的K8S平台出现了一个问题&#xff0c;其中的一个容器报错&#xff1a;Free disk space below threshold. Available: 3223552 bytes (threshold: 10485760B)&#xff0c;意思服务器硬盘空间不够了。这个问题怎么产生的&#xff0c;又怎么解决的呢…

解决npm install安装node-sass包容易失败的问题

具体问题如下&#xff1a; npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: XXX3.4.0 npm ERR! Found: webpack5.31.2 npm ERR! node_modules/webpack npm ERR! peer webpack”^4.0.0 || ^5.0.0″ from html-…

蓝桥杯加训

1.两只塔姆沃斯牛&#xff08;模拟&#xff09; 思路&#xff1a;人和牛都记录三个数据&#xff0c;当前坐标和走的方向&#xff0c;如果人和牛的坐标和方向走重复了&#xff0c;那就说明一直在绕圈圈&#xff0c;无解 #include<iostream> using namespace std; const i…

汽车疲劳测试试验平台技术要求(北重厂家)

汽车疲劳测试试验平台技术要求通常包括以下几个方面&#xff1a; 车辆加载能力&#xff1a;测试平台需要具备足够的承载能力&#xff0c;能够同时测试多种车型和不同重量的车辆。 动力系统&#xff1a;测试平台需要具备稳定可靠的动力系统&#xff0c;能够提供足够的力和速度来…

Django实现的登录注册功能

1 前言 在Web开发中&#xff0c;用户登录和注册是最基本且必不可少的功能。Django&#xff0c;作为一个高级的Python Web框架&#xff0c;为我们提供了强大的工具和库来快速实现这些功能。下面&#xff0c;我将详细介绍如何使用Django来实现用户登录和注册功能。 2 功能介绍 …

OpenHarmony开发-连接开发板调试应用

在 OpenHarmony 开发过程中&#xff0c;连接开发板进行应用调试是一个关键步骤&#xff0c;只有在真实的硬件环境下&#xff0c;我们才能测试出应用更多的潜在问题&#xff0c;以便后续我们进行优化。本文详细介绍了连接开发板调试 OpenHarmony 应用的操作步骤。 首先&#xf…