Html5最新规范
- 概述
- 新增元素
- 表单
- 音频和视频
直播录屏版
传送门：https://v.qq.com/x/page/z0726...
1.概述
什么是html5？
提到html5大家可能首先会想到的是移动端页面，但这只是html5的运用范围之⼀。
其实html5是最新的html规范，也是一系列用来制作现代web内容的相关技术的总称。
当然其中最重要的就是html5，css和js了。
html发展到如今，只经历了了短短的十多年。它是在1993年首次发布，作为一种网上信息浏览传输的规范。
之后的几年又迅速发布了2.0版，再到3.2版和4.0版。直到1999年的4.01版成为一个标志性的版本。
在这高速发展的⼏年⾥，W3C组织逐渐掌握了html规范的控制权。
当时在快速发布了这几个版本之后，业界普遍认为html已经穷途末路了，甚至想要开发其他新的语言来替代它。
因为这个时候的html如果想要支持更新的web应用，克服现有的缺点，那就迫切需要添加新的功能，指定新的规范。
2006年W3C重新接入其中，于2008年发布了html5的草案，提出了解决问题的办法和标准。
于是各大浏览器厂商按耐不住开始升级浏览器以支持html5，html重新焕发出无穷无尽的生命力并在互联网的舞台上大放光彩。
可以说，html5的出现和设计就是为了解决问题，它不是一个颠覆性的概念。
相反，它的核心理念是保持一切新特性平滑过渡，以保证兼容性所以可以放心使用。
同时它的更新非常具有实用性，它在所有可能的地方都努力进行了分离：
让表现和内容分离，使得访问下更佳，降低了不必要的复杂度
让代码更具有可读性，同时让文件不会过大导致页面加载变慢
还化繁为简，有了新的简化的doctype，新的简化的字符集声明，简单而强大的html5API
还以浏览器原生功能替代了部分js代码，开发体验使用体验大大增强。
2.新增元素
说到html的元素的使用其实非常简单，但知道如何使用这些元素和理解它们的含义，是同等重要的。
在html5中有一个很大变化是讲语义与元素所表现的结果分开。
之所以要这样做，是因为这样更合适：
html元素负责文档的内容结构
内容的表现形式则有css来控制
相互之间互不不影响，让代码清晰易读，便于团队维护开发。
搜索引擎也可以根据标签的语义确定上下文等问题。
因此写页面的时候少用那种有呈现样式作用的元素，比如strong，small之类。
尽量做到以内容类型为依据，使用最具体的元素，不不要误用元素。
2.1 新的doctype和新的字符集写法
浏览器会根据doctype来识别应该⽤什么模式来显示页⾯，用什么规则来验证⻚面。
在过去的版本中，需要加入⼀⻓串规则l地址，比如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""" style="font-family: "Microsoft YaHei", 微软雅黑; font-size: 15px; caret-color: red;" _href="http://www.w3.org/TR/html4/loose.dtd">">http://www.w3.org/TR/html4/lo...d">
而在html5中已经没有这个必要了：
<!DOCTYPE html>
html的字符集可以告诉浏览器以什么内码什么语⾔来显示⽹页。
在过去的版本中设置这项会⽐比较复杂很难记忆：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
⽽在html5中就要简单许多
<meta charset="UTF-8">
2.2 新增语义元素——结构类
article 表示一篇任何形式的文章，可以独立的内容区块
aside 表示独立于周围内容的一个完整的内容块
figure 表示一副插画
figcaption 放在figure中标注插画标题的，目的是反应图片与标题之间是有关联的
header 表示增强的标题，可以包含标题或其他内容
footer 表示页面底部的页脚
hgroup 表示增强型的标题，目的是把标题和副标题联系到一起
nav 表示页面中重要的一组链接
section 表示文档中的一个区块，或一组文档。这是一个通用型的容器
基本规则就是必须开始于一个标题，然后应该在其他语义元素不适用的情况下再选用section
2.3 新增语义元素——文本类
time 标注日期和时间
output 标注js的返回值
mark 标注突显文本
3 Form表单
表单，是指从网站访问者手里收集信息的地方
比如可以填写文本的文本框，可以选中或者取消的多选框，只能多选一的单选框，下拉列表框等等。
表单的用途非常广，可以说只要上网就会遇到它。
html中的form表单和html语言几乎是同时出现的，多年来都没有丝毫改进。
一直到html5的出现，它在原来的表单基础上进行修订，增强了了许多功能，让交互变得更加容易起来。
3.1 新增的表单元素
html中的input是个神奇的存在，只需要修改它的type类型，就能实现许多不同类型的输入控件。
如果浏览器器不认识这些类型，就会把它们当做一个普通的text类型的文本框来处理，因此下面这些控件都能在不同浏览器放心使用。
在更现代的浏览器中使用这些类型的控件会显得更加方便：
可以提供便于编辑的辅助；
限制可能出现的错误；
以及执⾏行行验证。
tel 电话号码控件，在移动浏览器中会呼出特别的键盘：只包含数字没有字母
email 电子邮件控件，验证规则是这个字符串中必须含有@符号和一个点号，而且两者之间至少要间隔一个字符，点号后面至少要有两个字符，这差不多就是邮件的验证规则
url 网址类型控件
search 搜索框控件，用于执行某种搜索，它有其特定语义，便于浏览器或辅助上网软件知道这里是干嘛用的
range 滑动条控件
color 颜色控件，可以让用户从下拉式色盘中选取一个颜色
number 常规数值类型控件，浏览器自动忽略⾮数字类型字符。并且可以配合min和max属性使用
date 日期控件，提供一个方便的下拉式日历，避免输入者对日期格式的困惑，也能避免输入不存在的日期。格式为YYYY-MM-DD
time 时间控件，格式为HH:mm:ss.ss
3.2 新增的表单特性和函数
placeholder 占位
autocomplete 规定表单是否应该启用自动完成填充功能
autofocus 为表单挑选正确的起点焦点
list+datalist 显示输入建议
min+max 最小值和最大值，在多种表示数值的控件中可用
step 规定数字的间隔，可以与min和max配合使用，创建合法值范围
required 规定是否必填
4 音频和视频
最开始的网页中如果需要插入一段多媒体的音频和视频，通常都是使用<embed>元素硬塞
然后浏览器用系统的视频播放器创建一个视频窗口放在页面中。
这样做的问题在于一切都是听天由命，无法控制播放器，也不能提前缓冲，更不能知道用户到底有过哪些操作。
而用浏览器插件比如flash，解决了浏览器支持的问题。
但要把它放到网页中，必须用<object><embed>元素编写一大堆乱七⼋八糟的标记，必须适当地编码文件。
更糟糕的是苹果的移动设备上根本就不支持flash。
因此在html5中直接就对这些进行了支持，支持的思路非常简单，就是使用和img这种元素差不多的方式为网页添加视频音频。
所以html5就增加了audio和video这俩元素来添加音频视频。
4.1 音频
基本写法很简单：
<audio src="xxx.mp3" controls></audio>
其中src是多媒体的链接，controls属性是告诉浏览器要包含基本的播放控件。
除此之外还有一些常用属性：
preload 告诉浏览器如何下载⾳音频。
有三种值，auto让浏览器后台下载整个文件
metadata告诉浏览器先获取音频文件开头的数据块确定基本信息
none表示不必预下载
autoplay 告诉浏览器在加载完成一篇之后立即播放
loop 表示循环播放
4.2 视频
视频video和audio几乎是一样的用法，只是比起audio来要多出3个属性：
height，width和poster。
height和width不必多说都能明白，这是用于设置视频可视窗口的高和宽的。
而poster用于设置替换视频的图片，使用这个图片的情况一般有三种：
1、视频第一帧还未加载完毕的情况；
2、preload属性设置为none时；
3、没有找到指定视频文件时。
4.3 媒体格式支持
由于html5标准并没有要求浏览器支持哪种多媒体格式，也不太可能规定死这个格式
因此各家浏览器开发商可以自由选择想要支持的格式，然后我们就发现不同浏览器支持的格式根本就不一样了。。。
现在常用的音频视频格式可以见下表：
MP3 世界上最流行的音频格式 .mp3 audio/mp3
Ogg Vorbis 免费开放的标准，能够提供高质量的压缩音频，可以和mp3媲美 .ogg audio/ogg
WAV 未加工数字音频的初始格式，体积奇大，一般不不适合web .wav audio/wav
H.264 视频压缩的行业标准，特别适合高清晰度视频 .mp4 video/mp4
Ogg Theora 免费开放的视频标准，品质和性能不及H.264但可以满⾜足大多数人的需要.ogv video/ogg
WebM 最新的视频格式，谷歌买下VP8之后，将其改为免费标准 .webm video/webm
4.4 如何支持不同浏览器
由于不同浏览器器支持的多媒体格式不一样，因此一般说来有两种方案以支持每一款浏览器器：
第一种是首选flash，以html5为后备
第二种是首选html5，以flash为后备
按现在的趋势来讲，flash江河⽇日下，html5才是未来的强者
因此一般说来可以使用第二种方案。
利用了一个原理，就是有史以来的浏览器都会自动忽略掉它不认识的元素，因此可以这么做：
首先加入html5方式的音频标签，这里source标签的作用是在拥有多份源文件的时候，浏览器自行选择它所支持的文件
<audio controls>
<source src="xx.mp3" type="audio/mp3">
<source src="xx.ogg" type="audio/ogg">
</audio>
然后在里面加入flash
如果浏览器无法识别这些元素，那么会自动读到flash部分。
这样就能在任意浏览器中完美加载多媒体文件了。
<audio controls>
<source src="xx.mp3" type="audio/mp3">
<source src="xx.ogg" type="audio/ogg">
<object id="player" width="" height="" data="flowplayer-3.2.7swf" type="application/x-shockwave-
flash">
<param name="movie" value="flowplayer-3.2.7swf">
<param name="flashvars" value='config={"clip": "xxx.mp4"}'>
</object>
</audio>
以上就是上节课的内容解析啦，想进一步深入的同学欢迎加入我们的IT交流群437496285共同讨论学习~
下节预告
静态页面不好看？
CSS动画，让画面动起来！
303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
