上周日的线上现场直播专业课程中，由修仙院的控制技术副总裁沁修率领现场直播课学生们
以现场直播、概要、交互的方式，深入细致认知了【Html5新一代规范化】，与此同时传授了用以制做当代web文本的有关控制技术。
错失现场直播课的老师，谢鲁瓦英文原版专业课程内容撷取给我们，期望我们能由此略有斩获。
Html5新一代规范化
1. 简述
2. 追加原素
3. 配置文件
4. 音音频和音频
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/loose.dtd”>
而在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让下载器后台下载整个文件
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动画，让画面动起来！
6月30号上午10点，也是本周日
用课时教你用css打破js专利，用少量css代码实现丰富多彩的网页效果特效。
报名听课的老师们将获得
1、与控制技术副总裁级别的一线合作开发人员接触、提问机会
2、来自真实项目的应用合作开发技巧、代码规范化
3、与现场直播专业课程配套的任务体系、日报体系
4、分配一对一的专属师兄，进行控制技术辅导
5、专业课程PPT、录播音频、细化知识点解析课堂等学习资源
周日上午开课，不占用工作、学习时间
一餐饭的价格，汲取实战角度的合作开发经验
快来报名学习吧！
条件所限无法报名的老师，我们下周依然会将现场直播课的英文原版更新在机构号，欢迎前来讨论学习~
职业选择、求职辅导、学习规划、困难答疑、控制技术交流等等，都可以加入IT交流群437496285
或者加大师姐微信咨询也可以哟
微信号：it_xzy
技能树.IT修仙院 http://www.jnshu.com“我们相信人人都可以正式成为一个工程师，现在开始，找个师兄，带你入门，学习的路上不再迷茫。这里是技能树.IT修仙院，初学者转行到互联网行业的聚集地。”
