在HTML5中，有不少新的富含语义的元素，可以向浏览器和开发人员传达元素的用途。在做Html5开发时开发工具有很多：dw,sublime,Editplus...这里推荐用sublime因为界面比较整洁，提示比较清晰，是专属的文本开发工具。

　　下面是HTML5的一部分新的布局元素：

　　article

　　aside

　　figcaption

　　figure

　　footer

　　header

　　hgroup

　　mark

　　nav

　　section

　　time

　　header和footer的作用不言自明，article是创建一块文章区域，aside和section是创建一块区域，aside元素用来安置附带的内容，nav将创造一个导航条或者菜单条。用mark元素将重要文本高亮显示或标记出来，如果要在内容中插入一张图(图像、图表、照片和代码片段等)，可以使用figure(它与布局无关，可以去/留)元素，figcaption元素能为图加上标题;time可以专门用来存放时间。例：

　　Article#1

　　Thisisthefirstarticle.Thisishighlighted.

　　Article#2

　　Thisisthesecondarticle.Thesearticlescouldbeblogposts,etc.

　　智能表单设计：

　　Html5的优点体现在表单设计客户端校验上，能避免繁琐的js操作：

　　—比如自动校验输入的是否为email:

　　E-mail:

　　—输入数字范围限定：

　　point:

　　—选择一个范围内的数字：

　　——时间选择Inputtype—DataPickers，时间选择避免了大量的js脚本

　　-date:selectsdate，monthandyear

　　-month:selectsmonthandyear

　　-week:selectsweekandyear

　　-time:selectstime(hourandminute)

　　-datetime:selectstime，date,month,andyear(UTCtime)

　　-datetime—local:selectstime,date,monthandyear(localtime)

　　color:

　　这个效果没有展示出来，应该是浏览器不支持，注意选择浏览器上述几个效果都可以。

　　Form的新属性：

　　—Autofocus

　　页面加载后自动获得焦点。

　　—placeholder可指定文本框的显示形式

　　E-mail:

　　——required,当页面失去焦点时，提示此处为必填项

　　还有些新的属性：

　　显示图标界面也是Html5的一大亮点：如meter可以显示进度，progress可以显示进度条

　　最后想要工作不累就要不断的提升自己的技能，想要快速学习HTML5开发就到由专业老师授课的扣丁学堂学习吧。扣丁学堂还有名师录制的HTML5视频教程供学员观看学习，想要HTML5视频教程的小伙伴快咨询我们的专业老师索要吧。扣丁学堂H5技术交流群：751662650。

专栏文章内容及配图由作者撰写发布，仅供工程师学习之用，如有侵权或者其他违规问题，请联系本站处理。 联系我们