06HTML基础--多媒体标签
video标签
作用: 播放视频
格式1:
<video src="">
</video>
video标签的属性
- src: 告诉video标签需要播放的视频地址
- autoplay: 告诉video标签是否需要自动播放视频
- controls: 告诉video标签是否需要显示控制条
- poster: 告诉video标签视频没有播放之前显示的占位图片
- loop: 告诉video标签循环播放视频. 一般用于做广告视频
- preload: 告诉video标签预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
- muted:告诉video标签视频静音
width/height: 和img标签中的一模一样
格式2
<video><source src="" type=""></source><source src="" type=""></source>
</video>
第二种格式存在的意义
- 由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式
- ideo标签的第二种格式存在的意义就是为了解决浏览器适配问题. video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放
注意点:
- 当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
- 在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现
audio标签
作用: 播放音频
格式:
<audio src="">
</audio><audio><source src="" type="">
</audio>
- 注意点:
- audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样. 只不过有3个属性不能用, height/width/poster
详情和概要标签
作用:利用summary标签来描述概要信息, 利用details标签来描述详情信息
默认情况下是折叠展示, 想看见详情必须点击格式:
<details><summary>概要信息</summary>详情信息
</details>
marquee标签
- 作用: 跑马灯效果
格式:
<marquee>内容</marquee>
属性:
- direction: 设置滚动方向 left/right/up/down
- scrollamount: 设置滚动速度, 值越大就越快
- loop: 设置滚动次数, 默认是-1, 也就是无限滚动
- behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
注意点:
- marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好
HTML中被废弃的标签
-- 由于HTML现在只负责语义而不负责样式.但是HTML一开始有一部分标签连样式也包揽了, 所以这部分标签都被废弃了
- b、u、i、s
- 以上标签自己带有样式, 有浓厚的样式作用, 今后一般都只作为CSS钩子使用
- 原则: 不到万不得已,切记不要使用如上标签. 大家可以到BAT的网站查看源代码, 几乎看不到以上标签
b(Bold)作用: 将文本字体加粗
- 格式:
<b>将文本字体加粗</b>
- 格式:
u(Underlined)作用: 为文本添加下划线
- 格式:
<u>为文本添加下划线</u>
- 格式:
i(Italic)作用: 显示斜体文本效果
- 格式:
<i>显示斜体文本效果</i>
- 格式:
s(Strikethrough)作用: 为文本添加删除线
- 格式:
<s>为文本添加删除线</s>
- 格式:
为了弥补 b、u、i、s标签的不足, W3C又推出了一组新的标签, 这些标签在
显示上
看似和buis没什么区别
,但是在语义上却有重大区别
- strong作用: 着重内容
- 格式:
<strong>着重内容</strong>
- 格式:
- ins(Inserted)作用: 新插入的文本
- 格式:
<ins>新插入的文本</ins>
- 格式:
- em(Emphasized)作用:强调内容
- 格式:
<em>强调内容</em>
- 格式:
- del(Deleted)作用: 已删除的文本
- 格式:
<del>已删除的文本</del>
- 格式:
- 其它更多详见维基百科
- strong作用: 着重内容
HTML实体
我们想在页面上输出
<h1>
这些字符,但是HTML认为这是一个标签, 所以如果需要输出一些特殊的字符需要通过字符实体来实现lt是英语less than 小于的意思,
<
可以在页面上输出一个小于符号gt是英语greater than 大于的意思,
>
可以在页面上输出一个大于符号html中对空格,缩进,换行不敏感,如果同时出现多个空格缩进或者执行,页面只会把它们当作一个空格来解析。所以想要在html中输出空格必须使用来实现, 一个就代表一个空格
- html对中文空格敏感, 也就是说可以显示中文空格, 但是不推荐这样使用
- 是英语non-breaking spacing, 翻译为不打断空格的意思
显示结果 | 描述 | 实体名称 |
---|---|---|
空格 | ||
< | 小于号 |
<
|
> | 大于号 |
>
|
© | 版权 |
©
|
® | 注册商标 |
®
|
™ | 商标 |
™
|
& | 和号 |
&
|
" | 引号 |
"
|
' | 撇号 |
'
|
¢ | 分 |
¢
|
£ | 镑 |
£
|
¥ | 日圆 |
¥
|
€ | 欧元 |
€
|
§ | 小节 |
§
|
× | 乘号 |
×
|
÷ | 除号 |
÷
|
学习交流方式:
1.微信公众账号搜索: 李南江(配套视频,代码,资料各种福利获取)
2.加入前端学习交流群:
302942894 / 289964053 / 11550038
06HTML基础--多媒体标签相关推荐
- 【04】HTML5+CSS3:01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天 一.什么是 `HTML5` 二.`HTML5 ` 新增标签 三.多媒体音频标签 四.多媒体视频标签 五.新增 input 标签 六.新增表单属性 七.`CSS3 ` 属性 ...
- HTML5中各种标签总结(多媒体标签)
一.图片标签:<img /> src属性:引入图片的位置 本地图片 网络图片 width:设置宽度 height:设置高度 title:鼠标悬浮在图片上的时候的提示语,默认情况下(没有设置 ...
- html标签体,HTMLCSS基础-html标签的实体
HTML&CSS基础-html标签的实体 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 尹正杰的网页 我的博客地址:https://www.cnblog ...
- JSP基础--动作标签
JSP基础--动作标签 JSP动作标签 1 JSP动作标签概述 动作标签的作用是用来简化Java脚本的! JSP动作标签是JavaWeb内置的动作标签,它们是已经定义好的动作标签,我们可以拿来直接使用 ...
- html中的文本格式化标签+多媒体标签+关于IE浏览器兼容的问题(干货!)
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 让这个可爱的宝藏女孩在努力的道路上与你一起同行! 如有转载,请 ...
- java笔记之基础-outer标签
日常笔记之java基础-outer标签 介绍: 业务逻辑中经常需要用到for循环,其中也会有循环嵌套循环,结束一层循环仅需一个break即可,但如果想结束两层,或者三层怎么搞呢,Java提供了ou ...
- CSS中的长度单位和HTML5中多媒体标签的使用
CSS中的长度单位和HTML5中多媒体标签的使用 第一部分.长度单位 1.基本长度单位 2.长度单位的换算 第二部分.vw.vh.vmin.vmax 1.vw.vh.vmin.vmax的含义 2.vw ...
- HTML+H5基础——常用标签
文章目录 网页的基本结构 常用标签描述 文字和段落标签 特殊符号(加分号) 列表标签 无序列表 有序列表 定义列表 图像标签 超链接标签 base标签 锚链接(也可叫书签) 电子邮件链接 HTML表格 ...
- 计算机基础长江出版社课件,《计算机应用基础多媒体课件的设计.doc
<计算机应用基础多媒体课件的设计 <计算机应用基础>多媒体课件的设计 <计算机应用基础>多媒体课件的设计 由于计算机技术和网络通信的飞速发展,计算机技术已在各行各业.各个 ...
最新文章
- 总结H3CNE学习过程和其他
- SSM格式化导出报表时间的格式
- 如何构建基于.NET Core和云环境下的微服务技术体系?
- vs2015软件系统开源_特别版:2015年开源新闻
- 【Siddhi】QueryNotExistException: No query found with name: outPutSecurityEvent
- CDH ecosystem components
- 网络断网远程计算机会自动修复么,网络断网不怕,教你自己动手修复_电脑故障...
- 值得收藏!9个最佳SSD状态监控及性能优化工具
- 项目管理—成本效益分析
- DiskGenius是一款硬盘分区及数据恢复软件
- java 网页转pdf_JAVA中将html转换成pdf
- jetbrains验证服务器,搭建个人jetbrains授权服务器
- 暨阳社区创始人游牧:为什么我们要转型?
- 区间DP例题(持续更新)
- 1053: 正弦函数
- 印度人撮合办公室恋情
- 金融信贷风控实战(二)
- 压缩后图片不清楚了怎么办?
- 【汇正财经】1.9日盘面回顾和行情解析
- 英语口语学习的最有效原则
热门文章
- 安装RRDtool 1.4.5
- 在asp.net中使用异步同步rss
- python线程池模块_Python并发编程之线程池/进程池--concurrent.futures模块
- HTTP自定义Header-(SOCKET-TCP)
- hdu4038贪心(最快上升倍率,好题)
- hdu3793 判断对称(水题)
- 【Android CPU 优化】Android CPU 调优 ( Trace 文件分析 | Android Profiler 工具 | CPU Profiler 工具 )
- 【Flutter】Icons 组件 ( 加载 Flutter 内置的图标 | 材料设计图标完整展示 )
- 【组合数学】组合恒等式 ( 变下项求和 3 组合恒等式 | 变下项求和 4 组合恒等式 | 二项式定理 + 求导 证明组合恒等式 | 使用已知组合恒等式证明组合恒等式 )
- 【Kotlin】Kotlin 语言集合中的高阶函数详解 ( 数据类 data class | maxBy | minBy | filter | map | any | count | find )