前端学习之HTML(第二天)--多媒体标签和表格标签

注:里面的注释是对各个标签的解释

多媒体标签

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body>
<!-- audio是音频可以填写绝对路径也可填写相对路径 -->
<!-- video是视频标签可以填写绝对路径也可填写相对路径 -->
<!-- img图像标签可以填写绝对路径也可填写相对路径 -->
<!--controls是控制界面,这个属性是bool值无需给他赋值只要将它填写在标签内,他即可产生作用-->
<!--autoplay是自动播放,这个功能已经不让弄了,是由于一些原因,不让视频自动播放,要不就是静音播放,要不就是不让自动播放-->
<audio controls autoplay src=""></audio>
<!--video和img里面的width和height都是属性并不是css标签-->
<videoautoplaycontrols src="测试视频.mp4"width="500"height="500">
</video>
<!--vspace是图片与文字垂直方向距离-->
<!--hspace是图片与文字水平方向距离-->
<!--alt鼠标悬停到相应的东西上出现的描述信息-->
<!--title这个是alt默认没有设置,那么ale的值默认就是title的值-->
11111
<img alt="这是测试" vspace="100" width="300" height="400" hspace="100" title="t测试" src="test.jpg" />
22222
</body>
</html>

结果 

表格标签

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>表格标签</title><style>tr{test-align:center;}td{width: 200px;height: 100px;}</style>
</head>
<body>
<!-- 	tr:tr 是 table row 的缩写,表示表格的一行。一行可以有多个单元格td:td 是 table data 的缩写,表示表格的数据单元格。th:th 是 table header的缩写,表示表格的表头单元格。 -->
<!-- border设置表格边框粗细 -->
<!-- thead用于定义表格的标题部分: -->
<!-- tbody 用于定义表格的主体部分: -->
<!-- tfoot表示表格的尾部 -->
<!-- thead和tfoot代码位置交换后网页的布局也不变 -->
<!-- &nbsp;&gt;&lt;分别代表空格大于号小于号 -->
<!-- background="" 可以表格给背景 -->
<!-- bgcolor表格给颜色 -->
<!-- rowspan行合并从上到下若没有可以合并的单位则无法合并 -->
<!-- colspan列合并从左到右若没有可以合并的单位则无法合并 -->
<!-- cellspaceing表格线的空隙, cellpadding表格和字的空隙 -->
<table border="1" align=center"" cellspaceing="0" cellpadding="0"><thead ><tr align="center"><td>科目\星期</td><td colspan="2">周一</td><td>周二</td><td>周三</td><td>周四</td><td>周五</td><td>周六</td><td></td></tr></thead><tbody><tr><td>语&nbsp;&gt;&lt;文</td><td bgcolor="#00000"></td><td ></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>数学</td><td></td><td></td><td rowspan="2">行合并</td><td></td><td></td><td></td><td></td></tr>				<tr><td>英语</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody><tfoot></tfoot>
</table>
</body>
</html>

结果


不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/722626.shtml

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

相关文章

MySQL学习笔记5: MySQL表的增删查改 (进阶)

目录 前言1. 数据库约束1.1. 约束类型not null 约束unique 唯一约束default 默认值约束primary key 主键约束foreign key 外键约束 2. 表的设计2.1. 实体之间的关系一对一一对多多对多 3. 新增4. 查询4.1. 聚合查询4.1.1. 聚合函数4.1.2. group by 子句4.1.3. having 4.2. 联合…

跨境知识分享:什么是动态IP?和静态IP有什么区别?

对于我们跨境人来说&#xff0c;清楚地了解IP地址、代理IP等这些基础知识&#xff0c;并学会正确地使用IP地址对于保障店铺的安全性和稳定性至关重要&#xff0c;尤其是理解动态IP和静态IP之间的区别&#xff0c;以及如何利用这些知识来防止账号关联&#xff0c;对于每个电商卖…

嵌入式学习33-网络通信

网络: 数据传输,数据共享 1.网络协议模型: OSI协议模型 应用层 实际发送的数据 表示层 发送的数据是否加密 会话层 是否建立会话连接 传输层 数据传输的方式&#xff08;数据…

Day22 Linux高级编程 --- Makefile

Makefile简介: 1.工程管理工具 2.指定目录下编写Makefile文件或者makefile 3.在目录下输入make 4.调用对应目录下的makefile文件 5.根据文件设定的编译规则来编译代码 Makefile语法: 1.格式: 要生成的文件:依赖的文件 生成方式 …

【STM32+OPENMV】二维云台颜色识别及追踪

一、准备工作 有关OPENMV最大色块追踪及与STM32通信内容&#xff0c;详情见【STM32HAL】与OpenMV通信 有关七针OLED屏显示内容&#xff0c;详情见【STM32HAL】七针OLED(SSD1306)配置(SPI版) 二、所用工具 1、芯片&#xff1a;STM32F407ZGT6 2、CUBEMX配置软件 3、KEIL5 4…

GDOI2024游记

Day0 中午一点钟从学校出发去东莞&#xff0c;大概坐了一个多小时车&#xff0c;两点半多到酒店。住的八方精选酒店&#xff08;ljh说他们住九方精选酒店&#xff0c;乐&#xff09;&#xff0c;说的是景区酒店&#xff0c;但打开外窗&#xff0c;近处是简陋的阳台&#xff0c…

上位机图像处理和嵌入式模块部署(qmacvisual入门)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 虽然我们前面学习了很多的知识点&#xff0c;比如说在windows这边&#xff0c;用qt写界面&#xff0c;用opencv写图像处理代码&#xff1b;在linux…

PHP语言常见面试题:PHP中的数据类型有哪些?请举例说明。

在PHP中&#xff0c;有几种基本的数据类型&#xff0c;它们包括&#xff1a; 字符串&#xff08;String&#xff09;&#xff1a;字符串是字符的序列&#xff0c;由零个或多个字符组成。在PHP中&#xff0c;字符串可以包含任何字符&#xff0c;包括字母、数字、空格、标点符号、…

[unity] xLua 热更新 【个人复习笔记/有不足之处欢迎斧正/侵删】

lua解析器 void Start(){//Lua解析器 能够让我们在Unity中执行Lua//一般情况下 保持它的唯一性LuaEnv env new LuaEnv();//执行Lua语言env.DoString("print(你好世界)");//执行一个Lua脚本 Lua知识点 &#xff1a;多脚本执行 require//默认寻找脚本的路径 是在 Res…

cuda python torch 虚拟环境配置

以下是Pytorch和CUDA对应的版本 以下是Pytorch和Python对应的版本 检查cuda与Python版本是否匹配 import torch print(torch.__version__) print(torch.cuda.is_available()) print(torch.empty(3,4,devicecuda))cuda 删除cuda conda uninstall cudatoolkit --forceconda u…

MyBatis三个经典问题

1. Mybatis的执行流程 MyBatis 是一个流行的 Java 持久化框架&#xff0c;提供了对象关系映射 (ORM) 和 SQL 映射的功能&#xff0c;使开发者能够更加方便地与数据库交互。MyBatis 的执行流程大致如下&#xff1a; 配置阶段: 加载配置文件: MyBatis 通过读取配置文件&#xff…

蓝桥杯2013年-幸运数(C语言-链表模拟)

题目描述 幸运数是波兰数学家乌拉姆命名的。它采用与生成素数类似的“筛法”生成 。 首先从1开始写出自然数1,2,3,4,5,6,.... 1 就是第一个幸运数。 我们从2这个数开始。把所有序号能被2整除的项删除&#xff0c;变为&#xff1a; 1 _ 3 _ 5 _ 7 _ 9 .... 把…

支付宝小程序模板开发,实现代小程序备案申请

大家好&#xff0c;我是小悟 支付宝小程序备案整体流程总共分为五个环节&#xff1a;备案信息填写、平台初审、工信部短信核验、通管局审核和备案成功。 服务商可以代小程序发起备案申请。在申请小程序备案之前&#xff0c;需要确保小程序基本信息已填写完成、小程序至少存在一…

Docker入门——安装部署(openEuler)、镜像加速

安装 1&#xff09;依赖的基础环境 64 位CPU Linux kernel(内核) 3.10 Linux kernel cgroups and namespaces 我用的是openEuler&#xff0c;所以直接yum安装(推荐&#xff0c;因为二进制安装&#xff0c;docker命令中补全操作要另外安装软件) [rootlocalhost ~]# yum -y…

【AIGC调研系列】DevOps过程中依靠AIGC提升效率的具体实例

在DevOps过程中利用AIGC提升效率的具体实例包括&#xff1a; 智能排查流水线错误&#xff1a;云效工程师们与阿里云通义大模型合作&#xff0c;通过基于AIGC的工具辅助流水线错误排查&#xff0c;提高了DevOps流水线运行的效率和准确性[5]。自动化编程提高研发效率&#xff1a…

「经验」在博途中 是否可以在 LAD与STL 语言之间进行切换

用惯了STEP7&#xff0c;准确来说是SIMATIC Manager进行编程开发的同学&#xff0c;在转战TIA portal后&#xff0c;通常会经历一段“晦涩”的过度期&#xff0c;包括指令库的微小变动、工作界面的大改等等。 又比如&#xff1a;“在博途中&#xff0c;怎么快速切换LAD与STL语…

NVMe管理命令为何不用SGL?-2

在IO数据传输中&#xff0c;是否选择SGL可以根据自身场景的需要。SGL提供的是一种高效且灵活的方式来描述非连续的内存区域&#xff0c;这对于现代高性能存储系统至关重要&#xff0c;尤其是在处理大数据块或者随机小I/O操作时具有明显优势&#xff1a; 高效的数据传输&#xf…

课题学习(二十)----阅读《近钻头井斜动态测量重力加速度信号提取方法研究》论文

摘要&#xff1a;利用加速度计进行近钻头井斜动态测量时&#xff0c; 钻具的高速旋转、 井下强振动、强冲击环境给重力加速度测量带来极大干扰&#xff0c;如何从干扰噪声中有效提取重力加速度信号对于提高井斜角和工具面角的测量精度至关重要。 根据重力加速度径向和切向分量为…

【代码随想录】day1 数组

因为学计算机语言是属于半路出家&#xff0c;在接触数据结构之前&#xff0c;我只了解数据的类型&#xff0c;从没有了解过不同数据类型的存储方式。数组、链表等等因为不同的存储方式&#xff0c;展现出不同的优缺点&#xff0c;以适应不同的用途。 代码随想录是属于把饭喂到嘴…

Altium Designer 22 性能优化

目录 AD22 使用起来很卡&#xff0c;完全受不了&#xff0c;卡到我的快捷鼠标宏都无法使用&#xff0c;来试着优化一下它。 每点完一步&#xff0c;都需要点击应用&#xff0c;否则不下心关掉了会很难受 打开右上角齿轮进入设置&#xff0c;取消勾选这几个勾&#xff1a; 接…