html5基础学习

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>