html5常用的标签&对JavaScript的拓展
来源:互联网 发布:聪明坏处 知乎 编辑:程序博客网 时间:2024/06/06 20:02
html5常用的标签
音频的多浏览器兼容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><audio controls> <source src="source/chengdu.mp3" > <source src="./source/chengdu.wav"> <source src="./source/chengdu.ogg"> 浏览器不支持html5音频播放</audio></body></html>
视频的多浏览器兼容
<video controls autoplay loop="3"> <source src="./source/movie.mp4"> <source src="./source/movie.ogg"> <source src="./source/movie.webm"> 浏览器不支持html5视频播放</video>
表单
input的新型type
html5新增了很多input的type类型,详细请参考W3C,新型的type不同浏览器有兼容性问题,小心使用。手机的网站尽量使用label标签,手机对html5的兼容性都不错。
<form action=""> <fieldset> <legend>输入类型</legend> <label for="email"> email:<input type="email" id="email"></input> </label> <br/> <label for="num"> number:<input type="number" id="num" min="4" max="50" step="4"></input> </label> <br/> <label for="rag"> number:<input type="range" id="rag" value="40"></input> </label> <br/> <label for="time"> date:<input type="date" id="time" value="40"></input> </label> <br/> <label for="sub"> <input type="submit" value="提交"></input> </label> <br/> </fieldset></form>
html5的新增两个form组件
keygen标签
<label for=""> 加密类型:<keygen name="jiami"></label>x- 效果
加密类型:
注意不同的浏览器有兼容性问题,safari浏览器对html5支持最好。keygen标签就是给服务器发送一个公钥,以后每次你的消息发送到服务器都是 信息+秘钥进行加密,服务器因为已经有你的公钥,你发加密信息,服务器用公钥进行解密。
度量器meter标签
<label for=""> 度量器:<meter min="0" max="100" low="60" high="80" value="50"></meter> 度量器:<meter min="0" max="100" low="60" high="80" value="70"></meter> 度量器:<meter min="0" max="100" low="60" high="80" value="90"></meter></label>
- 效果
标签属性
placeholder ="请填写用户名"
input便签上,提示用户的信息autofocus
input便签上,自动聚焦multiple
上传文件时可以多选文件上传autocomplete="on"
自动完成,记录你之前输入过的信息,可以设置在form属性上form="要加入form表单的id"
给form表单加入多一个标签novalidate
关闭标签验证,是form上的属性require
input便签上,要求此标签内容必须填pattern=""
input便签上,正则表达式formmethod
input便签上的属性,指定用什么方法提交formaction
input便签上的属性,提交到哪里list
和html5上的datalist一起用,list的值指向datalist的id
html5对dom的拓展
获取元素
document.getElementsByClassName()
获取类属性的元素document.querySelector()
通过css选择器来获取第一个元素document.querySelectorAll()
通过css选择多个元素
类名操作
node.classList.add()
给元素添加一个类node.classList.remove()
给元素删除一个类node.classList.contains()
检查元素是否有一个类node.classList.toggle()
给元素若没有添加一个类,若有删除
自定义属性
自定义属性必须是
data-
开头的
node.dataset
获取此节点的所有自定义属性
注意细节
var demo=document.querySelector("p a");var Att =demo.dataset;Att.testDemo="测试";//会自动转换成下划线命名Att.test_Demo="测试";//会自动转换成驼峰
CSDN的markdown不支持嵌套html写,原文地址:http://biyongyao.com/archives/137
阅读全文
0 0
- html5常用的标签&对JavaScript的拓展
- HTML5的常用标签
- html5的常用标签(一)
- html5中常用的标签
- html5中常用的meta标签
- HTML5中常用的标签居中方式
- HTML5中常用的新标签
- 7.几个常用的特殊标签(html5)
- [HTML5]对HTML5至关重要的10个Javascript资源
- JavaScript实现对P标签的操作
- jQuery对select标签的常用方法
- HTML5 - html5标签的变化
- HTML5 - html5标签的变化
- HTML5新增的9种常用的页面标签
- HTML5中对script标签的规定与解释
- 对HTML5中一些不常见的标签整理
- HTML5/CSS3 移动平台对 META 标签的定义
- 怎么处理HTML5的新标签对IE浏览器兼容问题?
- 单片机时钟程序(2)control.c
- github入门到上传本地项目
- JDBC入门总结
- 计算机网络&各种协议
- windows下安装xgboost教程(最简易)
- html5常用的标签&对JavaScript的拓展
- Thinkphp文件上传
- 浅析Linux 内核空间和用户空间
- Rust: 在子线程启动子线程
- PHP开发环境
- gb2312中的英文字母占几个字节?
- PATA-Exercise No.2
- 【AOJ 859】地毯填补问题(分治)
- django自定义模板过滤器时间戳实例(python)