1、为什么用HTML5,首先思考下 HTML4，也许它在解决静态文档间的相互链接方面已经做得相当出色，但随着技术的进步，当开发者希望创建更动态化并且像应用程序一样的站点时，HTML4却因为缺少很多原生功能，无法实现这个目标。人们随之开始转向使用Flash这样的独立技术、第三方Javascript库以及编写复杂且低效率的HMTL、CSS和Javascript去实现上述的需求。但这始终不是好的解决方案：首先，没有语义化的元素来实现诸如视频和复杂表单控件这样的功能；其次，这种实现方法导致页面越发的臃肿，当实际去实现各种非常常见的需求时，需要编写及其复杂的代码。HTML5给出了解决方案，它包含了HTML4
2、的所有特性，还增补了先前缺失的特性。例如：1.用来定义常见页面区域的元素，比如页头、页脚、主导航等；2.Web Storage本地存储；3.、及其相关的API用来实现视听；4.及其关联的API可用来创建复杂的脚本化图形，比如动画内容；5.允许应用脱机工作的机制；6.可以定义错误处理机制。,建立HTML5模版, HTML5 template HTML5,告知浏览器页面使用 HTML5 进行编写。,告知浏览器其自身是一个 HTML 文档。,页面的头部，它是所有头部元素的容器，可以引用脚本、样式表、元信息等。,定义页面字符集，无结束标签。,头部结束标签。,定义页面标题。,页面的主体，包含文档的所有内
3、容，如文本、超连接、图像等。,(见template.html),HTML DOM,DOM实际上是以面向对象方式描述的文档模型。它定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。HTML DOM则是针对HTML文档的标准模型，它是关于如何获取、修改、添加或删除HTML元素的标准。HTML文档被视作树结构，称为节点树。它的所有内容都是节点，比如每个标签元素都是元素节点，标签内的属性看作属性节点，文本被称为文本节点等等。结构树中，元素节点与元素节点从上到下，从左到右，形成层级、同级的关系。层级关系即从上到下，形成父结点(parentNode)与子节点(childNode)
4、,父节点可以拥有多个子节点，而子节点只能有一个父节点；同级关系即从左到右，形成同胞(sibling)的关系。,文档标题我的链接我的标题,lastChild,parentNode,根节点，处于最外层。,nextSibling,从外到内; 从上到下,firstChild,文本节点,属性节点,从上到下;从左到右,通过HTML DOM，树中的所有节点均可通过JavaScript进行访问。所有 HTML元素（节点）均可被修改，也可以创建或删除节点。(关于这方面，会在第三次介绍Javascript时详细说明。),HTML的常用标签,1.标签定义文档与外部资源之间的关系，一般用于链接css样式表文件。该标签
5、只能位于标签内，但可多次使用。例如：,(见tag_link.html),css文件相对路径或绝对路径。,2.标签定义客户端脚本。即可用于链接js文件，也可编写脚本语句。该标签可位于和标签内或之外，且可多次使用。例如：alertStr();function alertStr()alert(returnStr();,(见tag_script.html),设置src属性来链接c.js，使页面可以调用其中的脚本代码。,调用c.js中的returnStr方法。,编写脚本代码。,3.、标签定义表格、行、列。该标签可位于标签内，且可多次使用。例如：Cell ACell BCell CCell DCell E
6、Cell F,(见tag_table.html),表格添加边框。,横向合并2个单元格。,纵向合并2个单元格。,横向合并2个单元格。,4.标签创建包含另一个文档的框架 。该标签位于标签内，且可多次使用。例如：,(见tag_iframe.html),引用另一个页面。,5.标签根据不同的 type 属性值，创建多种可输入控件，如文本框、按钮、复选框、单选按钮等。该标签位于标签内，且可多次使用。例如：,(见tag_input.html),标签内，除了可以设置属性，还可以设定事件。,同一组单选框的name属性必须一致。,6.标签创建多行的文本输入控件。该标签位于标签内，且可多次使用。例如：,(见tag_
7、textarea.html),cols属性设置文本框宽度。,rows属性设置文本框行数。,保存文本框文本时，需要注意换行符”n”或回车换行”rn”的处理。 可使用javascript做如下处理： (document.getElementById(textarea).value).replace(/n/g,);,也可通过设置width和height来控制空间的宽度与高度。,7.标签创建下拉菜单。该标签位于标签内，且可多次使用。例如：ABC,(见tag_select.html),设定被选中的菜单项。,8.标签引用图片。该标签位于标签内，且可多次使用。例如：,(见tag_img.html),设置图片
8、路径。,当路径为空为路径指向的图片不存在时，不同的浏览器会显示不同的状态。,9.标签定义段落。该标签位于标签内，且可多次使用。例如：abcdefgabcdefgabcdefg,(见tag_p.html),标签会主动换行。,10.标签定义段落。该标签位于标签内，且可多次使用。例如：1234567abcdefg1234567abcdefg,(见tag_span.html),标签不会主动换行。,可单独使用，也可用于p标签内，对不同文本设定css样式。,11.标签定义超链接，用于打开另一个页面或跳转至当前页面的锚点。该标签位于标签内，且可多次使用。例如：template.html,(见tag_a.ht
9、ml),target属性用于设置在何处打开被链接的文档。 _blank ：在新窗口中打开；_self ： 默认，在当前框架或窗口中打开； _parent：在框架所在的框架集或父窗口打开； _top ：清楚当前窗口所有的框架，并在当前窗口打开链接。 若无框架，_self、_parent、_top显示方式几乎相同。,可以使用文本、图片等形式作为链接。,href属性设置路径。,anchorstartend ,设置锚点。,设置需要跳跃到哪个锚点，数值前加入”#”。,(见tag_a.html),12. 、标签定义无序列表及列表项。该标签位于标签内，且可多次使用。例如：Item 1Item 2Item 3
10、Item 1Item 2Item 3,(见tag_ul.html),标签默认为纵向排列。 标签用于创建列表项，可以包含文本、图片等多种标签。,通过设定css样式属性“list-style-type”设定列表标记的类型，“none”表示无标记。,通过对所有列表项样式设置“float:left”,使其呈现横向排列，超过所在容器宽度则自动换行。,13. 、标签定义有序列表及列表项。该标签位于标签内，且可多次使用。例如：Item 1Item 2Item 3Item 1Item 2Item 3,(见tag_ol.html),标签通过设置css样式也可以实现有序列表。,14. 标签主要结合css用于画面布
11、局，可以包含多个不同的标签。该标签位于标签内，且可多次使用。例如：firstDiv,(见tag_div.html),15.标签创建表单，用于向服务器传输数据，它可以包括、 、等标签。该标签位于标签内，且可多次使用。(1)action属性设定向何处发送表单数据。其路径可以指向某一张页面，也可以指向部署在web service上的servlet等（需要依据配置文件）。例如：,(2)method属性将表单数据以何种形式发送。get方法：默认方法，表单数据以参数的形式拼接在action URL后面。例如：a. 发送的URL: http:/127.0.0.1:8020/Web_Study/HTML/te
12、mplate.html?txtInput=text,提交按钮。 也可以通过javascript提交。,参数与action URL用”?”隔开。,参数间用”&”隔开。,?txtInput=text&chk=A,str0:“ str1:“txtInput“ str2:“text“ str3:“chk“ str4:“A“,(见tag_form_get_1.html、 tag_form_get_3.html),Javascript提交表单： 例如：function formSubmit()var testForm = document.getElementById(“testForm“);testFo
13、rm.action = “tag_form_get_3.html“;testForm.method = “get“;testForm.submit();,(见tag_form_get_2.html、 tag_form_get_3.html),提交表单数据。,post方法：将表单数据放入http的数据包中，不是拼接入URL中。此外，html作为静态页面，无法接受post方法发送的数据，需要动态的语言来处理，例如asp、jsp、php等。,(见tag_form_get_2.html、 tag_form_get_3.html),在实际运用中，当需要向服务器索取数据时，需要提交一些信息，例如查询等情况
14、，这时一般采用get方法；而当需要向服务器提交数据，用于更新或其他操作时，一般采用post方法。,HTML5的一些新特性,1. Web Storage(1)cookie是HTML5之前用于保存本地数据的一种方式，它的容量一般 为4kb，常用于保存网站的用户名和密码信息、购物网站的部分信息等。(2)Web Storage是HTML5 API提供的非常重要的功能，它支持浏览器本地存储数据，依据浏览器的不同，所支持的存储空间也不同，大致可以有510M以上。Web Storage存储的数据可以用javascript来进行操作，它是以Key-Value的形式存储和读取数据，而Key和Value只能是字符
15、串，所以若要存储JSON之类的数据，首先要将其转换成字符串。Web Storage分为两种类型：sessionStorage和localStorage。前者是会话级别的存储，仅作用于单个页面，当会话结束，例如关闭当前页面，存储的数据即会被删除；后者是则是持久性的存储，跨页面的，除非用户主动清除，否则存储的数据将一直被保存。,但是，Web Storage暂时无法实现跨浏览器读取。例如Chrome浏览器存储的数据，用Opera浏览器是无法读取的。(3)两者的区别a. cookie的容量只有4kb，无法保存大容量的信息数据；而Web Storage可以。b. 当浏览器发送请求时，都会将本机存储的co
16、okie信息一起发送；而Web Storage则不会被发送。c. Web Storage API提供了更为丰富的接口，能够灵活方便的操作数据。d. 有效期不同。sessionStorage仅在窗口关闭前有效，localStorage则永久被保存，而cookie存在有效期，只有在设置的时间内有效。e. 作用域不同，sessionStorage不可在不同的页面窗口中共享，即使是同一站点；而localStorage和cookie则可以。,(以localStorage为例，见local_storage.html),localStorage和sessionStorage提供的方法和属性（localSto
17、rage和sessionStorage为window对象的属性，无须定义，可直接使用）： (1)setItem(key,value)如果key不存在，则新建存储数据；若已经存在，则更新存储数据。(2)getItem(key)读取存储数据。若key不存在，则返回null。(3)removeItem(key)删除key对应的存储数据。(4)clear()清除所有的存储数据。(5)length已存储数据的总数。(6)key(index)获取指定index的key。,存储JSON格式的数据: (1)将json对象转换为字符串：JSON.stringify(data)例如：localStorage.se
18、tItem(key,JSON.stringify(data);(2)将读取的存储数据解析为json对象：JSON.parse(data)例如：var data = localStorage.getItem(key);JSON.parse(data);,2. 多媒体：和标签这是HTML5中新增的极其重要的元素，分别可以给页面添加音频和视频内容，使用方法如果添加图片一样简单。(1),(见simple_video_1.html),IE和Safari倾向MP4，而Opera、Firefox、Chrome倾向WebM。所以需要两个元素来指向不同格式的文件，浏览器会自动载入它能识别的那一个。,显示默认控件
19、。若不包含此属性，可通过媒体元素API自定义控件。,定义视频封面。若不包含此属性，默认显示视频第一帧。,无须包含type属性，但推荐使用。否则浏览器会尝试下载每个文件的少量字节来判断它能识别哪一个，非常浪费时间和效率。,指向播放的视频文件。也可直接给添加src指定视频文件，但不推荐，因为不同的浏览器支持不同的视频格式。,此外，还可以通过Javascript控制播放的属性、方法和事件。,(见simple_video_2.html),详细的内容可以参考： http:/ 标签该标签允许通过脚本来操作位图图形。它并不能做什么，它只是图形容器，在屏幕上创建一个尺寸由用户定义的静态空间。通过代码，你可以绘
20、制二维图形，也可以使用WebGL创建三维图形。var c = document.getElementById(“canvas“);var context = c.getContext(“2d“);context.fillStyle = “rgb(0,0,200)“;context.fillRect(100, 50, 100, 150);,(见simple_video_2D.html),左上角的x坐标、坐上角的y坐标、宽度、高度,设置填充颜色，也可设定渐变和模式。,返回2D画布。,4.新的表单元素 ,(见simple_form.html),通过required属性将任何表单项目设为必填项目：,5
21、.WebSocket在传统方式中，实现即时通讯通常使用轮询和Comet技术，前者需要浏览器定时向Web服务器发送请求，然后等待服务器返回数据；后者则使用ajax, 不需要经常发送请求，只需要保持及占用连接。但两者都会占用带宽和服务器资源。在这种情况下，HTML5定义了WebSocket协议，实现了浏览器与Web服务器的双向即时的通讯，并且相对传统的方式，更能节约带宽和服务器资源。在使用WebSocket时，浏览器端与Web服务器端都需要编写相应的代码。（Tomcat7版本已支持WebSocket）,使用Javascript创建WebSocketvar websocket = new WebSo
22、cket(“ws:/192.168.2.100:8080/Baidu_Music/music“);websocket.onopen = function(event) websocket.send(“hello! “); ;websocket.onmessage = function(event) websocket.close(); ;websocket.onclose = function(event) ;websocket.onerror = function(event) ;,创建WebSocket实例。连接服务器的URL前缀必须为”ws”，而不是”http”或”https”。,Web
23、Socket握手协议建立成功后触发onopen事件。,向服务器发送信息。通过部署在服务器的代码，可将该信息发送给与服务器建立连接的对象或执行其他操作。,实时接收服务器发送的信息。当收到信息，触发onmessage事件。,关闭连接。,与服务器连接断开或关闭时触发onclose事件。,连接发生错误或异常时触发onclose事件。,MIME type,首先，在浏览器中显示的内容，通常有视频、图像、文本、音频、应用程序等，此时，浏览器需要知道如何区分它们，用什么形式来显示。MIME Type就是用来告知浏览器该资源的媒体类型。MIME type表示多用途Internet邮件扩允协议。该协议类型就是设定某种扩展名的文件用何种应用程序来打开的方式，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。MIME type通常是存放于HTTP协议中的Content-Type中，由Web Service告知浏览器。在实际编码中，一些标准和常见的MIME类型是不需要设置的，因为Web Service和浏览器都可以自动识别，只有对于不常见的类型，才需要在Web Service和浏览器中同时设定。语法：媒体类型/具体种类,例如：(1)HTML4时写法：HTML5时写法：,告知浏览器这是html。,(2) ,告知浏览器这是mpeg音频文件。,
