1.HTML5 之前的HTML版本是:HTML4.01
2.html5 的文件类型是:<!DOCTYPE html>
3.html5 中用于组合标题的元素是<hgroup>
4.html5中不再支持<font>、<acronym>和<script>元素的type属性
5.用于播放html5视频文件的元素是:<video>
6.用于播放html5 音频文件的元素是:<audio>
7.html5 中规定元素内容是否可编辑的属性是:contenteditable
8.在html5 中能够直接将SVG元素嵌入html页面中
9.在html5 中contextmenu和spellcheck是html属性
10.SVG定义的图形是XML格式的
11.html5 用于在画布上绘制的内建对象是:getContext
12.html5中输入类型定义滑块控件的是:range
13.用于定义周和年控件的输入类型是:week
14.html5 中用于显示已知范围内的标量测量元素是:<meter>
html5的语义化标签:
header:定义文档的页面组合,通常是一些引导和导航信息。
footer:定义 section 或 document 的页脚。在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
section:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
nav:义显示导航链接不是所有的成组的超级链接都需要放在nav标签里。nav标签里应该放入一些当前页面的主要导航链接
time:定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码
mark:定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。
hgroup:签用于对网页或区段的标题元素(h1-h6)进行组合。
aside:用来装载非正文类的内容。例如广告,成组的链接,侧边栏等等。
article:显示一个独立的文章内容,可以包含h标签
figure:规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
figcaption:定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
contextmenu+menu:添加到系统右键菜单 [只有firefox支持):<div>添加到系统右键菜单
eg: < contextmenu=mymenu /div> <menu type="context" id="mymenu" />
html5 的规则:
- 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
- 减少对外部插件的需求(比如 Flash)
- 更优秀的错误处理
- 更多取代脚本的标记
- HTML5 应该独立于设备
- 开发进程应对公众透明
HTML5 中的一些有趣的新特性:
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素,比如 article、footer、header、nav、section
- 新的表单控件,比如 calendar、date、time、email、url、search
video:video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
<video width="320" height="240" controls="controls">
<source src="/i/movie.ogg" type="video/ogg">
<source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
下面的代码一样的效果
<video width="320" height="240" src="/i/movie.mp4" controls="controls">
Your browser does not support the video tag.
</video>
vvideo标签的属性:autoplay:autoplay;
controls:controls;
height:pixels;
loop:loop;
preload:preload;使用autoplay时忽视该属性
src:url;
pixels;
video方法、属性及事件:
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
duration timeupdate
ended ended
error abort
paused empty
muted emptied
seeking waiting
volume loadedmetadata
height
width
音频标签与视频类似;
拖放:拖放(Drag 和 drop)是 HTML5 标准的组成部分。拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释:在 Safari 5.1.2 中不支持拖放。
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" /> </body> </html>
解析:
- 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素(目标元素)中
//来回拖动 <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" /> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>