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

news2024/11/17 17:24:43

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

多媒体标签

<!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标签-->
<video
        autoplay
        controls 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.coloradmin.cn/o/1492597.html

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

相关文章

【Hadoop大数据技术】——Hadoop概述与搭建环境(学习笔记)

&#x1f4d6; 前言&#xff1a;随着大数据时代的到来&#xff0c;大数据已经在金融、交通、物流等各个行业领域得到广泛应用。而Hadoop就是一个用于处理海量数据的框架&#xff0c;它既可以为海量数据提供可靠的存储&#xff1b;也可以为海量数据提供高效的处理。 目录 &#…

CSS定位,web游戏开发

面试前的准备 在这部分&#xff0c;我将详细讲解面试前我们需要做哪些方面的工作&#xff0c;以保证我们在面试过程中更加顺利。 准备一份漂亮的简历 一份漂亮的简历就是你进入大厂的敲门砖。 网上有很多教程教大家如何写出一份漂亮的简历&#xff0c;这里我就不做重复劳动了…

【SpringBoot3.x教程02】SpringBoot配置文件详解

前言&#xff1a;什么是配置文件 SpringBoot的配置文件是指用于定义和管理SpringBoot应用程序配置的文件。这些配置文件允许开发者调整和控制应用程序的行为&#xff0c;而无需改变代码。主要有两种格式的配置文件&#xff1a; 1、application.properties&#xff1a;这是一种使…

JavaScript 闭包:让你更深入了解函数和作用域

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

修改表中某个字段等于另一个字段减去 2 小时的 SQL

需求&#xff1a;将表中到达时间按照客户要求改为比赛时间的提前 N 小时&#xff0c;具体如下&#xff1a; 表结构 update contestSchedule SET mainRefereeArrivalTimeDATE_FORMAT(CONCAT(2024-03-04 ,gameTime)- INTERVAL 2 HOUR, %H:%i), assistantRefereeArrivalTimeDAT…

streamlit初学-用streamlit实现云台控制界面

用streamlit实现云台控制界面 效果图PC上的效果手机上的效果 源码: 本文演示了,如何用streamlit做一个云台控制界面。功能包括:用户登录,事件的处理,图片的更新 版本信息: streamlit_authenticator: 下载链接streamlit : 1.31.1python: 3.11 修改点: streamlit_authenticato…

CSS实现选中卡片样式操作

图一默认自动选中&#xff0c;并且不可取消选中&#xff0c;当选择其他卡片才可点击下一步 在 “ src/assets ” 路径下存放 save.png&#xff0c;代表选中的状态 <div class"cards"><ul class"container"><li v-for"image in image…

什么是工业级物联网智能网关?如何远程控制PLC?

在这个信息爆炸的时代&#xff0c;物联网技术已经逐渐渗透到我们生活的方方面面&#xff0c;而工业级物联网智能网关作为连接工业设备和云端的重要桥梁&#xff0c;更是引领着工业4.0时代的浪潮。那么&#xff0c;究竟什么是工业级物联网智能网关呢&#xff1f;今天&#xff0c…

【学习笔记】开源计算机视觉库OPENCV学习方案

本文中&#xff0c;我们试图提供一些学习OpenCV的详细和实用资源&#xff0c;这些资源包括基础知识、进阶技巧以及实践项目&#xff0c;旨在帮助初学者和进阶学习者更好地掌握和使用OpenCV库。 一、学习资源 官方文档&#xff1a;OpenCV的官方文档是学习OpenCV的最佳起点。它包…

代码随想录算法训练营第九天

28. 实现 strStr() &#xff08;本题可以跳过&#xff09; 方法&#xff1a; 方法一&#xff1a; 暴力法 i 表示最多能移动到n-m位置&#xff0c; 超过则退出循环。j表示haystack 初始位置k表示needle的初始位置如果haystack [j] needle[k]且 k<m 则 j, k; 如果 km 则返…

P5076 【深基16.例7】普通二叉树(简化版)题解

题目 您需要写一种数据结构&#xff0c;来维护一些数&#xff08;都是绝对值以内的数&#xff09;的集合&#xff0c;最开始时集合是空的。其中需要提供以下操作&#xff0c;操作次数q不超过&#xff1a; 定义数x的排名为集合中小于x的数的个数1。查询数x的排名。注意x不一定…

【操作系统概念】 第3章:进程

文章目录 0.前言3.1进程概念3.1.1 进程3.1.2 进程状态3.1.3 进程控制块&#xff08;PCB&#xff09; 3.2、进程调度3.2.1 调度队列3.2.2 调度程序3.2.3 上下文切换 3.3 进程操作3.3.1 进程创建3.3.2 进程终止 3.4 进程间通信 0.前言 早期的计算机一次只能执行一个程序。这种程序…

c++复习

基础 内存分区 栈&#xff1a; 存放函数的局部变量、函数参数、返回地址等&#xff0c;由编译器自动分配和释放。 堆&#xff1a; 动态申请的内存空间&#xff0c;就是由 malloc 分配的内存块&#xff0c;由程序员控制它的分配和释放&#xff0c;如果程序执行结束还没有释放…

09. C语言内嵌汇编代码

C语言函数内可以自定义一段汇编代码&#xff0c;在GCC编译器中使用 asm 或 __asm__ 关键词定义一段汇编代码&#xff0c;并可选添加volatile关键字&#xff0c;表示不要让编译器优化这段汇编代码。 内嵌汇编代码格式如下&#xff1a; __asm__ ("汇编代码":输出描述…

Linux中给复杂命令起别名

目录 1 前言 2 操作步骤 2.1 打开.bashrc 2.2 编辑.bashrc-添加别名 2.3 使别名生效 1 前言 在linux中有些指令会比较长&#xff0c;为了便捷的使用它们&#xff0c;我们就可以采取起别名的方式&#xff0c;具体操作如下。 2 操作步骤 2.1 打开.bashrc 输入如下指令&a…

SAP PP学习笔记 - 豆知识08 - 如何修改价格

正常的品目修改用MM02。 新建一个品目之后&#xff0c;啥都没干&#xff0c;现在想修改一下价格&#xff0c;发现MM02 修改不了了。 1&#xff0c;MR21 这里注意 转记日付 要和会计期间一致。 比如我这里的会计期间是 2024/03 有关会计期间&#xff0c;可以参照如下文章&am…

【C++】类和对象之初始化列表与static成员

个人主页 &#xff1a; zxctscl 文章封面来自&#xff1a;艺术家–贤海林 如有转载请先通知 文章目录 1. 前言2. 再谈构造函数2.1 构造函数体赋值2.2 初始化列表2.3 explicit关键字 3. static成员3.1 概念3.2 特性 1. 前言 在前面的博客中已经分享有关构造函数 【C】构造函数和…

DHCP自动获取IP地址实验(华为)

思科设备参考&#xff1a;DHCP自动获取IP地址实验&#xff08;思科&#xff09; 一&#xff0c;实验目的 路由器搭载DHCP&#xff0c;让PC通过DHCP自动获取IP地址 二&#xff0c;不划分vlan--全局地址池 实验拓扑 配置命令 Router <Huawei>system-view [Huawei]ip po…

JRebel and XRebel 插件在IDEA中的安装、激活和使用

1、JRebel安装 1、打开idea->setting->plugins->Marketplace 2、搜索插件JRebel and XRebel&#xff0c;点击安装&#xff0c;然后重启idea 如果左侧出现JRebel & XRebel代表已安装 3.离线安装JRebel 根据自己安装的idea版本进行下载电影的jrebel https://plugi…

表达式求值(中序遍历,)

题目描述&#xff1a; 分析&#xff1a; 此题是acwing的一个模板例题&#xff0c;利用中缀遍历解决&#xff0c;即可。 思路&#xff1a; 首先我们先了解一下什么是树的中序遍历&#xff1f; 中序遍历是 二叉树遍历 的一种&#xff0c;也叫做 中根遍历 、中序周游。 在二叉树中…