html5常用的标签&对JavaScript的拓展

时间:2021-10-06 03:37: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>
音频格式 Chrome Firefox IE9 Opera Safari
OGG 支持 支持 支持 支持 不支持
MP3 支持 不支持 支持 不支持 支持
WAV 不支持 支持 不支持 支持 不支持

视频的多浏览器兼容

<video controls autoplay loop="3">
<source src="./source/movie.mp4">
<source src="./source/movie.ogg">
<source src="./source/movie.webm">
浏览器不支持html5视频播放
</video>
浏览器 / 影音格式 Ogg Theora MP4(H.264) WebM
Microsoft Internet Explorer9 不支持 支持 不支持
Mozilla Firefox5+ 支持 不支持 支持
Google Chrome13+ 支持 支持 支持
Apple Safari5+ 不支持 支持 不支持
Opera11+ 支持 不支持 支持

表单

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>
  • 效果

标签属性

  1. placeholder ="请填写用户名" input便签上,提示用户的信息
  2. autofocus input便签上,自动聚焦
  3. multiple 上传文件时可以多选文件上传
  4. autocomplete="on" 自动完成,记录你之前输入过的信息,可以设置在form属性上
  5. form="要加入form表单的id"给form表单加入多一个标签
  6. novalidate 关闭标签验证,是form上的属性
  7. require input便签上,要求此标签内容必须填
  8. pattern="" input便签上,正则表达式
  9. formmethod input便签上的属性,指定用什么方法提交
  10. formaction input便签上的属性,提交到哪里
  11. list 和html5上的datalist一起用,list的值指向datalist的id

html5对dom的拓展

获取元素

  1. document.getElementsByClassName() 获取类属性的元素
  2. document.querySelector() 通过css选择器来获取第一个元素
  3. document.querySelectorAll()通过css选择多个元素

类名操作

  1. node.classList.add() 给元素添加一个类
  2. node.classList.remove() 给元素删除一个类
  3. node.classList.contains() 检查元素是否有一个类
  4. 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