我们就从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指定的多个属性的子集。

HTML5-CSS3-JavaScript(3)的更多相关文章

  1. HTMl5/CSS3/Javascript 学习推荐资源

    HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...

  2. HTML5&CSS3&JavaScript&PHP&MySQL学习笔记

    1.在文字间添加一条水平线  使用<hr />  注意该符号不是成对出现的 2.<q> </q>用来标记于段落中的较短引用,浏览器会在它之间的语句两端加上双引号. ...

  3. 检测 HTML5\CSS3\JAVASCRIPT 在浏览器的适应情况

    CSS3 Selectors Test : 这是CSS3.INFO网站提供的css选择器测试页面,它能够详细显示当前浏览器对所有CSS3选择器的支持情况.启动测试,浏览器会自动测验,并已列表的方式显示 ...

  4. HTML5 + CSS3 + JavaScript

    http://www.programmer.com.cn/14761/#more-14761 文/李晶 随着互联网产业的爆炸式增长,与之伴生的Web前端技术也在历经洗礼和蜕变.尤其是近几年随着移动终端 ...

  5. html5+css3+javascript 自定义提示窗口

    效果图: 源码: 1.demo.jsp <%@ page contentType="text/html;charset=UTF-8" language="java& ...

  6. html5+css3+javascript 自定义弹出窗口

    效果图: 源码: 1.demo.jsp <%@ page contentType="text/html;charset=UTF-8" language="java& ...

  7. 《HTML5+CSS3+JavaScript 从入门到精通(标准版)》学习笔记(二)

    这是一个应用的例子,学以致用嘛 <!--这些代码我就直接放在了博客园的"页首Html代码"中,用于自定义博客,效果就是页面左上角的白色文字--> <p> & ...

  8. 《HTML5+CSS3+JavaScript 从入门到精通(标准版)》学习笔记(一)

    以下是以代码形式书写的笔记,本系列会持续更新,主要内容预计是类似下文的笔记,兼或一些思考与小项目,希望对你会有所帮助 1 <!-- --> <!DOCTYPE html>< ...

  9. 好程序员技术分享html5和JavaScript的区别

    好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5.CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称.如PC端网站 ...

  10. 用HTML5/CSS3/JS开发Android/IOS应用框架大全

    现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会 ...

随机推荐

  1. PL/SQL Developer的安装以及与64位Oracle Database进行连接

    本文转载自budongs 一.下载 官网安装包(1106版本)下载链接: plsqldev1106.exe 官网中文语言包(110版本) 下载链接: chinese.exe [中文语言包的使用方法为: ...

  2. 数据流-------C#文件和byte[]互换问题

    今天使用FileInfo.CopyTo的时候出现问题,当然并不是使用的问题,而是一些细节. 不过报错的时候,一度让我认为,copyto这个方法,给的参数必须是文件夹,而不是文件.所以就有了下面的查找 ...

  3. XML读取(string形式进行读取)

    #region 测试XML二进制读取 string strXmlData = "<xml><ToUserName><![CDATA[gh_ef65912f88f ...

  4. 【WEB前端系列之CSS】CSS3动画之Transform

    前言 Transform字面上是变形,改变的意思,在CSS3中transform主要包括如下几种 旋转rotate 扭曲skew 缩放scale 移动translate 矩形变形matrix tran ...

  5. css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

    一. 上中下左固定 - fixed+margin 概括:如图,此种布局就是顶部.底部和左侧固定不动,只有中间右侧超出可滚动. html: <header>我是头部position: fix ...

  6. Servlet 简单介绍

    来源于菜鸟教程http://www.runoob.com/servlet/servlet-intro.html Servlet 简介 Servlet 是什么? Servlet(Server Apple ...

  7. Elasticsearch学习之深入搜索二 --- 搜索底层原理剖析

    1. 普通match如何转换为term+should { "match": { "title": "java elasticsearch"} ...

  8. [原]rpm安装rpm-package报错:Header signature NOKEY 和 error: Failed dependencies:

    以前经常遇到这个问题,一直未有记录,今天记录下来: 在安装rpm包的时候报错误如下: Question 1: warning: *.rpm: Header V3 DSA signature: NOKE ...

  9. File类使用

    简介 File类的实例代表了一个文件或者一个目录,通过API可以获取这个对象的相关信息. File类代表的文件或者目录可以真实存在,也可以是不存在的,可以使用File.exists()来判断. 在Wi ...

  10. [APP] Android 开发笔记 002-命令行创建默认项目结构说明

    接上节:[APP] Android 开发笔记 001 4. 默认项目结构说明: 这里我使用Sublime Text 进行加载.