這次帶給大家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;
登入後複製
二、新的元素與屬性
（一）新的標籤中新增屬性：
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区域更新时；登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
用React完成一個圖片輪播元件
在HTML中如何用標籤編寫個人收藏夾
#
以上是HTML5的集合的詳細內容。更多資訊請關注PHP中文網其他相關文章！
