疯狂HTMLCSSJavascript讲义HTML部分.docVIP

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元素 比input type=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对象相对于一个数组，开发者可以通过类似访问数组的方式访问