CSS中的长度单位和HTML5中多媒体标签的使用
CSS中的长度单位和HTML5中多媒体标签的使用
- 第一部分、长度单位
- 1.基本长度单位
- 2.长度单位的换算
- 第二部分、vw、vh、vmin、vmax
- 1.vw、vh、vmin、vmax的含义
- 2.vw、vh和%的区别
- 3.vmin、vmax的用处
- 第三部分、HTML5中的多媒体标签的使用
- 1.视频音频嵌入技术概述
- 2.视频文件和音频文件的格式
- 3.嵌入视频和音频
- （1）在HTML5中嵌入视频
- （2）在HTML5中嵌入音频
- （3）视频音频文件的兼容性问题
- （4）页面中嵌入多媒体文件的方式
- 第四部分、滚动标签
- 1.文字的滚动
- 2.图片的滚动
第一部分、长度单位
1.基本长度单位
| 单位名 | 含义 |
|---|---|
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| px | 像素点,相对长度单位,相对于计算机屏幕分辨率 |
| em | 相对长度单位，相对于当前对象内文本的字体尺寸，任意浏览器默认的相对字体高度为16em |
| pt | 磅 |
2.长度单位的换算
- 12px = 0.75em
- 10px = 0.625em
- 1in = 72pt
第二部分、vw、vh、vmin、vmax
vw、vh、vmin、vmax：是视窗(Viewport)单位，是相对单位，由视窗大小决定.1个单位类似于1%
1.vw、vh、vmin、vmax的含义
| 单位名 | 含义 |
|---|---|
| vw | 视窗宽度的百分比(1vm = 视窗宽度的1%) |
| vh | 视窗高度的百分比 |
| vmin | 表示vm、vh中的较小的一个值 |
| vmax | 表示vm、vh中的较大的一个值 |
2.vw、vh和%的区别
- %是相对于父元素的大小而设定的比例,vw、wh是由视窗的大小来决定
- vw、vh可以直接获取视窗的宽度或高度,%在设置时要根据body的高度的情况，往往无法正确的获取实际宽度或高度
3.vmin、vmax的用处
在开发移动页面时，使用vw、wh来设置字体的大小，在竖屏、横屏状态下显示的字体大小不一样，由于vmin、vmain是当前较小或较大的，用来设置字体可以保证在竖屏、横屏状态下字体大小一样
第三部分、HTML5中的多媒体标签的使用
使用多媒体标签的原因：在网页设计中，多媒体技术主要是指在网页上运用音频视频传递信息的一种方式。在网络传输速度越来越快的今天，音频和视频技术已经被越来越广泛的应用在网页设计中，比起静态的图片和文字，音频和视频可以为用户提供更直观、丰富的信息。
1.视频音频嵌入技术概述
运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件，如果想要这些文件在页面中加载播放，还需要设置正确的多媒体格式。
- 视频格式：视频格式包含视频编码、音频编码和容器格式
- 音频格式：音频格式是指要在计算机内播放或是处理音频文件。
2.视频文件和音频文件的格式
- 视频格式包括mp4，webM，ogg。
- 音频格式包括mp3，wav，ogg。
3.嵌入视频和音频
（1）在HTML5中嵌入视频
在HTML5中，video标签用于定义播放视频文件的标准。
基本语法格式如下：
<video src="视频文件路径" controls="controls"></video>
（2）在HTML5中嵌入音频
在HTML5中，audio标签用于定义播放音频文件的标准。
基本语法格式如下：
<audio src="音频文件路径" controls="controls"></audio>
（3）视频音频文件的兼容性问题
虽然html5支持Ogg、MPEG 4和WebM的视频格式以及Ogg、MP3和Wav的音频格式，但各浏览器对这些格式却不完全支持。
（4）页面中嵌入多媒体文件的方式
- 调用本地多媒体文件
- 调用指定url地址的互联网多媒体文件
例如：
<video src="网络地址" controls="controls">调用网络视频文件</video>
第四部分、滚动标签
1.文字的滚动
<marquee direction="滚动方向" behavior="滚动方式" scrollmount="滚动速度">文字</marquee>
| direction属性的取值 | 含义 |
|---|---|
| left | 默认值,向左滚动 |
| right | 向右滚动 |
| up | 向上滚动 |
| down | 向下滚动 |
| behavior属性的取值 | 含义 |
|---|---|
| scroll | 默认值,循环滚动 |
| slide | 只滚动一次,不重复滚动 |
width、height：设置滚动范围
2.图片的滚动
<marquee direction="滚动方向" behavior="滚动方式" scrollmount="滚动速度"><img src=""/>
</marquee>
CSS中的长度单位和HTML5中多媒体标签的使用相关推荐
- html5中api有什么,HTML5中的API概览
HTML5中的API概览 整理一下HTML5中的常见API. 前言 HTML5中提供了一些功能强大的API,在不考虑兼容性的情况下,比起原生js实现更加简单,比起jQuery可以少引入包,这里整理几个 ...
- html中section与div,HTML5中div、section、article的区别
HTML5中新增了...... 多个有语义的结构化标签元素.其中section和article这两个标签和div差不多功能,很容易混淆. div(分区division) 这个标签是我们见得最多.用得最 ...
- html5中figure怎么用,HTML5中figure和figcaption标签用法
HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法. 标签规定独立的流内容(图像.图表.照片.代码等等). figure元素的内 ...
- 在html中加动画效果,html5中css3新添加的动画效果
字css3中,动画着重要说的就是:transition属性,表示过渡 (1) 如何定义一个动画: 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. div { width:100 ...
- html5中defer的属性,HTML5中defer和async的比较
在网站页面中,通常需要引入外部js资源,然而外部的js资源可能导致DOM阻塞,影响页面加载速度.通过异步或者延迟执行js,可以做到引用外部js资源而不阻塞DOM的目的.用法是直接在script标签中使 ...
- 在html5代码中加个时间,HTML5中video标签“事件”详解（实时监测当前播放时间）代码...
1.html代码:video后边几个元素,可处理ios 系统的兼容性 2.Js代码: //获取视频DOM元素 var myVideo = document.getElementById("m ...
- HTML5中volume样式自定义,html5中关于volume属性的使用详解
Audio对象属性: volume 描述:设置或返回音频的音量,取值范围(0--1) 下面是我做的音乐播放器如何调节音频音量的代码://增加切换音量事件 (function(){ var height ...
- 详解html5新增的标签与css3中伪类和伪元素
html5 / css3 基础篇(第一篇) 回顾 是的,你没看错!今天是一个全新的开始,今天这一讲我们就要开始h5和c3了,html 和 css的基础篇我们都告一段落了.html一共两篇,css走过了 ...
- html5中单选框被选中把值传给后台_HTML5的表单设计
使用过Delphi的程序员,对Form这个词应该比较熟悉.在Delphi中,Form被翻译为"界面.窗口",作用是:为用户提供界面,供用户输入信息,向用户展示处理结果. HTML5 ...
最新文章
- 针对《评人工智能如何走向新阶段》一文，继续发布国内外的跟贴留言第二部552-556条
- 本地与世界的区别-学习笔记（一）
- 双向最大匹配算法（含完整代码实现，ui界面）正向最大匹配算法，逆向最大匹配算法
- 访问者模式 php,18php访问者模式
- python filename 以txt截尾_What？PPT里也能运行Python？
- 无头结点单链表的逆置_第1章第2节练习题11 就地逆置单链表
- TypeScript--es5中的类，继承，静态方法
- 分布式架构－－基本思想汇总
- 远程控制python
- davlik虚拟机内存管理之一——内存分配
- 百度文库下载工具（引言及使用教程）
- WinRAR去除广告
- C# 对文件进行MD5计算
- 第四届CSTQB®国际软件测试高峰论坛
- java init是什么
- 自动化测试框架[Cypress概述]
- LCS(最长公共子序列)递归/动态规划
- 高考放榜季 | 知道创宇全方位保障教育政务网站安全可用
- RX 6600XT vs RTX 2060Super 显卡对比
- 金仓数据库KingbaseES客户端编程接口指南-ODBC（6. KingbaseES ODBC 的扩展属性）