疯狂HTML5、CSS3、Javascript讲义---HTML5部分.doc

HTML5常用元素和属性
2012年8月21日
10:04

HTML5的三点规则：
1.兼容性：在老版本的浏览器上也可以运行
2.实用性：没有特别复杂的功能，只是封装了常用的简单功能
3.非革命性：并不是革命性的发展，只是一种妥协式的规范
一、HTML5保留的常用属性

二、HTML5新增的属性

三、HTML5新增的拖放API

通过DataTransfer对象，可以让拖放操作完成更多的功能
下面实现一个允许通过拖放来添加、删除收藏夹的功能：

通过设置DataTransfer对象的effectAllowed、dropEffect属性可以控制拖放行为，effectAllowed用于控制被拖动元素的拖动行为，通常放在ondragstart事件监听器中，dropEffect则控制被放入目标组件的行为，因此通常放在ondragover事件监听器中
如果dropEffect设置的拖放行为不在effectAllowed属性设置的多个拖放行为之内，拖放操作将会失败

改变拖放图标
setDragImage属性可以改变拖放图标

HTML5表单相关元素和属性
2012年8月21日
10:05

一、HTML原有表单及表单控件
1.表单元素
form的相关属性：
action---表单被提交到哪个地址
method--GET/POST请求类型
enctype---对表单内容编码所采用的字符集
---application/x-www-form-urlencoded（默认编码方式，URL编码格式）
---multipart/form-data（二进制方式处理表单--文件上传）
---text/plain（直接通过表单发送邮件）
name---指定表单唯一名称
target---打开目标URL方式
有name属性的会生成请求参数，否则不会生成；
表单属性设置为disabled则不会被提交
2.input元素
size指定元素宽度，maxlength指定最大输入字符数
3.label元素
当用户单击<label>元素所生成的标签时，该标签关联的表单控件元素会获得焦点
让标签和表单控件关联有两种方式：
隐式关联：使用for属性
显式关联：将表单元素直接放在<label>标签中（IE不支持）
4.button元素
比<inputtype="button">功能更强大、更丰富
不要在button标签之间放置图像映射，会干扰表单按钮的行为
5.列表框和下拉列表
<select>生成的是下拉列表还是列表框完全由是否指定size或multiple属性来决定，只要指定了其中一个属性，就会生成列表框
6.使用textarea指定文本域
textarea元素不能指定value属性

代码：

效果演示：

二、HTML5新增属性和元素
1.html5为表单控件新增的属性
form属性：可以让表单控件在<form>元素之外，提高了灵活性
formaction属性：处理表单内包含了多个按钮，不同按钮提交到不同action的场景
formxxx属性：与formaction相似，用于指定formenctype、formmethod、formtarget等属性
autofocus属性：为某个表单添加该属性后，浏览器打开页面时会自动获得焦点（整个页面最多只能定义一个）
placeholder属性：单行文本框、多行文本域显示的提示信息
list属性：用于实现下拉框和文本框结合实现自动补全功能，需要与datalist标签配合使用
autocomplete属性：主要用于和list组合，当开发者不希望某些用户看到下拉菜单，可通过设置autocomplete来实现，on表示显示下拉菜单，off表示不显示（目前只有Opera支持）

HTML5代码：

效果：

2.功能丰富的input元素

Chrome支持部分input属性

Opera支持较好：

3.HTML5新增表单属性：
HTML5新增了一个<output>表单控件，用于显示输出，比如计算结果或者脚本输出
<output>必属于某个表单，要么定义在某个表单内部，要么指定form属性

三、HTML增强的文件上传域
1.FileList对象和File对象
两个属性：
accept：指定上传文件类型（指定MIME类型）
不要单靠accept过滤文件，这只是客户端过滤，很脆弱，如果要过滤，还需要在服务器端设置过滤
multiple：允许上传多个文件
javascript通过files属性访问上传文件返回一个FileList对象，FileList对象相对于一个数组，开发者可以通过类似访问数组的方式访问每一个File对象
File对象包含如下属性：name、typ