H5学习笔记(一)

  1. H5中的一些新增标签
    • canvas 标签，用于JS绘图
    • audio 标签，用于定义音频内容
    • video 标签，用于定义视频内容
    • embed 标签，定义嵌入的内容，比如插件
    • article 标签，定义页面的侧边栏内容
    • aside 标签，定义页面内容之外的内容
    • footer 标签，定义section或document的页脚
    • header 标签，定义文档的头部区域
    • meter 标签，定义度量衡，仅用于已知最大和最小的度量
    • nav 标签，定义运行中的进度（进程）
    • section 标签，定义文档中的节(section 、区段)
    • datalist标签，为表单新增标签，常与input配合使用，类似于拥有输入功能的下拉列表
    • output标签，用于展示内容，只能展示，不能用来编辑
      1
      2
      3
      4
      5
      6
      7
      8
      <body>
          <header>文档头部</header>
          <div>
              <article>页面侧边栏内容</article>
              <aside>页面内容之外的内容</aside>
          </div>
          <footer>定义页脚</footer>
      </body>
  2. 新增表单的输入类型
    • email: 输入email格式
    • tel: 手机号码
    • url:只能输入url格式
    • number：只能输入数字
    • search: 搜索框
    • range : 范围，可以进行拖动，进行value取值
    • color : 拾色器，通过value进行取值
    • time ： 时间
    • data : 日期
    • datatime : 时间日期
    • month : 月份
    • week : 星期
  3. 表单新增事件
    • oninput 用户输入内容时触发，可用于移动端的输入字数统计
    • oninvaild 验证不通过时触发
  4. 表单新增属性
    • placeholder 占位符
    • autofocus 获取焦点
    • multiple 文件上传多选或多个邮箱地址
    • form 指定表单向属于哪个form,处理复杂表单时会需要
    • autocomplete 自动完成，用于表单元素，也可用于表单自身
    • novalidate 关闭验证，可用于form标签
    • required 验证条件，必填项
    • pattern 正则表达式，验证表单
  5. 案例：详见我的CSDN上的 H5简易登录界面那一篇博客