HTML5是什么

一、HTML5是什么

1.HTML5 的概念与定义

定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML

两个概念：

是一个新版本的 HTML 语言，定义了新的标签、特性和属性

拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5

2.HTML5 拓展了哪些内容

• 语义化标签

• 本地存储

• 兼容特性

• 2D、3D

• 动画、过渡

• CSS3 特性

• 性能与集成

3.HTML5 的现状

绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，

总的来说：HTML5 已经是大势所趋

4. HTML5舍弃的标签

1. 标 签	说 明
   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浏览器把音频和视频标签的自动播放全都禁止了

• chrome浏览器中视频添加 muted 标签可以自己播放