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

自我介绍的HTML 页面（入门）

news 2025/7/5 6:08:38

一.前情提要

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 文件的位置）或绝对路径（完整的文件路径）。确保路径正确，并且文件实际存在于指定的位置。

相关文章：

自我介绍的HTML 页面（入门）

一.前情提要 1.主要是代码示例&#xff0c;具体内容需自己填充 2.代码后是详解 二.代码实例和解析 代码 <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8"> <title>自我介绍页面</title>…...

编程日记 2024/4/10 6:06:00

负载均衡原理及算法

负载均衡&#xff08;Load Balancing&#xff09;是在计算机网络中&#xff0c;将工作负载&#xff08;即请求&#xff09;分配给多个资源&#xff0c;以实现最优资源利用、最大化性能、最小化延迟和提高可用性等目标的技术。负载均衡通常用于分布式系统、网络服务和服务器集群…...

编程日记 2024/4/10 6:04:59

【iOS ARKit】USDZ文件

USDZ 概述 ARKit 支持 USDZ&#xff08;Universal Scene Description Zip&#xff0c;通用场景描述文件包&#xff09;、Reality 两种格式的模型文件&#xff0c;得益于 USDZ的强大描述能力与网络传输便利性&#xff0c;使得iOS 设备能够在其信息&#xff08;Message&#xff0…...

编程日记 2024/4/10 6:03:58

鹅厂实习offer

#转眼已经银四了&#xff0c;你收到offer了吗# 本来都打算四月再投实习了&#xff0c;突然三月初被wxg捞了&#xff08;一年前找日常实习投的简历就更新了下&#xff09;&#xff0c;直接冲了&#xff0c;流程持续二十多天&#xff0c;结果是运气还不错&#xff0c;应该是部门比…...

编程日记 2024/4/10 6:02:57

极狐GitLab 如何在 helm 中恢复数据

本文作者&#xff1a;徐晓伟 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 本文主要讲述了如何在极狐GitLab …...

编程日记 2024/4/10 6:01:56

Hololens2远程音视频通话与AR远程空间标注，基于OpenXR+MRTK3+WebRTC实现

Hololens2远程音视频通话与AR远程空间标注 使用Unity2021.3.21版本开发&#xff0c;基于OpenXRMRTK3.0WebRTC实现。 &#xff08;1&#xff09;通过视频获取视频帧的矩阵的方法可以参考&#xff1a;https://learn.microsoft.com/zh-cn/windows/mixed-reality/develop/advanced…...

编程日记 2024/4/10 6:00:55

2024年03月CCF-GESP编程能力等级认证Scratch图形化编程二级真题解析

本文收录于专栏《Scratch等级认证CCF-GESP真题解析》，专栏总目录・点这里 一、单选题（一共 15 个题目，每题 2 分，共 30 分） 第1题 小杨的父母最近刚刚给他买了一块华为手表，他说手表上跑的是鸿蒙，这个鸿蒙是？（ ） A、小程序 B、计时器 C、操作系统 D、神话人物 答案…...

编程日记 2024/4/10 5:58:53

开发语言漫谈-C#

C#的#&#xff0c;字面上的意思就是&#xff0c;也就是把C再。微软只所以搞C#就是要抗衡Java。微软当时搞了个J&#xff0c;被Java告了&#xff0c;没办法了只能另取炉灶。从纯技术角度来看&#xff0c;C#设计非常优秀&#xff0c;可以覆盖所有领域&#xff0c;是几乎唯一的全栈…...

编程日记 2024/4/10 5:57:52

微信小程序用户登录授权指定（旧版本）

配置旧版本基础库2.12.3 实现效果 点击登录按钮即可直接登录&#xff0c;获取用户昵称和头像 点击获取头像昵称按钮则需要授权&#xff0c;才能成功登录 代码实现 my.xml <!-- 登录页面,调试基础库为2.20.2库 --> <view class"mylogin"><block w…...

编程日记 2024/4/10 5:56:51

电商技术揭秘十五：数据挖掘与用户行为分析

相关系列文章 电商技术揭秘一&#xff1a;电商架构设计与核心技术 电商技术揭秘二&#xff1a;电商平台推荐系统的实现与优化 电商技术揭秘三&#xff1a;电商平台的支付与结算系统 电商技术揭秘四&#xff1a;电商平台的物流管理系统 电商技术揭秘五&#xff1a;电商平台…...

编程日记 2024/4/10 5:54:49

云原生：5分钟了解一下Kubernetes是什么

在当今的云计算时代&#xff0c;容器化技术变得越来越重要。它能够帮助开发者更高效地部署和管理应用程序。而Kubernetes&#xff0c;作为容器编排领域的领军者&#xff0c;正逐渐成为企业构建和管理云原生应用的核心工具。 近期将持续为大家分享Kubernetes相关知识&#xff…...

编程日记 2024/4/10 5:53:48

【stm32】I2C通信协议

【stm32】I2C通信协议 概念及原理 如果我们想要读写寄存器来控制硬件电路&#xff0c;就至少需要定义两个字节数据 一个字节是我们要读写哪个寄存器&#xff0c;也就是指定寄存器的地址 另一个字节就是这个地址下存储寄存器的内容 写入内容就是控制电路&#xff0c;读出内容就…...

编程日记 2024/4/10 5:52:47

《论文阅读》构建情感共识并利用未配对数据生成共情对话 ACL 2021

《论文阅读》构建情感共识并利用未配对数据生成共情对话 ACL 2021 前言简介模型构架损失函数实验结果前言 亲身阅读感受分享，细节画图解释，再也不用担心看不懂论文啦~ 无抄袭，无复制，纯手工敲击键盘~ 今天为大家带来的是《Constructing Emotion Consensus and Utilizing …...

编程日记 2024/4/10 5:51:46

xilinx fpga 程序固化（含sdk）

一、前言 xilinx 旗下的产品主要有包含有处理器的SOC系列&#xff0c;也有只有纯逻辑的fpga&#xff0c;两者的程序固化的方法并不相同&#xff0c;本文介绍含有处理器或者microblaze中有程序的固化。 二、固化流程 2.1 在sdk中固化 SDK中选择Xilinx Tools–Program FPGA&a…...

编程日记 2024/4/10 5:49:44

更高效、更简洁的 SQL 语句编写丨DolphinDB 基于宏变量的元编程模式详解

元编程&#xff08;Metaprogramming&#xff09;指在程序运行时操作或者创建程序的一种编程技术&#xff0c;简而言之就是使用代码编写代码。通过元编程将原本静态的代码通过动态的脚本生成&#xff0c;使程序员可以创建更加灵活的代码以提升编程效率。 在 DolphinDB 中&#…...

编程日记 2024/4/10 5:47:43

Python中的sort()与sorted()用法

Python中的sort()函数主要用于对列表&#xff08;list&#xff09;中的元素进行排序。它有两种形式&#xff1a;一种是列表的方法&#xff08;即直接对列表对象调用&#xff09;&#xff0c;另一种则是内置的sorted()函数&#xff0c;它返回一个新的已排序列表&#xff0c;而不…...

编程日记 2024/4/10 5:46:42

15.队列集

1.简介 在使用队列进行任务之间的“沟通交流”时&#xff0c;一个队列只允许任务间传递的消息为同一种数据类型&#xff0c;如果需要在任务间传递不同数据类型的消息时&#xff0c;那么就可以使用队列集。FreeRTOS提供的队列集功能可以对多个队列进行“监听”&#xff0c;只要…...

编程日记 2024/4/10 5:42:37

Dubbo 集群容错

Dubbo 集群容错 假设我们运营一个大型的电子商务网站&#xff0c;它有大量的用户在任何时间都在进行购物、浏览商品、添加到购物车、结账等操作。为了处理这种高流量和高并发性的情况&#xff0c;我们可能已经设置了一个由多个服务器组成的计算机集群。 在这种情况下&#xf…...

编程日记 2024/4/10 5:40:35

杨辉三角形（蓝桥杯，acwing）

题目描述&#xff1a; 下面的图形是著名的杨辉三角形&#xff1a; 如果我们按从上到下、从左到右的顺序把所有数排成一列&#xff0c;可以得到如下数列&#xff1a; 1, 1, 1, 1, 2, 1, 1, 3, 3, 1, 1, 4, 6, 4, 1, ... 给定一个正整数 N&#xff0c;请你输出数列中第一次出现…...

编程日记 2024/4/10 5:39:34

计算系数（acwing，数论）

题目描述&#xff1a; 给定一个多项式 (axby)^k&#xff0c;请求出多项式展开后 x^n*y^m 项的系数。 输入格式&#xff1a; 共一行&#xff0c;包含 5 个整数&#xff0c;分别为 a&#xff0c;b&#xff0c;k&#xff0c;n&#xff0c;m&#xff0c;每两个整数之间用一个空格…...

编程日记 2024/4/10 5:33:25

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2025/7/4 14:36:53

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2025/6/30 10:59:47

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/7/1 23:49:53

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/7/4 1:21:36

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/6/21 5:38:34

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/6/21 10:08:07

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2025/7/3 13:21:09

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/5 2:51:25

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/6/17 16:58:36

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/6/26 2:38:22