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

前端零基础入门到上班:【Day4】HTML 多媒体与表单深度教程

news 文章来源：https://blog.csdn.net/m0_61118741/article/details/143245491 2024/11/25 23:14:47

HTML 多媒体与表单深度教程

        • **1. HTML 多媒体基础：深入理解 `<video>` 和 `<audio>` 标签**
        • **1.1 `<video>` 标签：详细剖析与用法**
          • **1.1.1 基础结构与属性详解**
          • **1.1.2 视频格式的兼容性与示例**
          • **1.1.3 视频控制的实际应用**
        • **1.2 `<audio>` 标签：多媒体音频的使用与控制**
          • **1.2.1 音频标签结构与格式**
        • **1.3 多媒体标签的最佳实践**
        • **2. HTML 表单标签详解：输入与交互**
        • **2.1 `<form>` 标签**
        • **2.2 `<input>` 标签类型和属性**
          • **必填与格式验证**
        • **2.3 表单的高级功能**
        • **3. 综合应用：制作注册表单页面**
      • **4. 总结与作业**
        • **作业**

1. HTML 多媒体基础：深入理解 <video> 和 <audio> 标签

多媒体在网站中不仅是简单的装饰，而是提高用户体验、传递信息的关键元素。HTML 为此提供了 <video> 和 <audio> 标签，使嵌入和管理媒体文件更方便。

1.1 <video> 标签：详细剖析与用法
1.1.1 基础结构与属性详解

<video> 标签用于嵌入视频内容，提供多种控制功能。以下是每个常用属性的具体作用和使用实例：

  • src：视频文件路径。
  • controls：显示播放、暂停等控制选项。
  • autoplay：自动播放。
  • loop：循环播放。
  • muted：静音播放。
  • poster：视频加载前显示的封面图。
<video src="movie.mp4" controls autoplay loop muted poster="poster.jpg"></video>
1.1.2 视频格式的兼容性与示例

为支持不同浏览器，建议提供多个格式的视频。以下是支持的格式和兼容性表：

格式浏览器支持
MP4Chrome, Safari, Firefox, Edge
WebMChrome, Firefox, Opera
OggFirefox, Chrome, Opera

综合格式示例：

<video controls><source src="movie.mp4" type="video/mp4"><source src="movie.webm" type="video/webm">您的浏览器不支持视频播放。
</video>
1.1.3 视频控制的实际应用

练习：创建一个简单的播放器，并为其增加播放、暂停等自定义按钮控制。

<video id="videoPlayer" width="600" controls><source src="movie.mp4" type="video/mp4">
</video>
<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>
<script>function playVideo() {document.getElementById('videoPlayer').play();}function pauseVideo() {document.getElementById('videoPlayer').pause();}
</script>
1.2 <audio> 标签：多媒体音频的使用与控制
1.2.1 音频标签结构与格式

与 <video> 标签类似，HTML 的 <audio> 标签允许在网页中嵌入音频。推荐格式有 MP3、WAV 和 OGG：

<audio controls><source src="audio.mp3" type="audio/mpeg"><source src="audio.ogg" type="audio/ogg">您的浏览器不支持音频播放。
</audio>
1.3 多媒体标签的最佳实践
  • 提高兼容性：多种格式支持。
  • 节省带宽：合理使用 autoplay 和 muted。
  • 无障碍设计：为 <audio> 和 <video> 标签提供替代文字。
2. HTML 表单标签详解：输入与交互

表单是用户与页面交互的主要途径。以下将深度解析 <form>、<input> 和 <select> 等表单标签的使用方法和验证方式。

2.1 <form> 标签

<form> 是表单的容器，包含提交路径和提交方式。常用的 action 和 method 属性用于控制数据提交。

  • action：提交地址。
  • method：传输方法，常见为 POST 和 GET。
<form action="/submit" method="POST"><label>姓名：</label><input type="text" name="username" required><button type="submit">提交</button>
</form>
2.2 <input> 标签类型和属性

<input> 标签有多种类型，常用的类型和属性如下：

类型描述示例
text文本输入框<input type="text" name="username">
password密码输入框<input type="password" name="pwd">
email邮箱<input type="email" name="email">
number数字<input type="number" name="age">
file文件上传<input type="file" name="file">
必填与格式验证

HTML5 增加了表单验证功能，包括 required、pattern 和 min/max 属性。

<form><label>邮箱：</label><input type="email" name="email" required><label>年龄：</label><input type="number" name="age" min="18" max="60">
</form>
2.3 表单的高级功能

示例：创建一个包含多种输入类型的用户注册表单，并通过 JavaScript 进行表单验证。

<form id="registerForm"><label for="username">用户名：</label><input type="text" id="username" name="username" required><br><label for="password">密码：</label><input type="password" id="password" name="password" required><br><button type="button" onclick="validateForm()">注册</button>
</form><script>function validateForm() {const username = document.getElementById("username").value;if (username.length < 3) {alert("用户名至少包含3个字符");} else {alert("表单验证通过");document.getElementById("registerForm").submit();}}
</script>
3. 综合应用：制作注册表单页面

综合练习：创建一个包含视频、音频、表单验证的多功能页面，将多媒体与表单元素相结合。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>多媒体与表单示例</title>
</head>
<body><h1>多媒体与用户注册示例</h1><video width="320" height="240" controls poster="poster.jpg"><source src="video.mp4" type="video/mp4">您的浏览器不支持视频播放。</video><audio controls><source src="audio.mp3" type="audio/mpeg">您的浏览器不支持音频播放。</audio><form action="/submit" method="POST"><label>用户名：</label><input type="text" name="username" required><br><label>邮箱：</label><input type="email" name="email" required><br><button type="submit">提交</button></form>
</body>
</html>

4. 总结与作业

通过本节的学习，您掌握了 HTML 中的多媒体和表单标签的全面应用。以下是课后练习，帮助巩固所学内容。

作业
  1. 创建一个包含视频和音频的页面，视频和音频都支持控制按钮。
  2. 构建一个表单，包含姓名、密码、邮箱、年龄等字段，并设置适当的验证。

相关文章：

前端零基础入门到上班:【Day4】HTML 多媒体与表单深度教程

HTML 多媒体与表单深度教程 **1. HTML 多媒体基础&#xff1a;深入理解 <video> 和 <audio> 标签****1.1 <video> 标签&#xff1a;详细剖析与用法****1.1.1 基础结构与属性详解****1.1.2 视频格式的兼容性与示例****1.1.3 视频控制的实际应用** **1.2 <a…...

编程日记 2024/10/26 2:52:55

原创作品——银行软件产品界面设计

蓝蓝设计团队服务金融类应用界面设计&#xff0c;以沉稳的色调和简洁的线条营造出专业可靠的氛围。特点在于融入了创新的元素增添界面的活力与现代感。细节处理上&#xff0c;注意数据的视觉呈现效果&#xff0c;采用定制化的图表和清晰的排版&#xff0c;确保用户能够快速理解…...

编程日记 2024/10/26 2:47:50

若依RuoYi-Vue 定时任务 速学

1.若依定时任务模块&#xff08;ruoyi-quartz&#xff09; 那么从一个简单的入门示例开始&#xff0c;掌握定时任务的使用吧&#xff01; 2. 入门示例&#xff08;学会制作一个简单定时任务&#xff09; 首先打开定时任务模块中的task包&#xff0c;这里已经有一个已经写好的R…...

编程日记 2024/10/26 2:46:49

【pytest学习】pytest.main()

基本用法## pytest.main()函数是用于启动测试运行的入口点。它可以在命令行中直接使用&#xff0c;也可以在脚本中以编程方式调用。 以下是一个简单的示例&#xff1a; import pytest if __name__"__main__":pytest.main()执行当前目录下的所有测试文件 使用pytes…...

编程日记 2024/10/26 2:44:47

设计模式: Pimpl（Pointer to Implementation）

这种设计模式通常被称为 Pimpl&#xff08;Pointer to Implementation&#xff09;惯用法&#xff0c;有时也被称为 Cheshire Cat 惯用法。它主要用于隐藏实现细节和减少编译依赖。 例子&#xff1a; DatabaseConnection.h #ifndef DATABASE_CONNECTION_H #define DATABASE_…...

编程日记 2024/10/26 2:42:45

android开发中文网站 android developer

Android 平台 | Platform | Android Developers 在此做个记录...

编程日记 2024/10/26 2:39:43

实习冲刺Day1

算法题 20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09; 这个题我们采用stack栈的方式来进行相应的括号匹配 情况有以下几种 当字符串s中只有一个字符的时候&#xff0c;那这个时候字符串一定是不匹配的所以直接返回false当字符串为发生标准匹配的时候&#xff0c;…...

编程日记 2024/10/26 2:36:40

安全见闻（5）——开阔眼界，不做井底之蛙

安全见闻五&#xff1a;人工智能 内容预览 ≧∀≦ゞ 安全见闻五&#xff1a;人工智能声明导语一、人工智能基础机器学习基础机器学习的典型工作流程1. 数据收集2. 数据预处理3. 模型选择与训练4. 模型评估与优化5. 模型应用 深度学习基础深度学习基本原理1. 神经网络基础2. 多层…...

编程日记 2024/10/26 2:35:39

Navicat 安装

Navicat 安装步骤...

编程日记 2024/10/26 2:32:36

解读 Java 经典巨著《Effective Java》90条编程法则，第2条：遇到多个构造器参数时要考虑使用构建器

《Effective Java》是由 Joshua Bloch 撰写的经典书籍&#xff0c;提供了 Java 编程中的最佳实践和建议。在书中的第2条建议“遇到多个构造器参数时要考虑使用构建器”&#xff0c;主要是为了处理构造器参数过多时的设计问题。这条建议的主要目的是简化构造器的使用&#xff0c…...

编程日记 2024/10/26 2:31:35

拉丁美洲有望成为全球电商的新蓝海！

拉美市场&#xff0c;被行业普遍认为“可能是中国跨境电商的最后一个蓝海市场”。越来越多的中国跨境电商卖家开始关注拉美市场&#xff0c;并且持续为拉美消费者提供更为优质的“中国制造”。 为什么大家会这么认为呢&#xff1f;原因可能有以下几个方面&#xff1a; 第一、拉…...

编程日记 2024/10/26 2:28:31

VScode远程开发之remote 远程开发（二）

VScode远程开发之remote 远程开发&#xff08;二&#xff09; 使用vscode进行远程开发很简单&#xff0c;在拓展里搜索 Remote Development&#xff0c;就可以搜索到微软提供的远程开发大礼包&#xff0c;里面包含了 通过 SSH 远程服务器 远程容器 远程 WSL&#xff08;Win…...

编程日记 2024/10/26 2:27:30

基于Python+SQL Server2008实现（GUI）快递管理系统

快递业务管理系统的设计与实现 摘要: 着网络新零售的到来&#xff0c;传统物流在网购的洗礼下迅速蜕变&#xff0c;在这场以互联网为基础的时代变革中&#xff0c;哪家企业能率先转变其工作模式就能最先分得一杯羹&#xff0c;物流管理也不例外。传统的物流管理模式效率低下&a…...

编程日记 2024/10/26 2:26:28

png格式图片怎么改成jpg？超好用的8种转换方法介绍！

png格式图片怎么改成jpg&#xff1f;PNG作为一种普遍存在的图片格式&#xff0c;在我们的日常生活中无处不在&#xff0c;从社交媒体分享到工作文档插图&#xff0c;都少不了它的身影&#xff0c;PNG格式的确拥有诸多优点&#xff0c;如无损压缩保留图像的所有细节与高质量&…...

编程日记 2024/10/26 2:24:26

Idea基于JRbel实现项目热部署修改Java、Xml文件无需重启项目

Idea基于JRbel实现项目热部署修改Java、Xml文件无需重启项目 1.JRbel服务安装2.JRbel插件安装3.JRbel配置 1.JRbel服务安装 直接装插件的话&#xff0c;需要用到一个服务地址&#xff0c;服务下载链接&#xff1a;&#xff08;现在没时间搞&#xff0c;会尽快加上&#xff09;…...

编程日记 2024/10/26 2:22:23

【如何获取股票数据17】Python、Java等多种主流语言实例演示获取股票行情api接口之沪深A股近年增发数据获取实例演示及接口API说明文档

最近一两年内&#xff0c;股票量化分析逐渐成为热门话题。而从事这一领域工作的第一步&#xff0c;就是获取全面且准确的股票数据。因为无论是实时交易数据、历史交易记录、财务数据还是基本面信息&#xff0c;这些数据都是我们进行量化分析时不可或缺的宝贵资源。我们的主要任…...

编程日记 2024/10/26 2:18:19

导出BERT句子模型为ONNX并推理

在深度学习中&#xff0c;将模型导出为ONNX&#xff08;Open Neural Network Exchange&#xff09;格式并利用ONNX进行推理是提高推理速度和模型兼容性的一种常见做法。本文将介绍如何将BERT句子模型导出为ONNX格式&#xff0c;并使用ONNX Runtime进行推理&#xff0c;具体以中…...

编程日记 2024/10/26 2:16:17

Unity Apple Vision Pro 自定义手势识别交互

Vision Pro 是可以使用Unity 提供的XR Hand SDK,可通过XR Hand制作自定义手势识别&#xff0c;通过识别出不同的手势做自定义交互 效果预览 在VisionPro中看VisionPro|手势交互|自定义手势识别 Unity Vision Pro 中文课堂教程地址&#xff1a; Unity3D Vision Pro 开发教程【…...

编程日记 2024/10/26 2:15:14

【Javaee】网络原理—TCP协议的核心机制

前言 TCP/IP五层协议是互联网中的主流模型&#xff0c;为网络通信提供了一个稳固的框架。 主要包含了应用层&#xff0c;传输层&#xff0c;网络层&#xff0c;数据链路层&#xff0c;物理层。 本篇主要介绍传输层的TCP协议的核心机制 一. 确认应答&#xff08;ack&#xf…...

编程日记 2024/10/26 2:14:13

Unity插件-Intense TPS 讲解

目录 关于TPS 打开场景&#xff1a;WeaponTest.unity&#xff0c; 只要把这些枪点&#xff0c;打开&#xff08;默认隐藏&#xff0c;不知道为何), 一开始不能运行如何修复 总结 关于TPS 个人不是TPS&#xff0c;FPS的射击游戏爱好者&#xff0c; 不过感觉这个枪感&…...

编程日记 2024/10/26 2:13:12

【p2p、分布式，区块链笔记 Blockchain】truffle001 以太坊开发框架truffle初步实践

以下是通过truffle框架将智能合约部署到Ganache的步骤 Truffle简介环境准备&#xff1a;智能合约 编写 & 编译部署合约本地服务器ganache配置网络配置部署合约: 运行Truffle迁移&#xff08;部署&#xff09;:与智能合约交互: 以下是通过truffle框架将智能合约部署到Ganach…...

编程日记 2024/10/26 2:09:08

网站被浏览器提示“不安全”，如何快速解决

当网站被浏览器提示“不安全”时&#xff0c;这通常意味着网站存在某些安全隐患&#xff0c;需要立即采取措施进行解决。 一、具体原因如下&#xff1a; 1.如果网站使用的是HTTP协议&#xff0c;应立即升级HTTPS。HTTPS通过使用SSL证书加密来保护数据传输&#xff0c;提高了网…...

编程日记 2024/10/26 2:08:06

java -jar启动 报错： Error: Unable to access jarfile

是JDK版本不对&#xff0c;即运行项目所需JDK与本机所装JDK版本不同 解决方法&#xff1a; 修改JDK版本即可。 jarfile 其后的路径不对 解决方法 修改正确的路径 将绝对路径修改为相对路径或者将相对路径修改为绝对路径&#xff0c;尝试一下...

编程日记 2024/10/26 2:07:05

Servlet(三）-------Cookie和session

一.Cookie和Session Cookie和Session都是用于在Web应用中跟踪用户状态的技术。Cookie是存储在用户浏览器中的小文本文件&#xff0c;由服务器发送给浏览器。当用户再次访问同一网站时&#xff0c;浏览器会把Cookie信息发送回服务器。例如&#xff0c;网站可以利用Cookie记住用…...

编程日记 2024/10/26 2:06:04

最新物流行业CRM系统应用数字化解决方案

因势利导 ——全球化物流的挑战与机遇 在全球经济一体化与互联网技术快速发展的双重驱动下,物流行业正经历着前所未有的变革时期。这一变革不仅影响 着行业的发展模式,还对运营效率和客户体验提出了新的要求。 随着市场需求的不断演变,物流行业已呈现出多元化和专业 化并行的发…...

编程日记 2024/10/26 2:05:03

[deadlock]死锁导致的设备登录无响应问题

[deadlock]死锁导致的设备登录无响应问题 一、问题现象二、初步观察三、继续深挖查看netlink相关信息查看warnd进程栈 四、再接再厉查看warnd 用户栈 后记 一、问题现象 实验室一台压力测试设备突然无法登录&#xff0c;无论web页面&#xff0c;ssh或者telnet登录&#xff0c;…...

编程日记 2024/10/26 2:04:02

2024年10月21日计算机网络,乌蒙第一部分

【互联网数据传输原理 &#xff5c;OSI七层网络参考模型】 https://www.bilibili.com/video/BV1EU4y1v7ju/?share_sourcecopy_web&vd_source476fcb3b552dae37b7e82015a682a972 mac地址相当于是名字&#xff0c;ip地址相当于是住址&#xff0c;端口相当于是发送的东西拿什…...

编程日记 2024/10/26 2:03:01

ESlint代码规范

这里写目录标题 ESlint代码规范解决代码规范错误 ESlint代码规范 代码规范&#xff1a;一套写代码的约定规则。例如&#xff1a;“赋值符号左右是否需要空格” “一行代码结束是否要加分号” JavaScript Standard Style规范说明&#xff1a;https://standardjs.com/rules-zhc…...

编程日记 2024/10/26 2:00:59

【Vue.js设计与实现】第三篇第11章：渲染器-快速 Diff 算法-阅读笔记

文章目录 11.1　相同的前置元素和后置元素11.2　判断是否需要进行 DOM 移动操作11.3　如何移动元素11.4　总结 系列目录&#xff1a;【Vue.js设计与实现】阅读笔记目录 非常快的Diff算法。 11.1　相同的前置元素和后置元素 不同于简单 Diff 算法和双端 Diff 算法&#xff0c…...

编程日记 2024/10/26 1:59:58

材质变体 PSO学习笔记

学习笔记 参考各路知乎大佬文章 首先是对变体的基本认知 概括就是变体是指根据引擎中上层编写(UnityShaderLab/UE连连看)中的各种defines情况&#xff0c;根据不同平台编译成的底层shader&#xff0c;OpenGL-glsl/DX(9-11)-dxbc DX12-dxil/Vulkan-spirv&#xff0c;是打到游…...

编程日记 2024/10/26 1:58:57

怎么给网站添加统计代码/360营销推广

废话不多说&#xff0c;直接上代码&#xff1a; 需要转换的为list的json代码&#xff1a; [{ "id":104,"mid":16,"up_count":103,"count_date":"2016-08-15","name":"荼丸","fans":18006,&…...

编程日记 2024/11/25 22:33:29

广州网站制作商/宁波seo教程行业推广

题目: 打印出下列图案 * *** ***** ******* ********* 1.程序代码: 2.运行结果:...

编程日记 2024/11/25 20:54:41

黄岩城乡住房和建设局网站/网络推广产品要给多少钱

1、字符串判断 str1 str2　　　　 当两个串有相同内容、长度时为真 str1 ! str2　　　　当串str1和str2不等时为真 -n str1　　　　　　 当串的长度大于0时为真(串非空&#xff0c;变量) -z str1　　　　　　 当串的长度为0时为真(空串) str1　　　　　　　　当串str1为非空时…...

编程日记 2024/11/25 17:51:14

广州网站建设.com/智能建站abc

一、Linux历史 Unix强大的根本原因&#xff1a; 1、简洁&#xff0c;仅仅提供几百个系统调用并且有一个非常明确的设计目的 2、文件对待所有东西&#xff0c;通过一套相同的系统调用接口来进行对数据和设备的操作 3、由于用C语言编写&#xff0c;移植性强 4、进程创建非常迅速&…...

编程日记 2024/11/25 16:07:49

做英文网站费用/优化设计高中

调用mqic32.dll是简单的&#xff0c;但是想要返回给你的一个CompCode MQCC_OK是不容易的。 首先&#xff0c;确定mqclient和mqserver是ok联通的。在MQ Client(only)连接MQ Server收发消息配置 【转】已经说明。dos命令窗口用手工确认客户端连接服务端没有问题&#xff0c; 其次…...

编程日记 2024/11/25 13:54:50

网站新备案不能访问/故事式软文范例100字

在 HttpRequest 对象中,属性 GET 和 POST 得到的都是 django.http.QueryDict 所创建的实例。这是一个 django 自定义的类似字典的类&#xff0c;用来处理同一个键带多个值的情况。在 python 原始的字典中&#xff0c;当一个键出现多个值的时候会发生冲突&#xff0c;只保留最后…...

编程日记 2024/11/25 13:13:29