HTML5的集合

这次给大家带来HTML5的集合,使用HTML5的注意事项有哪些,下面就是实战案例,一起来看一下。

一、HTML5增加元素:

<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>标签中新增属性:

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           不需要值,如给定此属性,则输入不能为空;

(二)新的表单元素:

<datalist> </datalist>        与<input>一起使用,来设定预定义值,每个值用<option value=value>来设定;
<keygen>                      提交表单时会生成私钥和公钥两个键,私钥存于客户端,公钥发送给服务器;
<output>                      元素用于不同类型的输出,比如计算或脚本输出.
<form>/<input>的autocomplete属性,如果值为on则会保留最后一次输入的值作为下次输入的默认值,如果为off则不会记录保留;
<form>的novalidate属性,不需要值,如果给定了此属性则在提交表单时不应该验证 form 或 input 域。

(三)新的语义元素;

语义元素用来明确一个Web页面的不同部分;

<header> </header>
<nav> </nav>                定义导航链接的部分;
<section> </section>        定义文档中的节;
<article> </article>        标签定义独立的内容;
<aside> </aside>            定义页面主区域内容之外的内容;
<figcaption> </figcaption>  <figure> 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置;
<figure> </figure>          标签规定独立的流内容(图像、图表、照片、代码等等),元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
<footer> </footer>          描述了文档的底部区域;

(四)新的全局属性:

contenteditable                元素是否可编辑,值有true,false;
contextmenu                    指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单,值为要打开<menu>元素的id;
data-*                         存储页面的自定义数据;
draggable                      元素是否可拖动,值有true,false,auto;5 hidden

(五)新的存储方式:

localStorage                 本地存储,永久性的;
sessionStrorage           针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除;

但这两种方式的都是通过脚本来实现的;

三、全局事件属性(html4后支持,主要用于浏览器触发事件后运行的脚本,值都是script):

1.窗口事件属性

onafterprint         打印文档后运行脚本;
    onbeforeprint        打印文档前;
    onbeforeonload       文档加载前;
    onload               文档加载时;
    onoffline            文档离线时;
    ononline             文档上线时;
    onhaschange          文档改变时;
    onredo               文档再次执行时;
    onundo               文档执行撤销时;
    onerror              出现错误时;
    onmessage            触发消息时;
    onunload             用户离开文档时;
    onblur               窗口失去焦点时;
    onfocus              窗口获得焦点时;
    onpagehide           窗口隐藏时;
    onpageshow           窗口可见时;
    onpopstate           窗口历史记录改变时;
    onresize             窗口大小改变时;
    onstorage            web storage区域更新时;

相信看了本文案例你已经掌握了方法,更多精彩请关注编程之家网其它相关文章!

相关阅读:

用React完成一个图片轮播组件

在HTML中如何用<a>标签编写个人收藏夹

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法