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 当前度量值
audio src //mp3, ogg, wav controls{控制面板}, autoplay{自动播放}, loop{循环播放} video src //mp4, flv, mov controls{控制面板}, autoplay{自动播放}, loop{循环播放} poster{封面照片}, width, height 不支持avi

6,HTML5 新增DOM选择和操作样式

  • querySelector
    
    获取单个元素,如果获取的元素不止一个,那么只会返回满足条件的第一个元素
    
    querySelectorAll
    
    获取满足条件的所有元素--数组
    
    参数要求:如果是类选择器,必须添加'.' 如果是id选择器, 必须添加'#' ,否则当成标签处理
    
    + IE8+ 都支持,IE8只支持 CSS2 选择器,工作中大量使用 +
    
    classList:当前元素的所有元素类名列表-数组
    
    add:为元素添加指定名称的样式.一次只能添加一个样式
    
    remove:为元素移除指定名称的样式(不是移除class属性),一次也只能移除一个
    
    toggle:切换元素的样式:如果元素之前没有指定名称的样式则添加。如果有则移除
    
    contains:判断元素是否包含指定名称的样式,返回true/false
    
    data- : 自定义属性
    
    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的更多相关文章

  1. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  2. 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  3. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  4. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  5. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  6. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

  9. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

随机推荐

  1. echo命令的简单用法和实例

    在CentOS 6.8版本下,通过实例的形式,展现选项和参数的灵活运用,可以简明的了解echo的用法. 一.语法:echo [SHORT-OPTION]… [STRING]… :echo [选项]…[ ...

  2. Java面试知识点总结(1)

    1.Java中的原始数据类型都有哪些,它们的大小及对应的封装类是什么? 原始数据类型 大小(byte) 对应封装类型 boolean 1或4 Boolean byte 1 Byte short 2 S ...

  3. jquery效果基础运用

    jQuery 版本 2 以上不支持 IE6,7,8 浏览器.如果需要支持 IE6/7/8,那么请选择1.9你还可以通过条件注释在使用 IE6/7/8 时只包含进1.9.<!--[if lt IE ...

  4. MAF框架的使用限制

    虽然MAF实现了插件式开发,动态热插拨,AppDomain隔离等诸多优点,但是正因为它复杂的功能机制也带来了很多其它方面的使用限制,下面列出官方给出的MAF框架的使用限制. 1) 在应用主程序显示的插 ...

  5. Spring如何引用properties文件里的…

    [zt]Spring如何引用properties文件里的配置 来自 http://blog.csdn.net/luobo525/archive/2006/11/06/1370258.aspx 1.Pr ...

  6. 8. php回调后门

    中国菜刀下载,基于原版中国菜刀优化版20160309. 下载地址: http://pan.baidu.com/s/1jHoJxHW China chopper http://pan.baidu.com ...

  7. backgroundWorker取消后,重新开始就报错:此 BackgroundWorker 当前正忙,无法同时运行多个任务。

    使用BackgroundWorker控件,有2个按钮buttonBegin和buttonCancel.其他都正常,只是在用buttonBegin开始运行,然后点击buttonCancel取消后,到这里 ...

  8. JQ 获取ul\ol 下面li的个数

    使用 jQuery 获取 ul 下面 li 的个数,那么我们需要遍历我们的ul.如果你的ul有class .id 或两者都没,您可以使用 ul 标签来遍历. //遍历ul 获取li个数 $(" ...

  9. codevs 2314 数学作业

    2314 数学作业 2011年省队选拔赛湖南  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master     题目描述 Description 小 C 数学成绩优异 ...

  10. Mac PyCharm2018破解

    1.下载破解补丁 https://link.jianshu.com/?t=http%3A%2F%2Fidea.lanyus.com%2Fjar%2FJetbrainsCrack-2.7-release ...