• 语义化结构标签 多媒体标签 H5新增表单内容


    语义化结构标签:

    section  更偏向于一个区域类似div(块)

    article 更偏向于显示内容(块)

    aside 标签作为article呢绒的辅助板块(块)

    header 标签做为一个网页头部,或者板块头部(块)

    footer 标签做为一个网页底部或板块底部(块)

    nav 标签做为一个网页导航板块(块)

    figure 标签代表一段独立的内容(块)

    figcaption 标签做为figure的标题(块)

    main 做为网页中的立体内容区域 IE不支持(块)

    hgroup 标题的分组(块)

    mark 内部定义高亮显示的文本(类似span)(内联)

    Ttme 专门放时间的标签(内联)

    dialog 标记定义一个对话框,类似微信dialogopen属性值为open display的值为block

    多媒体标签:

    <video src=””></video>

    <audio src=””></audio>

    video 导入视频

    audio 导入音频

    videosrc属性:导入视频

    autopaly属性:自动播放(谷歌屏蔽)

    controls属性:显示插件空间(暂停|静音|快进|全屏)

    muted属性:静音属性

    loop属性:重复播放

    poster属性:当多媒体没有播放或者在下载的时候显示的图片poster=” ”

    <source></source>整合多媒体资源

    type属性:定义设备所支持的多媒体类型

    video里面的使用:

    type=”video/mp4”

    type=”video/ogg”

    type=”video/webm”

    <source Type=”video/mp4” src=” ”></source>

    audio里面的使用:

    type=”audio/mpeg”

    type=”audio/ogg”

    type=”audio/wav”

    H5新增表单内容:

    一:html5新增的inputtype类型

    二:H5新增表单属性

    一:

    <input type=”email”> 当表单提交的时候 限制必须是邮箱类型

    <input type=”rul”> 当表单提交的时候限制必须是网址http//

    <input type=”tange”> 产生一个滑动条

    <input type=”number”>限制必须是数字

    <input type=”search”>产生一个搜索意义上的输入框

    <input type=”color”>选取颜色

    二:

    required 检测是否为空 为空则不允许提交

    min 最小

    max 最大

    step 步幅 确定一个发定值

    list  必须结合datalist标签

    autocomplete 是否自动提示信息之间提交过得 默认值是on      off

    placeholder  提示信息文本框

    autofocus 自动聚焦 一个页面出现一个

    pattern 正则验证 正则表达式

    novalidate 取消验证

    multiple  选择多个上传 file

    <form>

    <input type=”text” list=””>

    <dutalist id=”名称”>

    <option value=””></option>

    </dutalist>

    </form>

    三:

    datalist 标签用来做表单输入框提示信息

    <option value=””></option>

    datalist要有id名称 list=id名称 提示信息在option里面 label做提示信息

    output 用来在表单里面做一些结果的输出或者是脚本的输出

    outputfor属性,绑定对应的表单元素的id名称们用空格隔开

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    【C++ 系列笔记】03 C++ 面向对象进阶
    【C++ 系列笔记】02 C++ 面向对象基础
    【C++ 系列笔记】01 C++ 与 C
    【JavaScript】简单取随机数 ~~(Math.random() * number)
    英语测试
    Linux指令入门
    RE-攻防世界 T3 insanity
    PWN-攻防世界 level0
    ISCC不会的理论题
    kali linux配置ssh
  • 原文地址:https://www.cnblogs.com/ht955/p/13798356.html
Copyright © 2020-2023  润新知