h5学习笔记

什么是h5

万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言（HTML）
的第五次重大修改，作为新HTML语言，具有新的元素，属性和行为
它有更多样化和强大的网站和应用程序

h5的好处

1. 提高可用性和改进用户的友好体验;
2. 有几个新的标签，这将有助开发人员定义重要的内容；
3. 可以给站点带来更多的多媒体元素(视频和音频)；
4. 可以很好的替代FLASH；
5. 当涉及到网站的抓取和索引的时候，对于SEO很友好；
6. 将被大量应用于移动应用程序和游戏。

h5新特性

1.（语义特性 HTML5）
赋予网页更好的意义和结构。
2.（本地存储特性 ）
基于HTML 5开发的网页APP拥有更短的启动时间、更快的联网速度， 这些全得益于HTML 5中新提供的特性，以及本地存储功能。
3.（设备兼容特性）
HTML 5提供了前所未有的数据与应用接入开放接口。使外部应用可以 与浏览器内部的数据直接相连，比如移动设备中gps地理定位与浏览器内部 相连。
4.（连接特性websocket ）
更有效的连接工作效率，使得基于页面的实时聊天、更快速的网页游戏 体验、更优化的在线交流得到了实现。 HTML5拥有更有效的服务器推送技术。
5.（网页多媒体特性）
支持网页端的Audio、Video等多媒体功能
6.（三维、图形及特效特性）
基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于浏览器所呈
现的惊人视觉效果。
7.（性能与集成特性）
没有用户会永远等待你的Loading, HTML 5会通过XMLHttpRequest2等技术
帮助开发者的Web应用和网站在多样化的环境中更快速地工作。
8.（CSS3 特性）
在不牺牲性能和语义结构的前提下，CSS3提供了更多的风格和更强的效果。
此外，较之以前的Web排版，Web的开放字体格式(WOFF)也提供了更高的
灵活性和控制性。

H5新增语义化标签

<header>头部标签

<header></header>
页首  页面的顶部 或者 版块顶部

<nav>导航标签

<nav></nav> 表示导航 （包含链接的的一个列表）
	语法：
<nav><a href=“#”>链接</a><a href=“#”>链接</a>
</nav>
<nav>
	<p><a href=“#”>导航一</a></p>
	 <p><a href=“#”>导航二</a></p>
 </nav>

<article>内容标签

<article></ article >
用来在页面中表示一套结构完整且独立的内容部可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。

<section>块级（章节、段落）标签

<section> <section>
页面上的版块例如文章的章节

<aside>侧边栏标签

<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分

<footer>尾部标签

页脚  页面的底部 或者 版块底部

<time>用来表现时间或日期

<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>参数
<p> 我在 <time datetime="2008-02-14">情人节</time> 有个约会。 </p>

<hgroup>表示页面上的一个标题组合，一个标题和一个子标题，或者标语的组合

语法：
<hgroup>
	<h1>一级标题</h1>
	 <h2>二级标题</h2>
</hgroup>

< details>用于描述文档或文档某个部分的细节

该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容
Open 属性默认展开

< summary>details 元素的标题

语法
	<details open>
		<summary>这是标题</summary>
		<p>这是一段内容</p>
	</details>

<dialog>定义一段对话 open 属性为显示

语法：
<dialog open>
  <dt>老师</dt>
  <dd>2+2 等于？</dd>
  <dt>学生</dt>
  <dd>4</dd>
  <dt>老师</dt>
  <dd>答对了！</dd>
</dialog>

<progress>定义进度条

语法：
<progress max="100" value="76">
         <span>76%</span>
</progress>

<datalist>选项列表。与 input 元素配合使用，来定义 input 可能的值。

语法：
<input type="text" list="valList" />
    <datalist id="valList">
     	<option value="javascript">javascript</option>
       <option value="html">html</option>
      <option value="css">css</option>
    </datalist>

HTML5标签的新属性

contenteditable—属性 修改页面中的标签内容

<p contenteditable="true" style="width:300px;height:300px;border:solid 1px #f00f00;"></p>

hidden—属性 隐藏元素

拖拽—draggable=“true”

<div draggable="true">123</div>//设置元素可以拖动

div.ondragstart —拖拽开始

div.ondrag —过程中

div.ondragend —拖拽结束

box.ondragenter —进入目标元素（根据鼠标位置）

box.ondragover —在目标元素上移动（取消默认事件）

box.ondragleave —离开目标元素

box.ondrop —在目标元素上释放 （取消默认事件）

		 div.ondragstart=function(){ this.style.background='red'  }
		 div.ondrag=function(){ this.style.background='green'  }
		 div.ondragend=function(){ 	this.style.background='yellow' }
		 p.ondragenter=function(){ 	p.innerHTML='进入'  }
		 p.ondragover=function(e){ p.innerHTML='在里面移动'；	e.preventDefault()  }
		 p.ondragleave=function(){ p.innerHTML='移出' }
		 p.ondrop=function(e){ p.innerHTML='释放' }

input 新增表单

email : 电子邮箱文本框

当输入不是邮箱的时候，验证通不过
移动端的键盘会有变化下面一栏会有@出现

tel : 电话号码手机键盘会变成数字栏

url : 网页的URL，手机键盘最下面一栏就会出现.com

地址验证

number : 只能包含整数数字的输入框

search : 搜索引擎

Chrome和opera IE下输入文字后，会多出一个关闭的X文字后，会多出一个关闭的X

range : 特定范围内的数值选择器

value
跟其它input类型里的value属性一样。
min
范围的最小值。
max
范围的最大值。
step
步长，滑块组件滑动时value变动的最小单位

color : 颜色选择器（返回一个十六进制字符串）

datetime-local : 显示完整日期，不含时区

time : 显示时间，不含时区（小时和分钟）

date : 显示日期（年/月/日）

week : 显示周

month : 显示月

新的表单特性和函数

placeholder : 输入框提示信息

例子 : 微博的密码框提示

autocomplete : 是否保存用户输入值

默认为on，关闭提示选择off

autofocus : 指定表单获取输入焦点

list和datalist : 为输入框构造一个选择列表

list值为datalist标签的id

required : 此项必填，不能为空

Pattern : 正则验证 pattern="\d{1,5}“

video视频

<audio controls="controls">
	<source src="media/test.mp3" type="audio/mpeg">//兼容
	<source src="media/test.mp3" type="audio/ogg">
	</audio>

格式：.mp4、.ogv、webM

标签属性

controls : 显示或隐藏用户控制界面

autoplay : 媒体是否自动播放

在谷歌火狐里，此功能被禁用掉了，ie和opear正常(谷歌需要设置muted)

loop : 媒体是否循环播放

currentTime : 开始到播放现在所用的时间

duration : 媒体总时间(只读)

volume : 音量相对值取值范围为0-1

muted : 是否静音

autobuffer : 开始的时候是否缓冲加载，autoplay的时候，忽略此属性

媒体元素属性和方法

paused : 媒体是否暂停(只读)

ended : 媒体是否播放完毕(只读)

error : 媒体发生错误的时候，返回错误代码 (只读) error.code

currentSrc : 以字符串的形式返回媒体地址(只读)

方法

play() : 媒体播放

pause() : 媒体暂停

媒体元素事件

oncanplay—视频音频缓冲完毕可以播放时调用

onended—视频音频播放完毕结束时调用

onpaly—视频音频播放时调用

onpause—视频音频暂停时调用

ontimeupdata —播放位置发生改变时候

Video额外特性

poster : 视频播放前的预览图片

值是一个字符串路径地址

width、height : 设置视频的尺寸

与元素的offsetWidth和offsetHeight一致

videoWidth、 videoHeight : 视频的实际尺寸(只读)

audio音频

格式：.ogg .mp3 .wav

wav格式音质最好，但是文件体积较大。mp3压缩率较高，普及率高，音质相比wav要差。ogg与mp3在相同位速率(Bit Rate)编码的情况下，ogg体积更小，并且ogg是免费的不用交专利费

与video方法属性一样

音频页面打开时初始化加载

function toggleSound() {
        var music = document.querySelector('audio'); //获取ID  
        console.log(music);
        console.log(music.paused);
        if (music.paused) { //判读是否播放  
            music.paused = false;
            music.play(); //没有就播放 
        }

    }

    setTimeout("toggleSound()", 10);

点击页面再播放
document.addEventListener('click', function () {
        var music = document.querySelector('audio');
        if (music.paused) {
            console.log(111)
            music.play()
        }
    })

地图

百度地图api

navigator.geolocation—地理定位

getCurrentPosition—定位请求

var x=document.getElementById("demo");
function getLocation()
{
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
    {
        x.innerHTML="该浏览器不支持获取地理位置。";
    }
}
 
function showPosition(position)
{
    x.innerHTML="纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude;    
}

网络状态

window.navigator.onLine—判断网络状态

返回true/false

online()—用户网络连接时调用

offline（）—网络断开时调用

全屏

元素.requestFullScreen()—开启全屏

元素.cancelFullScreen()—关闭全屏

document.ifFullScreen—检测是否全屏

文件上传

input file—上传

multiple —上传多个

accept—过滤文件类型

<input type="file" multiple accept=".jpg,.png" />

new FileReader() —读取文件内容 ，使用filereader的方法

onload:文件读取成功时触发

readAsDataURL —file 将文件读取为 DataURL

dataTransfer—对象用于保存拖动并放下（drag and drop）过程中的数据。 它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型

e.dataTransfer.files —上传信息

//拖拽图片显示缩略图
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.div{
				width: 300px;
				height: 300px;
				background: orchid;
				
			}
		</style>
	</head>
	<body>
		<div class="div" draggable="true">请将图片放在此处</div>
		<ul></ul>
	</body>
	<script>
		var box=document.querySelector('.div')
		var ul=document.querySelector('ul')
//e.dataTransfer如何在拖动的资源对象事件和目标元素之间做数据传递e.dataTransfer 数据之间传递的对象
		box.addEventListener('dragover',my)
		box.addEventListener('dragenter',my)
		box.addEventListener('dragleave',my)
		box.addEventListener('drop',my)
		function my(e){			 
			e.preventDefault()
			if(e.type==='dragenter'){
				box.innerHTML='请释放鼠标'
			}else if(e.type==='dragover'){
				
			}else if(e.type==='dragleave'){
				box.innerHTML='请拖到此处'
			}else if(e.type==='drop'){			
			var aFiles=e.dataTransfer.files
			for(var i=0;i<aFiles.length;i++){
				var abc=aFiles[i];
				var fileRead=new FileReader();				
						fileRead.readAsDataURL(abc)
						fileRead.addEventListener('load',function(){
						var aLi=document.createElement('li');
						aLi.innerHTML=`<img src=${this.result} width=100 height=100>`
						ul.appendChild(aLi)
				
					})		
			}				 
			}
			
		}
	</script>
</html>

		let reader = new FileReader()
			reader.readAsDataURL(f.files[0])  //把目标文件转地址，文件来自于上传组件。
			reader.onload = function () {
			  myimg.src=reader.result
			}
let file = document.getElementById('file')
   // 监听文件上传
   file.addEventListener('change', (e) => {
    const files = e.target.files[0]
    // new 一个文本文件读取的对象
    let render = new FileReader()
    // 监听读取完成的处理函数
    render.onload = function(fileEvent) {
        console.log('e', fileEvent) // 来来看下它的样子
        console.log(fileEvent.target.result) // 这个就是读取的结果
    }
    // 把文件读取为base64格式
    render.readAsDataURL(files)
   })

//按钮上传文件信息
   let file = document.getElementById('file')
   // 监听文件上传
   file.addEventListener('change', (e) => {
    const files = e.target.files[0]
    // new 一个文本文件读取的对象
    let render = new FileReader()
    // 监听读取完成的处理函数
    render.onload = function(fileEvent) {
        console.log('e', fileEvent) // 来来看下它的样子
        console.log(fileEvent.target.result) // 这个就是读取的结果
    }
    // 把文件读取为base64格式
    render.readAsDataURL(files)
   })

本地存储

sessionStorage

localStorage

sessionStorage.setItem(key,value)—设置数据

sessionStorage.getItem(key) —获取数据

sessionStorage.removeItem(key) —移除数据

sessionStorage.clear()—清空

sessionStorage.setItem("data",JSON.stringify(arr))
//如果遇到对象就用JSON.stringify，parse 转换

cookie

是服务器给客户端的一些信息以文本的形式存储在客户端，每次发送请求都会带上用来记录状态

会话Cookie和持久Cookie

有两种不同类型的Cookie — 会话Cookie和持久Cookie。如果Cookie不包含到期日期，则它被视为会话Cookie。会话cookie存储在内存中，从不写入磁盘。当浏览器关闭时，Cookie从此点永久丢失。如果Cookie包含过期日期，则它被视为永久Cookie。在到期指定的日期，Cookie将从磁盘中删除。

sessionStorage和localStorage区别和cookie问题

sessionStorage	localStorage	cookie
仅在当前会话有效，关闭页面后清除	除非清除，会一直保留（存储在web Storage里面，web Storage分为本地存储和会话存储）	由服务器生成，可设置失效时间（默认浏览器关闭的消失）
5MB	20MB左右	（每个浏览器）4字节 ，chorme 150条，火狐50条 opera 30条
仅在浏览器中保存	仅在浏览器中保存	每次都在http请求头中保存过多有性能问题

Notification 通知

Notification.permission—用户权限

可以获取用户当前的通知权限状态，返回一个String，可以根据返回值判断用户是否授予了通知权限。

1. default:用户还未被询问是否授权，所以通知不会被显示。
2. granted:表示之前已经询问过用户，并且用户已经授予了显示通知的权限。
3. denied：用户已经明确的拒绝了显示通知的权限。

// Notification.permission === 'granted' 用户允许
// Notification.permission === 'denied' 用户拒绝
// Notification.permission === 'default' 还未被询问是否授权

if(Notification.permission === 'granted'){
    console.log('用户允许通知');
    instance_init(title, options);
}else if(Notification.permission === 'denied'){
    console.log('用户拒绝通知');
}else{
    console.log('用户还没选择，去向用户申请权限吧');
    Notification.requestPermission(function(status) {
    	if(status=='granted'){
    		console.log('用户允许通知');
    		instance_init(title, options);
    	}else if(status=='denied'){
    		console.log('用户拒绝通知');
    	}else{
    		console.log('用户还没选择');
    	}
    });
}

new Notification（）—创建Notification对象通知

第一个参数是通知标题，第二个参数是一个对象,取值如下
lang：设置通知的使用语言，默认为空
body：设置通知内容
tag：设置通知的id，用于区别于其他通知。
icon：设置通知图标，为图片的url地址。

Page Visibility 即页面可见性

pageVisibility包含了两个属性一个事件：

属性：document.hidden—获取当前页面的隐藏状态，返回一个布尔值

属性：document.visibilityState—获取当前页面的可见状态。

hidden:页面为非活动标签，或者最小化
visible：页面为正在活动状态。

事件：document.visibilitychange—页面状态发生改变时会触发

svg

SVG是一种基于XML语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）
其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失帧

xml中使用svg

html 中使用svg

1.使用img/iframe

2.作为背景图片

3.直接插入到页面svg

4.阿里图标库使用svg

基本图形

圆形

矩形

线段

g 标签分组

可以对g标签内所有的元素进行一个操作，不仅可以进行样式的设置和属性的继承，
我们还可以对g标签中添加一个id=”g1“，这样我操作了g1就相当于操作了
里面的所有元素

g标签位移

image 图片

text 文本