当前位置: 首页 > news >正文

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

一.前情提要

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.lryc.cn/news/335209.html

相关文章:

  • 负载均衡原理及算法
  • 【iOS ARKit】USDZ文件
  • 鹅厂实习offer
  • 极狐GitLab 如何在 helm 中恢复数据
  • Hololens2远程音视频通话与AR远程空间标注,基于OpenXR+MRTK3+WebRTC实现
  • 2024年03月CCF-GESP编程能力等级认证Scratch图形化编程二级真题解析
  • 开发语言漫谈-C#
  • 微信小程序用户登录授权指定(旧版本)
  • 电商技术揭秘十五:数据挖掘与用户行为分析
  • 云原生:5分钟了解一下Kubernetes是什么
  • 【stm32】I2C通信协议
  • 《论文阅读》构建情感共识并利用未配对数据生成共情对话 ACL 2021
  • xilinx fpga 程序固化(含sdk)
  • 更高效、更简洁的 SQL 语句编写丨DolphinDB 基于宏变量的元编程模式详解
  • Python中的sort()与sorted()用法
  • 15.队列集
  • Dubbo 集群容错
  • 杨辉三角形(蓝桥杯,acwing)
  • 计算系数(acwing,数论)
  • 阿里面试题二
  • 第9章 文件和内容管理
  • 【Erlang】【RabbitMQ】Linux(CentOS7)安装Erlang和RabbitMQ
  • pe格式从入门到图形化显示(七)-导出表
  • 图片地址生成二维码(通过前端实现)
  • window安装maven和hadoop3.1.4
  • Redis系列之主从复制集群搭建
  • spring框架介绍
  • 如果在 Ubuntu 系统中两个设备出现两个相同的端口号解决方案
  • 随手分享的APP链接,可能会让你“大型社死”
  • 国内AI大模型已近80个,哪个最有前途?