这些小活动你都参加了吗?快来围观一下吧!>>
电子产品世界 » 论坛首页 » 综合技术 » 基础知识 » 带你分分钟搞定Html5基本语法及详解

共1条 1/1 1 跳转至

带你分分钟搞定Html5基本语法及详解

助工
2020-09-14 14:26:11     打赏

  在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可以显示进度条



共1条 1/1 1 跳转至

回复

匿名不能发帖!请先 [ 登陆 注册 ]