HTML基础(part8)--HTML5
学习笔记，仅供参考，有错必纠
参考自：pink老师学习教案
文章目录
- HTML5
- 什么是HTML5
- HTML5 新增标签
- 多媒体标签
- 多媒体音频标签audio
- 多媒体视频标签video
- 多媒体标签总结
- 新增input标签
HTML5
什么是HTML5
HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML ，HTML5拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5。
HTML5拓展的内容：
- 语义化标签
- 本地存储
- 兼容特性
2D、3D- 动画、过渡
CSS3特性- 性能与集成
HTML5 新增标签
新增的语义化标签：
header— 头部标签nav— 导航标签article— 内容标签section— 块级标签aside— 侧边栏标签footer— 尾部标签
图示：
- 举个例子
HTML代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>header,nav,article,footer {display: block;height: 120px;background-color: pink;margin: 10px;}</style>
</head><body><header>我是header</header><nav>我是nav</nav><article>我是article</article><footer>我是footer</footer>
</body>
</html>
页面：
多媒体标签
多媒体标签有两个，分别是：
- 音频 –
audio - 视频 –
video
多媒体音频标签audio
audio目前支持三种格式：
| 格式 | IE9 | Firefox3.5 | Opera10.5 | Chrome3.0 | Safari3.0 |
|---|---|---|---|---|---|
| Ogg Vorbis | √ | √ | √ | ||
| mp3 | √ | √ | √ | ||
| wav | √ | √ | √ |
音频格式的MIME类型：
| Format | MIME-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
audio的参数：
- 举个例子
HTML代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><audio controls="controls"><source src="media/中华人民共和国国歌.mp3" type="audio/mpeg" /><source src="media/中华人民共和国国歌.wav" type="audio/wav" />您的浏览器不支持播放声音</audio>
</body></html>
因为不同浏览器支持不同的格式，所以我们采取的方案是为这个音频准备多个类型的文件。
页面：
多媒体视频标签video
语法格式：
<video src="./media/video.mp4" controls="controls"></video>
video视频标签目前支持三种格式：
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | √ | × | × |
| Chrome | √ | √ | √ |
| Firefox |
√ 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始 |
√ | √ |
| Safari | √ | × | × |
| Opera |
√ 从 Opera 25 版本开始 |
√ | √ |
视频格式的MIME类型：
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
video参数：
- 举个例子
HTML代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>video {width: 300px;}</style>
</head><body><video muted="muted" loop="loop" poster="media/pig.jpg" controls><source src="media/video.mp4" type="video/mp4" /><source src="media/video.ogg" type="video/ogg" />您的浏览器不支持播放此视频</video>
</body></html>
多媒体标签总结
- 音频标签与视频标签使用基本一致
- 多媒体标签在不同浏览器下情况不同，存在兼容性问题
- 谷歌浏览器把音频和视频标签的自动播放都禁止了
- 谷歌浏览器中视频添加 muted 标签可以自己播放
- 注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册
新增input标签
表单输入类型：
其他属性：
- 举个例子
表单示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title><style>* {margin: 0;padding: 0;}/*清除列表样式*/li {list-style: none;}/*去掉button 默认自带的边框*/button {border: none;}a {text-decoration: none;}</style>
</head><body><form action=""><ul><li>邮箱: <input type="email" /></li><li>网址: <input type="url" /></li><li>日期: <input type="date" /></li><li>日期: <input type="time" /></li><li>数量: <input type="number" /></li><li>手机号码: <input type="tel" /></li><li>搜索: <input type="search" /></li><li>颜色: <input type="color" /></li><li> <input type="submit" value="提交"></li></ul></form>
</body></html>
页面：
文件提交(多个)示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>上传多个文件</title>
</head><body><form action="">用户名: <input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username" autocomplete="off"> <input type="submit" value="提交"> 上传文件: <input type="file" name="" id="" multiple="multiple"></form>
</body></html>
页面：
HTML基础(part8)--HTML5相关推荐
- html5代码_干货篇！零基础学习HTML5要用到的6款开发工具
HTML5不是一种编程语言,而是一种标记语言,是程序员开发网页必用的一种开发工具.目前来说HTML5技术是非常火爆的,而且有专家预估在未来的10年HTML技术都不会过时.HTML5前景好,来学HTML ...
- 《零基础学HTML5+CSS3(全彩版)》读书笔记
2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...
- 慕课学习史上最全零基础入门HTML5和CSS笔记
慕课学习史上最全零基础入门HTML5和CSS笔记 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的 ...
- Web前端零基础入门——HTML5
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通 html入门 index1 > <html><head><title>我是谁? ...
- 【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程 学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...
- html页面视频标签,html5基础标签(html5视频标签 html5新标签用法)
点评:html5基础,包括html5视频标签和html5新标签等标签用法,大家参考使用吧 1. 声明的变化 2. 指定字符编码的变化,html5中建议使用utf-8 3. Html5中允许 没有 ...
- html5该怎么样学习？零基础入门HTML5学习路线
纵观近几年HTML5的发展可以看出,HTML5开发持续上涨,腾讯.微软.谷歌等国际互联网企业都将HTML5的研发与使用放在了重要的地位.目前全球有超过十亿台手机浏览器支持HTML5,而微信小程序的开放 ...
- 零基础学HTML5和CSS3前端开发第一课
课程目标: 使用HTML5进行网站布局 使用CSS3进行网站美化 开发精美的商业网站 第一章 HTML5基础 概念: 网页 :互联网的基础,网络页面,网页:文字.图片.声音.视频.VR虚幻等:网站:淘 ...
- html5语言基础教程,HTML5基础教程，从入门到精通，零基础学HTML5
随着互联网的快速发展,对前端开发方面的人才需求越来越大,其中Web前端领域的HTML5也受到许多人追捧 HTML5是构建Web内容的一种语言描述方式.HTML5是互联网的下一代标准,是构建以及呈现互联 ...
最新文章
- 计算机与维修专业学校,计算机应用与维修学校录取分专业可靠
- Linux下用arptables防arp攻击
- 《剑指offer》数组中只出现一次的数字
- iframe带了token不显示_不就是登录吗，能有多复杂？sa-token带你轻松搞定多地登陆、单地登录、同端互斥登录...
- 不可不知的CSS小技巧
- 51单片机按键输入多位数_单片机实现八路抢答器实例分享
- ajax文件上传进度条实现
- OpenCV自带的CamShift算法解读
- 基于javaweb+mysql的在线购书商城系统(java+jsp+mysql+servlert+ajax)
- UFO报表另存为Excel提示：可能没有正确安装Excel
- Linux--Ubuntu的使用
- java里oop思想_Java OOP 思想解析
- 树莓派怎么切换输入法_树莓派 Raspberry Pi 设置显示中文方法安装输入法
- html制作古诗网页早发白帝城,《早发白帝城》古诗词
- 搭建一个网站大概需要多少钱
- 如何设计大自然？#合成美学 #无学科专栏
- 物流行业SaaS多租用商城系统：提升企业物流管理效率，实现高效协同
- 查看ajax传来的数据,jQuery AJAX 方法 success()后台传来的4种数据
- [开源免费] ZXTouch - iOS11-14 iOS13 模拟触摸 模拟点击 比触动精灵和AutoTouch更好用的插件
- 产品生命周期管理——高效的全生命周期的产品管理方法