欢迎来到天天文库
浏览记录
ID:42416693
大小:2.08 MB
页数:41页
时间:2019-09-14
《疯狂HTML5、CSS3、Javascript讲义---HTML5部分》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、HTML5常用元素和属性2012年8月21日10:04 HTML5的三点规则:1.兼容性:在老版本的浏览器上也可以运行2.实用性:没有特别复杂的功能,只是封装了常用的简单功能3.非革命性:并不是革命性的发展,只是一种妥协式的规范一、HTML5保留的常用属性二、HTML5新增的属性 三、HTML5新增的拖放API通过DataTransfer对象,可以让拖放操作完成更多的功能下面实现一个允许通过拖放来添加、删除收藏夹的功能: 通过设置DataTransfer对象的effectAllowed、dropEffect属性可以控制拖放行为,effectAllowed用于控制被拖动元
2、素的拖动行为,通常放在ondragstart事件监听器中,dropEffect则控制被放入目标组件的行为,因此通常放在ondragover事件监听器中如果dropEffect设置的拖放行为不在effectAllowed属性设置的多个拖放行为之内,拖放操作将会失败改变拖放图标setDragImage属性可以改变拖放图标 HTML5表单相关元素和属性2012年8月21日10:05 一、HTML原有表单及表单控件1.表单元素form的相关属性:action---表单被提交到哪个地址method--GET/POST请求类型enctype---对表单内容编码所采用的字符集---appli
3、cation/x-www-form-urlencoded(默认编码方式,URL编码格式)---multipart/form-data(二进制方式处理表单--文件上传)---text/plain(直接通过表单发送邮件)name---指定表单唯一名称target---打开目标URL方式有name属性的会生成请求参数,否则不会生成;表单属性设置为disabled则不会被提交2.input元素size指定元素宽度,maxlength指定最大输入字符数3.label元素当用户单击元素所生成的标签时,该标签关联的表单控件元素会获得焦点让标签和表单控件关联有两种方式:隐式关联:使用
4、for属性显式关联:将表单元素直接放在标签中(IE不支持)4.button元素比功能更强大、更丰富不要在button标签之间放置图像映射,会干扰表单按钮的行为5.列表框和下拉列表生成的是下拉列表还是列表框完全由是否指定size或multiple属性来决定,只要指定了其中一个属性,就会生成列表框6.使用textarea指定文本域textarea元素不能指定value属性 代码: 效果演示: 二、HTML5新增属性和元素1.html5为表单控件新增的属性form属性:可以让表单控件在元素之外,提高了灵活性
5、formaction属性:处理表单内包含了多个按钮,不同按钮提交到不同action的场景formxxx属性:与formaction相似,用于指定formenctype、formmethod、formtarget等属性autofocus属性:为某个表单添加该属性后,浏览器打开页面时会自动获得焦点(整个页面最多只能定义一个)placeholder属性:单行文本框、多行文本域显示的提示信息list属性:用于实现下拉框和文本框结合实现自动补全功能,需要与datalist标签配合使用autocomplete属性:主要用于和list组合,当开发者不希望某些用户看到下拉菜单,可通过设置autoc
6、omplete来实现,on表示显示下拉菜单,off表示不显示(目前只有Opera支持) HTML5代码:效果:2.功能丰富的input元素 Chrome支持部分input属性Opera支持较好:3.HTML5新增表单属性:HTML5新增了一个表单控件,用于显示输出,比如计算结果或者脚本输出必属于某个表单,要么定义在某个表单内部,要么指定form属性 三、HTML增强的文件上传域1.FileList对象和File对象两个属性:accept:指定上传文件类型(指定MIME类型)不要单靠accept过滤文件,这只是客户端过滤,很脆弱,如果要过滤,还需要在服
7、务器端设置过滤multiple:允许上传多个文件javascript通过files属性访问上传文件返回一个FileList对象,FileList对象相对于一个数组,开发者可以通过类似访问数组的方式访问每一个File对象File对象包含如下属性:name、type、size等如果要访问文件具体内容(二进制数据),需要借助FileReader等对象 2.使用FileReader读取文件内容FileReader同样是一个js对象提供了三个读取文件的方式:readAsText
此文档下载收益归作者所有