一、HTML5是什么
1.HTML5 的概念与定义
定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML
两个概念：
是一个新版本的 HTML 语言，定义了新的标签、特性和属性
拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5
2.HTML5 拓展了哪些内容
-
语义化标签
-
本地存储
-
兼容特性
-
2D、3D
-
动画、过渡
-
CSS3 特性
-
性能与集成
3.HTML5 的现状
绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，
总的来说：HTML5 已经是大势所趋
4. HTML5舍弃的标签
-
标 签 说 明 basefont 定义页面文本的默认字体、颜色或尺寸 big 定义大字号文本 center 定义文本居中 font 定义文本的字体样式 strike 定义删除线文本 s 定义删除线文本 u 定义下划线文本 dir 定义目录列表，应该用ul代替 acronym 定义首字母缩写，应该用abbr代替 applet 定义嵌入的applet,应该用object代替 noframes 为那些不支持框架的浏览器显示文本 frame 定义frameset中的一个特定的框架
二、HTML5新增的标签
1.什么是语义化
语义化
优点：
- 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
- 方便其他设备解析，如盲人阅读器根据语义渲染网页
- 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
| 标签 | 含义 |
|---|---|
| header | 页眉通常包括网站标志、主导航、全站链接以及搜索框 |
| nav | 标记导航，仅对文档中重要的链接群使用 |
| main | 页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能 |
| article | 定义外部的内容，其中的内容独立于文档的其余部分 |
| section | 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分 |
| aside | 定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等 |
| footer | 页脚，只有当父级是body时，才是整个页面的页脚 |
| title | 页面主体内容 |
| hn | h1~h6，分级标题，与 协调有利于搜索引擎优化 |
| ul | 无序列表 |
| li | 有序列表 |
| small | 呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权 |
| em | 将其中的文本表示为强调的内容，表现为斜体 |
| strong | 和 em 标签一样，用于强调文本，但它强调的程度更强一些 |
| mark | 使用黄色突出显示部分文本 |
| figure | 规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin |
| figcaption | 定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置 |
| abbr | 简称或缩写 |
| address | 作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接） |
2.新增了那些语义化标签
-
header— 头部标签 -
nav— 导航标签 -
article— 内容标签 -
section— 块级标签 -
aside— 侧边栏标签 -
footer— 尾部标签
3.使用语义化标签的注意
- 语义化标签主要针对搜索引擎
- 新标签可以使用一次或者多次
- 在
IE9浏览器中，需要把语义化标签都转换为块级元素 - 语义化标签，在移动端支持比较友好，
- 另外，
HTML5新增的了很多的语义化标签，随着课程深入，还会学习到其他的
三、H5新特性
- 新增选择器 document.querySelector、document.querySelectorAll
- 拖拽释放(Drag and drop) API
- 媒体播放的 video 和 audio
- 本地存储 localStorage 和 sessionStorage
- 离线应用 manifest
- 桌面通知 Notifications
- 语意化标签 article、footer、header、nav、section
- 增强表单控件 calendar、date、time、email、url、search
- 地理位置 Geolocation
- 多任务 webworker
- 全双工通信协议 websocket
- 历史管理 history
- 跨域资源共享(CORS) Access-Control-Allow-Origin
- 页面可见性改变事件 visibilitychange
- 跨窗口通信 PostMessage
- Form Data 对象
- 绘画 canvas
四、新增 input 标签
| 属性 | 说明 |
|---|---|
| type=“email” | 限制用户输入必须为email类型 |
| type=“url” | 限制用户输入必须为url类型 |
| type=“date” | 限制用户输入必须为日期类型 |
| type=“time” | 限制用户输入必须为时间类型 |
| type=“month” | 限制用户输入必须为月类型 |
| type=“week” | 限制用户输入必须为周类型 |
| type=“number” | 限制用户输入必须为数字类型 |
| type=“tel” | 手机号码 |
| type=“search” | 搜索框 |
| type=“color” | 生成一个颜色选择表单 |
五、新增表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示器其内容不能为空，必填 |
| placeholder | 提示文本(占位符) | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| multiple | multiple | 可以多选文件提交 |
六、多媒体音视频标签
1.video 视频标签
-
目前支持三种格式
-
<video src="src/video/one.mp4" controls="controls"></video>
2.video 参数
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（chrome浏览器需要添加muted来解决自动播放问题） |
| controls | controls | 向用户展示播放控件 |
| width | px(像素) | 设置播放器宽度 |
| height | px(像素) | 设置播放器高度 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
| preload | auto,none | 规定是否预加载视频，若有autoplay则忽略该属性 |
| src | url | 视频url地址 |
| poster | Imgurl | 加载等待的画图图片 |
| muted | muted | 静音播放 |
3.audio 标签
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（chrome浏览器需要添加muted来解决自动播放问题） |
| controls | controls | 向用户展示播放控件 |
| loop | auto,none | 播放完是否继续播放该视频，循环播放 |
| preload | 规定是否预加载视频，若有autoplay则忽略该属性 | |
| src | url | 视频url地址 |
| poster | Imgurl | 加载等待的画图图片 |
4.audio常用的控制函数
| 属性 | 值 |
|---|---|
| load() | 加载音频、视频软件 |
| play() | 加载并播放音频、视频文件或重新播放暂停的音频、视频 |
| pause() | 暂停处于播放状态的音频、视频文件 |
| canPlayType(obj) | 测试是否支持给定的mini类型的文件 |
5.多媒体标签总结
-
音频标签与视频标签使用基本一致
-
多媒体标签在不同浏览器下情况不同，会存在兼容性问题
-
chrome浏览器把音频和视频标签的自动播放全都禁止了文章来源：https://www.toymoban.com/news/detail-516011.html
-
chrome浏览器中视频添加
muted标签可以自己播放文章来源地址https://www.toymoban.com/news/detail-516011.html
到了这里，关于HTML5是什么的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
