前言
也许你对标签属性的知识局限于style,class,id,作为技术纵深,这些事远远不够的。
h5全局属性(16个)
accesskey class contenteditable contextmenu dir draggable dropzone hidden id lang style tabindex title spellcheck data-* translate
h5新增全局属性(8个)
contenteditable: true false 定义元素内容是否可编辑,默认false
contextmenu: menu_id 定义元素的上下文菜单,属性值是该菜单的id属性,默认false
draggable: true false auto 定义元素是否可拖拽,默认false
dropzone: copy move link 定义元素被拖拽时是复制数据、移动元素、产生指向原数据的连接
hidden: hidden 定义元素是否隐藏,
spellcheck: true false 定义是否对元素进行拼写或语法检查,,默认false
data-*: 自定义 存储页面或应用程序的私有自定义属性
translate: yes no 定义元素是否应该被翻译,默认no
自定义属性
- 首先,需要明确的是标签中支持自定义属性,但是一些特定的属性是有特定含义的,例如以下几种:
class,style 属于样式修饰的;
id,name,可以做标识的,title 做描述的
value ,data- 做值域的
readonly,disabled,selected,checked等用来区分元素的状态属性
oninput,onchange,onblur 用于事件属性的,
src 用于标签需要的源文件
href ,target,用于关联信息以及连接效果
type,多用于表单的输入类型
placeholder,pattern用于辅助输入,表单提示输入的
所以,除了以上的几种,就可以自定义属性,用于做标识,做自定义数据,做标签类型等,需要注意的是属性不区分字母的大小写。 input type新增的属性:可以支持更好的数据验证
事件属性多用于用户的交互体验,超出1/2是h5新增的,下面摘抄出常用的作为知识储备。
- window事件: onload(),另外补充h5新增的事件。
onbeforeprint,onafterprint,打印前后触发的事件
onerror 发生错误的时候 onhaschange 文档发生改变的时候
ononline onoffline 文档上线下线的脚本
onpagehide onpageshow 用于窗口隐藏和显示
onresize 窗体大小发生改变时
onunload 一旦页面已下载或者窗口关闭 onbeforeunload 文档呗卸载前 - form事件: onblur() onchange() onfocus() onselect() onsubmit(),onreset(),新增的事件有:
oncontextmenu 上下文的菜单触发 onformchange 表单改变时
onforminput 表单获得用户的输入状态时 oninput 元素获得用户的输入状态时
oninvalid 元素无效的时候使用
其中oninput 是目前应用很多的事件,可以用于输入的实时内容类型验证,避免非法字符的输入 - keyboard事件 : onkeypress()敲击 onkeydown()按下 onkeyup()释放 这三个均属于新增的事件
- mouse事件:onclick() ondbclick() onmousedown() onmousemove() onmouseover() onnouseout() onmouseup()
ondrag 一系列的针对事件,包括拖动触发,拖动开始结束触发,拖到进入以及离开有效区域的,
onmousewheel 鼠标滚动 onscroll 元素内的滚动呗触发 - media事件: onplay() onpause(),有兴趣的可以查看官网w3c的介绍。