, 等等。” 这其中大部分有HTML5以前的标签也有HTML5的而这些刚好就是我们常用的标签,不常用的也许不必太过了解布局DIV也可以不是么?另外推荐大家在使用新语义标签的时候尽量每个独立的页面只使用一个标签作为包裹,语义化的作用就是seo(具体可百度),就是让搜索引擎知道网上到底有些什么,如header 、main、footer标签等等,当然你也可以写100个!
以下总结出HTML5常用的标签:
◆form属性:
autocomplete=on | off 自动完成
novalidate=true | false 是否关闭校验
◆ input属性:
autofocus : 自动获取焦点
multiple: 实现多选效果
placeholder : 占位符 (提示信息)
required:必填项
以前获取节点通过
document.getElementById("ID名称")这些还有className,name,tagname等等方式获取返回当前节点
H5新增的节点获取方法只有两个
document.querySelector("选择器"); 返回节点
document.querySelectorAll("选择器"); 返回数组
可以完美的代替以前或者节点的方式,如果无需兼容ie10以下的话
H5中对class的操作
classList.add("类名")
添加class类名 不返回任何值 如果你把它赋值给一个变量 得到结果是undefined
classList.remove("类名"); 删除
classList.contains("类名");
检查has className 是否存在返回布尔值 即true and false
classList.toggle("active");
查询active 是否存在,存在就删除,不存在就添加 ,省去了if判断!返回布尔值如果执行多条 即 true false true false.
自定义属性 (小案例分析体验自定义属性) data-自定义属性名
- 获取自定义属性 Dom.dataset 返回的是一个对象
Dom.dataset.属性名 或者 Dom.dataset[属性名]
注:属性名无需加data如自定义属性名 = data-canvas 那么获取的时候 直接dataset.canvas即可 设置同理 - 设置自定义属性
Dom.dataset.自定义属性名=值 或者 Dom.dataset[自定义属性名]=值;
文件读取 FileReader
FileReader 接口有3个用来读取文件方法返回结果在result中
readAsBinaryString ---将文件读取为二进制编码
readAsText ---将文件读取为文本
readAsDataURL ---将文件读取为DataURL
FileReader 提供的事件模型
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中
获取当前网络状态
window.navigator.onLine 返回一个布尔值 网没问题返回true否则返回false
网络状态事件 (大部分为不支持和废弃状态也许移动端用的比较多) - window.ononline
- window.onoffline
获取地理定位
获取一次当前位置
window.navigator.geolocation.getCurrentPosition(success,error);
success成功之后获取位置信息 否则抛出错误,比如获取位置信息被拒绝 - coords.latitude 维度
- coords.longitude 经度
实时获取当前位置
window.navigator.geolocation.watchPosition(success,error);
本地存储 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便,HTML5规范则提出解决方案,使用sessionStorage和localStorage存储数据。
localStorage: - 永久生效
- 多窗口共享
- 容量大约为20M
◆window.localStorage.setItem(key,value) 设置存储内容
◆window.localStorage.getItem(key) 获取内容
◆window.localStorage.removeItem(key) 删除内容
◆window.localStorage.clear() 清空内容
sessionStorage: - 生命周期为关闭当前浏览器窗口
- 可以在同一个窗口下访问
- 数据大小为5M左右
◆window.sessionStorage.setItem(key,value)
◆window.sessionStorage.getItem(key)
◆window.sessionStorage.removeItem(key)
◆window.sessionStorage.clear()
required如何修改默认提示选项
需要两个几个参数
placeholder = 默认提示用户输入
oninvalid事件 = 当用户输入不符合规则的时候提示的内容随意改setCustomValidity 就是用来修改 requered值的函数
oninput事件 = 约等于chuange事件 立即执行
console.log('Hello World')
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享文章:HTML5新特性总结-创新互联
链接URL:http://cdxtjz.cn/article/jhdgs.html