自我介绍的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.mzph.cn/news/802660.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

银河麒麟操作系统基础操作

一、查看系统启动级别 在银河麒麟操作系统中查看当前的运行级别,您可以通过以下两种方法之一: 1.如果您的系统仍然使用传统的init系统: 使用runlevel命令: runlevel这将会输出两个字符,例如 N 3。其中,N 代表之前的运行级别(如果是 N,则表示没有之前的运行级别),3…

蓝桥杯——修剪灌木

题目 爱丽丝要完成一项修剪灌木的工作。 有 N 棵灌木整齐的从左到右排成一排。爱丽丝在每天傍晚会修剪一棵灌 木,让灌木的高度变为 0 厘米。爱丝修剪灌木的顺序是从最左侧的灌木开始,每天向右修剪一棵灌木。当修剪了最右侧的灌木后,她会调转方向,下一天开 始向左修剪灌木。直到…

OSCP靶场--Nagoya

OSCP靶场–Nagoya 考点 1.nmap扫描 ## ┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.214.21 -sV -sC -Pn --min-rate 2500 -p- Starting Nmap 7.92 ( https://nmap.org ) at 2024-04-02 08:52 EDT Nmap scan report for 192.168.214.21 Host is up (0.38s latency).…

用Python实现输入点云索引绘制该点云法向量

import open3d as o3d# 读取pcd文件 pcd o3d.io.read_point_cloud(r"D:\PythonProjects\Codes\paper_images\back_point\voxel.pcd")# 计算法向量 pcd.estimate_normals(search_paramo3d.geometry.KDTreeSearchParamHybrid(radius0.1, max_nn30))# 选择要绘制法向量…

C#:用定时器监控定时器,实现中止定时器正在执行的任务,并重启

Windows服务中使用的比较多的是定时器&#xff0c;但这种定时任务有个比较大的毛病&#xff1a;有时会莫名其妙地停止执行&#xff08;长时间执行不完&#xff0c;假死&#xff09;&#xff0c;必须得手工重启Windows服务才能恢复正常。这个就太麻烦了。 有没有办法来实现定时…

【前端】项目Vue2升级Vue3注意事项

代码改动 前言 Vue2项目页面直接迁移到Vue3环境下,依旧2的写法,页面各种报错,尤其element-ui升级 element-plus 组件改动比较大;以下仅供参考: 1、图标 // 旧代码 <el-button type="primary" icon="el-icon-search" @click="handleQuery&…

微信h5实现上传不低于30s

实现思路&#xff1a;上传视频前校验格式以及视频秒数是否在合理范围&#xff0c;是则上传到相对应的服务器上 HTML <input type"file" id"videoInput" accept"video/*" change"checkVideoDuration"/> JS // 检验格式与市场时…

MAC苹果电脑如何使用Homebrew安装iperf3

一、打开mac终端 找到这个终端打开 二、终端输入安装Homebrew命令 Homebrew官网地址&#xff1a;https://brew.sh/ 复制这个命令粘贴到mac的终端窗口&#xff0c;然后按回车键 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/in…

引领教育变革:山海鲸可视化智慧教育方案

随着信息技术的迅猛发展&#xff0c;教育领域正迎来一场深刻的变革。山海鲸可视化智慧教育解决方案&#xff0c;以其创新的技术和丰富的应用场景&#xff0c;正成为推动教育现代化进程的重要力量。 山海鲸可视化智慧教育解决方案是一套集教学、管理、服务于一体的综合性教育系…

Vue的模块化开发初探

文章目录 Vue的模块化开发初探一 概述二 步骤2.1 下载必须模块2.2 安装Live Server插件2.3 编写代码2.4 运行结果 三 总结四 参考资料 Vue的模块化开发初探 一 概述 Vue是一个渐进式JavaScript框架&#xff0c;可以按需引入部分功能&#xff0c;而不必全量引入整个框架。 二…

【机器学习】一文掌握机器学习十大分类算法(上)。

十大分类算法 1、引言2、分类算法总结2.1 逻辑回归2.1.1 核心原理2.1.2 算法公式2.1.3 代码实例 2.2 决策树2.2.1 核心原理2.2. 代码实例 2.3 随机森林2.3.1 核心原理2.3.2 代码实例 2.4 支持向量机2.4.1 核心原理2.4.2 算法公式2.4.3 代码实例 2.5 朴素贝叶斯2.5.1 核心原理2.…

图论做题笔记:bfs

Leetcode - 433:最小基因变化 题目&#xff1a; 基因序列可以表示为一条由 8 个字符组成的字符串&#xff0c;其中每个字符都是 A、C、G 和 T 之一。 假设我们需要调查从基因序列 start 变为 end 所发生的基因变化。一次基因变化就意味着这个基因序列中的一个字符发生了变化…

X86汇编速成

平时用的电脑都是X86的&#xff0c;但是现在大家都在搞RISC-V&#xff0c;计组也都开始以RISC-V作为示例&#xff0c;所以专门回头来补一下X86的汇编&#xff0c;方便平时使用。 寄存器register X86_64中一共有16个64位的通用寄存器&#xff0c;分别为&#xff1a; RAX, RBX,…

【鸿蒙开发】if/else条件渲染,ForEach循环渲染

if/else 使用规则 支持if、else和else if语句。if、else if后跟随的条件语句可以使用状态变量。允许在容器组件内使用&#xff0c;通过条件渲染语句构建不同的子组件。条件渲染语句在涉及到组件的父子关系时是“透明”的&#xff0c;当父组件和子组件之间存在一个或多个if语句…

磁盘管理与文件管理

文章目录 一、磁盘结构二、MBR与磁盘分区分区的优势与缺点分区的方式文件系统分区工具挂载与解挂载 一、磁盘结构 1.硬盘结构 硬盘分类&#xff1a; 1.机械硬盘&#xff1a;靠磁头转动找数据 慢 便宜 2.固态硬盘&#xff1a;靠芯片去找数据 快 贵 硬盘的数据结构&#xff1a;…

基于C语言的数据结构--顺序表讲解及代码函数实现展示

本篇文章是数据结构的开篇&#xff0c;所以我们先来了解一下什么是数据结构。 什么是数据结构 数据结构是由“数据”和“结构”两个词组合而来&#xff0c;自然要以两个词分别去阐述。 首先&#xff0c;什么是数据&#xff1f;数据(data)是事实或观察的结果&#xff0c;是对客…

golang实现定时监控 CLOSE_WAIT 连接的数量

文章目录 go实现定时检查大量的 CLOSE_WAIT 连接背景&#xff1a;为什么监控指定端口上的 CLOSE_WAIT 连接数量原因&#xff1a;什么是CLOSE_WAITgo实现定时检查大量的 CLOSE_WAIT 连接参考 go实现定时检查大量的 CLOSE_WAIT 连接 监控指定端口的连接状态&#xff0c;特别是关…

环境变量设置

环境变量具有用户属性&#xff0c;设置环境变量有四种方式 1、暂时的添加环境变量PATH_NAME&#xff1a;仅对当前进程有用&#xff0c;进程结束后自动释放 可通过export命令&#xff0c;如 export PATH_NAME/usr/local/nginx/sbin/:$PATH_NAME&#xff0c;将/usr/local/ngin…

C++中的string设计成模板的原因

查看string的文档可以发现&#xff0c;string被设计成模板&#xff0c;为什么这样设计呢&#xff1f; string文档链接&#xff1a;<string> - C Reference (cplusplus.com) 随着计算机的发展&#xff0c;出现了很多编码&#xff08;用于管理字符&#xff09;&#xff0c…

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

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