HTML5知识点汇总
HTML5
1、html5是什么
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。-------h5并不是一门新的语言，而是html语言的第五次修订。
2.html5支持的浏览器版本
基本上所有的主流浏览器都支持（Chrome，Firefox，Safari 等）
IE9及IE9以上支持html5，IE8及IE8以下不支持。
3.html5与html4的不同
html5相对于html4抛弃了一些不合理不常用的标记和属性，然后新增了一些标记和属性（表单），可以跨平台使用。
html5的代码更加简洁明了，提高了可用性并且使用户的体验更加友好。
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
主要新增元素
<!-- <div class="header"></div> --> <header>头部</header> <!-- <div class="nav"></div> --> <nav>导航</nav> <!-- <div class="mainContent"></div> --> <main> <!-- <div class="left"></div> --> <article>左边</article> <!-- <div class="right"></div> --> <aside>右边</aside> </main> <!-- <div class="footer"></div> --> <footer>底部</footer>
主要表单元素
<form action=""> 用户名：<input type="text" name="userName"> <br> 密码：<input type="password" name="userPwd"> <br> <!--email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交--> 邮箱：<input type="email"> <br> <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。 如何查看效果：qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看--> 电话：<input type="tel"> <br> <!--验证只能输入合法的网址：必须包含http://--> 网址：<input type="url"> <br> <!--number：只能输入数字(包含小数点)，不能输入其它的字符 max:最大值 min:最小值 value:默认值--> 数量：<input type="number" value="60" max="100" min="0"> <br> <!--search：可以提供更人性化的输入体验--> 请输入商品名称：<input type="search"> <br> <!--range:范围--> 范围：<input type="range" max="100" min="0" value="50"> <br> 颜色：<input type="color"> <br> <!--日期时间相关--> <!--time:时间：时分秒--> 时间：<input type="time"> <br> <!--date：日期：年月日--> 日期：<input type="date"> <br> <!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器--> 日期时间：<input type="datetime"><br> <!--datetime-local:日期和时间--> 日期时间：<input type="datetime-local"> <br> 月份：<input type="month"> <br> 星期：<input type="week"> <!--提交--> <input type="submit"> </form>
<form action="" id="myForm"> <!--placeholder：提示文本，提示占位--> <!--autofocus:自动获取焦点--> <!--autocomplete:自动完成：on:打开 off:关闭 1.必须成功提交过:提交过才会记录 2.当前添加autocomplete的元素必须有name属性--> 用户名：<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"> <br> <!--tel并不会实现验证，仅仅是在移动端能够弹出数字键盘--> <!--required:必须输入，如果没有输入则会阻止当前数据提交--> <!--pattern:正则表达式验证 *:代表任意个 ?:代表0个或1个 +：代表1个或多个--> 手机号：<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br> <!--multiple：可以选择多个文件--> 文件：<input type="file" name="photo" multiple> <br> <!--email:有默认验证 在email中，multiple允许输入多个邮箱地址，以逗号分隔--> 邮箱：<input type="email" name="email" multiple><br> <!--提交：--> <input type="submit"> <br> </form> <!--下面这个表单元素并没有包含在form中：默认情况下面表单元素的数据不会进行提交--> <!--form:指定表单id,那么在将来指定id号的表单进行数据提交的时候，也会将当前表单元素的数据一起提交--> 地址：<input type="text" name="address" form="myForm">
<form action=""> <!--不仅可以选择，还应该可以输入--> <!--建立输入框与datalist的关联 list="datalist的id号"--> 专业：<input type="text" list="subjects"> <br> <!--通过datalist创建选择列表--> <datalist id="subjects"> <!--创建选项值：value:具体的值 label:提示信息，辅助值--> <!--option可以是单标签也可以是双标签--> <option value="英语" label="不会"/> <option value="前端与移动开发" label="前景非常好"></option> <option value="java" label="使用人数多"></option> <option value="javascript" label="做特效"></option> <option value="c" label="不知道"></option> </datalist> 网址：<input type="url" list="urls"> <datalist id="urls"> <!--如果input输入框的type类型是url,那么value值必须添加http://--> <option value="http://www.baidu.com" label="百度"></option> <option value="http://www.sohu.com"></option> <option value="http://www.163.com"></option> </datalist> </form>
新增表单元素事件
/*1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件*/
document.getElementById("userName").oninput=function(){
console.log("oninput:"+this.value);
}
/*onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次*/
document.getElementById("userName").onkeyup=function(){
console.log("onkeyup:"+this.value);
}
/*oninvalid:当验证不通过时触发*/
document.getElementById("userPhone").oninvalid=function(){
/*设置默认的提示信息*/
this.setCustomValidity("请输入合法的11位手机号");
}
进度条
<!--max:最大值 value:当前进度值--> <progress max="100" value="100"></progress> <!--度量器：衡量当前进度值--> <!--high:规定的较高的值 low:规定的较低的值 max:最大值 min:最小值 value:当前度量值--> <meter max="100" min="0" high="80" low="40" value="30"></meter> <meter max="100" min="0" high="80" low="40" value="60"></meter> <meter max="100" min="0" high="80" low="40" value="100" name="level"></meter>
类样式操作
toggle:切换元素样式，如果元素含有指定样式则删除，没有就添加
contains：判断元素是否包含指定名称样式，返回true/false
---------------------------------------------------------------------------------------------------
