HTML5的集合


本文摘自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的集合的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5能干什么的

HTML5编程实战之三-图片文本(txt)拖拽预览实现代码

HTML5 video怎么停止播放视频

HTML5中返回当前音频/视频的url的属性currentsrc

canvas实现动态粒子连线效果(附代码)

html中的video无法播放怎么办

HTML5与html4的区别是什么

怎样用h5的webgl实现3d虚拟机房的漫游动画

HTML5实践-使用css装饰图片画廊的代码分享(二)

HTML5讲解之datatransfer对象

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...