H5与CSS3总结

H5

H5简介

• Web行为标准：W3C DOM、ECMAScript

• HTML5 —— 属于最新一项Web标准

• HTML设计理念

  • 避免不必要的复杂性

  • 支持已有内容

    • 属性值不包括空字符串、<、>、=、单双引号时，可省略引号
    • 可以省略结束标签的元素
      • li、p、option、tr、td、th、thead、tbody、tfoot
    • 可以省略全部标签的元素 —— html、head、body
    • 即使标签被省略了，该元素还是以隐式的方式存在的

  • 求真务实

  • 优雅降级

    • 在浏览器看到自己不理解的type值时，会将type的值解释为text

• Web应用

  • 多媒体支持
  • 图形、动画支持，易于实现游戏

• H5优点

  • 提升用户体验，加强视觉感受
  • 多设备，跨平台支持，及时更新，代码更清晰
  • 开放的网络标准

• H5发展现状

  • 业界、浏览器、平台支持
  • 各浏览器尚未全部支持，速度相比原生应用较慢，资源获取短板

H5标签及特性

• 标签分类

  • 优化文档结构，结构性元素
  • 提供新的功能，功能性元素

• 结构性元素 —— 语义化标签

  • —— 头部，导航、引导信息
  • —— 导航内容 页面导航的连接组
  • —— 正文 可以独立被外部引用的内容，通常有自己的标题和脚注
  • —— 文章中的段 区域
  • —— 边栏内容 附属信息
  • —— 页脚

• 功能性元素

  • 播放视频、播放音频

    • 属性

      属性	功能
      src	URL地址
      controls	添加播放控制条
      loop	是否循环播放
      autoplay	是否页面加载后自动播放
      width	视频宽度
      height	视频高度

    • 兼容性问题

      • audio/video 内写 source 元素 ，设置多个播放格式

    • 控制函数

      • play（）：加载
      • pause（）：暂停
      • load（）：重新加载

  • —— 公历事件（24时制）或日期

  • —— 进度条

    • 属性
      • max —— 总任务
      • **value **—— 已完成

表单

• 新增input输入类型

  • number，email，url，tel，range（含一定范围数值滑动条），date，color，search，time
  • date（各种日期与时间输入文本框 ），month（年和月），week（年和周），datetime-local（本地日期和时间）

• 新增表单元素

  • datalist：绑定需将输入域的 list 属性引用 datalist 的 id

    <input type="search" name="gongfu"  autocomplete="on" list="names" />
    <datalist id="names">
    	<option>亢龙有悔</option>
    	<option>飞龙在天</option>
    </datalist>
    

  • output：显示计算结果或脚本输出

    • name（唯一对象名）、form、for（输出的一个或多个元素

  • Keygen：用户验证，用于表单的秘钥对生成器字段

• 新增表单属性

  • form：输入域所属的一个或多个表单，属性值为所属表单的 id
  • formaction ：表单提交到不同页面
  • formmethod：指定提交方式（get，post）
  • required：输入域是否为空
  • placeholder：输入框提示信息
  • list：与datalist的id绑定
  • autofocus：是否自动聚焦
  • multiple：是否允许多个文件上传
  • max，min，step
  • pattern：正则表达式验证