HTML5的你应该记住的一些知识点

刚开始学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进行注册监听

　　移动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又可以保持从属关系

　　　　　　</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的你应该记住的一些知识点

实例 - 完整的 Manifest 文件

相关文章