HTML5
一、HTML5增加元素
<canvas> </canvas> 用于图形绘制,通过脚本(常用JS)来完成;具体请参考JavaScript; <svg> </svg> 矢量图,支持内联; <math> </math> 用于书写数学字符; <video> </video> 显示视频;(支持MP4,WebM,Ogg);内容里边需要有sorce标签给定的源文件;具体请参考JavaScript; <audio> </audio> 显示视频;(支持MP3,wav,Ogg);内容里边需要有sorce标签给定的源文件;具体请参考JavaScript; <source> 定义media元素 (<video> 和 <audio>)的媒体资源 <bdi> </bdi> 设置一段文本的方向,可与父元素方向不同; <mark> </mark> 带有记号的文本; <time> </time> 时间;属性有datetime <embed> 一个容器,可用来嵌入部应用或插件,属性有width,height,src,type;
二、新的元素和属性
(一)新的<input>标签中新增属性
1 type属性新增值: 2 color 颜色选择框; 3 date 日期选择器(部分浏览器不支持); 4 datetime-local 日期和时间选择器; 5 time 时间选择器; 6 week 周选择器; 7 email 邮件地址验证; 8 url url验证; 9 month 月份选择; 10 number 数值输入,可用以下属性进行更多限定, disabled,max,min,maxlengh,pattern(正则表达式),readonly,requried,size,step,value; 11 range 数值选择,显示为一个滑块,需用更多属性进行限定:max,min,step,value; 12 autofocus 不需要值,如果给定此属性,则在加载页面时输入域自动获得焦点; 13 form 设置输入域属于某一个或多个表单,多个表单之间用空格分隔; 14 formaction 值会覆盖<form>元素中的action属性; 15 formenctype 值会覆盖<form>元素中的enctype属性; 16 formmethod 值会覆盖<form>元素中的method属性; 17 formnovalidate 值会覆盖<form>元素中的novalidate属性; 18 formtarget 值会覆盖<form>元素中的target属性; 19 height 设置image类型<input>标签高度; 20 width 设置image类型<imput>标签宽度; 21 multiple 不需要值,如果给定此属性,则在输入元素中可选择多个值; 22 pattern 值为正则表达式,用来验证输入值; 23 placeholder 值为用来显示在输入域中来提示用户; 24 requried 不需要值,如给定此属性,则输入不能为空;
(二)新的表单元素
1 <datalist> </datalist> 与<input>一起使用,来设定预定义值,每个值用<option value="value">来设定; 2 <keygen> 提交表单时会生成私钥和公钥两个键,私钥存于客户端,公钥发送给服务器; 3 <output> 元素用于不同类型的输出,比如计算或脚本输出. 4 5 <form>/<input>的autocomplete属性,如果值为on则会保留最后一次输入的值作为下次输入的默认值,如果为off则不会记录保留; 6 <form>的novalidate属性,不需要值,如果给定了此属性则在提交表单时不应该验证 form 或 input 域。
(三)新的语义元素
1 语义元素用来明确一个Web页面的不同部分; 2 <header> </header> 3 <nav> </nav> 定义导航链接的部分; 4 <section> </section> 定义文档中的节; 5 <article> </article> 标签定义独立的内容; 6 <aside> </aside> 定义页面主区域内容之外的内容; 7 <figcaption> </figcaption> <figure> 元素的标题,应该被置于 "figure" 元素的第一个或最后一个子元素的位置; 8 <figure> </figure> 标签规定独立的流内容(图像、图表、照片、代码等等),元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。 9 <footer> </footer> 描述了文档的底部区域;
(四)新的全局属性
1 contenteditable 元素是否可编辑,值有true,false; 2 contextmenu 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单,值为要打开<menu>元素的id; 3 data-* 存储页面的自定义数据; 4 draggable 元素是否可拖动,值有true,false,auto; 5 hidden
(五)新的存储方式
localStorage 本地存储,永久性的;
sessionStrorage 针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除;
但这两种方式的都是通过脚本来实现的;
三、全局事件属性
(html4后支持,主要用于浏览器触发事件后运行的脚本,值都是script):
1.窗口事件属性
1 onafterprint 打印文档后运行脚本; 2 onbeforeprint 打印文档前; 3 onbeforeonload 文档加载前; 4 onload 文档加载时; 5 onoffline 文档离线时; 6 ononline 文档上线时; 7 onhaschange 文档改变时; 8 onredo 文档再次执行时; 9 onundo 文档执行撤销时; 10 onerror 出现错误时; 11 onmessage 触发消息时; 12 onunload 用户离开文档时; 13 onblur 窗口失去焦点时; 14 onfocus 窗口获得焦点时; 15 onpagehide 窗口隐藏时; 16 onpageshow 窗口可见时; 17 onpopstate 窗口历史记录改变时; 18 onresize 窗口大小改变时; 19 onstorage web storage区域更新时;
2.表单事件属性
1 onblur 元素失去焦点时; 2 onfocus 元素获得焦点时; 3 onchange 元素改变时; 4 oncontextmenu 触发上下文菜单时; 5 onformchange 表单改变时; 6 onforminput 表单获得用户输入里 7 oninput 当元素获得用户输入时; 8 oninvalid 元素无效时; 9 onselect 选取元素时; 10 onsubmit 提交表单时;
3.键鼠事件属性
1 onkeydown 按下按键时; 2 onkeyup 松开按键时; 3 onkeypress 按下并松开按键时; 4 onclick 鼠标点击时; 5 ondblclick 鼠标双击元素时; 6 onmousedown 按下鼠标时; 7 onmouseup 松开鼠标时; 8 onmousemove 鼠标指针移动时; 9 onmouseout 鼠标指针移出元素时; 10 onmouseover 鼠标指针移至元素上时; 11 ondrag 拖动元素时; 12 ondraged 拖动操作结束时; 13 ondragstart 拖动操作开始时; 14 ondrop 元素正在被拖动过程中时; 15 ondragleave 当元素离开有效拖放目标时; 16 ondrageover 当元素被拖动至有效目标上方时; 17 onmousewheel 鼠标滚轮滚动时; 18 onscroll 当滚动元素的滚动条时;
4.多媒体事件属性
1 onabort 发生中止事件时; 2 oncanplay 媒介能够开始播放,但可能因缓冲需要停止时; 3 oncanplaythrough 媒介无需因缓冲而停止可播放至结尾时; 4 ondurationchange 媒介长度改变时; 5 onemptied 媒体元素突然为空时; 6 onended 媒体已抵达结尾时; 7 onerror 媒体元素加载发生错误时; 8 onloaddaata 加载媒体数据时; 9 onloadedmetadata 媒体持续时间以及其他媒体数据已加载时; 10 onloadstart 开始加载媒体数据时; 11 onpause 媒体数据暂停运行时; 12 onplay 媒体数据将要开始播放时; 13 onplaying 媒体数据正在播放时; 14 onprogress 当浏览器正在取媒体数据时; 15 onratechange 当媒体数据播放速率改变时; 16 onreadystatechange 就绪状态改变时; 17 onseeked 媒体元素定位属性不再为真且已定位结束时; 18 onseeking 媒体元素定位为真且定位已开始时; 19 onstalled 取回媒体数据过程中存在错误时; 20 onsuspend 浏览器已在取媒体数据但在取回整下媒体文件前停止时; 21 ontimeupdate 媒体改变其播放位置时; 22 onvolumechange 媒体音量改变时; 23 onwaiting 媒体已停止播放但打算继续播放时;
5.其他
onshow <menu>元素在上下文显示时;
ontoggle 用户打开或关闭<details>时;
注:文中的新增都是在HTML基础上新增的。