html5复习二

news2024/11/20 5:39:17

知识点:
1、音频标签
<audio controls="controls"
loop="loop"
preload="auto"
src="张恒远 - 追梦赤子心.mp3"
muted="muted"   >
</audio>
controls:显示控件  必须写
loop:循环播放,播放的次数
preload:预加载,在页面加载时加载音频,就绪 none(不加载)/metadata(加载)/auto(自动)
src:音频的路径
muted:初始加载为静音


如果适应不同的浏览器都能加载音频,那么调整如下
<audio>
<source  src="张恒远 - 追梦赤子心.ogg"/>     --source:来源
<source  src="张恒远 - 追梦赤子心.mp3"/>
<source  src="张恒远 - 追梦赤子心.mav"/>
</audio>

2、视频标签
<video     controls="controls"
 width="800"
 height="400"
        poster="360_phone.png"     --预加载时显示的图片
 loop="loop"
 preload="metadata" >
            <source src="video001.mp4" />
</video>

3、列表标签
<!--有序列表-->
    <ol type="I">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
        type:类型   1 数字 a 小写字母  A 大写字母  /i(罗马数字1)/I (罗马数字大写1)

<!--无序列表-->   (导航、新闻列表)
<ul type="square">
        <li>信息1</li>
        <li>信息2</li>
        <li>信息3</li>
</ul>
type:  square正方形/circle空心圆环/disc实心圆

<!--自定义列表-->
<dl>
    <dt>这是自定义列表的标题</dt>
    <dd>这里是自定义列表项标题所对应的描述           </dd>
</dl>
说明:<dt>自定义列表的标题    dd自定义列表项标题所对应的描述   一个dt可对应多个dd

4、容器标签
<div>    </div>      可以存放任意标签   ,块级标签:  独占一行,从上往下排
<span></span> 只适用于文字     行内标签:共用一行,从左往右排

5、表格标签
1)基本语法
<table border="1">
<tr>
<td></td>
...
</tr>
<tr>
<td></td>
...
</tr>
</table>
table:表格标签   border:边框的宽度
tr:行标签
td:单元格标签

2)单元格的合并:
<table>
  <tr>
<td colspan=“所跨的列数”> 单元格内容 </td>
<td rowspan="所跨的行数"></td>
  </tr>
</table>
 
解读:
rowspan属性:跨行合并
colspan属性:跨列合并
注意:跨行合并两行时,需在下一行中删除一个td标签
 跨列合并两个单元格时,需在同一行中删除一个td标签

3)表格相关其他标签:
语法:
<table border="1">
<caption>本周畅销笔记本排名TOP3</caption>
  <thead>
  <tr>
      <th>排名</th><th>品牌</th>  ......
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>1</td><td>联想</td> ......
  </tr>
  ......
  </tbody>
  <tfoot>
  <tr>
  </tfoot>
</table>
  <td>总销售量:</td>
  <td>737</td>
  </tr>
解读:
caption标签:表格标题标签
thead标签:表格表头标签
th标签:表格表头单元格标签,有加粗效果
tbody标签:表格主体数据标签
tfoot标签:表格底部标签

4)表格的美化修饰和布局
属性:
width:宽度(单位:像素、百分比) 表格、单元格标签上
height:高度(单位:像素、百分比)  行标签上
border:边框宽度(单位:像素)表格标签上
bgcolor:背景颜色(十六进制、英文单词)
background:背景图片的地址(建议用相对地址)
align:对齐方式(right、center、left),如果align="center" 写在table标签上,即表格居中内容不居中,写在tr/td表示内容在单元格中居中显示。
cellspacing:单元格与单元格之间的距离,间距(单位:像素,也可以不写单位)
cellpadding:单元格与内容之间的距离,填充(单位:像素,也可以不写单位)

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

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

相关文章

新一代API开发工具,让API调试更快 更简单

新一代API开发工具 代理调试 请求测试一站式解决方案 Reqable Fiddler Charles Postman, 让API调试更快 &#x1f680; 更简单 &#x1f44c; 直接上下载地址 根据系统,下载对应的版本即可 https://reqable.com/zh-CN/download/

详细解析STM32 GPIO引脚的8种模式

目录 一、输入浮空&#xff08;Floating Input&#xff09;&#xff1a;GPIO引脚不连接任何上拉或下拉电阻&#xff0c;处于高阻态 1.浮空输入的定义 2.浮空输入的特点 3.浮空输入的应用场景 4.浮空输入的缺点 5.典型配置方式 6.注意事项 二、输入上拉&#xff08;Inpu…

对于 unix 系统管理员来说,了解 VIM 有多重要?

对于 Unix 系统管理员来说&#xff0c;掌握 VIM 的重要性不言而喻。VIM 作为 Unix 系统中默认的文本编辑器&#xff0c;几乎在所有 Unix 系统中都预装&#xff0c;这使得系统管理员必须熟练使用它来编辑配置文件、编写脚本等。 VIM 强大的功能和灵活性&#xff0c;使得它能够满…

containerd使用

一、ctr命令 1.查看命名空间 ctr namespace ls 2.查看特定命名空间镜像 ctr -n k8s.io images ls 3.查看特定命名空间容器 ctr -n k8s.io container ls 注意&#xff1a;该项与docker不同&#xff0c;container查看容器是所有的容器无论有没有启动&#xff0c;只要创建了的…

Python 数据结构对比:列表与数组的选择指南

文章目录 &#x1f4af;前言&#x1f4af;Python中的列表&#xff08;list&#xff09;和数组&#xff08;array&#xff09;的详细对比1. 数据类型的灵活性2. 性能与效率3. 功能与操作4. 使用场景5. 数据结构选择的考量6. 实际应用案例7. 结论 &#x1f4af;小结 &#x1f4af…

在Q-Studio中进行OTX脚本的开发、仿真与调试

一 背景 现如今&#xff0c;随着车辆中电子器件和软件数量的快速增加&#xff0c;在车辆研发、生产、测试及售后阶段需要进行的车载测试工作越来越多、越来越复杂&#xff0c;呈现指数级增长的趋势。以往常用的手动测试方式已完全无法满足现如今的测试需求了&#xff0c;由此推…

Cursor安装Windows / Ubuntu

一、安装 1、下载软件 2、安装依赖 #安装fuse sudo apt-get install fuse3、将cursor添加到应用程序列表 sudo mv cursor-0.42.5x86_64.AppImage /opt/cursor.appimage #使用自己版本号替换 sudo chmod x /opt/cursor.appimage #给予可执行权限 sudo nano /usr/share/applic…

NLP论文速读(多伦多大学)|利用人类偏好校准来调整机器翻译的元指标

论文速读|MetaMetrics-MT: Tuning Meta-Metrics for Machine Translation via Human Preference Calibration 论文信息&#xff1a; 简介&#xff1a; 本文的背景是机器翻译&#xff08;MT&#xff09;任务的评估。在机器翻译领域&#xff0c;由于不同场景和语言对的需求差异&a…

Docker部署Kafka集群,增加 SASL_SSL认证,并集成到Spring Boot,无Zookeeper版

1&#xff0c;准备好Kafka 镜像包&#xff1a; bitnami/kafka:3.9.0 镜像资源包 2&#xff0c;准备好kafka.keystore.jks 和 kafka.truststore.jks证书 具体操作可参考&#xff1a; Docker部署Kafka SASL_SSL认证&#xff0c;并集成到Spring Boot-CSDN博客 3&#xff0c;配置…

Git 分⽀规范 Git Flow 模型

前言 GitFlow 是一种流行的 Git 分支管理策略&#xff0c;由 Vincent Driessen 在 2010 年提出。它提供了一种结构化的方法来管理项目的开发、发布和维护&#xff0c;特别适合大型和复杂的项目。GitFlow 定义了一套明确的分支模型和工作流程&#xff0c;使得团队成员可以更有效…

shell脚本命令1,保姆级别---清风

声明&#xff1a; 本文的学习内容来源于B站up主“泷羽sec”视频“蓝队基础之网络七层杀伤链”的公开分享&#xff0c;所有内容仅限于网络安全技术的交流学习&#xff0c;不涉及任何侵犯版权或其他侵权意图。如有任何侵权问题&#xff0c;请联系本人&#xff0c;我将立即删除相…

MySQL扩展varchar字段长度能否Online DDL

目录 问题场景 Online DDL 简介 场景复现 DBdoctor快速识别 Online DDL 总结 问题场景 在MySQL数据库中&#xff0c;DDL变更可以通过两种算法实现&#xff1a;Copy算法和In-Place算法。Copy算法会复制整个表&#xff0c;这可能导致长时间的写入阻塞&#xff0c;从而严重影…

低成本出租屋5G CPE解决方案:ZX7981PG/ZX7981PM WIFI6千兆高速网络

刚搬进新租的房子&#xff0c;没有网络&#xff0c;开个热点&#xff1f;续航不太行。随身WIFI&#xff1f;大多是百兆级网络。找人拉宽带&#xff1f;太麻烦&#xff0c;退租的时候也不能带着走。5G CPE倒是个不错的选择&#xff0c;插入SIM卡就能直接连接5G网络&#xff0c;千…

港大ArcLab最新开源DEIO:第一个学习与传统非线性图优化紧密结合的单目事件惯性里程计

原文链接&#xff1a;港大ArcLab最新开源DEIO&#xff1a;第一个学习与传统非线性图优化紧密结合的单目事件惯性里程计 导读 本文介绍了一种名为 DEIO&#xff08;Deep Event Inertial Odometry&#xff09;的新型单目深度事件惯性里程计框架。该方法创新性地将深度学习与传统…

基于麒麟服务器操作系统V10版本,部署Nginx服务、MySql服务搭建PHP环境,实现静态网站平台的搭建。

一、环境准备 关闭防火墙。 查看当前防火墙的状态 systemctl status firewalld Copy 如果防火墙的状态参数是inactive,则防火墙为关闭状态。 如果防火墙的状态参数是active,则防火墙为开启状态。 关闭防火墙。 如果您想临时关闭防火墙,需要运行以下命令: systemctl…

【priority_queue的使用及模拟实现】—— 我与C++的不解之缘(十六)

前言 ​ priority_queue&#xff0c;翻译过来就是优先级队列&#xff0c;但是它其实是我们的堆结构&#xff08;如果堆一些遗忘的可以看一下前面的文章复习一下【数据结构】二叉树——顺序结构——堆及其实现_二叉树顺序结构-CSDN博客&#xff09;&#xff0c;本篇文章就来使用…

在AndroidStudio中新建项目时遇到的Gradle下载慢问题,配置错的按我的来,镜像地址不知道哪个网页找的,最主要下载要快

android-studio-2024.2.1.11-windows Android 移动应用开发者工具 – Android 开发者 | Android Developers https://r4---sn-j5o76n7z.gvt1-cn.com/edgedl/android/studio/install/2024.2.1.11/android-studio-2024.2.1.11-windows.exe?cms_redirectyes&met1731775…

《Java核心技术 卷I》用户界面中首选项API

首选项API 在桌面程序中&#xff0c;通常都会存储用户首选项&#xff0c;如用户最后处理的文件、窗口的最后位置等。 利用Properties类可以很容易的加载和保存程序的配置信息&#xff0c;但有以下缺点&#xff1a; 有些操作系统没有主目录概念&#xff0c;很难为匹配文件找到…

服务器数据恢复—raid5阵列故障导致上层系统分区无法识别的数据恢复案例

服务器数据恢复环境&#xff1a; 某品牌DL380服务器&#xff0c;服务器中三块SAS硬盘组建了一组raid5阵列。服务器安装Windows Server操作系统&#xff0c;划分了3个分区&#xff0c;D分区存放数据库&#xff0c;E分区存放数据库备份。 服务器故障&#xff1a; RAID5阵列中有一…

Linux_shell脚本if语句详细教程

前言 在 Linux Shell 脚本中&#xff0c;if 语句用于基于条件执行命令或代码块。它的基本语法结构如下&#xff1a; if 条件; then# 如果条件为真时执行的代码 elif 另一个条件; then# 如果另一个条件为真时执行的代码 else# 如果所有条件都不成立时执行的代码 fi一、if 语句…