HTML5这玩意儿，给我们设计师和程序员带来新的挑战，当然也有新的乐趣。今天，我就来聊聊用HTML5时要注意啥，再给你们分享几个实际例子，让你们用起HTML5来更顺手。
一、HTML5的新增元素
HTML5给我们带来好多新增功能使网页看起来更有趣。例如，`<video>`和`
用于图形绘制，通过脚本（常用JS）来完成；具体请参考JavaScript;
矢量图，支持内联；
用于书写数学字符；
显示视频；（支持MP4,WebM,Ogg）;内容里边需要有sorce标签给定的源文件；具体请参考JavaScript;
显示视频；（支持MP3,wav,Ogg）;内容里边需要有sorce标签给定的源文件；具体请参考JavaScript;
定义media元素 (
HTML5添加了一些新标签，比如
<header></header>`
<footer></footer>`等等，它们能使网页结构更清晰，利于搜索引擎优化（SEO）。不过用时要小心别用太多，免得网页打开慢！
二、新的元素和属性
HTML5加了好多新东西！比如新的元素，还有给他们添了好几个实用的属性。<input>`标签里你都可以看到新的`type=”email”`、`type=”url”`等等，用起来方便多。不过要小心，这里面还是有些兼容性的小问题。就是说，旧版的浏览器可能没办法完全认出这些新属性，所以咱们在编程的时候，得特别注意下兼容性，保证不管什么浏览器，咱们的表单都能用得溜溜的。
HTML5给有些元素加了好多新功能，比如可以编辑或者拖动的那种。不过用这个的时候，咱们得想好怎么用，别乱搞，免得搞砸网页效果。
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 值会覆盖元素中的action属性；
formenctype 值会覆盖元素中的enctype属性；
formmethod 值会覆盖元素中的method属性；
formnovalidate 值会覆盖元素中的novalidate属性；
formtarget 值会覆盖元素中的target属性；
height 设置image类型标签高度；
width 设置image类型标签宽度；
multiple 不需要值，如果给定此属性，则在输入元素中可选择多个值；
pattern 值为正则表达式，用来验证输入值；
placeholder 值为用来显示在输入域中来提示用户；
requried 不需要值，如给定此属性，则输入不能为空；
三、新的表单元素
HTML5给表单加了好多花招儿，像这几个新标签`<input>`、`<textarea>`、`<datalist>`，用起来既强大又灵活。不过，用这些新玩意儿可别忘了注意兼容性的事儿。老版浏览器可能用不了，所以写代码时要考虑到这个，保证你的表单在各种浏览器上都能用！
HTML5给表单元素加了新功能，像`placeholder`、`required`这样的属性就是很好的例子，用起来方便多！不过，咱得会用这东西，别乱用，不然就影响到用户感受了。
四、新的语义元素
与一起使用，来设定预定义值，每个值用来设定；
提交表单时会生成私钥和公钥两个键，私钥存于客户端，公钥发送给服务器；
元素用于不同类型的输出，比如计算或脚本输出.
/的autocomplete属性，如果值为on则会保留最后一次输入的值作为下次输入的默认值，如果为off则不会记录保留；
的novalidate属性，不需要值，如果给定了此属性则在提交表单时不应该验证 form 或 input 域。
HTML5新增了不少有趣的语义化标签，比如
和
等等，用这些标签能使网页更清晰，对搜索引擎优化（SEO）也有好处！不过，在使用时要注意布局，别用太多，否则会拖慢网页加载速度哟~
五、新的全局属性
HTML5给一些元素加了像‘contenteditable’和‘draggable’这样的全局属性，就是为了增强元素互动性。不过，咱在用这些属性的时候，可得看好时机，别乱用，免得影响到网页的用户体验。
六、新的存储方式
HTML5新添了存储功能，像是`localStorage`和`sessionStorage`。用了这些东西，网页数据存储就能更自如自在，也更省事儿。不过，用的时候还得看清楚它们的存储限制和安全隐患。比如说，`localStorage`的存储空间就那么大，而且数据还是明着放的，很容易被人动手脚。所以，咱们用的时候得把数据给加密保护好，保证数据的安全无虞。
定义导航链接的部分; 定义文档中的节; 标签定义独立的内容; 定义页面主区域内容之外的内容; 元素的标题,应该被置于 "figure" 元素的第一个或最后一个子元素的位置; 标签规定独立的流内容（图像、图表、照片、代码等等）,元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。 描述了文档的底部区域;
七、全局事件属性
HTML5还推出了一些可以给元素加特效的全局事件属性，比如那个”点击”和”鼠标悬停”啥的，这些东西加点儿，页面就能变得更有互动感。不过，在用的时候咱们千万别瞎用，免得弄得网站乱七八糟，让人摸不着头脑！
八、实战案例
这里啊我就来给你们展示几个实际例子，让你亲眼看看HTML5是怎么玩儿的。比如我们能用“创建一个简陋的视频播放器，用“搞出一个音频播放器，用“弄个画板，用“做个自动完成输入框，用“做个密钥生成器，用“做个小计算器，用`localStorage`和`sessionStorage`存点东西，用`contenteditable`整一个富文本编辑器，用`draggable`搞个拖拽功能，再用`onclick`、`onmouseover`这些事件属性实现互动效果。
九、注意事项
contenteditable 元素是否可编辑，值有true,false; contextmenu 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单,值为要打开
在使用HTML5时，我们得注意以下几点：
1. 注意浏览器的兼容性问题，做好兼容性处理；
2. 注意元素和属性的合理布局，避免过度使用；
记得要考虑存储限制和安全问题，最好给数据加密并确认安全。
localStorage 本地存储，永久性的； sessionStrorage 针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除；
4. 注意事件属性的适用场景，避免滥用；
5. 注意表单元素的输入规范和便捷性，做好用户体验。
十、总结
今天我就来教你们如何用好HTML5，让你的网页变得更炫酷！
不知道你们有没有在用HTML5的时候遇到过啥麻烦事儿？能不能跟我们分享下怎么办到的呀？赶紧来评论区聊聊，别忘了给点赞，顺便再分享给朋友们看看~
评论0