最近看了一些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. Oracle事务之一：锁和隔离

    Oracle事务之一:锁和隔离 一. 事务概述 事务管理是数据库处理的核心.数据库既要保证用户能并发地执行事务,还要保证数据库的一致性. 当第一条可执行的SQL开始执行,就隐形地开始了一个事务,直到遇 ...

  2. 基于ArcGIS JS API的在线专题地图实现

    0 引言     专题地图是突出而深入的表示一种或几种要素或现象,即按照地图主题的要求,集中表示与主题有关内容的地图.专题地图的专题要素多种多样,分类方法也多种多样,根据专题地图表现数据的特点可分为定 ...

  3. ms

    meanShift的概念最早是由Fukunage[1]在1975年提出的,其最初的含义正如其名:偏移的均值向量:但随着理论的发展,meanShift的含义已经发生了很多变化.如今,我们说的meanSh ...

  4. 使用 jsPlumb 绘制拓扑图 —— 异步加载与绘制的实现

    本文实现的方法可以边异步加载数据边绘制拓扑图. 有若干点需要说明一下: 1.  一次性获取所有数据并绘制拓扑图, 请参见文章: <使用 JsPlumb 绘制拓扑图的通用方法> ; 本文实现 ...

  5. 20160620001 FileUpload控件获取上传文件的路径

    参考地址: http://bbs.csdn.net/topics/350051517 —————————————————————————————— 用js实现 <%@ Page Language ...

  6. 第二章：Posix IPC

    2.1:概述 以下三种类型的IPC合称为“Posix IPC”: Posix消息队列 Posix信号量 Posix共享内存区 Posix IPC在访问它们的函数和描述它们的信息上有一些类似点.本章讲述 ...

  7. 深入理解C++的动态绑定和静态绑定【转】

    转自:http://blog.csdn.net/chgaowei/article/details/6427731 为了支持c++的多态性,才用了动态绑定和静态绑定.理解他们的区别有助于更好的理解多态性 ...

  8. Cmap的使用

    1.定义 template <class KEY,class ARG_KEY,class VALUE, class ARG_VALUE> class CMap:public CObject ...

  9. [问题2014S07] 解答

    [问题2014S07]  解答  (本解答由沈启帆同学提供) 由复旦高代教材 P265 引理 7.4.1 知 \(F(P_i(\lambda)^{e_i})\) 的不变因子组为 \[1,\cdots, ...

  10. JSON-SCHEMA

    这几天在写代码,和开发那边规范统一后,注释的JOSN需要写清楚schema, 于是学习了一下,国内的东西确实很少,看官网的英文文档也很蛋疼. 就把自己和看到的总结一下: http://json-sch ...