1 HTML5 新特性

1. 语义化标签，如 header、footer
2. 增强型表单，如 time、tel、email
3. 音频和视频，即 audio 和 video
4. canvas 绘图、SVG 绘图
5. 地理定位
6. 拖放 API
7. Web Storage，如 Local Storage 和 Session Storage
8. Web Socket

2 纯 HTML 验证表单

给表单绑定 onsubmit 事件，或使用表单对象的 onSubmit 方法。

提示

onsubmit 事件为 return false 时，会阻止提交。

<form onsubmit="return valid()" name="myForm">
  姓名：<input type="text" name="user"><br>
  爱好：<input type="checkbox" name="hobby" value="football">足球
  <input type="checkbox" name="hobby" value="basketball">篮球
  <input type="checkbox" name="hobby" value="volleyball">排球<br>
  <input type="submit" value="提交">
</form>

const form = document.myForm;
function valid() {
  if (form.user.value.length === 0 || form.user.value.length > 5) {
    alert("姓名不合法");
    return false;
  }
  if (!form.hobby[0].checked && !form.hobby[1].checked && !form.hobby[2].checked) {
    alert("至少选择一项爱好");
    return false;
  }
  return true;
}

3 纯 HTML 实现输入同步

给 input 元素绑定 oninput 方法。

<input type="text" id="input1" oninput="onInput('input1', 'input2')">
<input type="text" id="input2" oninput="onInput('input2', 'input1')">

function onInput(x, y) {
  const str = document.getElementById(x).value;
  document.getElementById(y).value = str;
}

4 纯 HTML 实现网页浏览量

使用 localStorage，给该对象存储一个变量用于统计网页浏览量，初始为 1，每次将该变量自增。

if (localStorage.pageCnt) {
  localStorage.pageCnt++;
} else {
  localStorage.pageCnt = 1;
}
document.write("页面浏览量为：" + localStorage.pageCnt);