HTML5-CSS3-JavaScript(3)

我们就从HTML5的基础总结起。希望可以提高自身的基础。

HTML5 头部 和 元信息

使用 <head.../> 元素可以定义HTML文档头，该元素可以包含如下子元素。

　　<script> 该元素用于包含JavaScript脚本。

　　<style> 该元素用于定义内部CSS样式。

　　<link> 该元素用于链接外部CSS样式等资源。

　　<title> 该元素用于定义文档标题。该元素较为常用的属性时id，作为其唯一标识。该元素只能包含文本内容，该文本内容就是该文本的标题。

　　<base> 该元素用于指定该页面中所有链接的基准链接。

　　<meta> 该元素用于定义HTML页面的元数据。

　　<base.../> 元素必须是空元素，该元素除了可以指定id作为其唯一标识之外，还可以指定如下两个属性。

　　　　href 指定所有链接的基准链接。

　　　　target 指定超链接默认在哪个窗口打开链接。该属性只能是 _blank、_parent、_self和_top其中之一。

　　<meta.../>用于定义页面元信息，定义元信息也就是指定一些name-value对。该元素除了可以指定id属性之外，还可以指定如下三个属性。

　　　　http-equiv 指定元信息的名称，该属性指定的名称具有特殊意义，它可以向浏览器传回一些有用的信息，帮助浏览器正确地处理网页内容。

　　　　name 指定元信息的名称，该名称值可以随意指定。

　　　　content 指定元信息的值。

　　　　示例： <meta name="author" content="江小波" />

　　　　为网页指定有效的关键字有利于搜索引擎收录本站点。

　　　　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 指定浏览器多长时间后自动刷新指定页面。例如：

　　　　　　　　<!-- 设置2秒后自动刷新本页面 -->

　　　　　　　　<meta http-equiv="Refresh" content="2" />

　　　　　　　　<!-- 设置2秒后自动刷新 http://www.baidu.com -->

　　　　　　　　<meta http-equiv="Refresh" content="2;URL=http://www.baidu.com" />

　　　　　　Set-Cookie 设置Cookie。如果网页过期，那么客户端上的Cookie也将被删除。例如：

　　　　　　　　<meta http-equiv="Set-Cookie" content="name=value expires= Sat Sep 27 16:12:36 CST 2008, path=/" />

　　　　　　content-Type 设置该页面的内容类型和所用的字符集。例如：

　　　　　　　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HTML5  新增的拖放API

　　HTML5新增了关于拖放的API，通过拖放API可以让HTML页面的任意元素都变成可拖动的，通过使用拖放机制可以开发出更友好的人机交互界面。

　　拖放操作可以分成两个动作：在某个元素上按下鼠标并移动鼠标（没有松开鼠标），此时开始拖动；在拖动过程中，只要没有松开鼠标，将会不断地产生拖动事件--这个过程被称为“拖”；把被拖动的元素拖动到另外一个元素上并松开鼠标--这个动作被称为“放”。拖放操作由“拖”和“放”两个动作组成。

1. 启动拖动

　　在HTML5中，<img.../>元素默认就是可以拖动的；而<a.../>元素只要设置了href属性，它默认也是可拖动的。

　　对于普通元素而言，如果希望把它变成可拖动的，开发者只要把该元素的draggable属性设为true即可。但仅仅设置该元素的draggable属性还不够，因为仅仅设置了draggable="true"只表示该元素可拖动，但拖动时并未携带数据，因此用户看不到拖动效果。

　　为了让拖动操作能携带数据，应该为被拖动元素的ondragstart事件指定监听器，在该监听器中让拖动操作可以携带数据。

2. 接受“放”

　　不管拖动图片，还是拖动<div.../>元素，拖放时都显示了一个“禁止”标志，这表明拖动图片、拖动<div.../>时，被拖到“目的地”并不接受被拖动的元素--这是因为当被拖动元素被“拖过”document对象时，document对象默认阻止了拖动事件，而其他HTML组件也是位于document对象内的，因此它们也不能接受“放”。

　　为了让document可以接受“放”，应该为document的ondragover事件指定监听器，在监听器中取消document对拖动事件的默认行为。

　　当用户把<div.../>元素拖到指定位置释放后，Firefox浏览器默认会打开一个新页面，页面的URL正是拖放操作携带的数据。但如果使用Chrome浏览器来浏览该页面，当用户把<div.../>元素拖到指定位置释放后，Chrome浏览器并没有执行任何默认动作。

　　由此可见，不同浏览器对于拖放操作的默认动作并不相同，如果开发者希望取消拖放操作的默认动作，则可以为document的ondrop事件绑定监听器。

事件	事件源	描述
ondragstart	被拖动的HTML元素	开始拖动操作时触发该事件
ondrag	被拖动的HTML元素	拖动过程中会不断地触发该事件
ondragend	被拖动的HTML元素	拖动结束时触发该事件
ondragenter	拖动时鼠标经过的元素	被拖动的元素进入本元素的范围内时触发该事件
ondragover	拖动时鼠标经过的元素	被拖动的元素进入本元素的范围内拖动时会不断地触发该事件
ondragleave	拖动时鼠标经过的元素	被拖动的元素离开本元素时触发该事件
ondrop	拖动时鼠标经过的元素	其他元素被放到了本元素中时触发该事件

3. DataTransfer 对象

　　拖放触发的拖放事件有一个dataTransfer属性，该属性值是一个DataTransfer对象，该对象包含如下属性和方法。

　　　　dataTransfer.dropEffect 设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不在effectAllowed属性的多种拖放行为之内，拖放操作将会失败。该属性值只允许为“none”、“copy”、“link”和“move”四个值之一。

　　　　dataTransfer.effectAllowed 设置或返回被拖动元素允许发生的拖动行为。该属性的值可设置为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”、“uninitialized”。

　　　　dataTransfer.items 该属性返回DataTransferItems对象，该对象代表了拖动数据。

　　　　dataTransfer.setDragImage(element,x,y) 设置拖放操作的自定义图标。其中element设置自定义图表，x设置图标与鼠标在水平方向的距离；y设置图标与鼠标在垂直方向的距离。

　　　　dataTransfer.addElement(element) 添加自定义图标

　　　　dataTransfer.types 该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。

　　　　dataTransfer.getData(format) 获取DataTransfer对象中format格式的数据。

　　　　dataTransfer.setData(format,data) 想DataTransfer对象中设置format格式的数据。其中format代表数据格式，data代表数据。

　　　　dataTransfer.clearData([format]) 清除DataTransfer对象中format格式的数据。如果省略format格式，则意味着清除DataTransfer对象中的全部数据。

4. 拖放行为

　　通过设置 DataTransfer对象的effectAllowed、dropEffect两个属性可以控制拖放行为。effectAllowed用于控制被拖动元素的拖动行为，因此通常建议在ondragstart事件监听器中设置DataTransfer对象的effectAllowed属性；而dropEffect则控制被“放”入的目标组件的行为，因此通常建议在ondragover事件监听器中设置DataTransfer对象的dropEffect属性。

　　前面已经介绍过一条总规则：如果dropEffect设置的拖放行为不在effectAllowed属性设置多个拖放行为之内，拖放操作将会失败。具体来说，需要注意4点。

　　　　1. 如果effectAllowed设为none，则不允许拖动该元素。

　　　　2. 如果dropEffect设为none，则被拖动的元素不能“放”到本元素中。

　　　　3. 如果effectAllowed设置为all或不设置，则dropEffect可设置为任何属性值（因为都在all范围之内），而且将会遵守dropEffect指定的拖放行为。

　　　　4. 如果effectAllowed指定了特定的拖放行为，例如move、copy等，那么dropEffect指定的属性值必须是effectAllowed指定的多个属性的子集。