最近看了一些HTML5的基础知识，写了一些小案例，记录一下，方便查找。

1、新建的HTML5页面中显著的变化是：DOCTYPE声明变简洁(<!DOCTYPE html>) / <meta content="charset=utf-8"/>

2、新增的元素：
　　结构元素：
　　　　section(要存在一个标题，分段时使用)
　　　　article(整块使用)
　　　　aside
　　　　header
　　　　hgroup
　　　　footer
　　　　address
　　　　nav(可在一个页面中多处使用，不要用menu标签代替nav)
　　　　figure
　　其他元素：
　　　　video
　　　　audio
　　　　embed
　　　　mark
　　　　progress
　　　　meter
　　　　time
　　　　ruby
　　　　rt
　　　　rp
　　　　wbr
　　　　canvas
　　　　command
　　　　details
　　　　datalist
　　　　datagrid
　　　　keygen
　　　　output
　　　　source
　　　　menu
　　　　small标识小字印刷体的元素
　　input元素：
　　　　email
　　　　url
　　　　number
　　　　range
　　　　search
　　　　date
　　　　datetime
　　　　datetimelocal
　　　　time
　　　　month
　　　　week
　　　　ValueAsNumber

3、废除的元素：
　　能使用CSS替代的元素：basefont、big、center、font、s、tt、u等等
　　不再使用frame框架
　　只有部分浏览器支持的元素
　　其他被废除的元素

4、新增的表单相关属性：
　　formaction可以将一个表单提交到多个Action
　　formmethod提交方式
　　formenctype对表单元素编码方式
　　formtarget打开方式
　　autofocus自动获取焦点
　　required必填项(提示的文字是固定的)
　　control
　　datalist可输入的下拉框
　　placeholder在输入前显示提示文字
　　pattern填入正则表达式，方便判断
　　selectionDirection用户选择的方向

5、全局属性：
　　contentEditable属性：该元素是否可编辑，是Boolean类型，若未指定值则默认继承父元素的可编辑状态
　　designMode属性：
　　hidden属性：
　　spellcheck属性：对input和textarea的标签的内容进行语法检查
　　tabindex属性：tab键的顺序

6、网页编排规则：
　　显示编排内容区域块
　　隐示编排内容区域块
　　标题分级
　　不同区域块使用相同级别的标题

7、Range对象的基本概念：一个Range对象代表页面上的一段连续区域，通过Range对象可以获取或修改网页上的任何区域。
　　Selection
　　Range
　　SelectNode
　　SelectNodeContents
　　setStart/setEnd/setStart/setBefore
　　cloneRange/cloneContents
　　extractContents
　　insertNode
　　compareBoundaryPoints
　　collapse
　　detach

8、Canvas绘制图形：
　　lineTo()
　　moveTo()
　　bezierCurveTo() 贝塞尔曲线
　　createLinearGradient() 颜色渐变
　　createRadialGradient() 径向渐变，绘制出的图形的边线是曲线
　　globalCompositeOperation() 绘制组合图形
　　shadowOffsetX/shadowOffsetY/shadowColor/shadowBlur 绘制阴影图形
　　drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)(img对象,原图被复制区域的起始坐标和宽高,复制区域在画布上的起始坐标和宽高)

9、Web Storage/ Web SQL/ IndxedDB：

　　HTML5新增的非常重要的功能是可以在客户端本地保存数据的WebStorage功能，之前可以使用Cookies在客户端保存简单的用户信息，但是由于Cookies会有些限制：Cookies的大小不能超过4KB;Cookies会随请求一起发送，浪费带宽;正确操纵Cookies也是很困难的，所以更倾向于使用Web Storage，它可以存储更多的数据。
　　Web Storage有两种形式：SessionStorage和LocalStorage，前者只存储在当前的页面或者窗口对象中，对其他页面不可见，当页面关闭后数据就会丢失；后者保存数据更持久，即使浏览器窗口已经关闭，数据也会保存下来并可用于所有同源网页或者窗口的加载(即用户重新打开浏览器访问相同域名，并且协议和端口一致的网址，将仍然可以有效访问LocalStorage存储的数据)。
　　如果要在客户端存储大量数据，Web Storage显然不能满足需求，此时可以考虑使用Web SQL(关系型)和IndxedDB(非关系型)两种客户端的轻量级数据库保存数据，前者在本地建了一个SQLLite数据库，操作数据库的对象有：
　　var db = openDatabase(shortName,version,displayName,maxSize)//打开数据库连接，若没有此数据库则创建
　　db.transaction(function(tx){})//开启事务,代码要写在事务中
　　tx.executeSql("")//执行的SQL语句

10、应用缓存(Application Cache)：主要用于缓存一些静态资源,LocalStorage用来缓存一些数据。

　　使用方法：通过创建一个.appcache 类型的文件，称为缓存清单(cache manifest)文件，并添加manifest属性<html manifest="index.appcache">

　　Manifest文件类型：
　　　　1)、CACHE MANIFEST：在此标题下列出的文件将在首次下载后进行缓存
　　　　2)、NETWORK：在此标题下列出的文件需要与服务器的连接，且不会被缓存
　　　　3)、FALLBACK：在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)

　　有些注意事项：http://www.tuicool.com/articles/zmUrU3r

11、Web Workers：
　　Web Workers为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建，Web Workers就可以通过postMessage()向任务池发送任务请求，执行完之后再通过postMessage()返回消息给创建者指定的事件处理程序(通过onmessage进行捕获)。Web Workers进程能够在不影响用户界面的情况下处理任务，并且，它还可以使用XMLHttpRequest来处理I/O，无论responseXML和channel属性是否为null。
　　注意：通常，后台进程（包括web workers进程）不能对DOM进行操作。如果希望后台程序处理的结果能够改变DOM，只能通过返回消息给创建者的回调函数进行处理。

HTML5基本元素初探的更多相关文章

  1. HTML5编程之旅系列一：HTML5 Geolocation 初探

    让我们假设这样一个场景,有一个web应用程序,它可以向用户提供附近不远处某商场的打折优惠信息.使用HTML5 Geolocation API(地理定位 API),可以请求用户共享他们的位置信息. HT ...

  2. HTML5 Canvas 初探

    仅仅只是一个简单的hello world. js代码很简单: <!DOCTYPE HTML> <html lang="cn"> <head> & ...

  3. Web前端开发高手进阶

     Web前端开发高手进阶 js框架+Ajax技术01.初识javascript及其语言基础(一)02.初识javascript及其语言基础(二)03.初识javascript及其语言基础(三)及js原 ...

  4. HTML5+MUI+HBuilder 之初探情人

    07,08年那会儿正当Java火爆,C/C++仍是广泛运用的一门语言的时候,所以 我的大学都献给了C/C++和Java.当诺基亚的倒闭成为按键机时代衰落的标志时,移动APP的开发也如破堤之洪,爆炸式的 ...

  5. HTML5 Application cache初探和企业应用启示

    Application Cache 在自己做的开源项目( https://github.com/etoah/Lucien ) 用到了HTML5 的Application Cache,现总结如下: 目录 ...

  6. 利用HTML5的History API实现无刷新跳转页面初探

    HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...

  7. html5游戏开发--"动静"结合用地图块拼成大地图 & 初探lufyl

    一.前言   本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏.   首先让我们来了解了解如何用html5实现动画 ...

  8. 《HTML5编程之旅》系列二：Communication 技术初探

     本文主要探讨用于构建实时跨源通信的两个模块:跨文档消息通信(Cross Document Messaging)和XMLHttpRequestLevel2.通过这两个模块,我们可以构建不同域间进行安全 ...

  9. html5游戏开发--"动静"结合(二)-用地图块拼成大地图 & 初探lufylegend

    一.前言 本次教程将向大家讲解如何用HTML5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏. 首先让我们来了解了解如何用html5实现动画,毕竟“ ...

随机推荐

  1. 帝国CMS内容模板IF判断

    [e:loop={'selfinfo',50,0,0,"jingshu=$navinfor[jingshu]","id"}]<?php$class1=&q ...

  2. HTML报表日期格式不对 导致报错ORA-01861: 文字与格式字符串不匹配

    PROCEDURE MAIN(ERRBUF OUT VARCHAR2, RETCODE OUT VARCHAR2, P_CUSTOMER_ID IN VARCHAR2, P_PERSON_ID IN ...

  3. 从简单需求到OLAP的RANK系列函数

    同事问了一个非常简单的问题,怎么取出每个partition里面另外一个列的最小值? create table t1 (int c1, int c2);   假如按照c2分区,0-10,10-20,20 ...

  4. js setInterval

    var monitorInterval = null;    //检索cs 是否处理完成 开始: monitorInterval = setInterval(function () { CheckCS ...

  5. SQL2005中的事务与锁定（三）- 转载

    ------------------------------------------------------------------------ -- Author : HappyFlyStone  ...

  6. transition、animation在macbook air上图片动画边缘抖动

    示例: BUG描述: 最近同事一项目中,产品提出在macbook air上,列表图片放大效果边缘出现抖动现象.在retina屏上没有此问题. 调试过程: 1.单独把结构分离.确定是否由其他元素引起. ...

  7. 机器学习：异常检测算法Seasonal Hybrid ESD及R语言实现

    Twritters的异常检测算法(Anomaly Detection)做的比较好,Seasonal Hybrid ESD算法是先用STL把序列分解,考察残差项.假定这一项符合正态分布,然后就可以用Ge ...

  8. Ninject简介

    1.为什么要用Ninject? Ninject是一个IOC容器用来解决程序中组件的耦合问题,它的目的在于做到最少配置.其他的的IOC工具过于依赖配置文件,需要使用assembly-qualified名 ...

  9. spring IOC 容器中 Bean 的生命周期

    IOC 容器中 Bean 的生命周期: 1.通过构造器或工厂方法创建 Bean 实例 2.为 Bean 的属性设置值和对其他 Bean 的引用 3.调用 Bean 后置处理器接口(BeanPostPr ...

  10. RegExp类型，单体内置对象

    1.RegExp类型:  1)什么是正则表达式:RegExp    --是一种规则,模式    --强大的字符串匹配工具    --创建:    --使用RegExp构造函数创建:var re=new ...