3、验证 (http://validator.w3.org/)HTML5新增的语义化标签1、语义化标签：说明页面内容，便..._h5 标签javascript:后跟自定义方法">
devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML5新标签与javaScript新方法

作者：2023面试高手 | 2024-02-18 21:49:27

赞

踩

h5 标签javascript:后跟自定义方法

HTML5 （0106）

  1. 1、文档声明
  2. 	<!DOCTYPE html>
  3.  
  4. 2、字符编码设置
  5. 	<meta charset="UTF-8">
  6.  
  7. 3、验证	(http://validator.w3.org/)

HTML5新增的语义化标签

  1. 1、语义化标签：说明页面内容，便于搜索引擎寻找该内容；
  2.  
  3. 优点：根据内容的结构化，选择合适的标签便于开发者阅读和写出更优雅的代码，
  4. 同时让浏览器的搜索引擎更好的解析和收录。
  5.  
  6. 	<article></article>		定义文章
  7. 	<header></header>		头部
  8. 	<nav></nav>				导航
  9. 	<main></main>			主要区域
  10. 	<section></section>		文档中的段落，某一区块
  11. 	<aside></aside>			和section类似
  12. 	<footer></footer>		底部，页脚
  13.  
  14. 		tips:section和aside可以归属为main的子标签
  15.  
  16. 	<mark></mark>			标记（很少用）
  17.  
  18. 	<progress></progress>	进度条（很少用）
  19. 			该标签具有属性：max,min,value；
  20.  
  21. 	<figure>						表示单元（没见过，很少用）
  22. 		<figcaption></figcaption>	表示单元的标题
  23. 	</figure>
  24.  
  25. 2、ie8以下的浏览器不识别H5标签
  26.  
  27. 解决方法：引入一个js插件，放在head标签中；
  28. 	<!--[if It IE 8]-->
  29. 		<script src="html5shiv.js"></script>
  30. 	<!--[endif]-->
  31.  
  32. 	tips:该段代码这样设置只有在IE8内才会识别，其余版本会解析成注释；

表单输入类型

  1. 1、效果如下图所示
  2. <fieldset>
  3. 	<legend>标题</legend>
  4. 	//下面写表单元素input等	
  5. </fieldset>

输入图片说明

  1. 2、input系列新属性
  2.  
  3. <input type="email">	邮箱输入框，会对输入的内容进行自动验证；
  4. 	type="url"		网址输入框，需要加http或https协议名；
  5. 	type="search"	输入框，带有清空内容的按钮；
  6. 	type="tel"		电话号码，在移动端将会自动弹出数字键盘；
  7.  
  8. 	type="number"	很少用，表示数字，有加减按钮，有max，min，value，step属性；
  9. 	type="range"	很少用，表示滑块，有min，max，step；
  10.  
  11. 	type="time"		时间，显示时与分，有上下按钮，如下图；

输入图片说明

  1. 	type="datetime-local"	本地时间，可以调整年月日时分；
  2. 	type="date"		带有年月日，带有日历选择框，value：xxxx-xx-xx；
  3. 	type="color"	value="#666666"，必须是六位十六进制；
  4.  
  5. 	type="file"		上传文件，加入了multiple属性则可以多文件上传；
  6.  
  7. 3、datalist数据列表
  8.  
  9. 	<input type="text" list="course">
  10. 	<datalist id="course">
  11. 		<option value=""></option>
  12. 		<option value=""></option>
  13. 		<option value=""></option>
  14. 	</datalist>
  15.  
  16. tips:input中用list，datalist用id，二者名称相同即进行关联；
  17. 	option中存放了关联字，当在input中输入数据时，将会显示关联字；
  18.  
  19. 4、input属性
  20.  
  21. 	placeholder=""，作为初始显示值；
  22. 	autofocus		自动获取焦点，没有值；
  23. 	autocomplete="on"	自动完成，值为on或off，默认为on；
  24. 	pattern="[a-z]{3}"	指定了输入框的验证方式，其值为正则表达式；
  25.  
  26. 	required	拥有该属性的input内容不能为空，否则无法提交；
  27.  
  28. 5、新事件
  29.  
  30. 	oninput		用户输入内容时触发
  31. 	oninvalid	验证不通过时触发
  32.  
  33. 6、新方法
  34.  
  35. 	this.setCustomValidity	修改验证提示；

多媒体

  1. 	<audio controls="controls" autoplay="autoplay" loop="loop">
  2. 		<source src="xxx.mp3">
  3. 		<source src="xxx.ogg">
  4. 		<source src="xxx.wmv">
  5. 	</audio>
  6.  
  7. tips:在source中提供多种格式的资源，多种资源便于兼容不同浏览器。
  8. <video></video>标签与之类似。

DOM新增属性

  1. 获取元素：
  2. 	document.querySelector();
  3. 	document.querySelectorAll();
  4.  
  5. 类名操作：
  6. 	node.classList.add();
  7. 	node.classList.remove();
  8. 	node.classList.contains();
  9. 	node.classList.toggle()

自定义属性

  1. data-*；
  2. data-*-*;
  3.  
  4. node.dataset.*;
  5. 	eg:document.querySelector("a").dataset.cont="world";
  6.  
  7. tips:data-*的属性形式在一些插件使用较多，例如bootstrap；

Review_正则表达式

  1. 1、元字符
  2.  
  3. 	.		除以\n之外的所有单个字符；
  4. 	\		转义字符；
  5.  
  6. 	|		左右表达式出现一次即true，为了避免歧义需要加()；
  7. 		eg：1a||b32，写成1(a||b)32;
  8.  
  9. 	()		优先级，分组
  10.  
  11. 2、量词
  12.  
  13. 	？		某个字符出现0-1次；
  14. 	+		一次或多次；
  15. 	*		0-n次；
  16. 	{n}		n为正整数，出现n次；
  17. 	{n, }	
  18. 	{n,m}	
  19.  
  20. 3、范围
  21.  
  22. 	[0-9]	
  23. 	[a-z]
  24. 	[A-Z]	(支持连写)
  25.  
  26. 	\d		数字，digital;
  27. 	\D		非数字;
  28. 	\s		空白字符，space;
  29. 	\S		非空白字符;
  30. 	\w		单词，word;
  31. 	\W		非单词；
  32.  
  33. 	^		开头;
  34. 	$		结尾;
  35.  
  36. 	汉字编码	[\u4e00-\u9fa5];

HTML5_JS新方法 （0112）

网络状态监测

  1. window.online		用户连接时触发该事件；
  2. window.offline		用户断开连接时触发该事件；

文件读取

  1. FileReader对象
  2. 	<body>
  3. 			//页面结构很简单，一个img用于显示图片，一个file用于上传图片，一个button用来点击；
  4. 	    <input type="file">
  5. 	    <button>显示图片</button>
  6. 	    <img src="" alt="">
  7.  
  8. 	    <script>
  9.  
  10. 			//获取元素
  11. 	        var file=document.querySelector('input');
  12. 	        var button=document.querySelector('button');
  13. 	        var img=document.querySelector('img');
  14.  
  15. 	        //点击按钮后触发事件
  16. 	        button.onclick=function(){
  17. 	            var reader=new FileReader();			//创建一个fileReader对象；
  18. 	            
  19. 	            reader.readAsDataURL(file.files[0]);	//获取元素中上传的文件，
  20. 										//file.files是一个数组，包含了上传的文件的全部信息；
  21.  
  22. 	            reader.onload=function(){			//文件读取完成之后触发事件；
  23. 	                 console.log(reader.result);	
  24. 	                 img.src=reader.result;			//读取的内容保存在了reader.result属性里，赋值给img.src；
  25. 	            }
  26. 	        }
  27. 	    </script>
  28. 	</body>
  29.  
  30. 参考资料
  31. https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc

视频API

  1. 方法：	load() 加载；
  2. 		play() 播放；
  3. 		pause() 暂停；
  4.  
  5. 属性：	currentTime 视频播放的当前进度；
  6. 		duration:视频的总时间；
  7.  
  8. 事件：
  9.     oncanplay: 		事件在用户可以开始播放视频/音频（audio/video）时触发；
  10.     ontimeupdate:	通过该事件来报告当前的播放进度，视频播放时不断的触发；
  11.     onended:		播放完时触发；
  12.  
  13. 全屏：	video.webkitRequestFullScreen();

拖拽事件

  1. 分为两种，
  2. 第一种是拖拽元素，在元素中添加属性draggable="true"，即可成为拖拽元素；
  3. 第二种是目标元素；
  4.  
  5. 1、对于拖拽元素
  6. 	ondrag 		应用于拖拽元素，整个拖拽过程都会调用；
  7. 	ondragstart	应用于拖拽元素，当拖拽开始时调用；
  8. 	ondragleave	应用于拖拽元素，当鼠标离开拖拽元素时调用；
  9. 	ondragend	应用于拖拽元素，当拖拽结束时调用；
  10.  
  11. 2、对于目标元素
  12. 	ondragenter	应用于目标元素，当拖拽元素进入时调用；
  13. 	ondragover	应用于目标元素，当停留在目标元素上时调用；
  14. 	ondrop		应用于目标元素，当在目标元素上松开鼠标时调用；
  15. 	ondragleave	应用于目标元素，当鼠标离开目标元素时调用；

Web存储

  1. 大致分为三种：cookie、sessionStorage、localStorage;
  2. 	1、cookie存储；
  3. 		缺点：存储量较小，仅4K，存储数据时进行了加密，解析复杂；
  4.  
  5. 	2、sessionStorage，会话存储，打开一个URL——→关闭页面	——→即为一个会话；
  6. 		生命周期：从打开浏览器开始到关闭浏览器结束；
  7. 		主要存放一些小容量的临时数据，同一窗口下数据共享；
  8. 		容量：5M；
  9.  
  10. 	3、localStorage，本地存储；
  11. 		永久存在，除非手动删除；
  12. 		可以多个窗口共享数据；
  13. 		容量：20M；
  14.  
  15. 方法：
  16. 	setItem(key, value) 设置存储内容
  17. 	getItem(key) 读取存储内容
  18. 	removeItem(key) 删除键值为key的存储内容
  19. 	clear() 清空所有存储内容
  20. 	key(n) 以索引值来获取存储内容
  21.  
  22. 		eg:	window.sessionStorage.setItem('name','张飞');
  23. 			window.sessionStorage.clear();

缓存清单CACHE

  1. 离线存储，HTML5中我们可以轻松的构建一个离线（无网络状态）应用，
  2. 只需要创建一个cache manifest文件。
  3.  
  4. manifest格式：新建文件，名称为demo.appcache，以下为格式；
  1. 	CACHE MANIFEST
  2. 	CACHE: 
  3. 	img1.jpg
  4. 		#指定我们需要缓存的静态资源，如.css、image、js等
  5.  
  6. 	NETWORK: 
  7. 	*
  8. 		#指定需要在线访问的资源，可使用通配符
  9.  
  10. 	FALLBACK: 
  11. 	one.css		two.css
  12. 		#当前页面无法访问时退回的页面(回退;后退)，
  13. 		#在这里，找不到one.css将会使用two.css取代；
  1. 优势：
  2. 	1、可配置需要缓存的资源；
  3. 	2、网络无连接时应用仍然可用；
  4. 	3、本地读取缓存资源，提升访问速度，增强用户体验；
  5. 	4、减少请求，缓解服务器负担；
  6.  
  7. tips:chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存

地理定位

  1. window.navigator.geolocation
  2.  
  3. navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息；
  4. 							获取成功时调用的函数，失败时的函数，用options可调整位置信息数据收集方式；
  5.  
  6. navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息；
  7.  
  8. position.coords.latitude纬度；
  9. position.coords.longitude经度；
  10.  
  11. speedNaN	速度；
  12. accuracy	精度，98；
  13.  
  14. 关于视频音频的属性和方法
  15. 	http://blog.poetries.top/2016/12/30/video-audio/

转载于:https://my.oschina.net/zhongjunhui/blog/857921

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/110770
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号