本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来HTML5的集合,使用HTML5的注意事项有哪些,下面就是实战案例,一起来看一下。一、HTML5增加元素:
1 2 3 4 5 6 7 8 9 10 | <canvas> </canvas> 用于图形绘制,通过脚本(常用JS)来完成;具体请参考JavaScript;
<svg> </svg> 矢量图,支持内联;
<math> </math> 用于书写数学字符;
<video> </video> 显示视频;(支持MP4,WebM,Ogg);内容里边需要有sorce标签给定的源文件;具体请参考JavaScript;
<audio> </audio> 显示视频;(支持MP3,wav,Ogg);内容里边需要有sorce标签给定的源文件;具体请参考JavaScript;
<source> 定义media元素 (<video> 和 <audio>)的媒体资源
<bdi> </bdi> 设置一段文本的方向,可与父元素方向不同;
<mark> </mark> 带有记号的文本;
<time> </time> 时间;属性有datetime
<embed> 一个容器,可用来嵌入部应用或插件,属性有width,height,src,type;
|
二、新的元素和属性
(一)新的<input>标签中新增属性:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | type属性新增值:
color 颜色选择框;
date 日期选择器(部分浏览器不支持);
datetime-local 日期和时间选择器;
time 时间选择器;
week 周选择器;
email 邮件地址验证;
url url验证;
month 月份选择;
number 数值输入,可用以下属性进行更多限定, disabled,max,min,maxlengh,pattern(正则表达式),readonly,requried,size,step,value;
range 数值选择,显示为一个滑块,需用更多属性进行限定:max,min,step,value;
autofocus 不需要值,如果给定此属性,则在加载页面时输入域自动获得焦点;
form 设置输入域属于某一个或多个表单,多个表单之间用空格分隔;
formaction 值会覆盖<form>元素中的action属性;
formenctype 值会覆盖<form>元素中的enctype属性;
formmethod 值会覆盖<form>元素中的method属性;
formnovalidate 值会覆盖<form>元素中的novalidate属性;
formtarget 值会覆盖<form>元素中的target属性;
height 设置image类型<input>标签高度;
width 设置image类型<imput>标签宽度;
multiple 不需要值,如果给定此属性,则在输入元素中可选择多个值;
pattern 值为正则表达式,用来验证输入值;
placeholder 值为用来显示在输入域中来提示用户;
requried 不需要值,如给定此属性,则输入不能为空;
|
(二)新的表单元素:
1 2 3 4 5 | <datalist> </datalist> 与<input>一起使用,来设定预定义值,每个值用<option value= "value" >来设定;
<keygen> 提交表单时会生成私钥和公钥两个键,私钥存于客户端,公钥发送给服务器;
<output> 元素用于不同类型的输出,比如计算或脚本输出.
<form>/<input>的autocomplete属性,如果值为on则会保留最后一次输入的值作为下次输入的默认值,如果为off则不会记录保留;
<form>的novalidate属性,不需要值,如果给定了此属性则在提交表单时不应该验证 form 或 input 域。
|
(三)新的语义元素;
语义元素用来明确一个Web页面的不同部分;
1 2 3 4 5 6 7 8 | <header> </header>
<nav> </nav> 定义导航链接的部分;
<section> </section> 定义文档中的节;
<article> </article> 标签定义独立的内容;
<aside> </aside> 定义页面主区域内容之外的内容;
<figcaption> </figcaption> <figure> 元素的标题,应该被置于 "figure" 元素的第一个或最后一个子元素的位置;
<figure> </figure> 标签规定独立的流内容(图像、图表、照片、代码等等),元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
<footer> </footer> 描述了文档的底部区域;
|
(四)新的全局属性:
1 2 3 4 | contenteditable 元素是否可编辑,值有true,false;
contextmenu 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单,值为要打开<menu>元素的id;
data-* 存储页面的自定义数据;
draggable 元素是否可拖动,值有true,false,auto;5 hidden
|
(五)新的存储方式:
1 2 | localStorage 本地存储,永久性的;
sessionStrorage 针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除;
|
但这两种方式的都是通过脚本来实现的;
三、全局事件属性(html4后支持,主要用于浏览器触发事件后运行的脚本,值都是script):
1.窗口事件属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | onafterprint 打印文档后运行脚本;
onbeforeprint 打印文档前;
onbeforeonload 文档加载前;
onload 文档加载时;
onoffline 文档离线时;
ononline 文档上线时;
onhaschange 文档改变时;
onredo 文档再次执行时;
onundo 文档执行撤销时;
onerror 出现错误时;
onmessage 触发消息时;
onunload 用户离开文档时;
onblur 窗口失去焦点时;
onfocus 窗口获得焦点时;
onpagehide 窗口隐藏时;
onpageshow 窗口可见时;
onpopstate 窗口历史记录改变时;
onresize 窗口大小改变时;
onstorage web storage区域更新时;
|
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
用React完成一个图片轮播组件
在HTML中如何用<a>标签编写个人收藏夹
以上就是HTML5的集合的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
如何选择web前端模板引擎(推荐)
HTML5-表单输入验证详解(图文)
HTML5 解决苹果手机不能自动播放音乐问题的相关技巧
HTML5 video怎么停止播放视频
详细介绍如何全面掌控session?且看websocket跨站劫持的图文代码详解
详解HTML5应用中accordion三种效果的探索
HTML5中在元素或者选取的文本被拖动时触发的事件ondrag
HTML5规定是否对元素进行拼写和语法检查的属性spellcheck
HTML5中postmessage api的基本使用
HTML5无插件多媒体media-音频audio与视频video的详细介绍
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5的集合