奇酷学院老师html5高级就业大讲堂h5js课件html

1、介绍什么是HTML5？HTML5是一个新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML4.01和XHTML1.0 标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。2004年提出构想2008年发布第一份草案2012年推广阶段2020年最终测试2022年正式发布HTML5时间表HTML5的八大新特性语义离线存储设备通用连接多媒体三维、图形与特效性能与集成CSS3语义化的标签HTML5 引入了新的 HTML 元素，通过使用这些元素，开发者可以更细致的描述文档结构，让文档更加易读，搜索引擎也能更好的

2、理解页面中各部分间的关系，我们也可以搜索到更快，更准确的信息。十个常用的新标签列表 定义文章 定义文章的侧边栏 一组媒体对象以及文字 定义 figure 的标题定义页脚定义页眉定义对网页标题的组合定义导航 定义文档中的区段定义日期和时间被弃用的标签：、 、 、和。html5 标签标签描述定义文章。定义页面内容之外的内容。定义声音内容。定义图形。定义元素的细节。定义对话框或窗口。定义 figure 元素的标题。定义媒介内容的分组，以及它们的标题。定义 section 或 page 的页脚。定义 section 或 page 的页眉。定义导航链接。定义 section。定义媒介源。为 元素定义可见

3、的标题。定义日期/时间。定义视频。关于文档的细节：google支持HTML5 Input 标签2022/8/7Copyright 2011.All pages and graphics on this web site are the property of W3School.标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。用作文档中插图的图像，带有一个标题：HTML5 Input 标签2022/8/7 黄浦江上的的卢浦大桥 黄浦江上的的卢浦大桥 标签 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是

4、可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。HTML5 Input 标签2022/8/7我们在每天早上 9:00 开始营业。我在 情人节 有个约会。 标签标签定义文档中的节HTML5 section 标签2022/8/7 PRC The Peoples Republic of China was born in 1949. 标签 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）HTML5 标签2022/8/7注释：Internet Explorer 9 以及更早的版本

5、不支持 标签。 标签 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）HTML5 Input 标签2022/8/7注释：Internet Explorer 9 以及更早的版本不支持 标签。 拾色器日期字段时间字段 数字字段滑动组件类型匹配除了这些，还有搜索进度条25%密钥输出10 + 5 = And so on正则匹配必填字段选项列表 增强的表单控件HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。即使不被支持，仍然可以显示为常规的文本域。HTML5 Input 类型2022/8/7Input typeIEFirefoxOperaChromeSafarie

6、mailNo4.09.010.0NourlNo4.09.010.0NonumberNoNo9.07.0NorangeNoNo9.04.04.0Date pickersNoNo9.010.0NosearchNo4.011.010.0NocolorNoNo11.0NoNoInput 类型 - emailemail 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。提示：iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 和 选项）。Input 类型 - URLurl 类型用于应该包含 URL 地址的输入域

7、。在提交表单时，会自动验证 url 域的值。提示：iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 选项）。即使不被支持，仍然可以显示为常规的文本域。HTML5 Input 类型2022/8/7E-mail: Homepage: Input 类型 - numbernumber 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：提示：iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）。即使不被支持，仍然可以显示为常规的文本域。HTML5 Input 类型2022/8/7Po

8、ints: 属性值描述maxnumber规定允许的最大值minnumber规定允许的最小值stepnumber规定合法的数字间隔（如果 step=3，则合法的数是 -3,0,3,6 等）valuenumber规定默认值Input 类型 - rangerange 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。提示：iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）。即使不被支持，仍然可以显示为常规的文本域。HTML5 Input 类型2022/8/7属性值描述maxnumber规定允许的最大值minnumber

9、规定允许的最小值stepnumber规定合法的数字间隔（如果 step=3，则合法的数是 -3,0,3,6 等）valuenumber规定默认值Input 类型 - Date Pickers（日期选择器）date - 选取日、月、年month - 选取月、年week - 选取周和年time - 选取时间（小时和分钟）datetime - 选取时间、日、月、年（UTC 时间）datetime-local - 选取时间、日、月、年（本地时间）即使不被支持，仍然可以显示为常规的文本域。HTML5 Input 类型2022/8/7Date: HTML5 表单属性2022/8/7Input typeIE

10、FirefoxOperaChromeSafari plete8.03.59.53.04.0autofocusNoNo10.03.04.0formNoNo9.5NoNoform overridesNoNo10.5NoNoheight and width8.03.59.53.04.0listNoNo9.5NoNomin, max and stepNoNo9.53.0NomultipleNo3.5No3.04.0novalidateNoNoNoNoNopatternNoNo9.53.0NoplaceholderNoNoNo3.03.0requiredNoNo9.53.0Noautofocus 属性a

11、utofocus 属性规定在页面加载时，域自动地获得焦点。注释：autofocus 属性适用于所有 标签的类型。placeholder 属性placeholder 属性提供一种提示（hint），描述输入域所期待的值。注释：placeholder 属性适用于以下类型的 标签：text, search, url, telephone, email 以及 password。提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：提示：iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 选项）。即使不被支持，仍然可以显示为常规的文本域。HTM

12、L5 Input 属性2022/8/7User name: required 属性required 属性规定必须在提交之前填写输入域（不能为空）。即使不被支持，仍然可以显示为常规的文本域。HTML5 Input 属性2022/8/7Name: 多媒体音频和视频 (Audio + Video)Audio和Video是首批添加到HTML规范中的标签。它们的加入使得我们可以像插入图片一样来处理音频及视频文件。许多时髦的网站都提供视频。ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件W

13、ebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件如需在 HTML5 中显示视频，您所有需要的是：HTML 5 视频2022/8/7 tip：control 属性供添加播放、暂停和音量控件。格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG 49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+No视频兼容上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。video 元素允许多个

14、source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。HTML 5 视频2022/8/7 Your browser does not support the video tag. 标签的属性HTML 5 视频2022/8/7属性值描述autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮heightpixels设置视频播放器

15、的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。音频格式ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件如需在 HTML5 中播放音频，您所有需要的是：HTML 5 音

16、频2022/8/7tip：control 属性供添加播放、暂停和音量控件。IE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0Ogg Vorbis MP3 Wav 音频兼容上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。要确保适用于 Safari 浏览器，音频文件必须是 MP3 或 Wav 类型。audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：Internet Explorer 8 不支持 audio 元素。在 IE 9 中，将提供对 a

17、udio 元素的支持。HTML 5 音频2022/8/7 Your browser does not support the audio tag. 标签的属性HTML 5 音频2022/8/7属性值描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。srcurl要播放的音频的 URL。拖拽与拖放 (Drag

18、 & Drop) 与 文件处理 (File API)过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的鼠标事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，还要不停地获取鼠标的坐标，不停的修改元素的位置，代码要堆很多，而且性能也很差，现在有了HTML5原生的Drag & Drop 拖拽事件，再结合FileAPI 中的 FileReader，一切变得so easy在 HTML5 中，任何元素都能够拖放。Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。1.设置元素为可拖放2然后，规定当元素被拖动时，会发生什么。在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值：在这个例子中，数据类型是 Text，值是可拖动元素的 id (drag1)。HTML 5 拖放202