zhuhuiwen Front-end Dev Engineer

HTML5第一天

2016-10-30
HTML5

10/30/2016 8:16:31 AM

Html 5的概念

  1. 由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台。
  2. Html5的兼容性
    1. 兼容性： 新增的部分有兼容性问题（绝大部分）
    2. 并不是所有的html5都是IE9就兼容的，有一些属性是需要IE10，等更高级的浏览器才能兼容，而html5更多运用在移动端方面，因为移动端搭载的浏览器就比较高级
  3. html5骨架
    • 说明： html5骨架是没有兼容性问题
    • 如果在xt的文档DTD里面书写h5的内容，会带来兼容问题么？
    • 跟你用什么文档DTD没有关系 主要跟浏览器有关系

html5新增的标签

  1. 新增的6大结构标签
    1. header
    2. nav
    3. section
    4. aside
    5. article
    6. footer
  2. 作用
    1. 跟div一模一样 ，就是增加了语义性 更加利于seo优化
  3. 问：语义性有什么作用？为什么说它利于seo优化？有没有相关seo优化的概念？
    • 利于SEO优化，提升网站在搜索引擎中的排名
    • 在前端方面，更多的去运用语义化的标签，同时针对一些特殊的字符，我们运用权重高的标签去包裹 如 h1去包裹网站logo
  4. 由于html5新增的标签有兼容问题，所以我们需要做兼容！怎么实现？
    • 注意:
      • header在搞版本浏览器可以支持但是IE8及其以下不兼容
    • 方法一
      • 代码
      • 需要的条件，要转换的标签需要加 display: block; 注意： 直接进行的创建时如何加到页面中的?????? document.createElement(“header”);
    • 方法二
      • 需要的条件，要转换的标签需要加 display: block;属性+下面创建元素的代码
      • 进行创建的一个字符串，将所有的u兼容的标签进行通过循环转换成一个新创建的标签

      • 代码

           var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(",");
   		var i = e.length;
   		while(i--){
   			document.createElement(e[i]);
   		}
    • 方法三
      • 直接通过第三方插件来解决对h5浏览器不兼容的问题 ，不需要转换元素为block

      <script src="js/html5shiv.min.js"></script>

    • 方法四

      • 通过方法三种存在的问题是高版本浏览器不需要进行处理， - 就需要通过hack进行单独的处理,注意，这边直接进行copy以免出现问题 - 注意： 是要加注释的，IE低版本可以自动进行识别

           <!--[if lt IE 9]> 
      <script type="text/javascript" src="js/html5shiv.min.js"></script>
  <![endif]-->

h5新增的表单的标签

新增标签

  1. 日期 :<input type="date">
  2. 时间 : <input type="time">
  3. 月份: <input type="month">
  4. 星期: <input type="week">
  5. 数字 : <input type="number">
  6. 滚动条 : <input type="range">
  7. 搜索 : <input type="search">
  8. 颜色 : <input type="color">
  9. 滚动条 : <input type="range" min="0" max="100" id="range"><br><br>
  10. 颜色 : <input type="color" id="color">
  11. 测试输入一次判断一次：<input type="text" id="test">

    2个案例，滚动条的输出和换肤

    滚动条的输出

  12. 需求一：
    • 进行打印滚动条滑动的值
    • change事件：
      • change事件 当表单的值发生改变并且失去焦点的时候触发

  13. 代码

     var range = document.getElementById("range");
         range.addEventListener("change", function(){
             console.log(this.value);
 }); #### 根据色板进行换肤 ####
  14. 需求二：
    • 通过色板进行将网页换肤
    • change事件：
      • change事件 当表单的值发生改变并且失去焦点的时候触发

  15. 代码

     var color = document.getElementById("color");
        	 	// var getColor = color.value;
        	 	color.addEventListener("change",function(){
        	 		document.body.style.backgroundColor = this.value;
 }); #### 了解下input事件 ####
  16. 需求三
    • 进行输入普通的文本，进行输入一次判断一次
    • input事件: - input事件 当不断在表单里面输入的时候不断触发 输入一次 触发一下

  17. 代码

     测试输入一次判断一次：<input type="text" id="test">
 var test = document.getElementById("test");
        	 	 test.addEventListener("input",function(){
        	 	 	console.log(111);
 }); ## 智能表单验证 ##
  18. 说明
    • 这些属性都要配合form和submit一起使用才有效果
      • email会自动在提交的时候自动验证表单里面的值是否是一个合法的邮箱
      • url 自动在提交的时候自动验证表单里面的值是否是一个合法的网址，需要带上Http
    • 属性
      • required 非空验证的属性
      • pattern 自定义验证规则 接受正则表达式
  19. 电子邮件: <input type="email" required>
  20. 链接： <input type="url">
  21. 自定义验证规则<input type="text" pattern="[0-9]{11}
  22. 自定义验证手机号

    1. 手机号:

       <form action="1.php">
     <input type="text" id="tel">
 		<span id="error">111</span>
     <input type="submit" value="提交"> 
 	</form>

  23. js代码

      /*键盘每次弹起的时候就会执行*/
		var tel = document.getElementById("tel");

		var reg = /^[0-9]{11}$/;
		// invalid验证失败的时候触发的事件
		tel.addEventListener("invalid",function(){
			this.setCustomValidity("自定义你输入有误");
		});

6.2 自定义校验，输入内容不正确的时候，进行再span里面进行提示相关信息

  • 样式代码

      <form action="1.php">
	
      手机号:<input type="text" id="tel">
          <span id="error"></span>
          <input type="submit" value="提交"> 
  </form>

  • script脚本

      <script>
      var tel = document.getElementById("tel");
      var error = document.getElementById("error");
      var reg = /^[0-9]{11}$/;
        
      tel.addEventListener("input",function(){
          var val = this.value;
          if(val==""){
              error.innerHTML = "您输入的内容为空";
              error.style.display = "block";
          }else if(!reg.test(val)){
              error.innerHTML = "输入内容有误";
              error.style.display = "block";
          }else{
              error.innerHTML = "成功";
              error.style.display = "block";
          }
  		 });    </script>

表单的新属性

  1. placeholder 占位文本、 1. <input type="text" placeholder="请输入..."><br>
  2. autofocus 自动获得焦点
    1. <input type="text" autofocus>

    2. <input type="text" id="foc">

         /*
 	通过js进行获取焦点
 	 */
 	document.getElementById("foc").focus();
  3. autocomplete自动补全功能，默认就存在：
    • 前提: 1. 要有name属性
    • 必须提交一次
    • form表单在提交的时候里面的input一定要有name属性 - form 属性 可以通过跟form表单的id值产生绑定，那么这个input可以在任何位置都能被提交出去 不推荐使用
    • <input type="text" autocomplete name="uname">
  4. multiple 配合file控件可以实现多选提交 file默认是只能单选
    • <input type="file" multiple> 10/30/2016 2:29:48 PM

      智能感应

  5. <datalist>标签
    • 通过表单的list的属性配合datalist的ID值取得联系，就能实现对应的效果

  6. 代码

     <input type="text" list="myList">
 	<datalist id="myList">
 		<option value="ps">图形化处理界面</option>
 		<option value="php">后台语言</option>
 		<option value="app">苹果商店</option>
 	</datalist> ## 视频标签 ## ### 加载视频的两种方式 ###
  7. 比较大的视频，通过第三方来加载
    • 通过比如youku的视频下方的链接进行直接加载
  8. H5中的video 视频标签
    1. 直接进行加载，但是会存在兼容性问题
      1. <video src="01.mp4" autoplay controls loop poster="5731b427N2a98cb75.png"></video>
    2. video兼容版本的处理 - 直接去识别source里面的值，从上到下执行 - 如果不支持，如果不识别才会去执行文本提示内容

      • 代码

         video autoplay controls loop poster="5731b427N2a98cb75.png">
     <source src="01.mp4"/>
     <source src="02.ogg"/>
     <source src="03.webM">
     您的浏览器不支持mp4、.ogg、webM格式的视频进行的显示
 </video>
    3. video的属性解释
      • video 视频标签
      • autoplay 自动播放
      • controls 控制器
      • loop 自动循环
      • poster 没播放之前进行显示的图片

    4. 方法

      • video.pause() 视频暂停方法
      • video.play() 视屏播放方法
  9. 用自定义按钮来控制视频的播放和暂停–自己

    • 完整代码

        <body>
  	<video src="01.mp4" style="width:800px" id="video" autoplay></video>
  	<br>
  	<input type="button" value="暂停" id="btn">
	
  	<script>
  		var btn = document.getElementById("btn");
  		var video = document.getElementById("video");
  		var flag = true;
  		btn.addEventListener("click",function(){
  			//使用一个标志位来控制视频播放和暂停
  			if(flag){
  				video.pause();
  				btn.value = "播放";
  				flag = false;
  			}else{
  				video.play();
  				btn.value = "暂停";
  				flag = true;
  			}
  		});
  	</script>
  </body>

加载音频文件audio

  2. 参数列表
    • autoplay 如果出现该属性，则音频在就绪后马上播放。
    • controls 如果出现该属性，则向用户显示控件，比如播放按钮。
    • muted 规定视频输出应该被静音。
    • preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 “autoplay”，则忽略该属性。
    • 疑问点： - 怎么出现音乐没加载时出现的旋转的效果

  3. 自定义按钮，进行开始暂停播放器

    • 静态代码

        <audio src="audio/als.mp3" autoplay loop  id="audio"></audio>
  	<input type="button" id="btn" value="暂停">

    • script

         <script>
   		var btn = document.getElementById("btn");
   		var audio = document.getElementById("audio");
   		var flag = true;
   		btn.addEventListener("click",function(){
   			if(flag){
   				audio.pause();
   				btn.value = "开始";
   				flag = false;
   			}else{
   				audio.play();
   				btn.value = "暂停";
   				flag = true;
   			}
   		});
   	</script>

h5中新增的js选择器

  1. querySelector和querySelectorAll 支持IE9机器以上
  2. 两种
    1. document.querySelector 只能选中符合条件的 第一个元素 永远只会选择一个元素
    2. document.querySelectorAll 选择所有符合条件的元素 选择出来的是一个集合
      • 是一个集合的话，就需要循环出来进行设置样式之类的

h5新增操作类名的方法

  1. classList
    • classList是操作类名的对象，所有关于类名操作的方法都在这个对象下面
  2. 增加类名:
    • dom.classList.add(“类名”)
  3. 移除类名：
    • dom.classList.remove(“类名”)
  4. 切换类名：
    • dom.classList.toggle(“类名”)
  5. 判断包含类名：
    • dom.classList.contains(‘类名’);

  6. 代码案例

     //增加类名
 box.classList.add("bg");
 //移除类名
 box.classList.remove("bg");
 //切换类名
 btn.addEventListener("click",function(){
     box.classList.toggle("bg");

     //判断当前类中是否包含样式××,返回值是boolean
     console.log(box.classList.contains('bg'));
 });

自定义属性data-*=””

  1. 完整代码案1. 需要思考的自定义使用的场景有哪些以及如何去批量操作
  2. 兼容性
    • 支持IE11

  3. .dataset["path"]例

     <button data-path="images/szj.jpg" data-info="宋--" value="111">ssongzhongji</button>	

 /*支持IE11*/	
         var paTh = this.dataset["path"];			
         box.style.background = 'url('+paTh+')';
 /*
  	data方法
     兼容性处理，使用jquery
     兼容到,IE6，不错
  */
 <script src="js/jquery-1.12.4.js"></script>
  	var paTh = $(this).data("path");
  	$(".box").css("background","url("+paTh+")"); ## h5中的进度条progress标签 和 meter标签	 ##
  4. <progress> 标签标示任务的进度（进程）
  5. 兼容性
    1. Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 6 支持 标签。
  6. 注意：
    1. 请结合 标签与 JavaScript 一同使用，来显示任务的进度。
    2. 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。如需表示度量衡，请使用 标签代替。
  7. IE11也不兼容...

  8. 代码

     <progress value="30" min="0" max="100"></progress>
 <hr>
 <meter value="30" min="0" max="100"></meter> ### 自定义进度条，根据range的范围进行变化 ###

  9. 需求一：

    • 触发range的时候，根据range的值的变化进行改变slider 的宽度

  10. 完整代码

    整理完成 10/30/2016 8:12:59 PM

上一篇 jQuery第四天触发事件链式编程和隐式迭代多库共存插件插件

下一篇 js面向对象第一天

Comments

Content