html html5笔记

媒体标签

提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息
• video
  定义视频。像电影片段或其他视频流
  video标签 视频元素支持三种视频格式: Ogg MP4 WebM source:因为不同的浏览器所支持的视频格式不一样，为了保证用户能够看到视频，我们可以提供多个视频文件让浏览器自动选择 - 属性 autoplay: 视频在就绪后马上播放 controls: 向用户显示控件，比如播放按钮 height: 设置视频播放器的高度 width: 设置视频播放器的宽度 muted: 规定视频的音频输出应该被静音 poster: 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像 preload: 视频在页面加载时进行加载，并预备播放,如果使用 "autoplay"，则忽略该属性 src: 要播放的视频的 URL - 常用方法 load(): 重新加载音频元素 play(): 开始播放音频 pause(): 暂停当前播放的音频
• audio
  定义音频。如音乐或其他音频流
  audio标签
  音频元素支持三种视频格式: Ogg MP3 Wav 属性
  autoplay: 音频在就绪后马上播放
  controls: 向用户显示控件，比如播放按钮
  loop: 每当音频结束时重新开始播放
  muted: 规定视频输出应该被静音
  preload: 音频在页面加载时进行加载，并预备播放。 如果使用 “autoplay”，则忽略该属性
  src: 要播放的音频的 URL
• 常用方法
  load(): 重新加载音频元素
  play(): 开始播放音频
  pause(): 暂停当前播放的音频

表单元素

input file
文件上传
见图片上传案例
• email
  email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，
  如果不能满足验证，则会阻止当前的数据提交
• url
  验证只能输入合法的网址：必须包含http://
• number
  只能输入数字(包含小数点)，不能输入其它的字符
  max:最大值
  min:最小值
  value:默认值
• tel
  tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。
  意味着数字键盘限制了用户只能输入数字
• search
  可以提供更人性化的输入体验，右边有一个小×可以删除输入的内容
• range
  范围选择，滑动条
  max:最大值
  min:最小值
  value:默认值
• color
  取色器
• 时间和日期 time
  时间选择器(时分秒)
• date
  日期选择器(年月日)
• month
  选择年和月份
• week
  选取周和年

placeholder：它的属性值为提示文本，但不占位
• autofocus：自动获取焦点，没有属性值
• autocomplete：类似于百度搜索的自动补全功能，此属性有两个值：on:打开 /off:关闭。要使用这个属性有两个条件：
  1.必须成功提交过:提交过才会记录
  2.当前添加autocomplete的input元素必须有name属性
• required：必须输入，如果没有输入则会阻止当前数据提交。没有属性值
• multiple：添加后可以输入多个，如可以填写多个邮箱、添加多个文件。没有属性值

progress
max:最大值
value:默认值
• meter
  high:规定的较高的值
  low:规定的较低的值
  max:最大值
  min:最小值
  value:当前度量值

类名操作
元素的类名被封装在了classList中
方法:
1.增加类名:classList.add(类名)
2.删除类名:classList.remove(类名)
3.替换类名:classList.replace(类名1, 类名2)
4.切换类名:classList.toggle(类名) 如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它
5.是否包含类名:classList.contains(类名1)

接口

网络接口
1.ononline:网络连通的时候触发这个事件*/
window.addEventListener(“online”,function(){
alert(“网络连通了”);
});

2.onoffline:网络断开时触发*/
window.addEventListener(“offline”,function(){
alert(“网络断开了”);
})

• 全屏接口
  全屏操作的主要方法和属性:
  1.requestFullScreen():开启全屏显示
  不同浏览器需要添加不同的前缀：chrome:webkit firefox:moz ie:ms opera:o
  2.cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现
  3.fullScreenElement: 是否是全屏状态，也只能使用document进行判断

• 地理定位接口
  navigator.geolocation.getCurrentPosition()

web存储

sessionStorage
存储数据到本地。存储的容量5mb左右。这个数据本质是存储在当前页面的内存中-意味着其它页面和浏览器无法获取数据。
它的生命周期为关闭当前页面，关闭页面，数据会自动清除
方法：
setItem(key,value):存储数据，以键值对的方式存储
getItem(key):获取数据，通过指定名称的key获取对应的value值
removeItem(key):删除数据，通过指定名称key删除对应的值
clear():清空所有存储的内容
• localStorage
  存储的内容大概20mb；不同浏览器不能共享数据，但是在同一个浏览器的不同窗口中可以共享数据；
  永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除，如果想清除，必须手动清除。
  方法和sessionStorage完全一样，只是生命周期不同而已
• manifest
  应用缓存
  manifest是应用程序缓存清单文件的路径，建议文件的扩展名是.appcache,
  这个文件的本质就是一个文本文件，此属性是在html标签中添加