美文网首页前端
HTML5中新标签和属性

HTML5中新标签和属性

作者: 暖A暖 | 来源:发表于2019-03-24 17:18 被阅读19次

一、HTML5中的新标签

  • <article> :定义外部的内容,这些内容独立于文档的其余部分;
  • <aside> :定义其所处内容之外的内容;
  • <audio> :定义声音,比如音乐或其他音频流;
  • <bdi> :允许设置一段文本,使其脱离其父元素的文本方向设置;
  • <canvas> :定义图形,比如图表和其他图像,它只是图形容器,必须使用脚本来绘制图形;
  • <command> :可以定义命令按钮,比如单选按钮、复选框或按钮;
  • <datalist> :定义选项列表,与 input 元素配合使用该元素,来定义 input 可能的值;
  • <details> :用于描述文档或文档某个部分的细节;
  • <embed> :定义嵌入的内容,比如插件;
  • <figcaption>: 定义元素的标题;
  • <figure>:规定独立的流内容,如图像、图表、照片、代码等等;
  • <footer>:定义 section 或 document 的页脚;
  • <header>:定义文档的页眉(介绍信息);
  • <hgroup>:用于对网页或区段的标题进行组合;
  • <keygen>:规定用于表单的密钥对生成器字段;
  • <mark>:定义带有记号的文本,请在需要突出显示文本时使用 <m> 标签;
  • <meter>:定义度量衡,仅用于已知最大和最小值的度量;
  • <nav>:定义导航链接的部分;
  • <output>:定义不同类型的输出,比如脚本的输出;
  • <progress>:定义运行中的进度(进程);
  • <rp>:在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容;
  • <rt>:定义字符的解释或发音;
  • <ruby>:定义 ruby 注释;
  • <section>:定义文档中的节(section、区段),比如章节、页眉、页脚或文档中的其他部分;
    <source> :为媒介元素比如 <video> 和 <audio>定义媒介资源; <summary>:包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。;
    <time> :定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的; <track>:为诸如 video 元素之类的媒介规定外部文本轨道;
    <video> `:定义视频,比如电影片段或其他视频流;

二、HTML5新属性

  • contenteditable:bool类型,规定是否允许用户编辑内容;
  • contextmenu:规定元素的上下文菜单;
  • data-yourvalue:创作者定义的属性,HTML 文档的创作者可以定义他们自己的属性,必须以 "data-" 开头;
  • draggable:规定是否允许用户拖动元素;
  • hidden:规定该元素是无关的,被隐藏的元素不会显示;
  • item:用于组合元素;
  • itemprop:用于组合项目;
  • spellcheck:规定是否必须对元素进行拼写或语法检查;
  • subject:规定元素对应的项目;

三、Window 事件属性

  • onafterprint:在打印文档之后运行脚本;
  • onbeforeprint:在文档打印之前运行脚本;
  • onbeforeonload:在文档加载之前运行脚本;
  • onerror:当错误发生时运行脚本;
  • onhaschange:当文档改变时运行脚本;
  • onmessage:当触发消息时运行脚本;
  • onoffline:当文档离线时运行脚本;
  • ononline:当文档上线时运行脚本;
  • onpagehide:当窗口隐藏时运行脚本;
  • onpageshow:当窗口可见时运行脚本;
  • onpopstate:当窗口历史记录改变时运行脚本;
  • onredo:当文档执行再执行操作时运行脚本;
  • onresize:当调整窗口大小时运行脚本;
  • onstorage:当文档加载加载时运行脚本;
  • onundo:当 Web Storage 区域更新时,存储空间中的数据发生变化时;
  • onunload:当用户离开文档时运行脚本;

四、表单事件

  • oncontextmenu:当触发上下文菜单时运行脚本;
  • onformchange:当表单改变时运行脚本;
  • onforminput:当表单获得用户输入时运行脚本;
  • oninput:当元素获得用户输入时运行脚本;
  • oninvalid:当元素无效时运行脚本;

五、键盘事件

  • onkeydown:当按下按键时运行脚本;
  • onkeypress:当按下并松开按键时运行脚本;
  • onkeyup:当松开按键时运行脚本;

六、鼠标事件

  • ondrag:当拖动元素时运行脚本;
  • ondragend:当拖动操作结束时运行脚本;
  • ondragenter:当元素被拖动至有效的拖放目标时运行脚本;
  • ondragleave:当元素离开有效拖放目标时运行脚本;
  • ondragover:当元素被拖动至有效拖放目标上方时运行脚本;
  • ondragstart:当拖动操作开始时运行脚本;
  • ondrop:当被拖动元素正在被拖放时运行脚本;
  • onmousewheel:当转动鼠标滚轮时运行脚本;
  • onscroll:当滚动元素滚动元素的滚动条时运行脚本;

七、媒介事件

  • oncanplay:当媒介能够开始播放但可能因缓冲而需要停止时运行脚本;
  • oncanplaythrough:当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本;
  • ondurationchange:当媒介长度改变时运行脚本;
  • onemptied:当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本;
  • onended:当媒介已抵达结尾时运行脚本;
  • onerror:当在元素加载期间发生错误时运行脚本;
  • onloadeddata:当加载媒介数据时运行脚本;
  • onloadedmetadata:当媒介元素的持续时间以及其他媒介数据已加载时运行脚本;
  • onloadstart:当浏览器开始加载媒介数据时运行脚本;
  • onpause:当媒介数据暂停时运行脚本;
  • onplay:当媒介数据将要开始播放时运行脚本;
  • onplaying:当媒介数据已开始播放时运行脚本;
  • onprogress:当浏览器正在取媒介数据时运行脚本;
  • onratechange:当媒介数据的播放速率改变时运行脚本;
  • onreadystatechange:当就绪状态(ready-state)改变时运行脚本;
  • onseeked:当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本;
  • onseeking:当媒介元素的定位属性为真且定位已开始时运行脚本;
  • onstalled:当取回媒介数据过程中(延迟)存在错误时运行脚本;
  • onsuspend:当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本;
  • ontimeupdate:当媒介改变其播放位置时运行脚本;
  • onvolumechange:当媒介改变音量亦或当音量被设置为静音时运行脚本;
  • onwaiting:当媒介已停止播放但打算继续播放时运行脚本;

相关文章

  • 16.JS异步加载有几种方法?

    方案一: 标签的 anync='async'属性。HTML5中新增的属性,chrome,FF,IE9&IE9+均支...

  • 学习笔记-多媒体标签

    html5中新增的标签(一共30个) video标签 作用:播放视频 格式1: 格式2: 属性: sr...

  • HTML5中新标签和属性

    一、HTML5中的新标签 :定义外部的内容,这些内容独立于文档的其余部分; :定义其所处内容之外的内容; :定义声...

  • H5 多媒体元素 video 和 radio

    在HTML5中新加的video和radio,也对应有方法、属性和事件以video标签为例: 为兼容不同格式的视频 ...

  • HTML5语法,标签, 属性

    @(HTML5)[HTML5 语法, HTML5标签, HTML5属性] [TOC] 一 、HTML5语法,标签,...

  • HTML5 表单属性

    HTML5 新的表单属性HTML5的 和 标签添加了几个新的属性新属性:1.autocomplete2...

  • HTML5之placeholder属性以及如何更改placeho

    熟悉HTML5的人应该都知道,placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入...

  • HTML5详解

    01-HTML5新增语义化标签 HTML5语义化标签的兼容 HTML5新增表单控件和表单属性 HTML5表单验证反...

  • HTML5常用的标签

    目录: HTML5新结构标签 HTML5新其他标签 HTML5新input类型 HTML5新属性 HTML5高级应...

  • script的crossorigin属性

    通过script标签加载跨域资源是一种常用的跨域请求解决方式。那在HTML5中新增的crossorigin属性,有...

网友评论

    本文标题:HTML5中新标签和属性

    本文链接:https://www.haomeiwen.com/subject/yhivmqtx.html