html5复习二

知识点:
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.rhkb.cn/news/476945.html

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

相关文章

VSCode【下载】【安装】【汉化】【配置C++环境】【运行调试】(Windows环境)

目录 一、VSCode的下载 & 安装 二、汉化 三、配置C 一、VSCode的下载 & 安装 Download Visual Studio Code - Mac, Linux, Windowshttps://code.visualstudio.com/Download 注意&#xff01;&#xff01;&#xff01;【不建议下载User版本&#xff0c;下载System版本】…

Diving into the STM32 HAL-----DAC笔记

根据所使用的系列和封装&#xff0c;STM32微控制器通常只提供一个具有一个或两个专用输出的DAC&#xff0c;除了STM32F3系列中的少数零件编号实现两个DAC&#xff0c;第一个具有两个输出&#xff0c;另一个只有一个输出。STM32G4 系列的一些较新的 MCU 甚至提供多达 5 个独立的…

OpenCV和Qt坐标系不一致问题

“ OpenCV和QT坐标系导致绘图精度下降问题。” OpenCV和Qt常用的坐标系都是笛卡尔坐标系&#xff0c;但是细微处有些不同。 01 — OpenCV坐标系 OpenCV是图像处理库&#xff0c;是以图像像素为一个坐标位置&#xff0c;即一个像素对应一个坐标&#xff0c;所以其坐标系也叫图像…

STM32完全学习——系统时钟设置

一、时钟框图的解读 首先我们知道STM32在上电初始化之后使用的是内部的HSI未经过分频直接通过SW供给给系统时钟&#xff0c;由于内部HSI存在较大的误差&#xff0c;因此我们在系统完成上电初始化&#xff0c;之后需要将STM32的时钟切换到外部HSE作为系统时钟&#xff0c;那么我…

Java NIO 核心知识总结

在学习 NIO 之前&#xff0c;需要先了解一下计算机 I/O 模型的基础理论知识。还不了解的话&#xff0c;可以参考我写的这篇文章&#xff1a;Java IO 模型详解。 一、NIO 简介 在传统的 Java I/O 模型&#xff08;BIO&#xff09;中&#xff0c;I/O 操作是以阻塞的方式进行的。…

前端-react(class组件和Hooks)

文章主要以Hooks为主,部分涉及class组件方法进行对比 一.了解react 1.管理组件的方式 在React中&#xff0c;有两种主要的方式来管理组件的状态和生命周期&#xff1a;Class 组件和 Hooks。 Class 组件&#xff1a; Class 组件是 React 最早引入的方式&#xff0c;它是基于…

python爬虫-下载高德地图区域(省,市,区)

python爬虫&#xff0c;用于下载&#xff1a;https://datav.aliyun.com/portal/school/atlas/area_selector 的中国地图及其下钻省市区的json文件。在echarts或者leaflet展示。 可能会少几个市区的full.json数据&#xff0c;api的xml调不通&#xff0c;可以手动去 https://data…

uni-app 修改复选框checkbox选中后背景和字体颜色

编写css&#xff08;注意&#xff1a;这个样式必须写在App.vue里&#xff09; /* 复选框 */ /* 复选框-圆角 */ checkbox.checkbox-round .wx-checkbox-input, checkbox.checkbox-round .uni-checkbox-input {border-radius: 100rpx; } /* 复选框-背景颜色 */ checkbox.checkb…

MacOS下的Opencv3.4.16的编译

前言 MacOS下编译opencv还是有点麻烦的。 1、Opencv3.4.16的下载 注意&#xff0c;我们使用的是Mac&#xff0c;所以ios pack并不能使用。 如何嫌官网上下载比较慢的话&#xff0c;可以考虑在csdn网站上下载&#xff0c;应该也是可以找到的。 2、cmake的下载 官网的链接&…

内外网交换过程中可能遇到的安全风险有哪些?

在数字化时代&#xff0c;企业内外网之间的数据交换变得日益频繁。然而&#xff0c;这一过程中的安全风险和效率问题也日益凸显。我们将探讨内外网交换可能遇到的安全风险&#xff0c;并介绍镭速内外网交换系统如何有效应对这些挑战。 内外网交换过程中的五大安全风险 数据泄露…

Redis的过期删除策略和内存淘汰机制以及如何保证双写的一致性

Redis的过期删除策略和内存淘汰机制以及如何保证双写的一致性 过期删除策略内存淘汰机制怎么保证redis双写的一致性?更新策略先删除缓存后更新数据库先更新数据库后删除缓存如何选择&#xff1f;如何保证先更新数据库后删除缓存的线程安全问题&#xff1f; 过期删除策略 为了…

GESP2023年9月认证C++四级( 第三部分编程题(1-2))

编程题1&#xff08;string&#xff09;参考程序&#xff1a; #include <iostream> using namespace std; long long hex10(string num,int b) {//int i;long long res0;for(i0;i<num.size();i) if(num[i]>0&&num[i]<9)resres*bnum[i]-0;else //如果nu…

VSCode汉化教程【简洁易懂】

我们安装完成后默认是英文界面。 找到插件选项卡&#xff0c;搜索“Chinese”&#xff0c;找到简体&#xff08;更具你的需要&#xff09;&#xff08;Microsoft提供&#xff09;Install。 安装完成后选择Change Language and Restart。

java学习-集合

为什么有集合&#xff1f; 自动扩容 数组&#xff1a;长度固定&#xff0c;可以存基本数据类型和引用数据类型 集合&#xff1a;长度可变&#xff0c;可以存引用数据类型&#xff0c;基本数据类型的话需要包装类 ArrayList public class studentTest {public static void m…

MATLAB GUI设计(基础)

一、目的和要求 1、熟悉和掌握MATLAB GUI的基本控件的使用及属性设置。 2、熟悉和掌握通过GUIDE创建MATLAB GUI的方法。 3、熟悉和掌握MATLAB GUI的菜单、对话框及文件管理框的设计。 4、熟悉和掌握MATLAB GUI的M文件编写。 5、了解通过程序创建MATLAB GUI的方法。 二、内…

【工具变量】中国省级及地级市保障性住房数据集(2010-2023年)

一、测算方式&#xff1a;参考顶刊《世界经济》蔡庆丰&#xff08;2024&#xff09;老师的研究&#xff0c;具体而言&#xff0c;本文将土地用途为经济适用住房用地、廉租住房用地、公共租赁住房用地、共有产权住房用 地等类型的土地定义为具有保障性住房用途的土地。根据具有保…

第T8周:Tensorflow实现猫狗识别(1)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 具体实现 &#xff08;一&#xff09;环境 语言环境&#xff1a;Python 3.10 编 译 器: PyCharm 框 架: &#xff08;二&#xff09;具体步骤 from absl.l…

Day 18

修建二叉搜索树 link&#xff1a;669. 修剪二叉搜索树 - 力扣&#xff08;LeetCode&#xff09; 思路分析 注意修剪的时候要考虑到全部的节点&#xff0c;即搜到到限定区间小于左值或者大于右值时还需要检查当前不符合区间大小节点的右子树/左子树&#xff0c;不能直接返回n…

核间通信-Linux下RPMsg使用与源码框架分析

目录 1 文档目的 2 相关概念 2.1 术语 2.2 RPMsg相关概念 3 RPMsg核间通信软硬件模块框架 3.1 硬件原理 3.2 软件框架 4 使用RPMsg进行核间通信 4.1 RPMsg通信建立 4.1.1 使用名称服务建立通信 4.1.2 不用名称服务 4.2 RPMsg应用过程 4.3 应用层示例 5 RPMsg内核…

常用Adb 命令

# 连接设备 adb connect 192.168.10.125# 断开连接 adb disconnect 192.168.10.125# 查看已连接的设备 adb devices# 安装webview adb install -r "D:\webview\com.google.android.webview_103.0.5060.129-506012903_minAPI23(arm64-v8a,armeabi-v7a)(nodpi)_apkmirror.co…