整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML 语法的变化,HTML5有哪些新的元素和属性

TML5 引入了新的 HTML 元素和属性,有的是传统通用元素的语义化版本,如取代 div 元素的 nav, footer 等元素,也有一些全新的元素,如 audio, video。一些在 HTML4 中不被推荐使用的元素,如 font 和 center 将被弃用。HTML5 引入的新 HTML 元素包括:

  • article:文章

  • aside:内容旁边的侧边栏内容

  • audio:音频

  • canvas:2D 绘图

  • command:命令按钮

  • datalist:下拉选择框

  • details:对象的细节

  • dialog:对话框

  • embed:外部插件或对象

  • figure:一组媒体对象以及标签文字

  • footer:页脚

  • header:页首

  • hgroup:文档某一部分的信息

  • keygen:表单生成的 Key

  • mark:标注的文字

  • meter:预先定义的范围内的度量

  • nav:导航条

  • output:输出

  • progress:进度条

  • rp:标识 rubby 内容

  • rt:rubby 内容的解释

  • ruby:rubby 内容

  • section:定义一个部分

  • source:媒体的资源

  • time:日期时间

  • video:视频

这些新标签,可以让你的 HTML 文档更容易加载,且更容易被搜索引擎抓取其中的有用信息。比如,搜索引擎可以直接抓取它最关心的 article 标签里面的内容。

得上学时,老师千叮咛、万嘱咐的告诉我们“好记性不如烂笔头”这句至理名言,笔记一定要记,还要记好,自从来到html5的世界之后,发现更是如此,许多细节需要写一些注释,不然过几天就忘。俗话说:“最淡的墨水,也胜过最强的记忆。”今天把Html5中的事件属性整理了一下,与大家分享。

全局事件属性

HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript,下面列出了添加到 HTML 元素以定义事件动作的全局事件属性。

Window事件属性

针对 window 对象触发的事件(应用到 <body> 标签),他们的值都是script

onafterprint 文档打印之后运行的脚本。

onbeforeprint文档打印之前运行的脚本。

onbeforeunload文档卸载之前运行的脚本。

onerror在错误发生时运行的脚本。

onhaschange当文档已改变时运行的脚本。

onload页面结束加载之后触发。

onmessage在消息被触发时运行的脚本。

onoffline当文档离线时运行的脚本。

Ononline当文档上线时运行的脚本。

onpagehide当窗口隐藏时运行的脚本。

onpageshow当窗口成为可见时运行的脚本。

onpopstate当窗口历史记录改变时运行的脚本。

onredo当文档执行撤销(redo)时运行的脚本。

onresize当浏览器窗口被调整大小时触发。

onstorage 在 Web Storage 区域更新后运行的脚本。

onundo 在文档执行 undo 时运行的脚本。

onunload一旦页面已下载时触发(或者浏览器窗口已被关闭)。

Form事件

由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在 form 元素中,同样的,以下属性的值都是script。

onblur元素失去焦点时运行的脚本。

onchange 在元素值被改变时运行的脚本。

oncontextmenu 当上下文菜单被触发时运行的脚本。

onfocus当元素获得焦点时运行的脚本。

onformchange 在表单改变时运行的脚本。

onforminput当表单获得用户输入时运行的脚本。

oninput当元素获得用户输入时运行的脚本。

oninvalid 当元素无效时运行的脚本。

onreset当表单中的重置按钮被点击时触发。HTML5 中不支持。

onselect在元素中文本被选中后触发。

onsubmit在提交表单时触发。

Mouse事件

由鼠标或类似用户动作触发的事件:

onclick元素上发生鼠标点击时触发。

ondblclick元素上发生鼠标双击时触发。

ondrag 元素被拖动时运行的脚本。

ondragend 在拖动操作末端运行的脚本。

ondragenter当元素元素已被拖动到有效拖放区域时运行的脚本。

ondragleave当元素离开有效拖放目标时运行的脚本。

ondragover当元素在有效拖放目标上正在被拖动时运行的脚本。

ondragstart在拖动操作开端运行的脚本。

ondrop当被拖元素正在被拖放时运行的脚本。

onmousedown当元素上按下鼠标按钮时触发。

onmousemove 当鼠标指针移动到元素上时触发。

onmouseout当鼠标指针移出元素时触发。

onmouseover当鼠标指针移动到元素上时触发。

onmouseup 当在元素上释放鼠标按钮时触发。

onmousewheel 当鼠标滚轮正在被滚动时运行的脚本。

onscroll 当元素滚动条被滚动时运行的脚本。

Media事件

由媒介(比如视频、图像和音频)触发的事件(适用于所有 HTML 元素,但常见于媒介元素中,比如 <audio>、<embed>、<img>、<object> 以及 <video>):

onabort在退出时运行的脚本。

oncanplay当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)。

oncanplaythrough当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。

ondurationchange当媒介长度改变时运行的脚本。

onemptied当发生故障并且文件突然不可用时运行的脚本(比如连接意外断开时)。

onended 当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)。

onerror当在文件加载期间发生错误时运行的脚本。

onloadeddata当媒介数据已加载时运行的脚本。

onloadedmetadata当元数据(比如分辨率和时长)被加载时运行的脚本。

onloadstart在文件开始加载且未实际加载任何数据前运行的脚本。

onpause当媒介被用户或程序暂停时运行的脚本。

onplay当媒介已就绪可以开始播放时运行的脚本。

onplaying当媒介已开始播放时运行的脚本。

onprogress当浏览器正在获取媒介数据时运行的脚本。

onratechange每当回放速率改变时运行的脚本(比如当用户切换到慢动作或快进模式)。

onreadystatechange每当就绪状态改变时运行的脚本(就绪状态监测媒介数据的状态)。

onseeked当 seeking 属性设置为 false(指示定位已结束)时运行的脚本。

onseeking当 seeking 属性设置为 true(指示定位是活动的)时运行的脚本。

onstalled在浏览器不论何种原因未能取回媒介数据时运行的脚本。

onsuspend在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。

ontimeupdate当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。

onvolumechange每当音量改变时(包括将音量设置为静音)时运行的脚本。

onwaitin当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲更多数据)运行脚本

以上这些属性你掌握了多少,又忘记了多少呢,赶紧捡起来哦。

家好,我是拾光。

给大家整理一下H5的全局属性。

1、当标签设置属性——contentEditable时,该元素就可以被修改,目前并没有相应的API支持保存之后修改后的文字

2、除了contentEditable之外,元素还具有一个isContentEditable属性,当属性可编辑时,该属性值为true,当元素不可编辑时,该属性为false;

3、designMode属性用来指定整个页面是否可编辑,当页面可编辑时,页面中任何支持contentEditable属性的元素值都编程了可编辑状态。designMode属性只能在JavaScript脚本中被编辑修改,该属性的值有两个——“off”与“off”。

document.designMode="on"

IE8出于安全考虑并不支持;IE9允许进入可编辑状态;Chrome3和Safari使用内嵌frame方式,该内嵌frame是可编辑的;FireFox和 Opera允许使用designMode属性让页面进入可编辑状态。

4、hidden,所有的元素都允许使用hidden属性,该属性类似于input中的hidden属性,hidden有两个值,“true”与“false”,“true”时为 可见,“false”时为隐藏。

5、spellcheck,它是针对input以及textarea元素提供的新属性,该属性是一个boolean值,“true”与“false”,“true”时,开启拼写检查,“false”时关闭拼写检查。

P.S.:如果元素的readOnly属性或者disabled属性设置 为true时,则不执行拼写检查,目前除了 IE之外的浏览器都对该属性进行了支持。

6、tabindex,是开发中的一个基本概念,我联想到了winform中的tabindex,当不断的敲击tab键让窗口或者文本框获得焦点,在过去的编辑网页中是非常有用的,但是如今控件的遍历顺序都是由元素在页面上所处的位置决定的,但是tabindex还有另外一个作用,在默认情况下,只有链接元素与表单元素可以通过按键获取焦点,如果对其他元素使用 tabindex属性后,也能让该元素获得焦点,那么当脚本中中执行focus()语句的时候,就可以让该元素获得焦点。但是 这样会差生一个副作用:该元素也可以通过按tab键获得焦点,把元素值设为负数(通常为-1)后就 可以解决这个问题了,设为负数后可以通过编程的方式让元素获得焦点,但按下tab键时该元素就不能获得焦点。