用HBuilder插入图片、动态图、音乐、视频、上传文件

一、插入图片、动态图、音乐、视频
第一步将带插入的静态图、动态图、视频放在Hbuilder的img目录下
在这里插入图片描述
第二步代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>插入图、视频操作</title>
	</head>
	<body>
		<img src="img/薛来.jpg"width="100"height="100"/>
		<img src="img/tom.jpg">
		<embed src="img/Alan WalkerIselin Solheim - Faded.mp3" width="200" 		 		height="80"></embed>
    <embed src="img/杨清柠王乐乐 - 我们 .mp3"></embed>
		<video width="400" height="260" autoplay="autoplay" controls="controls">
			<source src="img/douying.mp4" type="audio/mp4"></source>
		</video>
	</body>
</html>

运行结果:
在这里插入图片描述
音乐:
在这里插入图片描述
注意:在插入文件时,要注意文件格式是否正确
二、上传文件
代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post" enctype="multipart/form-data">
			<!--enctype="multipart/form-data"表单属性-->
			<p>
				<input type="file" name="files" /><br/><!-- "file" 文件域-->
				<input type="submit" name="upload" value="上传" />
			</p>
		</form>
	</body>
</html>

运行结果:
在这里插入图片描述

使用HBuilder创建一个包含上述信息的H5页面,你可以按照以下步骤操作: 1. 打开HBuilder,选择新建项目并选择Web App模板。 2. 在界面布局设计上,添加以下元素: - **学号**:在顶部或者适当位置放置一个文本标签,显示“学号”二字,然后在其下方添加一个`<input>`标签,设置type为"number",初始值设为"234234234"。 - **照片上传**:添加一个`<input type="file">`,让使用者选择图片文件,记得加上相应的提示文案如“点击上传照片”。 - **姓名**:同样是一个文本标签和一个`<input type="text">`,初始值设为"XXXXXXX"。 - **出生年月**:插入一个`<select>`标签,提供若干选项供用户选择日期。 - **性别**:创建一个`<label>`和两个`<input>`,一个用于男性,另一个用于女性,使用radio按钮形式。 - **爱好**:可以使用checkbox列表,列出多个兴趣选项,用户可以选择。 - **家庭住址**:添加一个`<textarea>`,让用户输入详细地址。 - **提交按钮**:最后添加一个`<button>`标签,将其文本设为“提交”,并绑定事件处理程序以便于数据提交。 3. 对每个表单元素进行样式调整,比如字体、颜色等,使其看起来美观和易读。 4. 如果需要,可以在HTML后端部分添加一些脚本语言(如JavaScript)来处理用户的输入验证、数据封装以及实际的表单提交,比如使用Ajax将数据发送到指定邮箱地址。 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>学生信息表单</title> <!-- 样式参考 --> <style> /* 添加你的样式 */ </style> </head> <body> <div> <label for="studentNo">学号:</label> <input type="number" id="studentNo" value="234234234"> </div> <div> <label for="photo">照片:</label> <input type="file" id="photo" accept="image/*"> </div> <div> <label for="name">姓名:</label> <input type="text" id="name" placeholder="XXXXXXX"> </div> <!-- 其他表单项... --> <button id="submitBtn">提交</button> <!-- JavaScript 可能会放在外部或内联 --> <script> // 表单提交事件处理 document.getElementById('submitBtn').addEventListener('click', function() { // 获取表单数据 var formData = { studentNo: document.getElementById('studentNo').value, // ...其他字段... }; // 发送表单数据 // 这里只是一个示例,通常你会通过Ajax或其他方式发送至服务器或邮件地址 fetch("mailto:<your-email@example.com>?subject=学生信息&body=" + encodeURIComponent(JSON.stringify(formData)), { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); }); </script> </body> </html> ```
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值