Html5

DTD

DTD可定义合法的XML文档搭建模块,它使用一系列合法的元素来定义文档的结构
HTML5不基于SGML,所有不需要引用DTD

新增的标签

结构标签
//定义一篇文章
//定义头部 //定义导航
//定义一个区域 //定义页面内容部分的侧边栏
//定义文件中一个区块的相关信息
//定义一组媒体内容以及它们的标题
//定义figure元素的标题
//定义一个页面或一个区域的底部 //定义一个对话框



    
    Document


    
logo

titile

文/greentea

简介

文章....
title
...
a:?
b:!
a:?
b:!
a:?
b:!
a:?
b:!
a:?
b:!
a:?
b:!

补充

  • header/section/aside/article/footer 不要嵌套
  • header/section/footer > aside/article/figure/hgroup/nav > div/figcaption
多媒体标签
   //定义一个视频
   //定义音频内容
   //定义媒体资源
   //定义图片
   //定义外部的可交互的内容或插件,比如flash









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: 
表单新增属性
  1. autocomplete //from或input自动完成功能
  2. autofocus //页面加载时,域自动地获得焦点
  3. multiple //规定在域中可选择多个值
  4. placeholder //提供一种提示
  5. required //规定必须在提交之前填写输入域(不能为空)
//placeholder使用于:text/search/url/telephone/email/password
链接标签属性
sizes: 

target: 
超链接: a:media="" 
    a:hreflang="zh"  
    a:rel="external" 
script属性

defer:加载完脚本后并不执行,而是等整个页面加载完之后再执行 只能兼容IE
async:加载完脚本后立即执行,不用等整个页面都加载完,属于异步执行 兼容主流浏览器



ol标签属性

Start 起始值
Reversed 倒叙排列

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
其他

离线应用


HTML5本地存储

localStorage 和 sessionStorage

相同点

  1. setItem() 设置
  2. getItem() 获取
  3. removeItem() 删除
  4. 使用clear()删除所有内容
  5. 使用length获取存储内容个数
  6. 使用key()获取存储字段
Html5_第1张图片
image.png
localStorage.length   //2
localStorage.key(0)    //key1
localStorage.clear()   //清空

sessionStorage同理

不同的存储时效

localStorage存储是持久化的,而sessionStorage存储会在网页回话结束后失效

不同的存储容量

localStorage 大约2-5Mb
sessionStorage 存储容量不一,部分浏览器不受限

Storage的注意点

  1. 防止存储容量溢出,使用try catch
  2. 只接受string
  3. sessionStorage失效机制
    刷新页面并不会失效
    相同URL不同标签页不能共享sessionStorage

IndexedDB数据库

1.indexedDB数据库是一种事物型数据库
2.是NoSQL数据库
3.使用JS对象存储数据

创建与删除

open()接收两个参数,第一个参数是数据的库的名,第二个参数是版本号

indexedDB.open('testDB',1)    //返回IDBOpenDBRequest对象,而我们希望得到的DB对象在其result属性中
indexedDB.deleteDatabase('testDB')
Html5_第2张图片
image.png

这条指令请求的响应是一个 IDBDatabase对象,这就是IndexedDB对象

Html5_第3张图片
image.png

创建表

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

你可能感兴趣的:(Html5)