疯狂html5css3javascript完整版 pdf,疯狂HTML5、CSS3、Javascript讲义---HTML5部分

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

(41页)

本资源提供全文预览，点击全文预览即可全文预览,如果喜欢文档就下载吧，查找使用更方便哦！

19.9 积分

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元素当用户单击元素所生成的标签时，该标签关联的表单控件元素会获得焦点让标签和表单控件关联有两种方式：隐式关联：使用for属性显式关联：将表单元素直接放在标签中(IE不支持)4.button元素比功能更强大、更丰富不要在button标签之间放置图像映射，会干扰表单按钮的行为5.列表框和下拉列表生成的是下拉列表还是列表框完全由是否指定size或multiple属性来决定，只要指定了其中一个属性，就会生成列表框6.使用textarea指定文本域textarea元素不能指定value属性 代码： 效果演示： 二、HTML5新增属性和元素1.html5为表单控件新增的属性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新增了一个表单控件，用于显示输出，比如计算结果或者脚本输出必属于某个表单，要么定义在某个表单内部，要么指定form属性 三、HTML增强的文件上传域1.FileList对象和File对象两个属性：accept：指定上传文件类型(指定MIME类型)不要单靠accept过滤文件，这只是客户端过滤，很脆弱，如果要过滤，还需要在服务器端设置过滤multiple：允许上传多个文件javascript通过files属性访问上传文件返回一个FileList对象，FileList对象相对于一个数组，开发者可以通过类似访问数组的方式访问每一个File对象File对象包含如下属性：name、type、size等如果要访问文件具体内容(二进制数据)，需要借助FileReader等对象 2.使用FileReader读取文件内容FileReader同样是一个js对象提供了三个读取文件的方式：readAsText(file,encoding),以文本文件的方式读readAsBinaryString(file)，以二进制方式读取readAsDataURL(file)，以base64方式把文本内容编码成DataURL格式字符串效果演示(文本方式读取)： 显示进度条：效果显示：四、HTML5新增的客户端校验1.使用校验属性执行校验：指定该控件必须填写：指定该控件必须符合的正则表达式min/max/step：只对数字类型、日期类型有效  2.调用checkValidity方法进行校验 除此之外，HTML5为所有表单、表单控件提供了一个validity属性，该属性的值是一个ValidityState对象，该对象代表了表单、表单控件的输入校验状态，其中ValidityState的valid属性可以表示该表单、表单控件是否通过输入校验 3.自定义错误提示setCustomValidity()方法调用了某个控件的该方法意味着该表单控件没有通过输入校验。因此只有当表单控件本身没有通过输入校验时才能调用该方法，而不能随便直接调用该方法，否则可能导致本来可以通过校验的表单控件也变成了不能通过校验了 目前浏览器对自定义错误的支持不是很理想 4.关闭校验为元素增减novalidate属性，该属性的值要么是novalidate要么是省略属性值为或元素设置formnovalidate属性，该属性的值要么是novalidate要么是省略属性值 关 键 词： 疯狂 HTML5 CSS3 Javascript 讲义 部分

 天天文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：疯狂HTML5、CSS3、Javascript讲义---HTML5部分

链接地址： https://www.wenku365.com/p-42416693.html