html5各种新增知识点记录

【html5全局属性:】

1/contentEditable( 是否允许在线编辑内容,true和false )

2/designMode( 整个页面是否允许被编辑,on和off )

3/draggable( 元素是否可以拖放,true和false )

4/hidden( 元素状态是否可见,true和false )

5/spellcheck( 对用户输入的内容进行拼写和语法检查,true和false )

6/tabindex( 是否允许用tab键来获得上下焦点,true和false )

【功能性标签:】

1/datalist标签,配合表单使用,list属性指向id,触发下拉值,和option配合使用

2/details标签,配合summary标签使用,summary代表标题,内容可自行添加标签,可收缩

3/dialog标签,里面配合dt,dd使用,表示对话框

4/keygen标签,代表加密强度

5/progress标签,进度条,含value和max属性,分别表示当前的值和最大值

【表单新控件:( type类型 )】

color/date/datetime/datetime-local/week/email/url/number/range/tel/search/month/time

【表单新增属性:】

1/placeholder( 这个不用多说,都用坏了 )

2/autocomplete( 设置记忆列表提示,on开启,off关闭 )

3/required( 字段必填项 )

4/pattern( 正则校验格式 )

5/list( 指向标签datalist的id,一串下拉的东西option )

6/autofocus( 自动获得焦点 )

7/multiple( 选择多项内容或多文件 )

8/formaction( submit提交的指定url地址 )

9/step\max\min( range\number\date控件专有,表示步长,最大和最小值 )

10/form( 可脱离form标签,表单元素只需指定form标签的id即可 )

【新增的js选择器】

1/querySelector  ( 选择单一元素,包含标签、id、类和属性 )

2/querySelectorAll  ( 选择一组元素,包含标签、类和属性 )

3/getElementsByClassName ( 选择一组元素,只专门用于类选择器,不用带. )

classList属性:表示所有类名的列表

classList属性下的方法有add(),remove(),toggle(),增加/删除/切换 类名

【JSON新方法:】

1/JSON.parse()  //字符串转json格式,比eval()性能高

2/JSON.stringify()  //json格式转字符串

【自定义属性:】

1/data-为前缀,定义属性名称

2/dataset检测自定义属性值

【JS加载:】

1/defer:延迟加载

2/async:异步加载

【历史状态管理( 浏览器和前进后退功能 ):】

1/onhashchange事件

2/window.location.hash

3/pushState

4/onpopstate事件( 放在服务器上运行 )

【元素拖放:】

draggable=true( 设置拖放条件 )

【对象拖拽事件】

1/ondragstart( 拖拽开始事件 )

2/ondragend( 拖拽结束事件 )

3/ondrag( 拖拽前后连续触发 )

【目标元素事件】

1/ondragenter

2/ondragleave

3/ondragover( 目标前后触发,一定要阻止默认事件,否则ondrop起不了作用 )

4/ondrop( 释放鼠标时能拖进目标元素里所触发的效果 )

【火狐下兼容设置】

event.dataTransfer.setData('name','value');  //在ondrgastart事件下加

event.dataTransfer.getData('name');    //在ondrop事件下加

【dataTransfer对象】

1/effectAllowed( 设置光标样式,有copy,copyLink,link,copyMove,move,all,uninitialized,linkMove等 )

2/setDragImage( 3个参数,指定元素,X坐标,Y坐标,默认坐标是左上角 )

3/files:event.dataTransfer.files.length( 文件个数 );

event.dataTransfer.files.type( 文件类型 );

【fileReader对象:】

1/readAsDataURL( result返回的是文件的详情信息 )

2/onload读取成功时触发的事件

【音频与视频:】 

【媒体元素】

1/controls : 显示隐藏默认界面

2/autoplay : 是否自动播放

3/loop : 是否循环播放

4/currentTime : 开始到现在的播放时间

5/duration : 媒体总时间

6/volume : 音量( 0~1 )

7/muted : 是否静音

8/autobuffer : 是否缓冲加载,autoplay时忽略此属性

9/videoWidth : 视频实际宽度(可读不可设)

10/videoHeight : 视频实际高度(可读不可设)

【媒体方法】

1/play()播放

2/pause()暂停

3/load()加载

4/RequestFullScreen() : 进入全屏( chrome->webkitRequestFullScreen(); firefox->mozRequestFullScreen() )

5/exitFullscreen() : 退出全屏( chrome->webkitCancelFullScreen(); firefox->mozCancelFullScreen() )

6/poster : 播放前图片画面预览,指定图片格式

【媒体事件】

loadstart/progress/suspend/empited/stalled/play/pause/waiting/playing/canplay/seeking/seeked/ended/ratechange/durationchange/volumechange

【媒体事件检测方式】

事件监听:addEventListener(event,fn,false);

【地理位置】

单次定位请求:navigator.geolocation.getCurrentPosition( localtionSucc,localtionFail,json );

多次定位请求:navigator.geolocation.watchPosition( localtionSucc,localtionFail,json );类似setInterval

参数注明:1、请求成功时获取的一系列数据;2、请求失败时返回对应的编号;3、json形式的配置说明;

成功请求时返回的东西:

1/经度:  coords.longitude;

2/纬度:  coords.latitude;

3/准确度:  coords.accuracy;

4/海拔:  coords.altitude;

5/海拔准确度:  coords.altitudeAcuracy;

6/行进方向:  coords.heading;

7/地面速度: coords.speed;

8/时间戳: new Date( position.timestamp );

失败时返回的编号:

code( 0:不包括其他错误编号中的错误;1:用户拒绝浏览器获取位置信息;2:尝试获取用户信息,但失败了;3:设置了timeout值,获取位置超时了 )

json数据设置项:

enableHighAcuracy : 更精确的查找,默认false;

timeout : 获取位置允许最长时间,默认infinity;

maximumAge:  位置可以缓存的最大时间,默认0;

frequency: 请求频率

清除定位请求:navigator.geolocation.clearWatch(timer); 类似clearInterval;

应用:百度地图API

【本地储存】

cookie:临时性储存;  sessionStorage: 临时性储存;  localStorage: 永久性储存;

Storage特点:

1/存储容量(5M);

2/客户端完成,不会请求服务器处理;

3/sessionStorage数据是不共享、 localStorage共享;

设置本地储存:window.localStorage.setItem( name,value );

获取本地储存:window.localStorage.getItem( name );

删除本地储存:window.localStorage.removeItem( name );

删除全部数据:window.localStorage.clear();

存储事件:

当数据有修改或删除的情况下,就会触发storage事件,在对数据进行改变的窗口对象上是不会触发的(当前页面);

Key:修改或删除的key值,如果调用clear(),key为null;

newValue :  新设置的值,如果调用removeStorage(),key为null;

oldValue: 调用改变前的value值;

storageArea : 当前的storage对象;

url:  触发该脚本变化的文档的url;

【离线储存】

更新中……

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,598评论 18 139
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,455评论 1 19
  • 一、HTML5 1.1 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本,更重要的是它制定...
    福尔摩鸡阅读 15,741评论 14 51
  • 常见试题 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-h...
    他大舅啊阅读 2,420评论 1 5
  • 是夜 一个人的世纪 妄想着有人同行 做着不可能的梦 幻想着有一天那属于我的一片天地----荒漠 那没有人 日夜皆我...
    羡鱼ik阅读 155评论 3 1