'h5'

发表于

移动端开发

  1. 原生App开发
  2. web App开发(html5+css3+js)
  3. 混合(hybird)模式的开发

    HTML5的标签和表单

  4. 标签
    • 结构标签:
      div,p,ul,li,ol li,dl dt dd,h1~h6,a,span,img,em,i(表现形式的标签),strong,b,input,form,table,tr td
      1. 语义化:用合理的标签做合适的事情
      2. 作用:更有利于搜索引擎,让页面的结构更加清晰,更能适应未来的浏览器
      • section 块
      • header 网页的头部或者是一个块区的头部
      • nva 导航
      • main 主体
      • aside 边栏
      • article 完整的独立区域,强调的是独立性
      • footer 网页的页脚或者一个块区的尾部
      • figure 图例
      • figcaption 图例的说明信息
    • 功能标签
      • mark 高亮显示标签内的内容
      • progress 进度条
      • wbr 软换行
      • datalist 获取输入框焦点后显示提示信息
      • details 点击出现下详细的信息 -》summary

  5. 表单(Forms)

    • HTML表单种类(input)
      1. search:搜索输入框 获取焦点后,虚拟键盘右下角->回车为”搜索/search”
      2. tel:电话号码输入框(数字键盘)
      3. url:当输入的不为url地址的时候,提交时会进行提示
      4. email:当输入的不为email地址的时候,提交时会进行提示
      5. number:只可以输入数字
      6. range:数值选择器
      7. color:颜色选取器
      8. datatime:显示完整日期和事件UTC标准事件
      9. datatime-local：显示完整日期和时间
      10. month显示月
      11. week：显示周

    • HTML5表达的新特性

      1. placeholder 提示占位符
      2. autocomplete boolean(true/off)
      3. autofocus 光标自动聚焦
      4. required 必填,不能为空
      5. pattern 值为正则,输入的内容如果不符合正则的规则则不能提交,空可以通过验证
      6. formnovalidate和novalidate
        -HTML5表单的验证
      7. 当表单元素验证不通过的时候,会触发invalid事件
      8. 如何判断表单元素有没有验证通过

      9. 所有的表单元素上都有一个validity对象,validity对象上有一些属性

        • valid –>不通过,返回false
        • valueMissing –>输入值为空的时候,值为空

        • patternMismatch –> 正则验证不通过的时候返回true

          1
          2
          3
          4
          5
          obj.addEventListener('invalid',function(){
                  if(this.validity.patternMismatch){
                      this.setCustomValidity('只能输入n位数字');//自定义提示信息
                  }else{this.setCustomValidity('');}
              })

        • typeMismatch –>类型返回不通过的时候返回为true

        • customError –>不符合自定义验证的时候返回为true
        • setCustomValidity –>设置自定义验证规则
    • HTML4表单:text radio checkbox submit button password reset file

      全局属性

  6. data-yourAttribute
    • doc.dataset.nameAge
  7. ele.classList
    • add() 添加类名
    • remove() 移除类名
    • toggle() 有则移除,没有则填加
  8. querySelector
  9. Hidden :加上这个属性,元素则为不可见状态
  10. spellcheck=boolean 对你输入的内容自动纠错,无默认值
  11. tabindex :按下tab键可以根据设置的顺序进行跳转
  12. contenteditable=boolean 默认为false
  13. desginMode –>window.document.designMode=’on’;