HML5day01
作者:gqk
一:什么是HTML5:
1.H5并不是新的语言,而是html语言的第五次重大修改--版本
2.支持:所有的主流浏览器都支持h5.(chrome,firefox,safari。。。)。IE9及以上支持h5(有选择的支持,并不会全部支持),但是ie8及以下不支持h5.
3.改变了用户与文档的交互方式:多媒体:video audio canvas
4.增加了其它的新特性:语义特性,本地存储特性,网页多媒体,二维三维,特效(过渡,动画)
5.相对于h4:
1.进步:抛弃了一些不合理不常用的标记和属性
2.新增了一些标记和属性--表单
3.从代码角度而言,h5的网页结构代码更简洁。
6. 缺点:该标准并未能很好的被Pc端浏览器所支持。因新标签的引入,各浏览器之间将缺少一种统一的数据描述格式,造成用户体验不佳。
7. 未来趋势
a) 移动优先
b) 游戏开发者领衔“主演”
二:语义和结构
标签 |
描述 |
<article> |
定义页面的侧边栏内容 |
<aside> |
定义页面内容之外的内容。 |
<main> |
文档的主要内容 |
<footer> |
定义 section 或 document 的页脚。 |
<header> |
定义了文档的头部区域 |
<nav> |
定义运行中的进度(进程)。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <header>头部</header> <nav>导航</nav> <main> <article>左边</article> <aside>右边</aside> </main> <footer>底部</footer> </body> </html>
三:语意标签的兼容性:
谷歌,火狐,都支持html5的语意标签:
1. 在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些新标签,但是却可以识别通过document.createElement('tagName')创建的自定义标签,于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍,这样IE低版本也能正常解析HTML5新标签了。
2. 处理方式:在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题(测试在IE下面的兼容性:ieTester软件的使用)
<script src="../js/html5shiv.min.js"></script>
四:h5中表单新增的标签:
<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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <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"> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> <!--专业: <select name="" id=""> <option value="1">前端与移动开发</option> <option value="2">java</option> <option value="3">javascript</option> <option value="4">c++</option> </select>--> <!--不仅可以选择,还应该可以输入--> <!--建立输入框与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> </body> </html>
HTML5新增事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> 用户名:<input type="text" name="userName" id="userName"><br> 电话:<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"> <br> <input type="submit"> </form> <script> /*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位手机号"); } </script> </body> </html>
HTML 进度条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--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> </body> </html>
音频标签:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--embed:可以直接插入音频视频,本质是通过本机安装的音频视频播放软件来播放的。要求必须已经安装了这些软件 兼容性--> <!--flash: 1.先学习flash,增加使用成本 2.iphone,ipd,不支持flash--> <!--audio:音频--> <!-- src:播放文件的路径 controls:音频播放器的控制器面板 autoplay:自动播放 loop:循环播放--> <!--<audio src="../mp3/aa.mp3" controls></audio>--> <!--video:视频--> <!-- src:播放文件的路径 controls:音频播放器的控制器面板 autoplay:自动播放 loop:循环播放 poster:指定视频还没有完全下载完毕,或者用户没有点击播放前显示的封面。 默认显示当前视频文件的第一副图像 width:视频的宽度 height:视频的高度 --> <!--注意事项:视频始终会保持原始的宽高比。意味着如果你同时设置宽高,并不是真正的将视频的画面大小设置为指定的大小,而只是将视频的占据区域设置为指定大小,除非你设置的宽高刚好就是原始的宽高比例。所以建议:在设置视频宽高的时候,一般只会设置宽度或者高度,让视频文件自动缩放--> <!--<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls height="600"></video>--> <!--source:因为不同的浏览器所支持的视频格式不一样,为了保证用户能够看到视频,我们可以提供多个视频文件让浏览器自动选择--> <!--<video src="../mp3/flv.flv" controls></video>--> <video controls> <!--视频源,可以有多个源--> <source src="../mp3/flv.flv" type="video/flv"> <source src="../mp3/mp4.mp4" type="video/mp4"> </video> </body> </html>