DTD
DTD可定义合法的XML文档搭建模块,它使用一系列合法的元素来定义文档的结构
HTML5不基于SGML,所有不需要引用DTD
新增的标签
结构标签
//定义一篇文章
//定义头部
//定义导航
//定义一个区域
//定义页面内容部分的侧边栏
//定义文件中一个区块的相关信息
//定义一组媒体内容以及它们的标题
//定义figure元素的标题
//定义一个页面或一个区域的底部
//定义一个对话框
Document
logo
titile
文/greentea
简介
文章....
补充
- header/section/aside/article/footer 不要嵌套
- header/section/footer > aside/article/figure/hgroup/nav > div/figcaption
多媒体标签
//定义一个视频
//定义音频内容
embed
状态标签
状态(气压,气温)
状态(安装,加载)
75%
//注释value的代码可以有加载效果
列表标签
//为input标记定义一个下拉列表,配合option
//标记定义一个元素的详细内容,配合summary
*
=
属性
input新增类型
Date Pickers Input
Date //日,月,年
Month //月,年
Week //周,年
Time //时间(小时和分钟)
Datetime //选取时间,日,月,年(UTC时间)
Datetime-local //选取时间,日,月,年(本地时间)
date:
month:
week:
time:
datetime:
datetime-local:
input新增类型
range:
search:
color:
表单新增属性
- autocomplete //from或input自动完成功能
- autofocus //页面加载时,域自动地获得焦点
- multiple //规定在域中可选择多个值
- placeholder //提供一种提示
- required //规定必须在提交之前填写输入域(不能为空)
链接标签属性
sizes:
target:
超链接: a:media=""
a:hreflang="zh"
a:rel="external"
script属性
defer:加载完脚本后并不执行,而是等整个页面加载完之后再执行 只能兼容IE
async:加载完脚本后立即执行,不用等整个页面都加载完,属于异步执行 兼容主流浏览器
ol标签属性
Start 起始值
Reversed 倒叙排列
- 1
- 2
- 3
- 4
- 5
其他
离线应用
HTML5本地存储
localStorage 和 sessionStorage
相同点
- setItem() 设置
- getItem() 获取
- removeItem() 删除
- 使用clear()删除所有内容
- 使用length获取存储内容个数
- 使用key()获取存储字段
localStorage.length //2
localStorage.key(0) //key1
localStorage.clear() //清空
sessionStorage同理
不同的存储时效
localStorage存储是持久化的,而sessionStorage存储会在网页回话结束后失效
不同的存储容量
localStorage 大约2-5Mb
sessionStorage 存储容量不一,部分浏览器不受限
Storage的注意点
- 防止存储容量溢出,使用try catch
- 只接受string
- sessionStorage失效机制
刷新页面并不会失效
相同URL不同标签页不能共享sessionStorage
IndexedDB数据库
1.indexedDB数据库是一种事物型数据库
2.是NoSQL数据库
3.使用JS对象存储数据
创建与删除
open()接收两个参数,第一个参数是数据的库的名,第二个参数是版本号
indexedDB.open('testDB',1) //返回IDBOpenDBRequest对象,而我们希望得到的DB对象在其result属性中
indexedDB.deleteDatabase('testDB')
这条指令请求的响应是一个 IDBDatabase对象,这就是IndexedDB对象
创建表
indexedDB.createObjectStore(osName,{autoIncrement : true}) //设置主键类型
HTML5离线存储
传统拖拽
title
鼠标事件位置的四种方式
clientX,clientY:相对于window的(0,0)
pageX,pageY:相对于window的(0,0),但是不同的是如果有滚动条,会加上滚动条的距离
offestX,offestY:当前对象和鼠标之间的距离
screenX,screenY:相对于屏幕左上角
HTML5拖拽
- draggable 是否能被拖拽
- ondragstart 开始拖拽
- ondrop 元素放置在目标区域时触发(只触发一次),并且是成功拖拽进去后
- ondragover 元素正在拖动到放置目标时触发(拖动时一直在不停的触发)
- ondragenter 元素放入到有效的放置目标时触发
- ondragleave 元素移出放置目标是触发
- ondragend 拖拽结束时触发,不管是否拖拽成功,只要不拖拽,即可触发
- ondrag 拖动时触发(拖动时一直在不停的触发)
html5
![](img.png)
拖拽案例
我的github:https://github.com/Greentea1120/html5-demo
拖拽插件
http://pep.briangonzalez.org/
https://github.com/skidding/dragdealer