• html学习之——html5新特性


     一、html5增加的属性

    1、表单属性

    (1)placeholder

      html5在input和textare标签中添加了placeholder属性,提示用户该输入什么,在数据框获得焦点后文字消失,提高了用户体验。

    (2)autocomplete

       html5在input和textare标签中添加了autocomplete属性,在用户完成一次输入后,下一次输入时有显示之前输入过的值。

    (3)autofocus

      autofocus属性一个网页中只能设置一个,设置多个时第一个生效。在进入页面时有autocomplete属性的控件将自动获得焦点。

    (4)form

      form属性可以是表单控件写在在表单外面,通过form属性明确该控件属于哪个表单。一个控件可以属于多个表单,通过form的id来确定。

    (5)required

      当提交表单时,设置有required属性的控件如果值为空,则检验不通过,不能提交。

    (6)max min step

     在日期,数字,时间控件里,设置max可以限制输入的最大值,min可以设置输入的最小是,step表示步长,比如min=1,step=2,max=7,则值应该是1,3,5,7,9

    (7)list

    在input标签中,可以使用list属性添加输入时的下拉菜单,有点类似于select,但list比select方便,他不仅可以选择下拉的选项,还可以自己输入。list属性的取值为相应的datalist的id,在datalist里增加autocomplete属性,可以让输入框的下拉菜单不仅显示自己设置的列表项,还可以显示之前输入过得值。使用户体验更好。

    (8)表单重置属性 formaction,formmethod,formnovalidate,formtarget, formenctype

      以前不使用js时,一个表单只能有一个提交的action和method,现在可以通过formaction实现不同的提交按钮提交到不同的action,通过ormmethod用不同的方法提交。

      通过formtarget提交到不同的窗口,通过formnovalidate来确定提交时是进行验证还是不验证。

    (8)image的width,height

      在input的type为image时,可以通过width和height设置image的宽高。

    (9) pattern

      pattern属性的值为正则表达式,可以通过正则表达式验证输入框中的内容是否匹配,并给出出相应的提示

    (10)multiple

      multiple属性可以规定输入域可以同时选择输入多个元素

    (11)fileset的disabled

      fileset的disabled可以把他的子元素全部设置为disabled,但是不会影响 legend中的元素

    (12)selectionDirection

      在input或者textare中如果正向选中文字,则selectionDirection的值为forword,如果是反向选中,则为backword

    (13)label的control

      可以通过label的control属性获取到包含在label里面的控件。

    此外html5在表单方面还扩大了input控件中type属性的值,增加了url,time,datapicker,email,phone等值并会自动校验。

    2、链接属性

    (1)media

      a标签中添加了media属性,media属性只能在有href属性存在时才可以使用,规定该链接是为哪种设备优化。

    (2)hreflang

      同样hreflang属性也是在href存在的时候才有,规定与链接相关联的文档使用的语言

    (3)rel

      在a标签中,rel属性表示被链接文档和当前文档之间的关系。

    (4)sizes

      link标签增加了sizes属性,规定被链接的资源的大小

    (5)target

      base标签中增加了target属性,规定打开链接的窗口位置。

    3、其他属性

    (1)meta的chartset属性

    (2)ol的reserved属性

      如果是正序排列,则reserved的值为true,倒序为false

    (3)style的scoped属性

      style的scoped属性使得style样式只能由于规定的某一部分html代码

    (4)script的async

      script的async使得脚本文件异步加载执行

    (5)menu的type,label属性

    二、html5增加的标签

    1、canvas新元素

    <canvas></canvas>:标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API

    2、多媒体元素

    (1)<video>:定义音频文件

    (2)<audio>:定义视频文件

    (3)<souce>:定义多媒体资源

    (4)<embed>:定义插入的内容,如插件

    (5)<track>:为多媒体文件定义外部文件轨道

    3、表单元素

    (1)datalist:定义选项列表

    (2)Keygen:表单的密钥生成器字段

    (3)output:定义不同类型的输出,如脚本的输出

    4、语义和结构元素

    参见一下链接:

    http://www.cnblogs.com/qiaoyun/p/7506647.html

    三、html5废除的标签

    • <acronym>
    • <applet>
    • <basefont>
    • <big>
    • <center>
    • <dir>
    • <font>
    • <frame>
    • <frameset>
    • <noframes>
    • <strike>
    • <tt>

    四、html5增加的其他功能特性

    此外,HTML5还增加了本地存储localstorage,在浏览器关闭后数据不会删除,sessionstorage在浏览器关闭后自动删除。地理位置服务 Geolocaltion,websocket,webwork

  • 相关阅读:
    产品开发管理之流程和体系(总篇)
    .NET Core工程编译事件$(TargetDir)变量为空引发的思考
    EF Core新增迁移时无法加载程序集“System.ValueTuple”的错误
    Magicodes.Admin.Core开源框架总体介绍
    在WIN SERVER 2016上安装DOCKER(带过坑)
    使用NPOI生成Excel级联列表
    使用批处理根据项目工程文件生成Nuget包并发布(支持.NET Core)
    C#反射
    Oracle创建库
    深入了解MyBatis参数
  • 原文地址:https://www.cnblogs.com/qiaoyun/p/7510204.html
Copyright © 2020-2023  润新知