刚开始学HTML5是从w3school开始的，那只是非常简单的一些了解，后面开始看一些xiongdilian的HTML5+CSS3的视频，照着视频做了一些简单的demo（需要的童鞋可以联系我，当然网上也可以下到~~~），后面总感觉还是少了点什么，就开始买书看 看的是唐俊开的《HTML5移动Web开发指南》，以下是一些简单的知识点，只限于和我一样的菜鸟瞄两眼，高手勿入~~~！！！

1 ：

基于HTML5的移动Web应用

Canvas绘图：通过获取HTML中的Dom元素Canvas，调用其渲染上下文的Context对象，使用Js进行图形绘制。

多媒体：Video和Audio     （多媒体视频格式：Ogg  MPEG4  WebM）

本地存储：通过提供key/value方式存储数据

Web Storage：localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除

Web SQL Database： 通过类似关系数据库的形式存储数据（已经是个废弃的标准了）  三个核心方法  openDatabase transaction executeSql

离线应用：当支持离线应用的浏览器检测到清单文件（Manifest File），中的任何资源文件时，便会下载对应的资源文件，将它们缓存到本地

使用地理位置

移动Web框架：基于jQuery页面驱动的jQuery Mobile、基于ExtJS架构的Sencha Touch，以及能打通Web和Native两者之间通道的PhoneGap框架。有两种开发模式：基于传统Web的开发（jQuery Mobile）和基于组件式的Web开发（Sencha Touch）

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除

　　　　Web SQL Database： 通过类似关系数据库的形式存储数据（已经是个废弃的标准了）  三个核心方法  openDatabase　　 transaction　　 executeSql

离线应用：当支持离线应用的浏览器检测到清单文件（Manifest File）中的任何资源文件时，便会下载对应的资源文件，将它们缓存到本地

使用地理位置 ： Geolocation 地理定位： window.navigator.geolocation 获取地理定位的访问  有三个方法 getCurrentPosition()  watchPosition() clearWatch();

移动Web框架：基于jQry页面驱动的jQuery Mobile、基于ExtJS架构的Sencha Touch，以及能打通Web和Native两者之间通道的PhoneGap框架。有两种开发模式：基于传统Web的开发（jQuery Mobile）和基于组件式的Web开发（Sencha Touch）

2： 　　　　HTML5 中的一些有趣的新特性：

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，比如 article、footer、header、nav、section
  • 新的表单控件，比如 calendar、date、time、email、url、search

3：

　　localStorage： 永久保存的数据，是域内安全的，它是基于域的，任何在该域内的所有页面，都可以访问localStorage数据。

　　　注意的是 Firefox中使用localStorage存储的数据在Chorme浏览器是无法读取的，同样，由于localStorage数据保存在设备中，同一个应用程序在不同设备上保存的数据是不同的，比如Android的数据IOS访问不了

　　　先来看看Storage的API ：属性 length；方法：setItem、getItem、removeItem、clear 当然大家看名称也都能知道这些是什么含义，在这里就不具体赘述各自的具体写法

sessionStorage： 存储的数据周期只保存在存储它的当前窗口或者当前窗口新建的新窗口中，一旦关闭，数据就清除，它承接于Storage的接口，用法和localStorage基本一样

　　Storage时间监听： StorageEvent的API： key、oldValue、newValue、url、StorageArea； Storage时间可以使用addEventListener进行注册监听

4:

　　移动Web离线应用：

　　　　一般在使用离线应用功能之前，会先用Js判断下浏览器是否支持： if(window.applicationCache) {//......}

　　　　离线应用包含一个manifest文件，此文件记录着那些资源文件需要离线应用缓存等等信息：<html manifest = "cache.manifest"> 这样就可以实现支持离线应用了。

实例 - 完整的 Manifest 文件

CACHE MANIFEST

# 缓存的文件

/theme.css

/logo.gif

/main.js

NETWORK:
# 不作缓存

login.asp

FALLBACK:
# 当无法获取到前半部分文件的时候，则请求转为后半部分的文件

/html5/ /404.html

　　　　在实际应用中可以通过事件监听比如： applicationCache.addEventListener('updateready', function() {//...});

HTML5提供了一个属性，用于判断当前浏览器是否在线： if(window.navigator.onLine){//...}else{//...}

5:　　常见的HTML5表单元素：

　　　　　　<form id="test">             form属性  表单各自的控件元素不再依赖于form元素的位置 既可以脱离form又可以保持从属关系

　　　　　　　　<input type="text" />

　　　　　　</form>

　　　　　　<input form=test />   在form外部的<input>增加form属性，并制定form的属性值为id的值，这样外部的标签就属于form表单范围

　　　　　　

　　　　　　placeholder属性： 在文本框处于为输入状态并且内容为空是给出提示内容；

　　　　　　autofocus属性： 控件自动获取焦点；

　　　　　　required属性： 元素值不能为空；

　　　　　　autocomplete属性： 自动完成功能；（当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项）

　　　　　　novalidate属性： 在提交表单时，不验证form或input域；

　　　　　　pattern属性： 验证该input域的正则表达式

　　新增的input类型：search email url tel number range data pickers;

6:　　HTML5总是和CSS3连在一起的：所以不得不提提CSS3

　　　　　　先回顾一下： E F：所以的子孙元素；E>F: E中的子元素；E+F：E元素之后的最近的选择器；E~F：E中所以后面兄弟元素（CSS3 不包括自己本身，前面也不包括）

　　　　　　att*=val:只要包含指定的元素符（val1 val2 等等都算）； att^=val：首字符匹配；att$=val：尾字符匹配；att~=val：用空格分隔，且其中一个是val；att|=val：以val开头并用"-"连接符；

　　　　　　伪类选择器： first-line first-letter root not empty target before after first-child last-child nth-child(2) nth-last-child(odd) ;

　　　　　　阴影： box-shadow:水平偏移px 垂直偏移px 阴影模糊值 color

　　　　　　　　　box-shadow:3px 4px 2px #000;

　　　　　　　　　text-shadow: 5px -10px 5px red;

　　　　　　背景： background-size:10px 5px; background-clip: 背景的裁剪区域；background-origin:是指定background-position属性的参考坐标的起始位置；

　　　　　　　　    background: -webkit-gradient(linear, 0, 0, 0, 100%, from(#fff), to(#000));

　　　　　　圆角边框：border-radius:10px 15px 20px 25px;

　　　　　　　　　　　border-top-right-radius:水平半径 垂直半径（10px/30px）

　　　　　　　　　　border-radius:10px/20px 25px;//水平四个为10，垂直两个20两个25

　　　　　　　　　　椭圆形画法：把宽度的一半当水平半径，把高度的一半当垂直半径

　　　　　　媒体查询： Media Query：

　　　　　　　　　　　　<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/> user-scalable:0不允许手动缩放

　　　　　　　　　　　　<link rel="stylesheet" media="screen and(min-width:600px) and(max-width:900px)" href="small.css"/>  当屏幕的可视区域的宽度长度在600px和900px之间时，应用该样式文件

　　　　　　　　　　　　small.css中： @media screen and (min-width:600px) and (max-width:900px) {//...}

　　　　　　　　　　　　<link rel="stylesheet" media="all and(orientation:portrait)" href="portrait.css"/>当移动设备处于纵向（portrait） 模式下应用该模式； 横向为landscape

7: 　　　　Geolocation 地理定位： window.navigator.geolocation 获取地理定位的访问  有三个方法 getCurrentPosition()  watchPosition() clearWatch();

8:    边框属性 border-image-source:url(./***.png);//设图为81*81，九分法后 每个是27*27

　　　　　　border-image-width: 27px；

　　　　　　border-image-slice：27；//四个角只显示九分中的一个；若为27*2=54，则显　　　　　　　　　　　　　　　　　　示九分中的四个；若为81则显示9个，切割为宽度的三倍

　　　　　　 border-image-outset：0px；//边框向外扩展的大小

　　　　　　 border-image-repeat：strench；//拉伸 repeat 重复模式，中间的2468进行不　　　　　　　　　　　　　　　　　　　　　　　　　　停重复

9:　　倒影属性 -webkit-box-reflect:above/below/left/right 100px -webkit-linear-gradient(top,transparent,#fff)

10: 　　过度 慢慢的从一个到另一个的效果 transition -webkit-transition:padding 1s ease-out,color 1s linear 1s;

　　　　四个参数（过度属性-property，过渡时间-duration，过度形式-timing-function，延迟时间-delay）

11:　　animation 动画 参数（名字-name，-duration过渡时间，timing-function过渡形式，-delay延迟时间，-iteration-count循环次数，-direction是否反向，-play-state动画状态，-fill-mode动画时间之外的状态）

　　　　　　　　-webkit-animation:demo 2s linear 3s 3

　　　　　　　　@-webkit-keyframes demo {

　　　　　　　　0% {opacity:0;transform:translate(0px)}　　　//透明度 平移

　　　　　　　　20% {opacity:0.2;transform:translate(20px)}

　　　　　　　　40% {opacity:0.4;transform:translate(40px)}

　　　　　　　　60% {opacity:0.6;transform:translate(60px)}

　　　　　　　　100% {opacity:1;transform:translate(100px)}　　　　　　　

}

今天暂时只写这么多，还会一直更新的ing...

HTML5的你应该记住的一些知识点的更多相关文章

  1. HTML5的LocalStorage实现记住密码

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 localStorage ...

  2. HTML5常见的面试题，基础知识点

                                                                                    HTML5常见的面试题 一.HTML 常 ...

  3. 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

    一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...

  4. 《HTML5高级程序设计》知识点概要（不涉及详细语法）

    不断更新. 说明:主要记录html5中的一些注意点或知识点,尽量不涉及具体语法信息. 一.CANVAS: 检测: try{ document.createElement("canvas&qu ...

  5. 传智播客JavaWeb day07、day08-自定义标签(传统标签和简单标签)、mvc设计模式、用户注册登录注销

    第七天的课程主要是讲了自定义标签.简单介绍了mvc设计模式.然后做了案例 1. 自定义标签 1.1 为什么要有自定义标签 前面所说的EL.JSTL等技术都是为了提高jsp的可读性.可维护性.方便性而取 ...

  6. Js之DOM(一)

    ----------------------------------------------------------------------------------------------第一部分 D ...

  7. ASP.NET用户自定义控件配置

    一直以来开发中碰到要写自定义控件的时候总是习惯性的找度娘,而没有自己记住,结果今天就悲剧了,找了半天才找到,想想还是自己积累起来吧! 第一种配置方式: 配置写在webconfig文件中,位置如下: w ...

  8. Android音视频通话过程中最小化成悬浮框的实现（类似Android8.0画中画效果）

    关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方 ...

  9. mongoDB操作详细

    简介 它和我们使用的关系型数据库最大的区别就是约束性,可以说文件型数据库几乎不存在约束性,理论上没有主外键约束,没有存储的数据类型约束等等 关系型数据库中有一个 "表" 的概念,有 ...

随机推荐

  1. vi的撤销命令

    'u' : 撤销上一个编辑操作 'ctrl + r' : 恢复,即回退前一个命令 'U' : 行撤销,撤销所有在前一个编辑行上的操作 使用u 和 CTRL+R 命令可以恢复到任何编辑过的状态

  2. UVA_11178_Morley's_Theorem_(计算几何基础)

    描述 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=23&pag ...

  3. Navigation Drawer(导航抽屉)

    目录(?)[-] 创建一个导航抽屉 创建抽屉布局 初始化抽屉列表 处理导航项选点击事件 监听导航抽屉打开和关闭事件 点击应用图标来打开和关闭导航抽屉 创建一个导航抽屉 导航抽屉是一个位于屏幕左侧边缘用 ...

  4. sql 将Null 值转化成空字符串

    当Null + 任何字符串时,都等于Null. 因些用函数IsNull(字段名,''),如果字段名中的值是Null时,那么这个字段名的值是''. 例如::select code + IsNull('- ...

  5. 排列的Java递归语言实现

    在做算法题的时候,发现排列经常被使用到,是一个重要的知识点, 下面是博主修改过的代码,初学者,如有不足,欢迎指出 import java.util.ArrayList; import java.uti ...

  6. Centos6.x X64 飞信安装

    Centos6.x X64 飞信安装 1,安装飞信依赖包 yum -y install glibc.i686 krb5-libs.i686 libstdc++.i686 zlib.i686 --set ...

  7. 宁波Uber优步司机奖励政策（2月1日~2月7日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  8. cdn加速对门户网站产生的影响

    满意的用户体验是门户网站吸引和留住用户的必备条件.据统计,如果等待网页打开的时间超过8秒,将会有超过30%的用户放弃等待,造成严重的用户流失,降低了用户的体验度和忠诚度.门户网站内容涉及面多,涵盖文字 ...

  9. poj 3608 Bridge Across Islands

    题目:计算两个不相交凸多边形间的最小距离. 分析:计算几何.凸包.旋转卡壳.分别求出凸包,利用旋转卡壳求出对踵点对,枚举距离即可. 注意:1.利用向量法判断旋转,而不是计算角度:避免精度问题和TLE. ...

  10. 解决Ubuntu Server 12.04换了网卡MAC地址后 网络不可用的问题.

    重装了系统,新建了一个ubuntu虚拟机,加载原来的镜像,结果启动后网络变得不正常了,提示信息 Waiting for network configuration...Waiting up to 60 ...