HTML5 新特性

为了解决移动端的多媒体问题。

语义化标签

语义化标签用起来与 div 相同。
不同处有：

• 方便其他设备解析（如移动设备、盲人阅读器等）
• 便于搜索引擎识别，有利于 SEO
• 语义明确，便于维护

智能表单

<input type='email'>
number
date
week
color
range
month
time
url

表单属性

• form
  • autocomplete 自动完成
  • novalidate 不验证

• input

  • form：绑定 input 至指定 id 的 form 中
  • autofocus：自动获取焦点
  • multiple：实现多选（多文件上传）
  • placeholder：提示信息
  • required：必填项

  • list：

    <input type='text' list='abc'>
        <datalist id='abc'>
    
            <option>1</option>
    
            <option>1</option>
    
            <option>1</option>
    
        </datalist>
    

js 修改 input validate 提示

<form action="" method="get">
  <input type="text" name="username" oninvalid="checkInput(this)" required>
  <input type="submit">
</form>

<script type="text/javascript">
  function checkInput(input) {
    if (input.value.length < 20) {
      input.setCustomValidity("输入内容不得少于20个字符");
    } else {
      input.setCustomValidity("");
    }
  }
</script>

多媒体标签

• video

• audio

  • control
  • loop
  • autoplay

  • 解决视频类型兼容问题

    <video>
       <source src='asd.mp4'>
    
       <source src='ogg'>
    
       <source src='asd.webM'>
    
    <video>
    

HTML5 API

元素、类名操作、自定义属性

document.querySelector("选择器")；
document.querySelectorAll("选择器")；
Dom.classList.add("");
Dom.classList.remove("");
Dom.classList.toggle("");

Dom.dataset.id === '1234567890'

本地存储

• localStorage
  大小：20mb
  生命周期：永久直到手动删除

  windows.localStorage.getItem();
  windows.localStorage.setItem();
  
  windows.localStorage.removeItem();
  
  windows.localStorage.clean();
  

• sessionStorage
  大小：5mb
  生命周期：当前页面关闭后消失

  windows.sessionStorage.getItem();
  windows.sessionStorage.setItem();
  
  windows.sessionStorage.removeItem();
  
  windows.sessionStorage.clean();