首页 > 代码库 > 5月29号=》第41页-第45页
5月29号=》第41页-第45页
2.4 HTML5头部和元信息
<script>：该元素用于包含JavaScript脚本。
<style>：该元素用于定义内部CSS样式。
<link>：该元素用于链接外部CSS样式等资源。
<title>：该元素用于定义文档标题。
<base>：该元素用于指定该页面中所有链接的基准链接。
该元素属性如下：
href:指定所有链接的基准链接。
target:指定超链接默认在哪个窗口打开=>(_blank、_parent、_self、_top)
代码示范：
<head>
<base target="_blank" href="http://www.crazyit.org"/>
</head>
<a href="http://www.mamicode.com/index.php">疯狂HTML5<a/>
该代码表示<a>标签的实际URl为 http://www.crazyit.org/index.php,并且使用新窗口打开该链接。
<meta>：该元素用于定义HTML页面的元数据。
该元素属性如下：
name:指定元信息的名称，该名称值可以随意指定。
content:指定元信息的值。
http-equiv:指定元信息的名称，该属性指定的名称具有特殊意义，
他可以向浏览器传回一些有用的信息，帮助浏览器正确地处理网页内容。
http-equiv属性所支持的值主要有如下几个：
Expires:指定网页的过期时间。一旦网页过期，必须重新从服务器上下载。
代码示范<meta http-equiv="Expires" content="Sat Sep 27 16:12:36 CST 2008"
Pragma:指定禁止浏览器从本地磁盘缓存中调阅页面内容，浏览器一旦离开该网页就无法脱机访问。
代码示范<meta http-equiv="Pragma" content="no-cache"/>
Refresh:指定浏览器多长时间后自动刷新指定页面。
代码示范<meta http-equiv="Refresh" content="2"/>设置2秒后自定刷新本页面
<meta http-equiv="Refresh" content="2;URL=http://www.crazyit.org"/>
Set-Cookie:设置Cookie。如果 网页过期，那么客户端上的Cookie也将被删除。
代码示范<meta http-equiv="Set-Cookie"
content="name"=value expires=Set Sep 27 16:12:36 CST 2008,path=/""/>
Content-Type:设置该网页的内容类型和所用的字符集。
代码示范<meta http-equiv="Content-Type" content="text/html" charset="GBK"/>
2.5 HTML5新增的拖放API
2.5.1 启动拖动
draggable:该属性用于设置元素是否可拖动，该属性的值可为"true"和"false"。
给元素使用该属性值为"true"时元素可以拖动，但元素携带数据无
法实现拖动效果因此需要为该元素的ondragstart事件指定监听器，
在监听器中让拖动操作可以携带数据。
代码示范:
<div id="source" style="border:1px solid;" draggable="true">要拖动的元素</div>
<script type=text/javascript>
var source = document.getElementById("source");
source.ondragstart = function(evt)
{
//让拖动操作携带数据
evt.dataTransfer.setData("text/plain","www.fkjava.org" );
}
</script>
2.5.2 接受“放”
以上拖动的代码示范可以实现元素被鼠标拖动的样式，但无法达到元素真正被拖动到
指定的位置，拖动时都会有一个“禁止”标志，这表明“目的地”并不接受被拖动的元素，
这是因为document对象默认阻止了拖动事件，可以为document的ondragover事件
指定监听器，在监听器中取消document对拖动事件的默认行为，达到拖动实现效果。
代码示范：
document.ondragover = function(evt)
{
//取消事件的默认行为
return false;
}
当用户把元素拖动到指定位置释放后，某些浏览器默认会打开一个新的页面来显示拖动元素，
某些浏览器则会默认在用户操作拖动的“目的地”显示其结果，因此可以为document的ondrop
事件绑定监听器，实现浏览器都以操作者拖动的“目的地”的位置来显示该元素。
代码示范：
document.ondrop = function(evt)
{
//取消在新页面打开拖动元素
return false;
}
在用户拖放HTML元素的过程中，可能触发下列所示的事件。
| 事件 | 事件源 | 描述 |
| ondragstart | 被拖动的HTML元素 | 开始拖动操作时触发该事件 |
| ondrag | 被拖动的HTML元素 | 拖动过程中会不断地触发该事件 |
| ondragend | 被拖动的HTML元素 | 拖动结束时触发该事件 |
| ondragenter | 拖动时鼠标经过的元素 | 被拖动的元素进入本元素的范围内时触发该事件 |
| ondragover | 拖动时鼠标经过的元素 | 被拖动的元素进入本元素的范围内拖动时会不断触发该事件 |
| ondragleave | 拖动时鼠标经过的元素 | 被拖动的元素离开本元素时触发该事件 |
| ondrop | 拖动时鼠标经过的元素 | 其他元素被放到了本元素中时触发该事件 |