html5总结

声明改变 为<!DOCTYPE html> 

【Html5的新标签】

用之前的标签完全可以代替的：header footer aside atrical nav address time mark section

新增的重要的标签：video(视频) audio（音频） caves（画图）

新标签的作用：语义化，使代码的可读性更强；便于提高搜索优化。

兼容性：兼容IE9+，IE8及其以下有些可以解决，但大部分的还是放弃。
1，保证功能在高级浏览器上的使用，放弃低级浏览器。
,2，低级浏览器只保证基本功能的实现，高级浏览器确保的是更好的用户体验。

一个有用的小东西，可以解决部分IE浏览器兼容性问题：HTML5shiv.js

 补充说明 ：

    • hground如果有多级标题，这个元素可以将H元素进行分组
    • mark这个元素可以显示特殊情况下的重要文字
    • small 这个元素表示边栏评论，如附属细则
    • cite这个元素可用于显示作品标题（图书、电影、诗歌等）
    • adress这个元素显示article或整个文档的合同信息，且位于footer这个元素之中
    • time显示人和机器可读的日期和时间，而且机器可读的时间戳是属性datetime的值第二个可选的是pubtime用于表示出版日期值

      重新定义的HTML标签

      • <b> 代表内联文本，通常是粗体，没有传递表示重要的意思
      • <i> 代表内联文本，通常是斜体，没有传递表示重要的意思
      • <dd> 可以同details与figure一同使用，定义包含文本，ialog也可用
      • <dt> 可以同details与figure一同使用，汇总细节，dialog也可用
      • <hr>表示主题结束，而不是水平线，虽然显示相同
      • <menu> 重新定义用户界面的菜单，配合commond或者menuitem使用
      • <small> 表示小字体，例如打印注释或者法律条款
      • <strong> 表示重要性而不是强调符号

input表单type属性值 

  • type="text" 单行文本输入框
  • type="password" 密码（maxlength=""）
  • type="radio" 单项选择（checked="checked"）
  • type="checkbox" 多项选择
  • type="button" 按钮
  • type="submit" 提交
  • type="file" 上传文件

  type="reset" 重置

input表单type属性值： 

    • type = "email" 限制用户输入必须为Email类型
    • type="url" 限制用户输入必须为URL类型
    • type="date" 限制用户输入必须为日期类型
    • type="datetime" 显示完整日期 含时区
    • type="datetime-local" 显示完整日期 不含时区
    • type="time" 限制用户输入必须为时间类型
    • type="month" 限制用户输入必须为月类型
    • type="week" 限制用户输入必须为周类型
    • type="number" 限制用户输入必须为数字类型
    • type="range" 生成一个滑动条
    • type="search" 具有搜索意义的表单results="n"属性
    • type="color" 生成一个颜色选择表单
    • type="tel" 显示电话号码

                       **HTML5 拥有多个可供选取日期和时间的新输入类型：

  •  date 选取日、月、年
  • month 选取月、年
  • week 选取周和年

  • time 选取时间（小时和分钟）

  • 以下两个没有作用

    • datetime 选取时间、日、月、年（UTC 时间）
    • datetime-local 选取时间、日、月、年（本地时间）
HTML5新增表单属性
    • required:required内容不能为空
    • placeholder: 表单提示信息
    • autofocus:自动聚焦
    • pattern: 正则表达式 输入的内容必须匹配到指定正则范围
    • autocomplete:是否保存用户输入值 
      • 默认为on，关闭提示选择off
    • formaction: 在submit里定义提交地址
    • datalist: 输入框选择列表配合list使用 list值为datalist的id值
    • output: 计算或脚本输出

                   validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都返回true,一种验证失败返回false

    • oText.addEventListener("invalid",fn1,false)
    • ev.preventDefault(): 阻止默认事件
    • valueMissing: 当输入值为空的时候，返回true
    • typeMismatch: 控件值与预期不吻合，返回true
    • patternMismatch: 输入值不满足pattern正则，返回true
    • cusomError 
      • setCustomValidity()
posted @ 2017-09-21 20:44  WFaceBoss  阅读(258)  评论(0)    收藏  举报