第一章html5新特性
1.1html5介绍
HTML5由以下三个组织在负责
1.WHATWG:由Apple,Mozilla,Google,Opera这些浏览器开发者组成,他们开发HTML和WEB应用API,同时为其他浏览器开发者提供开放式合作。
2.IETF:(Internet Engineering Task Force,因特网任务组),这个任务组旗下HTTP负责Internet协议,HTML5定义的API是基于WebSocket协议,IETF工作者在开发这个协议。
1.2html5认识
html5虽然给人很多兴奋,但是会担心其是否兼容浏览器,会不会有错误等问题。
1.2.1兼容性
虽然HTML5时代,但是它是兼容HTML4,它的核心理念就是保持一切新特性的平滑过渡。
尽管HTML5新特性具有革命性,但是HTML5旨在进化而非革命,正式保障了兼容性,所以会选择HTML5开发网站。
1.2.2化繁为简
**HTML5的口号是:简单至上,尽可能简化**
- 以浏览器原生的能力代替复杂的js代码
- 简化DOCTYPE
- 新的简化字符集声明
- 简单而强大的HTML5API
1.3插件范式
之前,很多功能通过插件或者复杂的hack(本地画图API,本地socket等)来实现,在HTML5中提供了对这些功能的原生支持,插件的方式有一些问题。
1插件安装可能会失败
2插件可能被禁用或者屏蔽
3插件自身会被成为攻击的对象
4插件不容易与html文档的其他部分集成
插件的问题:
1.安全-安装插件会有安全隐患。
2.广告-安装插件有附带广告。
3.插件与html元素不同,弹出后会遮盖重叠。
1.4HTML5特性##
1.HTML5新特性基于HTML,CSS,DOM,和js
2.减少了对外部的插件需求如flash
3.更加优秀的错误处理
4.HTML5独立于设备
5.用户绘画的canvas元素
6.用户媒体回放的video和audio元素
7.对本地离线存储的支持
8.新元素和表单控件
第二章html5和html4的区别
- 掌握HTML5与HTML4的基本语法上的区别
- 掌握HTML5中新增的元素和废除的元素
- 了解HTML5中新增的属性和废除的属性
- 掌握全局属性
2.1HTML5语法的变化
HTML5提高浏览器的兼容性是其重大目标之一,所以必须消原有规范和实现的背离,所以它重新定义了新的HTML语法,在新的版本的FireFox和WebKit中内置了HTML5规范的解析器,IE和Opera也正在为能提供更好的兼容性努力。
HTML5标记方法:
1.内容类型(ContentType):扩展名还是html或者htm,内容类型还是text/html
2.doctype声明:浏览器通过判断文件开头有没有<!doctype html>这个声明来决定解析器和渲染类型是否切换成对应的HTML5模式。
3.在使用工具时,可以在doctype中加入system标记,不区分大小写,还可以将双引号替换为单引号使用,例如<!doctype html system 'about:legacy-compat'>
4.字符编码的设置:<meta charset="UTF-8">,不能混用html4的编码格式。
HTML5语法的要点
1.不允许写结束标记元素:<area> <base> <col> <command> <input>等,意思是例如<br/>是ok的,不能写成<br>....</br>
2.可以省略的元素:html,head,body,colgroup,tbody但是dom树上存在。
3.取得boolean值的属性:取得布尔值boolean的属性,如disable和readonly等通过省略属性的值来表达值为true,如果表达false,直接省略即可:例如以下属性都为true
<input type="checkbox" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" checked="">
2.2HTML5新增的元素和废除的元素
新增的结构元素:
section:定义了文档或应用程序的一个区段
article元素:表示文档中的一块独立内容
nav元素:表示导航链接的部分
footer元素:表示整个页面或页面中一个内容区块的脚注
新增的块级语义元素:
1.mark:视觉上向用户呈现突出显示或者高亮显示的文字
2.time元素:表示日期
3.meta元素:表示度量,用于一直最大值和最小值的度量,必须定义度量的范围,既可以在元素的文本中,也可以在min/max属性中定义。
4.progress:表示运行中的进程,可以使用progress元素显示js中耗费的时间。
新增的嵌入多媒体元素和交互元素
嵌入的多媒体元素有:video和audio元素,分别用来插入视频和声音的
details元素:表示用户可以得到的细节信息,可以与summary配合使用,summary提供标题或图例,是details元素的第一个子元素,标题是可见的,当点击标题时,就会显示details内容
datagrid:表示可选数据的列表,通常用于显示树形表。配合<ol> <li>
menu:表示菜单列表,通常用于列出表单控件
command元素:表示命令按钮,如单选按钮,复选按钮或普通按钮
新增的元素类型
HTML5中,input新增了很多类型
email,url,number(数字),range(用户包含一定范围内数字的输入域),Date Pickers(数据检出器),search(搜索域),date,mouth,week,time,datetime,datetime-local
废除的元素
可以使用css元素:basefont,big,center,font,s,strike,tt,u
不再使用frame框架,只支持iframe框架,同时将frameset,frame和noframes三元素废除
只要部分浏览器支持的元素:applet,bgsound,blink,marguee等元素只有部分浏览器支持,所以html5中废除。applet可以被embed元素替代,bgsound可以audio元素替代,marquee可以由js编程方式替代。
2.3新增的属性和废除的属性
表单的属性:
1.autocomplete属性:规定form和input域自动完成,适用于form标签内的input:text,search,url,telephone,email等
2.autofocus:属性,域自动获取焦点。
3.form属性:规定输入域所属的一个或者多个表单,绑定form表单的id。
4.list属性:规定用于输入域的datalist,适用于input标签的text,配合<datalist><option value="" /></datalist>
5.min,max,step属性:用于包含日期或者数字的input类型限定
6.multiple:输入域中可选择多个值,适用于input标签的email和file
7.novalidate属性:规定在提交表单时不验证form或者input域。
8.pattern属性:用户验证input域的模式,模式是正则表达式。
9.required属性,规定必须在提交之前填写输入域不能为空。
链接相关属性:
1.media属性:为a和area属性添加了media属性,规定目标URL是给什么类型的媒介/设备进行优化的,只能在href属性存在时使用。
2.hreflang:<link href="tag_link.action" hreflang="en"/>,声明是英文版,搜索引擎会获取到。
3.target:为base元素添加了target属性,尤其在与iframe结合时,非常有用。
其他属性
1.reversed属性:制定列表倒序显示
2.charset属性:文档的字符编码
3.type属性与lable属性,menu元素添加了两个新的属性,lable属性为菜单定义了可见的标注,type属性让菜单可以上下文菜单,工具条和列表菜单三种形式。
4.scoped属性:用来规定样式的作用范围,譬如只对页面上某个数起作用。为script元素添加async属性,定义脚本是否异步执行。
5.manifest属性:为html元素添加了manifest属性,程序缓存。
废除的属性
2.4全局属性
在html5中,新增全局属性,是指可以对任何元素都使用的属性。
1.contentEditable属性:该属性的主要功能是允许用户编辑元素中的内容,是一个boolean类型属性,可以设置成true或者false,修改之后只能通过innerHTML发送到服务器进行保存,目前没有其他的API来保存内容。
2.designMode属性,用来指定整个页面是否可编辑,当页面可编辑时,页面上任何支持contenEditable属性的元素都变成了可编辑状态,designMode属性只能在javaScript脚本中被编辑修改。document.designMode = ‘on’
3.hidden属性:不显示true不可见,false处于可见
4.spellcheck属性:是boolean值,告诉浏览器检查元素的拼写和语法this is na me会以下划线的方式提示是否有错误。
5.tabindex属性:指用户使用键盘导航一个页面时,通常使用tab键,页面上元素获得焦点的顺序。在html4中-1是一个无效的值。在html5使得其有效。
第三章html5的结构
- HTML5新增的主体结构元素的定义
- HTML5新增非主体结构元素的定义
- HTML5新增的主体结构元素的使用方法
- HTML5新增非主体结构元素的使用方法
主体结构元素
article元素,表示页面、文档、应用程序或站点自包含成分所构成的一个页面的一部分,并且这部分独立地分类或复用。
<h1>导入插件</h1>
<article>
<h2>选择资料</h2>
<object>
<param name="allowFullScreen" value="true" />
<embed src="source/01.mp4" width="600" height="400"></embed>
</object>
</article>
–
section元素:代表文档或应用程序中一般性的段或节。section元素的作用是对页面内容进行分块或者分段。不要和article混淆,因为artical有着自己的完整的、独立的内容。
nav元素:用来构建导航,nav元素的内容可能是链接的一个列表,nav是一个包容器,它不会替代ol或ul元素,但是会包围它们
aside元素:表示页面或者文章的附属部分,可以认为内容与article的内容是分开独立的。可以用于摘录引用或边栏这样的排版效果。用于广告或一组导航元素
time元素:明确对机器的日期和时间进行编码,datetime属性中日期与时间之间要使用T分割,T表示时间,在时间字母上加上Z,表示机器编码时使用UTC标准时间,可以添加时差。
pubdate属性:表示特定的time思一个最终的发布日期。
新增的非主体结构元素
1header元素:具有引导和导航作用的结构元素,不限制header的使用个数<br>
2hgroup元素:将标题及子标题进行分组的元素,hgroup通常对h1-h6元素进行分组,如果有多个标题就需要使用dgroup进行分组。<br>
3footer元素,使用个数不限<br>
4address元素:用于当前article或者文档的作者的详细联系方式<br>
第四章html5的文件与拖放
- 掌握新增的表单元素的属性及其使用方法
- 掌握新增的关于表单元素内容有效性的验证方法
- 掌握页面上新增及改良的元素及其使用方法
新增的表单元素与属性
1placeholder属性:输入控件通过placeholder属性向用户描述性说明输入信息,把需要说明的文字作为该属性。<br>
2autocomplete属性:用来保护敏感用户数据,避免本地浏览器对他们进行不安全存储,属性设置为on时,使用detalist元素与list属性提供候补输入数据列表。<br>
3autofocus属性:自动获取光标焦点。<br>
4list属性:输入框的候补列表数据。<br>
5min、max、step、required属性
第五章HTML5文件与拖放
-
HTML5中新增两个与表单相关的API,文件API和拖放API,拖放API允许放置在浏览器中的任何位置。
-
掌握file对象与fileList对象的使用方法
-
掌握blob对象的概念以及使用方法
-
掌握FileReader接口的方法,事件定义,事件触发条件
-
掌握利用拖放API使页面元素可以互相拖放的方法
-
掌握dataTransfer对象的属性及其使用方法
选择文件
1通过file对象选择文件:<br>
H5中通过添加multiple属性,在file控件中一次放置多个文件,FileList代表这些对象的列表。<br>
2使用blob接口获取文件的类型和大小。blob表示原始二进制数据,提供了slice方法,可以通过slice方法访问到字节内部的原始数据块,size表示blob对象的字节长度,type表示MIME类型<br>
使用FileReader接口读取文件:用来读取文件到内存,并且读取文件中的内容,提供了异步API,可以在浏览器主线程中异步访问文件系统,读取文件中的内容。
1检查浏览器是否支持<br>
if(typeof FileReader == 'undefined'){
alert("您的浏览器未实现FileReader接口")
}else{
var reader = new FileReader();//正常使用浏览器
}
2FileReader接口的方法:(
(1)abort方法中断读取。
(2)readAsBinaryString方法将文件读取为二进制码返回file对象。
(3)readAsDataURL方法将文件读取为dataURL返回file对象。
(4)readAsText方法将文件读取为文本返回file对象<br>
拖放API
在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖动,同时也大大简化了有关拖放的代码。
说明:要拖放的元素draggable属性设置成true,才可以进行拖放,另外img元素与a元素(必须指定href),默认
第六章多媒体播放
- 多媒体元素的基本属性
- 多媒体元素的常用方法
- 多媒体元素的重要事件
1、多媒体简述
在HTML5之前,如果在WEB页面中加入视频,必须使用object的embed元素,而且需要为这个元素添加很多属性和参数,在HTML5中,添加了video和audio元素。
2、多媒体元素常用方法
media.play()播放视频,将media.paused值修改为false
media.pause()暂停视频,会将media.paused值修改为true
media.load()重新载入视频,会将media.playbackTate值设置为media.defaultPlaybackTate的值,建media.error值设为null
<script type="text/javascript">
var vedio ;
function init(){
vedio = document.getElementById("vedio");
vedio.addEventListener("ended",function(){
alert("视频播放结束。");
},true);
}
function play(){
vedio.play();
}
function stop(){
vedio.pause();
}
</script>
第七章绘制图形
HTML5中新增元素canvas以及伴随该元素而来的编程接口canvasAPI
- 掌握canvas元素的基本知识
- 掌握使用路径绘制图形与多边形的方法
- 掌握渐变图形的绘制,图形变形,图形缩放,图形组合以及图形绘制阴影方法
- 掌握canvas画布中使用图像
- 掌握画布中绘制文字,给文字添加边框
- 掌握保存及恢复绘图状态的方法