• h5c3 part1


    一.h5c3:
    HTML5广义的概念: 代表着浏览器技术发展的阶段,是html5 css3和js(API)一套前端技术的组合;
    h5设计的目的是为了在移动设备上支持多媒体;;新的语法特征被引进以支持这一点.h5还引进了新的功能,可以真正改变用户与文档的交互方式;


    优点: 1. 提升用户体验
    2. 丰富页面的多媒体元素 audio video canvas
    3. 取代flash在移动设备的地位
    4. 增加很多新标签, 有助于开发人员定义重要的内容

    兼容性: 1.不支持h5新标签的浏览器会将这些标签解析成行内元素, display: block ; 即可以解决;
    2.ie9 以下版本浏览器 不能识别这些标签, 但通过 document.createElement 创建的元素可以识别, 实际开发中通常引入js库来解决这个问题 <script src="../js/html5shiv.min.js"></script>


    二.表单:
    1.新增标签

    1.datalist 和input 结合使用, 拥有输入功能的下拉列表
    2.Keygen
    3.meter 度量器
    4.output 用于输出内容
    5.progress

    多媒体标签: audio video

    <form>
    <fieldset>
    特殊格式处理
    <legend>fieldset元素的标题</legend>
    </fieldset>
    </form>
    2 新增属性
    1. autofocus 自动聚焦
    2. autocomplete form 或者input 都可以有
    3. multiple 文件或者邮箱
    4. required 必填
    5. pattern 正则表达式
    6. form 哪项属于表单
    7. placeholder
    3. 新增输入类型

    tel : 主要在移动端弹出数字键盘
    email:
    tel:
    search:
    number:
    range:
    color:
    date:
    datetime:
    localtime
    week
    month
    day

    4. 新增事件
    oninput: 内容改变时触发
    oninvalid: 输入无效是触发
    setCustomValidity: 输入无效时的输出内容

    三. 页面结构新增标签:

    <header></header>
    <nav></nav>
    <main>
    <article></article>
    <aside></aside>
    </main>
    <footer></footer>

  • 相关阅读:
    剑指offer(4)
    剑指offer(3)
    剑指offer(2)
    剑指offer(1)
    (二)Wireshark的实用表格
    RedHat Enterprise Linux 6.4使用yum安装出现This system is not registered to Red Hat Subscription Management
    Android:简单的图片浏览器
    rpm和yum
    良心推荐!GitHub14400颗星!非常不错的机器学习指南
    Python中免验证跳转到内容页的实例代码
  • 原文地址:https://www.cnblogs.com/noraZhang/p/10044612.html
Copyright © 2020-2023  润新知