1,HTML5 新语义化标签
- nav -- 表示导航- header -- 表示页眉 -- 头部- section -- 表示区块 -- 类似于div- main -- 文档主要内容- article -- 文章- aside -- 主体内容之外- footer -- 表示页脚 -- 底部
2,HTML5 新type属性
- 邮 ?箱 ???: `email`- 电 ?话 ???: `tel` --- 网 ?址 ???: `url`- 数 ?量 ???: `number`- shop名称 ?: `search` --- 范 ?围 ???: `range`- 颜 ?色 ???: `color`- 时 ?间 ???: `time`- 日 ?期 ???: `data`- date时间 ?: `datatime-local`- 月 ?份 ???: `month`- 星 ?期 ???: `week`
3,HTML5 其他重要属性
- placeholder -- 占位符- contenteditable="true" -- 盒子可编辑- autofocus ?自动获取焦点- autocomplete 能够记录用户的输入,并且给予提示，on:打开， off关闭 ???* 必须成功提交了，提交了才有记录 ???* 当前添加autocomplete的元素有name属性- required 必须输入，如果没有输入的话，阻止当前数据的提交- pattern 正则表达式验证 ???* 属性值是正则- multiple: 选择多个值 ???* 如果想要在某个input标签中选择多个值,可以使用该属性- input -- text ??list="id号"datalist id="id号" - option - option - label for="id号" input -- text id="id号"
4,HTML5 新增事件 (非重要)
- oninput：监听当前指定元素内容的改变，只要内容改变（添加内容，删除内容）就会触发这个事件- onkeyup：键盘弹起的时候触发，每一个键的弹起都会触发一次- oninvalid : 当验证不通过的时候触发 ???????- setCustomValidity ：设置默认的提示信息 ?????????????+ 默认的提示不友好，自定义提示信息,更准确的提示给用户
5,HTML5 新增表单元素
- progress ???* `<progress max="100" value="60"></progress>`- meter ???* `<meter max="100" min="0" high="80" low="40" value="30"></meter>` ???????* high 规定较高的值 ???????* low ?规定较低的值 ???????* max ?最大值 ???????* min ?最小值 ???????* value 当前度量值audiosrc //mp3, ogg, wavcontrols{控制面板}, autoplay{自动播放}, loop{循环播放}videosrc //mp4, flv, movcontrols{控制面板}, autoplay{自动播放}, loop{循环播放}poster{封面照片}, width, height不支持avi
6,HTML5 新增DOM选择和操作样式
querySelector获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素querySelectorAll获取满足条件的所有元素--数组参数要求：如果是类选择器，必须添加. 如果是id选择器， 必须添加# ,否则当成标签处理+ IE8+ 都支持，IE8只支持 CSS2 选择器，工作中大量使用 +classList:当前元素的所有元素类名列表-数组add:为元素添加指定名称的样式.一次只能添加一个样式remove:为元素移除指定名称的样式(不是移除class属性)，一次也只能移除一个toggle：切换元素的样式：如果元素之前没有指定名称的样式则添加。如果有则移除contains:判断元素是否包含指定名称的样式，返回true/falsedata- : 自定义属性dataset[""]:访问元素的属性, 驼峰命名法 DOM原生操作类名 obj.className = "cur list"可以设置多个, 缺点是会将之前的都覆盖掉jQuery操作类名 ?(obj).removeClass("cur") ?(obj).hasClass("cur")操作简单, 缺点是必须要引包才能使用H5新属性操作类名 obj.classList.add("list") obj.classList.remove("cur") obj.classList.toggle("list") obj.classList.contains("cur") obj.classList.item(2)功能强大, 缺点是需要写中间方法, 并且一次只能增删一个DOM操作元素属性 obj.removeAttribute("class"); obj.setAttribute("") obj.getAttribute("")操作方便, 缺点是只映射到标签上jQuery操作元素属性 ?(obj).attr("class")方法简单, 缺点是需要引包
HTML5 ?JSDOM
原文地址：https://www.cnblogs.com/gaoguowen/p/9889987.html